《网页设计与制作教程与实训》全套PPT电子课件教案-第5章 Dreamweaver MX2004的网页定位技术.ppt

5.4.1 层的创建 1. 创建新层 1) 创建新层的方法 (1) 使用【插入】|【布局对象】|【层】菜单 (2) 用【插入】面板,5.4 层,2) 设置层的首选参数 选择菜单【编辑】|【首选参数】，打开【首选参数】对话框，在该对话框的左侧选择【层】选项，则对话框的右侧出现层的默认设置，如下图所示 。,图 【首选参数】对话框,(1) 显示：设置在默认情况下所创建的层的可见性。可选参数为default（缺省）、inherit（继承）、visible（可见）和hidden（隐藏）。当未指定可见性时，大多数浏览器都会默认为“inherit”。 (2) 宽：设置在默认情况下所创建的层的宽度，单位是px (像素)。 (3) 高：设置在默认情况下所创建的层的高度，单位是px (像素)。 (4) 背景颜色：设置在默认情况下所创建的层的背景颜色。单击颜色框按钮，在选色板中选取合适的颜色，或者在文本框中直接输入背景颜色的十六进制数值。,【首选参数】对话框介绍,(5) 背景图像：设置在默认情况下所创建的层的背景图像。单击【浏览】按钮，在弹出的【选择图像源文件】对话框中选取背景图像文件，或者在文本框中直接输入背景图像的文件路径。 (6) 嵌套：选择该复选框，可以直接在一个层中绘制另外的层来创建嵌套层；如果不选择该复选框，在层中绘制的只能是并列层。 (7) netscape 4兼容性：在netscape浏览器中，如果重新设置浏览器大小，会导致css层产生错误。选择该复选框，则会在页面的头部自动添加一段javascript代码，以修复该错误。如果没有选择该复选框，则可以通过菜单【命令】|【添加/移除netscape调整修复】，在弹出的对话框中选择添加或删除javascript代码。,2. 创建嵌套层,在一个层中插入另外一个层就形成了嵌套层，嵌套通常用于将层组织在一起。 将光标置于某层中，选择菜单【插入】|【布局对象】|【层】，则会在该层中插入一个新层；或者单击【插入】面板中【布局】选项卡下的【描绘层】按钮，在该层中拖出矩形区域即可。,此时【设计】视图如下图所示。,3. 层面板,通过【层】面板可以管理文档中的层，使用【层】面板可防止层重叠，更改层的可见性、名称，将层嵌套或堆叠，更改层的堆叠顺序，以及选择一个或多个层。,1) 打开【层】面板,选择菜单【窗口】|【层】，即可打开【层】面板。【层】面板显示为按z 轴顺序排列的名称列表；首先创建的层出现在列表的底部，最新创建的层出现列表的顶部。,2) 防止层重叠,当层重叠时，可能会限制一些操作。选择该项，在创建、移动层和调整层大小时会约束层的位置，使层不会重叠。,3) 更改层可见性,在层的眼形图标列内单击可以更改对应层在【设计】视图中的可见性。 眼睛睁开表示该层是可见的。 眼睛闭合表示该层是不可见的。 如果没有眼形图标，该层通常会继承其父级的可见性,4) 更改层的名称,在欲改名的层名称处双击，输入新的层名称后回车即可,5) 显示或隐藏嵌套层,单击层名称旁边的加号(+) 或减号(-) 按钮，则可以控制嵌套的层显示为连接到父层的名称（折叠）或是显示嵌套层（打开）,6) 更改层的堆叠顺序,z轴的大小指定层的堆栈顺序。当层在页面中出现重叠，z轴数值大的层显示在数值小的层的上面。 【层】面板列表顶部的层将位于堆叠顺序的顶部，并且会出现在其他层之前。 在【层】面板中更改层的堆叠顺序的方法有两种： 在z 列中，单击要更改的层的编号；然后键入一个更高的编号，沿着堆叠顺序向上移动该层；或者键入一个更低的编号，沿着堆叠顺序向下移动该层。 将层向上或向下拖至所需的堆叠顺序，移动层时会出现一条线，它指示该层将出现的位置，当放置线出现在堆叠顺序中的所需位置时，松开鼠标按钮。,7) 选择层,在【层】面板上单击层的名称，可以选择单个层； 按住【shift】 键的同时，在【层】面板上单击层的名称，可以同时选择多个层。,5.4.2 层的基本操作,1. 向层中添加内容 在层中可以添加文本、图像、表格、表单及flash等其它媒体对象。 1) 添加文本 向层中添加文本，可以将光标置于层中，直接输入文本；也可以使用剪贴板，将现成的文本粘贴到层中。 2) 添加图像 将光标置于层中，选择菜单【插入】|【图像】命令，从弹出的【选择图像源文件】对话框中选择要插入的图像.,2. 层的移动,首先在【设计】视图中，选择一个或多个要移动的层，然后可以通过三种方式进行移动： 拖动最后一个选定层（黑色突出显示）的选择柄。 使用方向键一次移动一个像素。 按住【shift 】键的同时使用方向键，可按当前网格靠齐增量来移动层。,3. 调整层的大小,在【设计】视图中，选择要调整大小的层，之后可通过以下四种方式进行大小调整： 拖动该层的任一大小调整柄。 按住【ctrl】 键的同时使用方向键一次调整一个像素大小。 按住【shift】和【ctrl】键的同时使用方向键按网格靠齐增量来调整大小。 在【属性】面板直接键入层的宽度（w）和高度（h）的值。,4. 层的对齐,在【设计】视图中，选择多个要对齐的层。 选择菜单【修改】|【对齐】下对应的对齐选项。 需要说明的是： 使用层对齐命令是按照最后一个选定层的边框（选择柄以黑色突出显示）来对齐的。 当对层进行对齐时，未选定的子层可能会因为其父层被选定移动而移动。若要避免这种情况，请不要使用嵌套层。,5. 层的属性设置,选择菜单【窗口】|【属性】 1) 设置一个层的属性 在页面上的选择欲设置属性的层，选择层的方法有三种： 在【设计】视图中单击层的边框。 在【设计】视图中单击层的选择柄。 在【层】面板上单击层的名称。 这时【属性】面板下图所示。右下角是扩展箭头，单击可以打开或折叠该面板下半部分。,图 选择单个层时层【属性】面板,【属性】面板中的各项说明：,层编号：指定层的名称以识别层。层的名称只能使用标准字母或数字，不能使用特殊字符，如空格、连字符、句号、斜线等。 左、上：指定层的左上角相对于页面（如为嵌套，则为父层）左上角的位置，默认单位为px（像素）。 宽、高：指定层的高度和宽度，默认单位为px（像素）。 z轴：指定层的堆栈顺序，其值可正可负。当层在页面中出现重叠，z轴数值大的层显示在数值小的层的上面。,可见性：指定层的可见性。有四个选项default（默认）、inherit（继承）、visible（可见）和hidden（隐藏）。“default”不指定可见性属性，当未指定可见性时，大多数浏览器都会默认为“inherit”； “inherit”使用该层父级的可见性属性；“visible”显示该层的内容，而不管父级的值是什么；“hidden”隐藏层的内容，而不管父级的值是什么。 背景图像：指定层的背景图像。单击其后【浏览文件】按钮，在弹出的【选择图像源文件】对话框中选取背景图像文件，或者在文本框中直接输入背景图像的文件路径。,背景颜色：指定层的背景颜色。单击颜色框按钮，在选色板中选取合适的颜色，或者在文本框中直接输入背景颜色的十六进制数值，如果将此选项留为空白，则可以指定透明的背景。 标签：指定层使用的html标记，共有和两种，默认情况下，dreamweaver mx 2004使用的是标记。 溢出：指定当层的内容超过层的指定大小时的处理方式。有四个选项，visible：自动调整层的大小以容纳显示层中所有内容；hidden：保持层原有的尺寸，超出的内容被隐藏；scroll：无论层的内容是否超出范围，都添加滚动条；auto：当层的内容超出范围时，自动添加滚动条。,剪辑：指定层的可见区域。通过设置左、右、上、下四点的值来设定距层边界的距离。 说明：位置和大小的默认单位为px (像素)。也可以指定以下单位：pc (pica)、pt（点）、in（英寸）、mm（毫米）、cm（厘米）或 %（父层相应值的百分比）。缩写必须紧跟在值之后，中间不留空格，例如，3mm 表示 3 毫米。,2) 同时设置多个层的属性,选择多个层的方法有两种： 按住【shift】 键的同时，在【设计】视图中单击层的边框内（或边框上）。 按住【shift】 键的同时，在【层】面板上单击层的名称。,图 选择多个层时层【属性】面板,5.4.3 层与表格的相互转换,使用表格、布局模式和层都可以创建页面布局，由于层可以随意移动，所以使用起来比较方便。dreamweaver mx 2004可以方便地进行层和表格之间互相转换。,1. 将层转换为表,1) 选择菜单【修改】|【转换】|【层到表格】，即可显示【转换层为表格】对话框。 2) 选择所需的选项，单击【确定】按钮。,2. 将表格转换为层,1) 选择菜单【修改】|【转换】|【表格到层】。即可显示【转换表格为层】对话框。 2) 选择所需的选项，单击【确定】按钮。,在dreamweaver mx中，不仅可以导入外部的数据文件，还可以将网页中的数据表格导出为纯文本的数据文件。最初，使用表格只是为了以更方便阅读的格式显示数据。而现在，表格的格式控制能力可以用来构造网页的框架。先使用较大的表格对网页的版面进行大致的排布，再使用嵌套的表格对细节时行刻画。表格已经不仅仅是一种简单对象，而是一种版面控制和制作模板的强有力的工具。 表格包含以下三个基本元素： 行 列 单元格, 5.2 布局表格和布局单元格, 5.2.1 使用布局视图和网格辅助线,利用布局表格创建页面布局，必须在布局视图下完成。在布局视图下，设计者可以很容易地把单元格拖动到页面上，然后按照自己的意图随意安排单元格的位置，还可以使页面的宽度固定，或者填充整个浏览器窗口。利用这个功能可以将原来繁琐的页面布局工作变得简单而又轻松。 在绘制布局表格或布局单元格之前，必须从“标准”模式切换到“布局”模式。如果在“布局”模式中创建布局表格，则在向表格中添加内容或对表格进行编辑之前最好切换回“标准”模式。,1使用布局视图,1、如果正在“代码”视图中工作，由于在“代码”视图中无法切换到“布局”模式，所以必须执行【查看】|【设计】命令，或执行【查看】|【代码和设计】命令，切换到设计视图。 2、 选择显示布局视图： 在【插入】工具栏的【布局】选项卡中单击【布局模式】按钮。 执行【查看】|【表格模式】|【布局模式】命令。 3、 弹出一个从【从布局模式开始】提示对话框。如果不想以后再显示该对话框，选中下面的“不再显示此消息”复选框即可。 4、单击【确定】按钮，【布局】选项卡中的【插入表格】按钮和【描绘层】按钮将变成灰色，这表示这两个对象不能在布局视图下使用；而原来是灰色的【绘制布局表格】和【绘制布局单元格】按钮则变成了彩色，可以使用这两个对象进行页面布局。, 在【文档】窗口的顶部，单击标有“布局模式”的彩色边框条中的【退出】按钮。 执行【查看】|【表格模式】|【标准模式】命令。 单击【插入】栏上的【布局】选项卡中的【标准模式】按钮。,2退出布局模式,若要退出“布局”模式，请执行以下操作之一：,执行【查看】|【网格】|【显示网格】命令，则页面编辑区域会出现网格辅助线。,（1）显示网格,3使用网格辅助线,在布局视图中，为了更好的显示文本、图象等元素的具体位置，规划页面布局，可以使用网格辅助。,网格辅助线将页面划分成一个个的方格，便于对齐文本、图象、层对象等基本元素。 执行【查看】|【网格】|【靠齐到网格】命令，可以使需要对齐的元素在移动过程中自动对齐到相近的网格。,（2）对齐到网格,（3）网格设置,对于显示出来的网格，可以通过更改默认设置，达到需要的效果。 执行【查看】|【网格】|【网格设置】命令，弹出【网格设置】对话框，设置网格的整体格式。,在“布局”模式中，不能使用在“标准”模式中可以使用的【插入表格】和【绘制层】工具。若要使用这些工具，必须先切换到“标准”模式。,绘制完成布局表格后，有可能要更改布局表格的宽度或高度，可执行以下操作之一： 移动鼠标至布局表格右边缘，当鼠标光标变为 形状时，在编辑区内拖动鼠标更改布局表格的宽度。 移动鼠标至布局表格边缘，当鼠标光标变为 形状时，在编辑区内拖动鼠标更改布局表格的宽度或高度。,2选择单元格,1、 在“布局模式”下新建布局表格。 2、 新建一个布局单元格： 在【插入】工具栏的【布局】选项卡中单击【绘制布局单元格】按钮 。 单击【绘制布局单元格】按钮，鼠标光标变为 + 形状，在编辑区拖动鼠标绘制一个布局单元格。 3、绘制完成后，在默认状态下，布局单元格边框是蓝色，背景色是白色，布局单元格被选中时以红色显示。如果需要，也可以在用户参数设置中对上述有关颜色进行更改。,3新建布局单元格,如果要绘制多个布局单元格，只能在布局表格的剩余区域中创建布局单元格，不能绘制嵌套布局单元格。具体操作与新建布局单元格的基本步骤相同。,4绘制多个布局单元格,当新建布局单元格时，如果和另一个单元格相距很近（小于8个像素）或者和布局表格的边界相距很近（小于8个像素），这个单元格将会自动吸附。如果要取消自动吸附功能，在绘制单元格的同时，按住alt键即可。,自动吸附功能, 移动鼠标至布局单元格右边缘，当鼠标光标变为 形状时，在编辑区内拖动鼠标更改布局单元格的宽度。 移动鼠标至布局表格边缘，当鼠标光标变为 形状时，在编辑区内拖动鼠标更改布局表格的宽度或高度。,5更改布局单元格宽度/高度,绘制完成布局单元格后，有可能要更改布局单元格的宽度或高度，可执行以下操作之一：, 5.2.3 绘制嵌套布局表格,如果要绘制多个布局表格，既可以在页面布局的空白区域中创建布局表格，也可以在现有布局单元格和表格的周围或嵌套在现有布局表格中创建布局表格。 如果页面已包含内容，而且要在页面布局的空白区域添加布局表格，则只能在现有内容的下方绘制新的布局表格。,1绘制非嵌套布局表格,要绘制非嵌套布局表格，就须在页面布局现有布局表格下方的空白区域中创建布局表格。,1、在 “布局”模式下，编辑区内现有布局表格的外部新建另一个布局表格。 2、鼠标光标变为 + 形状，拖动鼠标绘制布局表格。,由于嵌套表格内的单元格不受外层布局表格的行和列的影响，所以在网页布局时经常要用到嵌套表格。 在绘制嵌套布局表格时可以使用网格。通过显示网格，可以更好地对布局单元格和布局表格进行精确定位。,2绘制嵌套布局表格,1、在 “布局”模式下，编辑区内现有布局表格的内部新建另一个布局表格。 2、鼠标光标变为 + 形状，拖动鼠标绘制布局表格。,从代码部分看，嵌套布局表格相当于在原布局表格的单元格中再插入一个布局表格。,嵌套布局表格的大小不能超过外层表格的大小。, 5.2.4 设置布局表格和布局单元格属性,布局表格有许多属性，而且大多数可以通过dreamweaver中的【布局表格属性检查器】进行修改。,1布局表格基本格式,设置表格的整体格式，执行以下操作： 选中布局表格，执行【窗口】|【属性】命令，打开【布局表格属性检查器】，如图所示。,“布局表格”属性检查器,2布局表格高级格式,在【属性检查器】中，在高级选项中右侧有几个按钮，在按钮上停留一定的时间后，鼠标附近就会出现一条文字，显示按钮的名称，从名称中可以了解其大致的用途。,3布局单元格整体格式,设置表格的整体格式，执行以下操作： 选中单元格，执行【窗口】|【属性】命令，打开【布局单元格属性检查器】，如图所示。,“布局单元格”属性检查器,4填充布局单元格,利用布局模式进行页面布局时，布局表格中只能创建布局单元格，不能创建页面内容。只有创建了所有布局单元格后，才能在布局单元格内白色区域内创建页面元素。,1、在布局模式下，执行【编辑】|【首选参数】命令。 2、 弹出【首选参数】对话框，在【分类】对话框中选择【布局模式】。 3、 在 “布局模式”选项卡右侧对各项参数进行设置。 4、当设置完成后，单击【确定】按钮。,5设置【布局】参数,所谓间隔图像就是在自由伸缩的表格中用来控制表格宽度的透明图像，这幅图片并不在浏览器中出现。可以在列头菜单中为单元格添加间隔图像。图像指定 dreamweaver 当制作自动伸展表格时是否自动插入间隔图像。,间隔图像,框架的主要作用是用来增强网页的导航功能。通过框架的定位页面作用，可以更整齐的排列页面中的对象。, 5.3 框 架, 5.3.1 框架概述,框架在网页设计中可以将窗口分成多个不同的区域，每个区域可以分别显示不同的网页。框架由两个部分组成-框架集和单个框架。 框架集专门负责框架的设置：网页显示的框架数，框架的大小，是分行型还是分列型，或者是混合型；载入框架的网页源，等等。,另外的就是单个框架，也就是普通的html文档分别被放置到各框架中，当链接到设置框架的html文档时，整个框架以及各html文档就会一起显示在浏览器中。 在每个框架中，都有一个蓝色的区域，这个区域是主框架的位置。当在一个页面插入框架时，原来的页面就自动成了主框架的内容。一般主框架用来放置网页内容，而其它小框架用来进行导航。,1、执行【文件】|【新建】命令创建一个新的网页文件。 2、 将当前鼠标光标定位在需要插入框架的位置，执行如下操作之一即可： 执行【插入】|【html】|【框架】命令。 执行【修改】|【框架集】|【拆分框架】命令。 在【插入】栏的【布局】选项卡中单击【框架】按钮。 3、按照设计要求，在“框架”列表中选择所需的框架结构。, 5.3.2 创建框架,1框架的插入,“框架”按钮,1、 执行【文件】|【新建】命令创建一个新的网页文件。 2、 将光标定位到页面中，执行如下操作之一即可： 执行【查看】|【可视化助理】|【框架边框】命令。 在【文档工具栏】中单击【视图选项】按钮 ，执行【可视化助理】|【框架边框】命令。 3、页面四周显示出框架的边框线。 4、 将光标定位到页面中，执行如下操作之一即可： 将鼠标移到【文档窗口】边界线上，当鼠标变成为 （左右分割框架）或 （上下分割框架）时，拖动鼠标至相应位置，即可创建一条边框线。 将鼠标移到【边框架】角上，当鼠标变成为 形状时，拖动鼠标至相应位置，即可创建4个边框。,2插入自定义框架,1、 执行【文件】|【新建】命令创建一个新的网页文件。 2、 将光标定位到页面中，单击【布局】选项卡中的【框架】按钮，完成框架的插入。 3、 将光标定位到主框中，单击【布局】选项卡中的【框架】按钮，按照设计要求，插入嵌套的框架结构。,3重复插入框架,虽然dreamweaver mx提供了最常用的13种框架模型，但是在实际操作时还是可能会需要使用到其它形式的框架模型，这时可以用重复插入的方法，创建各种形式的框架结构。,重复插入框架可以随意创建框架格式。重复插入框架时，每个框架都会被自动命名，提高了效率；而且框架的形式是用rows“，80”这样只指定一个全框架大小的语句，可以适应各种分辩率的浏览器窗口。,如果是多层嵌套的框架，则必须分别保存多个导航框架。,1、 执行【文件】|【新建】命令创建一个新的网页文件。 2、 将当前鼠标光标定位在需要插入框架的位置，执行【修改】|【框架集】|【拆分左/右/上/下框架】命令。然后按照设计要求，拆分框架。,4分割框架,另外，也可以用拖动鼠标的方法来分割框架：执行【可视化助理】|【框架边框】命令，然后按照“插入自定义框架”的方式设置即可。, 5.3.3 框架的编辑和制作,框架在网页上的应用可以说是形式多样，所以，熟练运用框架的属性，可以使网页的框架结构美观而实用。 使框架成为一个整体： 虽然应用框架后，窗口被分为几个部分，但出于美观考虑，应该使框架看起来像是个整体，一般采用的方法是把框架的边界设置为0。然后把导航框中的元素确定位置，不进行移动，使滚动条只出现在主框架中。同时，将框架页的背景设置为一致。,在编辑完成框架的结构后，有时会发现错误，这时可以通过替换与删除框架来达到目的。,1替换框架与删除框架,在某些多层嵌套框架建立完成后，有时需要重新设置某一层的框架结构，这时就需要替换框架。替换框架就是将框架集中某个框架的内容替换成另外一个框架文件。,（1）替换框架,1、 打开已经设置完成的框架集。在【框架】面板中单击需要替换的那个框架页，进行编辑。 2、 执行命令【文件】|【在框架中打开】命令。 3、弹出【选择html文件】对话框。在其中选择替换文件，单击【确定】按钮。,将鼠标定位在某一框架页内，按住【alt】键，单击鼠标左键，就选中了框架页，同时在编辑区该框架页周围有一圈虚线，鼠标光标变成 形状。,（1）选择框架页,1、 打开设置完成的框架集。在【框架】面板中单击需要删除的框架页，进行编辑。 2、将光标定位在要删除框架的框架页边框，将边框移动至框架外沿，即可删除框架。,2选择框架页和框架集,（2）删除框架,将鼠标定位在框架边框上，当鼠标光标变成 或 形状时，单击鼠标左键，就选中整个了框架，同时在编辑区该框架集周围有一圈虚线。,（2）选择框架集,（1）保存框架集,1、 选中整个框架，执行【文件】|【保存全部】或【文件】|【框架集另存为】命令。 2、 此时，弹出一个存储框架集设置选项的对话框（同时在编辑区整个框架集周围有一圈虚线），在【文件名】文本框中键入文件名称，在【保存类型】下拉列表中选择文档类型，单击【保存】按钮即可。,3保存框架页和框架集,在插入框架后，必须及时保存框架页和框架集。在保存框架之前，必须先保存框架集文档，指明整个框架的形成，否则会出现递归错误。,1、 保存框架集完成后，立即弹出保存主框架的对话框（同时在编辑区主框架周围有一圈虚线），在【文件名】文本框中输入文件名称，在【保存类型】下拉列表中选择文档类型，单击【保存】按钮。 2、 最后弹出保存导航框架的对话框（同时在编辑区导航框架周围有一圈虚线），在【文件名】文本框中输入文件名称，在【保存类型】下拉列表中选择文档类型，单击【保存】按钮即可。,（2）保存框架页,如果是嵌套的框架，则必须分别保存各个导航框架。,1、 打开上节设置完成的框架集。在【框架】面板中单击各个框架页，分别进行编辑。 2、 在【框架属性】检查器中进行设置，选择需要的html文档，指定每个框架页的源文件。在【源文件】文本框后单击【浏览文件】按钮，在打开的【选择文件】对话框中选择需要加入的html文档，然后单击【确认】按钮。 3、 如果需要的html文档未编辑，则在【文档】窗口单击框架页，在【属性】检查器中进行设置。,直接在框架中编辑html文档，和在普通页面中编辑html文档一致，只须注意在保存时，必须选择【文件】|【保存全部】命令。,4给框架页加入html文档,在框架建立完成后，必须编辑各个框架的页面内容，通过框架集显示出丰富的内容。,（1）设置框架集属性,1、打开创建好的html框架文档，打开【框架】面板。 2、 如果【框架】面板没有出现，可以执行【窗口】|【框架】命令。 3、在【框架】面板中单击各个框架集边框，【属性】检查器中就会变成各框架集的属性设置。 4、 根据设置要求，对每一个层次的框架集进行属性设置。,5设置框架页和框架集属性,嵌套框架中的属性设置级别高于框架设置文档中的属性级别，如果在框架设置中指定框架的边界为零，而在嵌套框架中指定有边界，则最后显示的框架是有边界的。,“框架集”属性检查器,（2）设置框架页属性,1、在【框架】面板中单击个框架页，在【属性】检查器中就会显示各框架页的属性。 2、根据设置要求，对各个框架页进行属性设置。,“框架页”属性检查器,组织html是建立框架的目的，在框架建立完成后，还需要正确设定链接的目标框架，才能充分发挥框架的导航作用。,6为框架页创建超级链接,1、 打开上节设置完成的框架集。在【框架】面板中单击个导航框架页，对其进行编辑。 2、在导航框架中建立各个栏目的超链接，在【属性】检查器中选择链接的目标框架，选中导航链接，设置【属性】检查器。 在【目标】下拉列表中有四个预设项： _blank会打开一个浏览窗口来显示链接内容； _parent会在当前框架中打开链接； _self在当前框架打开链接，这也是默认方式； _top会在当前浏览器的最外层打开链接。,根据选择的框架集形式，会出现以下备选预设项： mainframe 会在主框架中打链接，通常情况下，大多数都是选择本选项； leftframe 会在左侧框架中打链接； rightframe 会在右侧框架中打链接； topframe 会在顶部框架中打链接； bottomframe 会在底部框架中打链接； 如果框架集中的框架名称被重新设置，则会显示新的框架名称，替代以上备选预设项。,“超链接-目标”属性设置, 5.3.4处理无框架浏览器,有些浏览器（netscape2.0以前版本）不支持框架网页，浏览到有框架时不能正常显示。dreamweaver允许创建无框架内容，使不支持框架的浏览器能够显示其中的内容。 尽管框架内容和框架内容是分开编辑的，但同属于一个网页，在html代码内，分别位于和标签中。 在框架设置文档的html语句中，最后总有 一对标签，当不支持框架的浏览器浏览到该页时，将忽略 标签中的所有内容，而显示标签中的内容。,1、打开设置完成的框架集。 2、执行【修改】|【框架集】|【编辑无框架内容】命令。 3、在出现的页面中编辑网页内容。 4、再次执行【修改】|【框架集】|【编辑无框架内容】命令，就可以回到有框架的编辑状态。,5.5 综合实训,同名教材 配套电子教案样板,1.特色说明,本实训来教大家做一个个人网站。通过框架、表格、层对各个页面进行排版，使整个网站风格一致，条理清晰。目的是教大家如何正确合理的使用表格、框架、层等dreamweaver mx2004的网页定位技术，根据需要，对自己的网页进行合理的排版。,2.具体步骤,第一步：采用框架设计整体框架 由5.3节我们已经学到，框架即多窗口页面，也称为“帧”，是将一个浏览器窗口分成多个小页面，每个页面显示一定的内容。它是页面排版的重要表现方式。本实训中，需要把页面分成左右两部分，左边部分为菜单列表，右边部分为主显示页面。 打开dreamwaver 2004，新建一个空白页面，然后运行菜单“插入html框架左方”，页面就会被分割成左右两个部分，如图1所示。,图1 框架效果图,第一步：采用框架设计整体框架,插入框架后，设置框架的属性，我们需要框架的边框为2，颜色为红色，左边宽度为110像素，所以框架的属性面板如图2所示。,图2 框架属性面板,第一步：采用框架设计整体框架,设置完后的框架页面如图3所示。,图3 设置完成后的框架效果图,第一步：采用框架设计整体框架,现在我们已经按照需要设置了框架属性，其html代码如图4所示。,图4 框架html代码,第一步：采用框架设计整体框架,第一步：采用框架设计整体框架,在这个框架页面上，其实包含了三个页面：框架页面、左边子页面、右边子页面，dreamwaver 2004给这三个文件分别命名为：untitledframeset-1.htm、untitledframe-1.htm、untitled-1.htm。所以在保存的时候，选择“文件保存全部”，dreamwaver 2004会顺序弹出三个窗口，来分别保存上面的三个文件，如图5图7所示。,图5 框架保存窗口,第一步：采用框架设计整体框架,图6 右边子页面保存窗口,第一步：采用框架设计整体框架,图7 左边子页面保存窗口,第一步：采用框架设计整体框架,第一步：采用框架设计整体框架,在本实训中，上面三个文件，分别采用文件名index.htm，woaiwojia.htm，left.htm。左边窗口的名字为leftframe，右边窗口的名字为mainframe。我们可以随意更改这两个名字，对显示效果没什么影响，在javascript编程中才会用到，在后面我们设置左边子窗口中的超级链接的时候也能用到。,到此为止，框架页面已经做完了，通过dreamwaver 2004中的“文件在浏览器中预览iexplore”，就可以看到框架的效果如图8所示。,图8 框架最终显示效果图,第一步：采用框架设计整体框架,第二步：left.htm的设计 在dreamwaver 2004中，点击上面这个框架页面红色框架左边的空白区域，你会发现dreamwaver 2004的窗口最上面显示的文件名已经变成left.htm，这时候，就可以对left.htm进行编辑了。,第二步：left.htm的设计,本网站是斐斐的个人网站，所以最好在醒目的位置标示这个信息，left.htm页面顶端就是最合适的位置，在本实训中，采用红色的大字体“斐斐小屋”来说明，如果您喜欢，也可以在这儿放置一个合适的图片。在“斐斐小屋”的下面，依次插入四行字：“我爱我家”，“青春寄语”，“摄影欣赏”，“友情链接”，然后设置这四行字的链接如图9图12所示。,图9 “我爱我家”链接设置,第二步：left.htm的设计,图10 “青春寄语”链接设置,图11 “摄影欣赏”链接设置,图12 “友情链接”链接设置,左边页面得最终效果如图13所示。,图13 left.htm页面效果图,第二步：left.htm的设计,第三步：woaiwojia.htm叶面的设计,该页面用来显示斐斐的小狗“笨笨”的一组图片，为了排列图片，所以需要使用表格进行排版。由5.2我们可知，表格可以用来清晰地显示列表的数据。实际上表格的作用远远不止显示数据，它在网页定位上一直起着重要的作用。,第三步：woaiwojia.htm叶面的设计,首先运行“插入表格” 或者点工具栏上的 ， 弹出表格属性设置对话框，如图14所示。,图14 表格插入对话框,表格的属性窗口包括三部分，即表格大小、页眉、辅助功能。在此例中，我们插入一个3行，3列，宽度为200像素，边框为0的表格。由于我们的表格只是用来进行页面布局，所以不需要表头，因此选择无。在本实训中，不需要标题，因此标题栏不填任何内容。,第三步：woaiwojia.htm叶面的设计,第三步：woaiwojia.htm叶面的设计,表格插入后，如图15所示。虚线为表格的边框，表格下面的绿线是表格的标尺，显示表格的宽度和每列的宽度，如果点击每列对应的标尺中间的小箭头，就会弹出一个有关列操作的快捷菜单，这也是2004新增加的功能。当把鼠标移动到虚线上时，鼠标就会变成水平或者垂直拖动的图标，这个时候可以按下鼠标左键，并进行拖动来改变表格的大小，这就是“所见即所得”的设计方式。,图15 插入后的表格,第三步：woaiwojia.htm叶面的设计,第三步：woaiwojia.htm叶面的设计,如果点击表格的虚线部分，是表格处在选中状态，在dreamweaver mx 2004编辑区域的下方属性显示区域，就会出现表格的属性，如图16，通过该窗口，可是设置表格的各种属性，包括大小，对齐方式，背景颜色等，在本实训中，表格对齐方式为居中对齐，宽为564像素，高为356像素。,图16 表格属性设置窗口,第三步：woaiwojia.htm叶面的设计,根据需要，拖拉表格到合适的大小，如图17所示。,图17 调整后的表格,第三步：woaiwojia.htm叶面的设计,然后设置单元格的属性，四个大的单元格的水平对齐方式和垂直对齐方式都设为居中对齐，单元格属性设置如图18所示：,图18 单元格属性设置,表格调整好后，就可以在四个大的单元格中插入图片了，运行 “插入图片”，依次插入图片“小狗-2.png”，“小狗-6.png”，“小狗-8.png”，“小狗-9.png”，当然您也可以插入您自己喜欢的图片。图片属性设置如图19所示。 在您将图像插入 dreamweaver 文档时，dreamweaver 自动在 html 源代码中生成对该图像文件的引用。为了确保此引用的正确性，该图像文件必须位于当前站点中。如果图像文件不在当前站点中，dreamweaver 会询问您是否要将此文件复制到当前站点中。,第三步：woaiwojia.htm叶面的设计,图19 图片属性设置,第三步：woaiwojia.htm叶面的设计,最后woaiwojia.htm的效果如图20所示。,图20 woaiwojia.htm效果图,第三步：woaiwojia.htm叶面的设计,第四步：qingchunjiyu.htm设计,该页面包含一首诗歌，但是为了方便排版，需要把该诗放在表格中，因此，首先运行“插入表格” 或者点工具栏上的 ，弹出表格属性设置对话框，如图21所示。,图21 插入表格示意图,第四步：qingchunjiyu.htm设计,设置表格的宽度和高度分别为280，212，对齐方式为居中对齐，单元格的水平对齐方式为左对齐，垂直对齐方式为顶端对齐。其属性设置面板如图22，图23所示。,图22 表格属性设置面板,图23 单元格属性设置面板,第四步：qingchunjiyu.htm设计,然后，在单元格中输入这首诗：,云彩还在天空徘徊 青春之花却毫不犹豫地 粲然开放了 有人说 珍藏在人生册页中的青春花瓣 或许只是 一双永不能忘的双眸 一个令人心动的微笑 我想说 青春的光芒 在冉冉升起时会很明亮 青春的花朵 在经历过风霜雪雨后会熠熠生辉 青春的历程 在不断搏击后才能谱写壮丽篇章,第四步：qingchunjiyu.htm设计,macromedia dreamweaver mx 2004 提供了多种向文档中添加文本和设置文本格式的方法。您可以插入文本、设置字体类型、大小、颜色和对齐属性，以及使用层叠样式表 (css) 样式创建和应用您自己的自定义样式。,第四步：qingchunjiyu.htm设计,dreamweaver 允许您通过以下方式在 web 页中添加文本：直接将文本键入页中，从其他文档复制和粘贴文本，或从其他应用程序拖放文本。能够合并到 web 页的文本内容的常见文档类型有 ascii 文本文件、rtf 文件和 ms office 文档。dreamweaver 使您可以从这些文档类型中的任何一种取出文本，然后将文本并入 web 页中。,第四步：qingchunjiyu.htm设计,dreamweaver 中的文本格式设置与使用标准字处理程序类似。您可以为文本块设置默认格式化样式（段落、标题 1、标题 2 等）、更改所选文本的字体、大小、颜色和对齐方式，或者应用文本样式（如粗体、斜体和下划线）。在该实训中，诗歌字体属性设置如图24所示。,图24 文字格式属性设置,第四步：qingchunjiyu.htm设计,青春寄语效果图图25所示。,图25 qingchunjiyu.htm效果图,第四步：qingchunjiyu.htm设计,第五步：sheyingxinshang.htm页面设计,在摄影欣赏页面上，有两组图片，人体艺术图片和风景图片，与我爱我家页面相似，也需要表格来进行排版和定位。,首先运行“插入表格” 或者点工具栏上的,，弹出表格属性设置对话框，如图26所示。,第五步：sheyingxinshang.htm页面设计,图26 表格插入对话框,第五步：sheyingxinshang.htm页面设计,插入后的表格如图27所示。,图27 插入后的表格,设置表格的对齐方式为居中对齐，表格属性面板如图28所示。,图28 表格属性设置面板,第五步：sheyingxinshang.htm页面设计,然后，合并左上角两个单元格，用鼠标在左上角单元格中点击一下，然后按住鼠标左键，向下拖动鼠标，直到进入第二个单元格，这时候，左上角两个单元格处于选中状态，如图29所示。,图29 选中单元格示意图,第五步：sheyingxinshang.htm页面设计,松开鼠标左键，点击右键，运行“表格合并单元格”命令，两个单元格就合并成一个了，如图30所示。,图30 合并单元格后的表格,第五步：sheyingxinshang.htm页面设计,按照同样的步骤，合并左下角两个单元格，合并后的表格如图31所示。,图31 合并单元格后的表格,第五步：sheyingxinshang.htm页面设计,然后，通过拖动表格，调整表格到合适大小，所有单元格的对齐方式设置为水平和垂直均为居中对齐，单元格的属性面板如图32所示。,图32 单元格属性设置面板,第五步：sheyingxinshang.htm页面设计,下面为了叙述方便，用单元格（x,y）表示第x行，第y列的单元格。在单元格（1，2），（1，3），（2，2），（2，3）中插入人体艺术图片7_1286.jpg，7_1289.jpg，7_1311.jpg，7_1287.jpg。在单元格（4，2），（4，3），（5，2），（5，3