第6章 网页布局new课件

1、第第6章章 网页布局网页布局2014.11网页设计与制作网页设计与制作第第6章章 网页布局网页布局应用框架布局网页应用框架布局网页6.2应用应用Div+CSS布局网页布局网页6.3应用表格布局网页应用表格布局网页6.1网页设计与制作网页设计与制作本章要点本章要点 在网页中，表格、在网页中，表格、Div+CSSDiv+CSS与框架主要用于网页与框架主要用于网页的布局定位。表格用于精确定位，的布局定位。表格用于精确定位，Div+CSSDiv+CSS可以灵活可以灵活定位，框架在定位的基础上，可以引入多个定位，框架在定位的基础上，可以引入多个HTMLHTML文文件。件。v 创建表格与嵌套表格创建表格与

2、嵌套表格v 编辑表格与设置表格的属性编辑表格与设置表格的属性v 创建框架与框架集创建框架与框架集v 设置框架与框架集的属性设置框架与框架集的属性v 插入插入Divv 绝对定位与相对定位绝对定位与相对定位v 浮动定位浮动定位v 应用表格、应用表格、Div+CSS与框架设计网页与框架设计网页网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格是一种在HTML页面上布局数据与图像的工具。表格为网页设计者提供了向网页添加垂直与水平结构的方法。例如，使用表格安排表格数据，在网页上布局文本与图像等。表格由三个基本组件构成：行（水平空间）列（垂直空间）单元格（行和列交汇的空间）网页设计

3、与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 创建表格创建表格 6.1.1操作实例操作实例6-1 在网页中按图在网页中按图6-1所示建立表格所示建立表格网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 创建表格创建表格 6.1.1操作步骤：操作步骤：在本地站点html文件夹下新建网页blzl.html。在文档头将网页“标题”设置为“巴黎之旅”。设置标题：在“文档”窗口的第一行输入标题文字“巴黎之旅”，并在属性面板设置为“隶书”、大小为“xx-large”、水平为“居中对齐”。设置表格插入点。在文档窗口，将表格插入点设置在标题文字的下方。执行下列操作之一，打开

4、“表格”对话框。单击“常用”工具栏的“表格”按钮。从“常用”工具栏将“表格”按钮拖动到表格插入点，即标题文字的下方。在“插入”菜单选择“表格”选项。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 创建表格创建表格 6.1.1在对话框中默认当前值或重新输入新值。如图6-2所示。“表格”对话框显示的默认数据是最近一次创建表格时使用的数据。在“行数”中，指定表格的行数。例如，输入16。在“列数”中，指定表格的列数。例如，输入4。在“表格宽度”中，指定以像素为单位或占浏览器窗口百分比的表格宽度。例如，输入宽度为85，选择单位为百分比。在“边框粗细”中，指定以像素为单位的表格边框宽

5、度，如果不需要边框可输入0。例如，输入1。在“单元格边距”中，指定单元格内容与单元格边框之间的距离，单位是像素。默认边距为1像素，如果不需要边距可输入0。例如，输入1。在“单元格间距”中，指定单元格之间的距离，单位是像素。默认间距为1像素，如果不需要间距可输入0。单击“确定”按钮，网页中创建了一个16行4列的表格。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.21向表格中输入文字向表格中输入文字操作实例操作实例6-2 按图按图6-1所示完成表格中的文字输入与设置所示完成表格中的文字输入与设置操作步骤：操作步骤：（

6、1）向表格中输入文字在指定单元格中单击鼠标，设置插入点。在插入点输入文字。在表格中输入的信息如图6-1所示。（2）选中表格并设置表格的居中对齐执行下列操作之一，选中整个表格。单击表格的左上角。单击表格下边界的任何一处，当鼠标指针下方出现表格状图标时单击即可。在表格中单击一次，在“修改”菜单选择“表格”、“选择表格”选项。在表格中单击一次，在文档窗口下方的标签选择器中单击标签。如图6-3所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的

7、基本操作与属性设置表格的基本操作与属性设置 6.1.2在表格“属性”面板的“对齐”下拉列表中选择“居中对齐”。（3）选中行或列并设置行或列文本的居中对齐执行下列操作之一，选中行或列。将鼠标移动到一行的左边界或一列的顶部，当出现选择箭头时单击鼠标左键。如图6-4、6-5所示。在指定行或列，按住鼠标左键左右或上下拖动以选取行或列。在行或列“属性”面板的“水平”下拉列表中选择“居中对齐”；在“垂直”下拉列表中选择“居中”。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2网页设计与制作网页设计与制作6.1 应用表格布局网

8、页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2（4）选中单元格并设置单元格文本的居中对齐执行下列操作之一，选中一个或多个单元格。在单元格中单击，上下或左右拖动到另一个单元格。 在单元格中单击，然后按下Shift键并单击另一个单元格，以这两个单元格为顶点的矩形区域中的所有单元格被选中。按下Ctrl键然后依次单击单元格、行或列，选中不相邻的单元格、行或列。按下Ctrl键并单击被选中的单元格、行或列可取消选中。在单元格“属性”面板的“水平

9、”下拉列表中选择“居中对齐”；在“垂直”下拉列表中选择“居中”。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.22编辑表格编辑表格操作实例操作实例6-3 将图将图6-1所示的表格修饰为图所示的表格修饰为图6-6所示的形式所示的形式操作步骤：操作步骤： （1）插入列如图6-6所示，在原第一列之前插入新的一列。在需要添加新列的右侧列单击任意的单元格。例如，单击“景点1”单元格。执行下列操作之一，在原列的左侧插入新的一列。在“修改”菜单中选择“表格”、“插入列”选项。在“插入”菜单中选择“表格对象”、“在左边插入列”选

10、项。单击鼠标右键，在快捷菜单中选择“表格”、“插入列”选项。在“布局”工具栏，单击“在左边插入列”按钮。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2（2）调整列的宽度执行下列操作之一，可调整列宽。将鼠标移到第一列的右边框，当鼠标指针变为双向箭头时，向左右拖动边框线，可使列的宽度缩小或增大。选中第一列，在列“属性”面板的“宽”文本框输入选中列的宽度。（3）合并单元格如图6-6所示，第

11、一列第24行单元格合并，输入“第一游览区”；第58行单元格合并，输入“第二游览区”；第911行单元格合并，输入“第三游览区”；第1214行单元格合并，输入“第四游览区”。选中需要合并的单元格。选中的单元格必须是连续的，并且形状应是矩形。例如，选中第一列的24行单元格。执行下列操作之一，合并单元格。在“修改”菜单选择“表格”、“合并单元格”选项。单击鼠标右键，在快捷菜单中选择“表格”、“合并单元格”选项。在单元格“属性”面板单击“合并所选单元格，使用跨度”按钮。如图6-7所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置

12、6.1.2在合并后的单元格中输入“第一游览区”。参照步骤，将第一列第58行单元格合并，输入“第二游览区”；第911行单元格合并，输入“第三游览区”；第1214行单元格合并，输入“第四游览区”。参照步骤，将第一行第12列单元格合并。注意：如果合并前的单元格有内容，则所有合并前单元格的内容将被放置到合并后的单元格中，被选定的第一个单元格的属性将应用到合并后的单元格上。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2（4）插入行与移动行如图6-6所示，在“第三游览区”与“第四游览区”之间添加一行。由于已经纵向合并了单元

13、格，直接在“第四游览区”行之上插入行可能得不到预期的效果。因此，采用如下的间接方法。在第一行的第一个单元格内单击鼠标，设置插入点。执行下列操作之一，在原第一行之上插入新行。在“修改”菜单选择“表格”、“插入行”选项。单击鼠标右键，在快捷菜单选择“表格”、“插入行”选项。在“布局”工具栏，单击“在上面插入行”按钮。选中新插入的行，在“编辑”菜单选择“剪切”选项，将该行剪切到剪贴板。在“第四游览区”单元格中单击鼠标右键，在“编辑”菜单中选择“粘贴”选项，将所剪切的行插入到当前位置之前。合并新添加行的第12列和第35列单元格，并分别输入“自行游览”、“迪斯尼乐园、购物”。注意：采用下述方法也能完成上

14、述操作。在需要添加新行的上一行，单击任意的、非合并的单元格，在“布局”工具栏，单击“在下面插入行”按钮。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.23设置表格属性设置表格属性首先通过“窗口”菜单的“属性”选项，打开“属性”面板。操作实例操作实例6-4 按图按图6-8所示的格式修饰图所示的格式修饰图6-6的表格的表格操作步骤：操作步骤：选中表格。查看表格“属性”面板，如图6-9所示。

15、命名表格操作：在“表格”文本框中，为表格输入一个名称。例如，输入“巴黎之旅”。 网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2设置表格布局选项。在“行”和“列”中，输入表格的行数和列数。编辑表格时，一般采用原表格的行列数。在“宽”中，指定表格的宽度，一般采用浏览器窗口的百分比；也可采用以像素为单位的数值。通常情况下不需要设置表格的高度。使用“对齐”下拉列表，设置同一段落中表格与其他元素的对齐方式。使用“清除行高”和“清除列宽”按钮，可删除表格中所有的行高值和列宽值。使用“将表格宽度转换成像素”按钮，可将占浏览器

16、窗口百分比的宽度表达方式转换为像素数值的表达方式。使用“将表格宽度转换成百分比”按钮，可将当前的像素数值表达方式转换为占浏览器窗口百分比的宽度表达方式。在“间距”中，指定单元格之间的距离，单位是像素。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2设置表格边框在“边框”中，输入以像素为单位的表格边框的宽度。例如，输入4。单击“快速标签编辑器” ，在弹出的标签内“id=巴黎之旅”后面输入空格，在弹出的列表中双击选择“bordercolor”，在双引号中输入“#D6D3CE”，即可给表格赋予“边框颜色”。如图6-10

17、所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2在标签内输入空格，在弹出的列表中双击选择“bgcolor”，在双引号中输入六位颜色编码，即可为表格赋予一种背景颜色。 在标签内输入空格，在弹出的列表中双击选择“background”，在双引号中输入图像文件名，即可为表格插入一幅背景图像。 设置行、列与单元格的属性在表格中选取任何单元格的组合。例如，选中第一行的第26列。显示单元格“属性”面板，如图6-11所示。使用“水平”下拉列表，设置单元格、行、列内容的水平对齐方式。使用“垂直”下拉列表，设置单元格、行、列

18、内容的垂直对齐方式。在“宽”和“高”中，设置选中单元格的宽度和高度，单位是像素。使用百分比时，应在数值后面添加%号。 网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2使用“背景”，可为单元格、行、列插入背景图像。使用“背景颜色”，可为单元格、行、列设置背景颜色，可使用颜色拾取器或直接输入所需颜色的十六进制编码值。例如，输入“#CCCCFF”。使用“边框”，可为单元格设置边框颜色。单击“合并单元格”按钮，可将选中的单元格、行或列合并为一个单元格。单击“拆分单元格” 按钮，可将一个单元格拆分为几个单元格。应在“拆分单

19、元格”对话框中，选择是拆分为行还是列，并输入需要拆分的行数或列数。如图6-12所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的基本操作与属性设置表格的基本操作与属性设置 6.1.2选中“不换行”选项，可防止英文单词中间被截断换行。此时，单元格将自动扩展以容纳输入或粘贴的英文单词。通常单元格将横向扩展以适应最长的单词，然后再纵向扩展。选中“标题”选项，将选中单元格的内容格式化为表头格式。表头单元格的内容默认为是粗体并居中。在单元格内插入图像。在第一行、第一列单元格的文字“景点序列”之前单击鼠标。单击“常用”工具栏的“图象”按钮，选择需要插入的图像文件“point

20、01.jpg”，单击“确定”按钮，将图像插入到单元格中。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的修饰和嵌套表格的修饰和嵌套 6.1.31表格的修饰表格的修饰操作实例操作实例6-5 按图按图6-14所示的形式修饰图所示的形式修饰图6-1的表格的表格操作步骤：操作步骤：在整个表格的周围设计一个边框，以便将内容包围起来，可以通过插入行和列来实现。（1）在表格的底部和右边添加行与列选中整个表格。在表格“属性”面板中，将现有的行数与列数分别增加1，则表格底部增加1行、表格右侧增加1列。例如，在“行”中输入17、在“列”中输入5。（2）在表格的顶部和左边添加行与列单击第

21、一行中的任意单元格，在“布局”工具栏，单击“在上面插入行”按钮。单击第一列中的任意单元格，在“布局”工具栏，单击“在左边插入列”按钮。插入行和列完成后，如图6-13所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的修饰和嵌套表格的修饰和嵌套 6.1.3网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的修饰和嵌套表格的修饰和嵌套 6.1.3（3）设置四周的宽度合并四周的单元格。选中第一列与最后一列，在列“属性”面板的“宽”中，输入确定的宽度值。例如，输入1%。（4）设置单元格背景图像与颜色选中第一行。将视图切换为“拆分”视图。在“代码”窗

22、口的标签内插入background属性，并将属性值设置为准备好的背景图片bg03.jpg。例如：background=./image/bg03.jpg。参照步骤为最后一行的单元格设置相同的背景图像。选中第一列与最后一列。在属性面板的“背景颜色”框中设置背景颜色。例如，输入#6BC7FF。按快捷键Ctrl + S保存网页，按快捷键F12预览网页。如图6-14所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的修饰和嵌套表格的修饰和嵌套 6.1.3网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的修饰和嵌套表格的修饰和嵌套 6.1.32表格嵌

23、套表格嵌套嵌套表是指在表格中插入另一个表格。操作实例操作实例6-6 利用嵌套表格完成图利用嵌套表格完成图6-15所示的效果所示的效果网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的修饰和嵌套表格的修饰和嵌套 6.1.3操作步骤：操作步骤：打开或新建一个网页文件，将网页标题设置为“表格嵌套”。利用“表格”对话框，创建一个3行3列的表格，表格宽度为400像素，边框为0，在表格“属性”面板设置为“居中对齐”。如图6-16所示。单击需要插入第二个表格的单元格。例如，单击第2行第2列的单元格，设置表格插入点。利用“表格”对话框插入第二个表格，设置表格属性为3行、3列、宽度10

24、0%、边框为1。嵌套表格形式如图6-17所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的修饰和嵌套表格的修饰和嵌套 6.1.3分别将第一列与最后一列的单元格合并，并设置宽度为“5%”。分别将第一行与最后一行的单元格合并。利用“代码”视图，分别为外围的合并单元格插入背景图像，例如，插入image文件夹中的文件bg03.jpg。如图6-18所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 表格的修饰和嵌套表格的修饰和嵌套 6.1.3选中嵌套的内表格的所有单元格，在“属性”面板中将“水平”设置为“居中对齐”，“垂直”设置为“居中”。合并内嵌

25、表格的第一行，在内嵌表格中输入图6-15所示的文字。按快捷键Ctrl + S保存网页，按快捷键F12预览网页。效果如图6-15所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 应用实例应用实例利用表格设计网页利用表格设计网页 6.1.4很多网页设计者喜欢使用表格设计网页的布局。通过表格可以精确地定位网页元素，准确地表达创作意图。操作实例操作实例6-7 利用表格设计如图利用表格设计如图6-19所示的网页所示的网页操作步骤：操作步骤：（1）建立网页文件在本地站点窗口中，新建网页文件example1.html。双击打开该文件，将页面标题设置为“利用表格设计网页”。按快捷键C

26、trl + S保存网页。 网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 应用实例应用实例利用表格设计网页利用表格设计网页 6.1.5（2）制作标题区在网页中插入一个2行1列的表格：宽度为100%、边框粗细为0、单元格边距与单元格间距均为0。制作标题：在第一行的单元格中输入标题，并在属性面板中将标题文字设置为“居中对齐”。例如，输入“我的音乐小屋”；单元格背景颜色#000000；字体隶书、大小为xx-large、颜色#FF0000。插入一条水平线。单击第二行的单元格，单击“常用”工具栏的“水平条”按钮。设置水平线：选中水平线，在属性面板中设置“宽”为90%，设置“高”为4

27、。在“修改”菜单中选择“编辑标签”选项，弹出“标签编辑器”对话框，在列表中选择“浏览器特定的”选项，输入颜色值#FF00FF，按“确定”按钮退出。如图6-20所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 应用实例应用实例利用表格设计网页利用表格设计网页 6.1.5（3）插入表格并排版将光标定位在水平线下方。继续在网页中插入一个1行2列的表格，宽度设置为700像素，边框设置为0。在属性面板将表格设置为“居中对齐”。（4）插入嵌套表格在左侧的单元格插入一个6行2列的表格，宽度设置为100%，边框设置为0，单元格间距设置为10，单元格边距设置为0。单击右侧的单元格，在属

28、性面板中将“垂直”设置为“顶端”，表示该单元格中的内容垂直方向是“顶端对齐”。在右侧的单元格插入一个2行1列的表格，宽度设置为100%，边框设置为0，单元格间距设置为10，单元格边距设置为0。如图6-21所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 应用实例应用实例利用表格设计网页利用表格设计网页 6.1.5（5）设置栏目区选中第一个嵌套表格的第一列单元格，在属性面板中设置“背景颜色”为#FFCCFF；“水平”设置为“居中对齐”；“垂直”设置为“居中”。第一列单元格中输入栏目的内容，并调整列宽。（以后可以设置超级链接）。第二列中按图6-19所示输入内容。（5）设置

29、图片区域在第二个嵌套表格的一、二行分别插入图像并设置格式。（6）设置分隔线与E-mail链接在外层表格的下方设置插入点。插入一个2行1列的表格，宽度为100%、边框为0、单元格边距和单元格间距均为0。选中标题栏下的水平分隔线，按快捷键Ctrl + C复制到剪贴板。将光标定位在新插入表格的第一行，按快捷键Ctrl + V粘贴。在新插入表格的最后一行输入文字“请与我联系”，在属性面板中设置E-mail链接“mailto:”，并“居中对齐”。按快捷键Ctrl + S保存网页，按F12预览网页，效果如图6-19所示。网页设计与制作网页设计与制作6.1 应用表格布局网页应用表格布局网页 应用实例应用实例

30、利用表格设计网页利用表格设计网页 6.1.5注意：注意：在定义表格宽度时，宽度单位是选择百分比还是像素，应视具体情况而定。一般情况下，如果是网页最外层的表格，应选择像素为单位。否则，表格的宽度将随浏览器的大小而变化，网页上显示的内容将会出现混乱。而内嵌的表格，选择百分比和像素均可以，因为该表格所在的单元格的宽度是固定的。网页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页 框架的作用是将网页页面划分为多个相对独立的区域，每个区域相当于一个独立的页面，从而达到将几个独立页面同时显示在浏览器中的效果。框架（Frames）技术由框架集（Frameset）和框架（Frame）两部分组成

31、。框架集是框架的集合，它定义了各框架的结构、数量、大小尺寸、装入框架中的HTML文件名和路径等属性。框架集并不在浏览器中显示，只是存储所属框架的有关信息。框架集中的全部框架文件构成一个网页页面。框架是框架集的组成元素。框架常用于导航。例如，在图6-22所示的网页中，网页页面由三个框架组成，顶部的框架用于包含网站的标题，左边的框架用于包含导航栏，而占据页面空间最大的主框架包含网站的主要内容。本例中，顶部框架一般保持静态；左边框架通过导航栏的链接改变主框架区域的显示内容，仍然是一种静态；主框架区域是动态区域，将根据所选导航栏选项的不同而变化。只要单击导航栏中的一个选项，其内容立即显示在主框架中。网

32、页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页一个包含三个框架的网页是由四个独立的HTML页面组成的：框架页文件和三个在框架中显示的页面文件。使用框架设计网页时，必须依次保存框架页与其他框架页面。创建基于框架的网页一般包括以下步骤：（1）在网页中创建框架集和框架。（2）保存框架集文件与框架文件。每个框架与框架集都是独立的网页，应单独保存。（3）设置框架和框架集的属性。包括命名框架与框架集、设置是否显示框架等。（4）确认链接的目标框架设置，使所有链接内容显示在正确的区域内。网页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页创建框架创建框架 6.2.11插入框

33、架插入框架在Dreamweaver中有两种创建框架的方式：一种是自己设计；另一种是从Dreamweaver提供的框架类中选取。Dreamweaver中预定义了13种框架类型，如图6-23所示。网页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页创建框架创建框架 6.2.1操作实例操作实例6-8 插入框架插入框架操作步骤：操作步骤：新建一个HTML网页文件。在“插入”菜单选择“HTML”、“框架”选项，单击选择一种框架。例如，选择“上方及左侧嵌套”。2打开框架面板打开框架面板操作实例操作实例6-9 打开框架面板打开框架面板操作步骤：操作步骤：执行下列操作之一，打开框架面板。在“窗

34、口”菜单选择“框架”选项。按快捷键Shift + F2。一般情况下，“框架”面板中显示的框架形式就是当前视图中正在编辑的网页的框架形式。网页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页创建框架创建框架 6.3.13选择框架与框架集选择框架与框架集框架和框架集都是独立的HTML文件。要修改框架或框架集，必须首先选中框架或框架集。（1）直接在文档窗口中选择。在框架的边框上单击鼠标，选中框架集。被选中的框架或框架集边框将出现由若干小点组成的虚线框，称为“选择线”。（2）使用框架面板进行选择在框架面板中单击指定框架，选中该框架。在“框架”面板中单击环绕框架的边框，选中框架集。 4拆

35、分框架拆分框架插入框架之后，可利用拆分框架的方法调整框架的结构。选中框架，按住“Alt”键，拖动框架边框，可将框架纵向或横向划分。在需要拆分的框架内单击，在“修改”菜单选择“框架集”选项，在“拆分左框架”、“拆分右框架”、“拆分上框架”、“拆分下框架”四选项中选择一项。网页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页创建框架创建框架 6.2.15删除框架删除框架删除框架是拆分框架的逆操作。删除框架时，可将框架边框拖动到其他框架的边框上。6保存框架和框架集文件保存框架和框架集文件框架结构的网页制作结束后，可以分别保存每个框架文件，也可单独保存框架集文件，还可以将整个框架集与它

36、的各个框架文件一起保存。使用Dreamweaver创建框架时，每个框架文件都有一个暂时的文件名。例如，UntitledFrameset-1是框架集的文件名；UntitledFrame-1、UntitledFrame-2等是框架的文件名。网页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页创建框架创建框架 6.2.1操作实例操作实例6-10 保存框架与框架集保存框架与框架集操作步骤：操作步骤：（1）单独保存框架集文件在“框架”面板或“文档”窗口选中框架集。执行下列操作之一，保存框架集文件。在“文件”菜单选择“保存框架页”选项。若要将框架集文件另存为一个新文件，在“文件”菜单选择“

37、框架集另存为”选项。（2）保存框架文件在“文档”窗口单击需要保存的框架。在“文件”菜单选择“保存框架页”选项。（3）保存框架集中的所有文件在“文件”菜单选择“保存全部”选项，保存所有框架与框架集文件。Dreamweaver将依次提示需要保存的内容。首先保存的是框架集文件，然后是其他框架文件。当前执行保存操作的框架或框架集边框将出现由若干黑斜线组成的线框。网页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页设置框架与框架集的属性设置框架与框架集的属性 6.2.2框架和框架集均有对应的“属性”面板。框架属性决定了该框架的名称、源文件名称与路径、边界大小、框架边框的显示等。框架集属性

38、控制着框架的维数及框架之间边框的颜色和宽度。1打开属性面板打开属性面板（1）在“窗口”菜单选择“属性”选项，打开属性面板。（2）查看框架属性。选中指定框架，显示如图6-25所示的框架“属性”面板。网页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页设置框架与框架集的属性设置框架与框架集的属性 6.2.2（3）查看框架集属性选中框架集，显示如图6-26所示的框架集“属性”面板。2设置框架属性设置框架属性在框架的属性面板中，各项参数的含义如下。框架名称：可在文本框中为选中框架输入一个名称。框架名称将用于超级链接和脚本的调用中。框架名称只能使用字母、数字和下划线，不要使用JavaSc

39、ript的保留字。源文件：指定该框架所在的源文件。如果该框架已经保存，则显示已有的文件名与路径。如果该框架未保存，可输入一个文件名或单击文件夹图标选取一个源文件。网页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页设置框架与框架集的属性设置框架与框架集的属性 6.2.2滚动：设置是否允许显示滚动条。该列表有四个选项：“是”、“否”、“自动”、“默认”。绝大部分浏览器的默认值是“自动”，即在需要时自动添加滚动条。不能调整大小：选中该选项将禁止调整当前框架的大小。边框：控制当前框架的边框。该列表有三个选项：“是”：以立体效果显示框架的边框。“否”：不显示框架的边框。“默认”：由浏览

40、器决定是否显示框架的边框。如果设置了“边框”，则框架集中的边框设置不再有效。绝大多数浏览器的默认值为“是”。如果所有相邻框架的“边框”均设置为“否”，或所有框架的“边框”均设置为“默认”，而框架集中设置为“否”时，才可以关闭边框的显示。边框颜色：为当前框架的所有边框设置颜色，该设置将覆盖框架集的边框颜色设置。边界宽度：设置当前框架的内容与框架左右边界的距离，单位是像素。边界高度：设置当前框架的内容与框架上下边界的距离，单位是像素。网页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页设置框架与框架集的属性设置框架与框架集的属性 6.2.23设置框架集属性设置框架集属性使用框架集属

41、性可以设置所有边框的共同属性。如果指定框架设置了属性，将覆盖框架集所对应的属性设置。在框架集的属性面板中，各项参数的含义如下。边框：设置是否在浏览器中显示框架的边框。边框宽度：设置当前框架集中的边框宽度。边框颜色：设置当前框架集中的边框颜色。行列选定范围：深色是框架被选中的部分，浅色是框架未被选中的部分。单击可选中行或列。值：指定所选择的行或列的大小。单位：设置“值”域中数值所使用的单位。网页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页设置框架与框架集的属性设置框架与框架集的属性 6.2.24改变框架的背景颜色改变框架的背景颜色通过设置框架中文档的背景颜色，可以改变框架的背

42、景颜色。操作实例操作实例6-11 设置框架的背景颜色设置框架的背景颜色操作步骤：操作步骤：单击指定的框架，在“修改”菜单选择“页面属性”选项，打开“页面属性”对话框。在“外观（CSS）”对话框，单击“背景颜色”按钮选取颜色。5为框架集设置标题为框架集设置标题操作实例操作实例6-12 设置框架集的标题设置框架集的标题操作步骤：操作步骤：选中框架集。打开“页面属性”对话框。在“标题/编码”对话框的“标题”文本框中输入框架集的名称。网页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页应用实例应用实例利用框架设计网页利用框架设计网页6.2.3操作实例操作实例6-13 利用框架设计如图利

43、用框架设计如图6-22所示的网页所示的网页操作步骤：操作步骤：（1）创建框架集及框架集文件启动Dreamweaver。在站点-我爱旅游窗口的html文件夹建立一个空白网页blyx.html。选中html文件夹，在右键快捷菜单中选择“新建文件”选项。显示文档的框架边框。在“查看”菜单选择“可视化助理”、“框架边框”选项。创建框架。在“插入”菜单选择“HTML”、“框架”选项，单击选择 “上方及左侧嵌套”。如图6-27所示。网页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页设置框架与框架集的属性设置框架与框架集的属性 6.2.3保存框架集文件。在“文件”菜单选择“保存全部”选项，

44、将框架保存为4个文件。保存位置选择本地站点“我爱旅游”下的html文件夹。框架集文件名为blyx-frame.html，其他三个文件名分别为主框架blyx-main.html、标题框架blyx-title.html、栏目blyx-totic.html。（2）设置框架与框架集属性框架创建结束后，Dreamweaver自动为每个框架起一个名字，该名字是在内部调用时使用的。选中标题栏框架topFrame，为保证标题栏的浏览效果，其大小应是固定的，并且应关闭滚动条显示。因此，在“属性”面板中选中“不能调整大小”选项，设置“滚动”栏为“否”。如图6-28所示。网页设计与制作网页设计与制作6.2 应用框架

45、布局网页应用框架布局网页设置框架与框架集的属性设置框架与框架集的属性 6.2.3导航栏框架leftFrame与主框架mainFrame应自动显示滚动条，所以在属性面板中选中设置“滚动”栏为“自动”。选中框架集，在框架集属性面板中设置“边框”为“否”，设置“边框宽度”为0。即，在浏览器中不显示所有框架的边框。（3）编辑标题栏框架的内容在框架页面编辑文本的方法与编辑独立网页页面是完全一样的。将鼠标放在框架边框上拖动，适当调整标题栏框架的大小。在标题栏框架中单击鼠标，设置插入点。输入标题文本“柏林印象”并设置文本属性：字体幼圆、字号60、单位像素、居中、加粗、颜色#CC0000。在“页面属性”中设置

46、标题栏的背景颜色为#CEFFFF。单击“保存”按钮，保存修改。网页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页设置框架与框架集的属性设置框架与框架集的属性 6.2.3（4）编辑导航栏框架的内容并设置超级链接。对导航栏框架采用表格布局方式。将鼠标放在框架边框上拖动，适当调整导航栏框架的大小。在导航栏框架中单击鼠标，设置插入点。单击“布局”工具栏的“表格”按钮，插入7行1列的表格。在属性面板中将表格的“边框”设置为0。在各个单元格内插入如图6-22所示的导航文本，并设置文本属性：字体隶书、字号18、单位像素、居中、加粗、颜色#CC6699。在“页面属性”中设置导航栏框架的背景颜

47、色为#CEFFFF。设置超级链接：选中导航文本（例如“佩加蒙博物馆”），单击“链接”框右侧的图标，选择链接文件。例如，选择本地站点文件夹html中的blyx02.html文件。设置链接文件在主框架mainFrame中打开：在属性面板的“目标”列表中选择“mainFrame”框架。如图6-29所示。网页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页设置框架与框架集的属性设置框架与框架集的属性 6.2.3注意：在使用框架布局后，“目标”列表中将显示全部框架名，所有框架名均可作为显示链接文件的窗口。参照步骤设置其他导航文本的超级链接，其链接“目标”均选择“mainframe”。单击

48、“保存”按钮，保存修改。（5）编辑主框架mainFrame的内容在主框架中单击鼠标，设置插入点。输入如图6-22所示的文本内容并分别设置标题、正文的文本属性。在“页面属性”中设置主框架的背景颜色#FFFFE9。单击“保存”按钮，保存修改。网页设计与制作网页设计与制作6.2 应用框架布局网页应用框架布局网页设置框架与框架集的属性设置框架与框架集的属性 6.2.3（6）为框架集设置网页标题选中框架集。在“修改”菜单选择“页面属性”选项，打开“页面属性”对话框。在“标题/编码”对话框的“标题”文本框输入框架集的名称“柏林印象”。单击“保存”按钮，保存修改。（7）分别编辑被链接的网页在站点窗口文件夹h

49、tml中，分别双击打开网页blyx02.html、blyx03.html、blyx07.html。分别输入对应的景点介绍并分别设置标题、正文的文本属性。单击“保存”按钮，保存修改。（8）预览网页按快捷键F12预览网页。在网页上单击导航栏中的文本“博德博物馆”，显示结果如图6-22所示。网页设计与制作网页设计与制作6.3 应用应用Div+CSS布局网页布局网页Div+CSS是网站标准（或称“WEB标准”）中常用术语之一。Div+CSS是一种网页布局方法，这种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。XHTML（The Extens

50、ible HyperText Markup Language，可扩展超文本标识语言）是一种基于可扩展标记语言（XML）、在HTML基础上优化和改进的的新语言。目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用Div+CSS的方式实现各种定位。网页设计与制作网页设计与制作6.3 应用应用Div+CSS布局网页布局网页Web标准标准6.3.111122233网页设计与制作网页设计与制作6.3 应用应用Div+CSS布局网页布局网页Web标准标准6.3.111122233网页设计与制作网页设计与制作6.3 应用应用Div+

51、CSS布局网页布局网页Web标准标准6.3.11什么是什么是Web标准标准Web标准，即网站标准。Web标准不是某一个标准，而是一系列标准的集合。Web标准是由W3C（World Wide Web Consortium）和其他标准化组织制定的一套规范。符合Web标准的网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的网站标准也分三个方面：结构化标准语言，主要包括XHTML和XML；表现标准语言，主要包括CSS；行为标准，主要包括对象模型（如W3C DOM）、ECMAScript等。基于Web标准的网站设计核心在于如何运用众多We

52、b标准中的各项技术来达到“表现”和“结构”的分离。即，使用统一的Web表现层技术的标准设计网页的表现，以便于通过不同浏览器或终端设备（计算机、手机等）向展示网页内容时，保持信息的一致性。Web标准中典型的应用模式是Div+CSS。利用Div+CSS布局页面，可以实现表现、结构、行为三者分离。网页设计与制作网页设计与制作6.3 应用应用Div+CSS布局网页布局网页Web标准标准6.3.12Web标准的构成标准的构成（1）结构。指网页的设计结构。结构技术用于对网页所使用的信息（文本、图像、动画等）进行分类和整理。（2）表现。指网页的整体显示属性。表现技术用于控制已被结构化的信息的整体显示效果。包

53、括对位置、颜色、字体、大小等整体显示的设置。W3C创建CSS的目的是用CSS控制整个网页的布局，与XHTML所实现的结构完全分离。表现与结构完全分离，使站点的维护更加容易，这正是“Div+CSS”布局的一大特点。（3）行为。行为是对整个文档的一个模型定义和交互行为的设置。网页设计与制作网页设计与制作6.3 应用应用Div+CSS布局网页布局网页Div的定义的定义6.3.2Div是一个标识（标签），作用是标识网页上的一个区域。一个网页的布局，可以通过若干个div标识区域组成。可以认为Div是XHTML语言中的一个块定义，相当于一个容器，由起始标签和结束标签之间的所有内容构成。块内可以内嵌表格（t

54、able）、文本（text）等其他XHTML元素（代码）。但是，Div只负责整体区域（块）的表现属性设置，不包含对诸如表格等内部元素属性的设置。一般通过样式表CSS格式化的方式设置Div标识区域的整体表现属性。Div代码有以下两种使用形式：内容内容使用id属性，可为当前Div指定一个id名称，以便在CSS中使用id选择符进行样式编写。同理，使用class属性，也是为了在CSS中使用class选择符进行样式编写。Div与CSS的关系可以归纳为：首先使用Div标记区域，然后为这个Div编写需要的CSS样式，最后使用CSS样式格式化Div标记区域。网页设计与制作网页设计与制作6.3 应用应用Div+

55、CSS布局网页布局网页应用实例应用实例利用利用Div+CSS布局网页框架布局网页框架6.3.3利用Div+CSS布局网页，首先需要设计页面的效果图，然后对页面结构进行分析。从图6-30所示的网页效果图可以看出，整个页面分为导航区域、头部区域、主体部分和底部区域。其中主体部分又分为左、中、右三列，整个页面居中显示。如图6-31所示。网页设计与制作网页设计与制作6.3 应用应用Div+CSS布局网页布局网页应用实例应用实例利用利用Div+CSS布局网页框架布局网页框架6.3.3操作实例操作实例6-14 利用利用Div+CSS布局图布局图6-31所示的网页框架所示的网页框架操作步骤：操作步骤：（1）

56、搭建html框架代码在站点窗口，新建网页文件index.html。将页面标题设置为“利用Div+CSS布局网页”。设置Div插入点。在“代码”视图中，将光标定位在标签与中间。插入“导航区域”的Div标签“nav”。单击“布局”工具栏的“插入Div标签”按钮，打开“插入Div标签”对话框。设置“ID”为“nav”。如图6-32所示。“插入”：下拉列表中的内容将根据插入点所在位置而发生变化，通过在下拉列表中选择不同选项，可以更精确地定位插入点的位置。“类”：选择要应用于Div标签的类样式，如果要新建针对该Div标签的类样式，可以在“类”文本框输入样式名，然后单击“新建CSS规则”按钮定义类样式。“

57、ID”：如果要新建针对该Div标签的ID样式，可在“ID”文本框输入样式名，然后单击“新建CSS规则”按钮定义ID样式。网页设计与制作网页设计与制作6.3 应用应用Div+CSS布局网页布局网页应用实例应用实例利用利用Div+CSS布局网页框架布局网页框架6.3.3设置各项参数后，单击“确定”按钮，完成Div标签的插入。将光定位在“nav”的标签之后，重复步骤-，依次插入“ID”为“head”（头部区域）、“main”（内容区域）、“foot”（尾部区域）的。在“ID”为“main”的中间，插入“left”（左）、“center”（中）、“right”（右）三个。插入完成后的代码及设计效果如图

58、6-33所示。网页设计与制作网页设计与制作6.3 应用应用Div+CSS布局网页布局网页应用实例应用实例利用利用Div+CSS布局网页框架布局网页框架6.3.3设置网页整体的居中显示效果。方法一：将nav、header、main、foot分别设置为居中。方法二：为上述标签增加设置一个父标签“contain”。通过设置父标签的居中，完成网页整体的居中设置。增加后的代码如图6-34所示。网页设计与制作网页设计与制作6.3 应用应用Div+CSS布局网页布局网页应用实例应用实例利用利用Div+CSS布局网页框架布局网页框架6.3.3（2）设置CSS样式表选择“文件”菜单的“新建”选项，进入“新建文档

59、”对话框，在“空白页”的“页面类型”中，选择“css”，单击“创建”按钮。在“文件”菜单选择“保存”选项，以文件名“layout.css”，存入CSS文件夹。设置全局的样式。将图6-35所示的代码写入layout.css中。按Ctrl+S键保存。网页设计与制作网页设计与制作6.3 应用应用Div+CSS布局网页布局网页应用实例应用实例利用利用Div+CSS布局网页框架布局网页框架6.3.3将样式表与网页关联。回到“index.html”文档窗口，在“CSS样式”面板，单击“附加样式表”按钮 。如图6-36所示。在打开的“链接外部样式表”对话框，单击“浏览”按钮，选中CSS文件夹下的文件“lay

60、out.css”，单击“确定”按钮。如图6-37所示。网页设计与制作网页设计与制作6.3 应用应用Div+CSS布局网页布局网页应用实例应用实例利用利用Div+CSS布局网页框架布局网页框架6.3.3（3）设置各Div区域的样式表打开样式表文件layout.css。在“定义全局样式”的代码下方，将图6-38所示代码写入。为了便于观察，将部分Div区域设置了背景色。按快捷键Ctrl + S保存样式表文件layout.css。打开index.html文件，按F12键预览网页。设置结果如图6-39所示。至此，网页的整体框架布局完毕，读者可利用已经学习过的知识继续完成网页设计。网页设计与制作网页设计与