第5章网页页面布局-YS.ppt

《第5章网页页面布局-YS.ppt》由会员分享，可在线阅读，更多相关《第5章网页页面布局-YS.ppt（46页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 第第第第1 1 1 1章章章章 网页设计概述网页设计概述网页设计概述网页设计概述 第第第第2 2 2 2章章章章 HTMLHTMLHTMLHTML语言基础语言基础语言基础语言基础 第第第第3 3 3 3章章章章 Dream weaver Dream weaver Dream weaver Dream weaver 基础基础基础基础 第第第第4 4 4 4章章章章 网页中的基础元素网页中的基础元素网页中的基础元素网页中的基础元素 第第第第5 5 5 5章章章章 网页页面布局网页页面布局网页页面布局网页页面布局 第第第第6 6 6 6章章章章 网页中的层和时间轴网页中的层和时间轴网页中的层和时间

2、轴网页中的层和时间轴 第第第第7 7 7 7章章章章 表单的应用表单的应用表单的应用表单的应用 第第第第8 8 8 8章章章章 在网页中使用行为在网页中使用行为在网页中使用行为在网页中使用行为 第第第第9 9 9 9章章章章 CSSCSSCSSCSS样式使用样式使用样式使用样式使用 第第第第10101010章章章章 网页中的多媒体应用网页中的多媒体应用网页中的多媒体应用网页中的多媒体应用 第第第第11111111章章章章 模板和库模板和库模板和库模板和库 第第第第12121212章章章章 站点测试和发布站点测试和发布站点测试和发布站点测试和发布 第第第第13131313章章章章 Flash F

3、lash Flash Flash 简介简介简介简介 第第第第14141414章章章章 Fireworks Fireworks Fireworks Fireworks 简介简介简介简介$知识目标知识目标知识目标知识目标 掌握表格及单元格的创建和编辑掌握表格及单元格的创建和编辑掌握表格及单元格的创建和编辑掌握表格及单元格的创建和编辑掌握通过表格来进行网页页面的布局方法掌握通过表格来进行网页页面的布局方法掌握通过表格来进行网页页面的布局方法掌握通过表格来进行网页页面的布局方法掌握建立框架网页及框架属性设置的方法掌握建立框架网页及框架属性设置的方法掌握建立框架网页及框架属性设置的方法掌握建立框架网页及

4、框架属性设置的方法8 8 8 8 能力目标能力目标能力目标能力目标 熟练掌握表格的基本操作熟练掌握表格的基本操作熟练掌握表格的基本操作熟练掌握表格的基本操作熟练运用表格进行网页布局熟练运用表格进行网页布局熟练运用表格进行网页布局熟练运用表格进行网页布局熟练运用框架进行网页的布局熟练运用框架进行网页的布局熟练运用框架进行网页的布局熟练运用框架进行网页的布局第第第第5 5章章章章 网页页面布局网页页面布局网页页面布局网页页面布局第第5章章 网页页面布局网页页面布局网页页面布局主要技术：网页页面布局主要技术：框架框架：大概布局大概布局表格表格：简略布局简略布局层层：精细布局精细布局CSS+DIV布局

5、布局:样式布局样式布局CSS+DIV布局具有易维护布局具有易维护,易整体控制网站易整体控制网站,易见效网页大小易见效网页大小,易节省流量易节省流量,易推广等优势易推广等优势。5.1 表格表格5.2 表格布局表格布局5.3 框架布局框架布局本章小结本章小结第第第第5 5章章章章 网页页面布局网页页面布局网页页面布局网页页面布局5.1 表格表格5.1.1插入表格插入表格5.1.2添加内容添加内容5.1.3 选择表格选择表格5.1.4 设置表格属性设置表格属性5.1.5 编辑表格的基本操作编辑表格的基本操作在表格中横向为行，纵向为列。行列交叉部分就叫在表格中横向为行，纵向为列。行列交叉部分就叫做单元

6、格。单元格中的内容和边框之间的距离叫边距。做单元格。单元格中的内容和边框之间的距离叫边距。单元格和单元格之间的距离叫间距。表格的边线叫做边单元格和单元格之间的距离叫间距。表格的边线叫做边框。框。（一）插入表格（一）插入表格（一）插入表格（一）插入表格1定位光标在要插入表格的位置，然后执行以下定位光标在要插入表格的位置，然后执行以下操作之一：操作之一：单击菜单栏中的单击菜单栏中的“插入插入”|“表格表格”命令。命令。在在“插入插入”栏的栏的“常用常用”类别中，单击类别中，单击“表格表格”按钮。按钮。2打开表格对话框。打开表格对话框。5.1.15.1.1 插入表格插入表格5.1 表格表格5.1.1

7、5.1.1 插入表格插入表格3单击单击“确定确定”创建表格插入创建表格插入“4行行5列列”的表格。的表格。5.1 表格表格（二）插入嵌套表格（二）插入嵌套表格（二）插入嵌套表格（二）插入嵌套表格1将光标定位在表格的一个单元格内。将光标定位在表格的一个单元格内。2执行插入表格的操作，即可在表格内嵌套表格执行插入表格的操作，即可在表格内嵌套表格如图。如图。5.1.15.1.1 插入表格插入表格5.1 表格表格将插入点定位在表格内，即可输入文本、图像、动将插入点定位在表格内，即可输入文本、图像、动画等网页元素。画等网页元素。5.1.25.1.2 添加内容添加内容5.1 表格表格(一一一一)选择整个表

8、格选择整个表格选择整个表格选择整个表格选择整个表格执行以下操作之一：选择整个表格执行以下操作之一：单击表格的左上角、右边或底部边缘的任意位置。单击表格的左上角、右边或底部边缘的任意位置。单击表格单元格，在菜单栏单击单击表格单元格，在菜单栏单击“修改修改”|“表格表格”|“选择表格选择表格”命令。命令。(二二二二)选择行或列选择行或列选择行或列选择行或列1鼠标指向行的左边缘或列的上边缘，光标变为鼠标指向行的左边缘或列的上边缘，光标变为 或或 。2单击鼠标则选择鼠标指向的行或列。单击鼠标则选择鼠标指向的行或列。3拖动鼠标，则选择连续的多行或多列。拖动鼠标，则选择连续的多行或多列。4按按Ctrl同时

9、单击鼠标，则可选择不连续的多行或多同时单击鼠标，则可选择不连续的多行或多列。列。5.1.3 5.1.3 选择表格选择表格5.1 表格表格(三三三三)选择单元格选择单元格选择单元格选择单元格1.选择单个单元格，请执行以下操作之一：选择单个单元格，请执行以下操作之一：单击单元格，然后在文档窗口左下角的标签选择器中选择单击单元格，然后在文档窗口左下角的标签选择器中选择标签标签.在单元格内双击鼠标则可选择该单元格。在单元格内双击鼠标则可选择该单元格。在单元格内单击，然后按组合键在单元格内单击，然后按组合键Ctrl+A。2选择连续的多个单元格可以执行以下操作之一：选择连续的多个单元格可以执行以下操作之一

10、：单击第一个单元格，按住单击第一个单元格，按住Shift键的同时单击另一个单元格，两键的同时单击另一个单元格，两个单元格之间的矩形区域内所有的单元格均被选中。个单元格之间的矩形区域内所有的单元格均被选中。在一个单元格中单击并拖动鼠标横向或纵向移动到其他一个单在一个单元格中单击并拖动鼠标横向或纵向移动到其他一个单元格，然后松开鼠标则鼠标经过区域的单元格被选中。元格，然后松开鼠标则鼠标经过区域的单元格被选中。3按按Ctrl同时单击单元格则可选择不相邻的多个单元同时单击单元格则可选择不相邻的多个单元格。格。5.1.3 5.1.3 选择表格选择表格5.1 表格表格（一）表格属性（一）表格属性（一）表格

11、属性（一）表格属性表格被选中之后，可以利用表格属性来设置或修改表格的属表格被选中之后，可以利用表格属性来设置或修改表格的属性。性。（二）单元格属性（二）单元格属性（二）单元格属性（二）单元格属性单元格被选中或光标定位在单元格中时，可以利用单元格属单元格被选中或光标定位在单元格中时，可以利用单元格属性性，来设置或修改单元格的属性。来设置或修改单元格的属性。5.1.4 5.1.4 设置表格属性设置表格属性5.1 表格表格(一一一一)调整表格的大小：调整表格的大小：调整表格的大小：调整表格的大小：1选择整个表格，在表格的边缘出现选择整个表格，在表格的边缘出现3个黑色控制点。个黑色控制点。2执行以下操

12、作：执行以下操作：用鼠标拖动这些控制点则可改变表格的大小。用鼠标拖动这些控制点则可改变表格的大小。在表格在表格“属性检查器属性检查器”中重新设置中重新设置“高度高度”与与“宽度宽度”值，值，改变表格的大小。改变表格的大小。（二）调整行高和列宽（二）调整行高和列宽（二）调整行高和列宽（二）调整行高和列宽1将鼠标移到要调整的行高或列宽的边框上，光标变为将鼠标移到要调整的行高或列宽的边框上，光标变为 或或 。2拖动鼠标即调整行高或列宽。拖动鼠标即调整行高或列宽。5.1.5 5.1.5 编辑表格的基本操作编辑表格的基本操作5.1 表格表格 （三）合并或折分单元格（三）合并或折分单元格（三）合并或折分单

13、元格（三）合并或折分单元格1 1拆分单元格拆分单元格拆分单元格拆分单元格（1）选择（或将光标定位在）要拆分的单元格。）选择（或将光标定位在）要拆分的单元格。（2）执行以下操作之一：）执行以下操作之一：单击菜单栏中的单击菜单栏中的“修改修改”|“表格表格”|“拆分单元格拆分单元格”命令。命令。在在“属性检查器属性检查器”中，单击中，单击“拆分单元格拆分单元格”的按钮的按钮 。(3)打开拆分单元格对话框如图。打开拆分单元格对话框如图。（4）在这可以选择拆分行还是拆分列，以及设置拆分的行）在这可以选择拆分行还是拆分列，以及设置拆分的行数或列数。如设置拆分为数或列数。如设置拆分为“行行”，行数为，行数

14、为“2”。（5）单击确定，单元格被拆分。）单击确定，单元格被拆分。5.1.5 5.1.5 编辑表格的基本操作编辑表格的基本操作5.1 表格表格 2 2合并单元格合并单元格合并单元格合并单元格（1）选择需要进行合并的两个以上单元格。）选择需要进行合并的两个以上单元格。（2）执行以下操作之一：）执行以下操作之一：单击菜单栏单击菜单栏“修改修改”|“表格表格”|“合并单元格合并单元格”命令命令在在“属性检查器属性检查器”中，单击中，单击“合并单元格合并单元格”按钮按钮 。（3）选的单元格被合并。）选的单元格被合并。5.1.5 5.1.5 编辑表格的基本操作编辑表格的基本操作5.1 表格表格 （四）插

15、入和删除行或列（四）插入和删除行或列（四）插入和删除行或列（四）插入和删除行或列1 1插入单行或单列插入单行或单列插入单行或单列插入单行或单列在所选择的行、列或单元格的上面及左侧插入单行或单列，在所选择的行、列或单元格的上面及左侧插入单行或单列，操作如下：操作如下：（1）选择行、列或单元格。）选择行、列或单元格。（2）单击菜单栏中的）单击菜单栏中的“修改修改”|“表格表格”|“插入行插入行”或或“插入列插入列”命令。命令。选择选择“插入列插入列”命令：可以在所选列的左侧添加一列。命令：可以在所选列的左侧添加一列。选择选择“插入行插入行”命令：可以在所选行的上面添加一行。命令：可以在所选行的上面

16、添加一行。5.1.5 5.1.5 编辑表格的基本操作编辑表格的基本操作5.1 表格表格 2 2插入多行或多列插入多行或多列插入多行或多列插入多行或多列（1）选择行、列或单元格。）选择行、列或单元格。（2）单击菜单栏中的）单击菜单栏中的“修改修改”|“表格表格”|“插入行或列插入行或列”的命令，打开的命令，打开“插入行或列插入行或列”对话框。对话框。（3）选择插入）选择插入“列列”或或“行行”，并设置数目，单击确定并设置数目，单击确定。5.1.5 5.1.5 编辑表格的基本操作编辑表格的基本操作5.1 表格表格3 3删除行或列删除行或列删除行或列删除行或列在表格中删除行或列的操作为：在表格中删除

17、行或列的操作为：（1）选择要删除的行或列。）选择要删除的行或列。（2）执行以下操作之一：）执行以下操作之一：单击菜单栏中的单击菜单栏中的“修改修改”|“表格表格”|“删除行删除行”或或“删除删除列列”命令。命令。单击菜单栏中的单击菜单栏中的“编辑编辑”|“清除清除”命令。命令。使用键盘上的使用键盘上的“Delete”键。键。4 4表格细边框表格细边框表格细边框表格细边框 5.1.5 5.1.5 编辑表格的基本操作编辑表格的基本操作5.1 表格表格5.2 表格布局表格布局5.2.1 布局视图布局视图5.2.2 绘制布局表格和布局单元格绘制布局表格和布局单元格5.2.3 编辑布局表格和布

18、局单元格编辑布局表格和布局单元格5.2 表格布局表格布局（一）切换布局视图（一）切换布局视图（一）切换布局视图（一）切换布局视图1执行以下操作之一：执行以下操作之一：单击菜单栏中单击菜单栏中“视图视图”|“表格视图表格视图”|“布局视图布局视图”命令。命令。在在“插入插入”栏的栏的“布局布局”类别中，单击类别中，单击“布局模式布局模式”按钮。按钮。2打开打开“从布局模式开始从布局模式开始”对话框对话框5.2.15.2.1 布局视图布局视图5.2 表格布局表格布局3单击单击“确定确定”按钮，进入布局视图模式。按钮，进入布局视图模式。4单击单击“退出退出”按钮，或单击相应的其他视图按钮，退出按钮，

19、或单击相应的其他视图按钮，退出布局视图。布局视图。5.2.15.2.1 布局视图布局视图5.2 表格布局表格布局（二）布局工具按钮（二）布局工具按钮（二）布局工具按钮（二）布局工具按钮在在“插入栏插入栏”的的“布局布局”类别中，有布局用的各种工具按钮类别中，有布局用的各种工具按钮。从左到右依次为：从左到右依次为：“标准标准”：单击进入标准视图模式。：单击进入标准视图模式。“扩展扩展”：单击进入扩展表格模式。：单击进入扩展表格模式。“布局布局”：单击进入布局视图模式。：单击进入布局视图模式。“”：用于绘制布局表格。：用于绘制布局表格。“”：用于绘制布局单元格。：用于绘制布局单元格。“”：用于添加

20、布局框架。：用于添加布局框架。“”：用于导入表格数据。：用于导入表格数据。5.2.15.2.1 布局视图布局视图5.2 表格布局表格布局（一）绘制布局表格（一）绘制布局表格1切换到布局视图模式切换到布局视图模式2单击单击“绘制布局表格绘制布局表格”按钮按钮，鼠标指针变为，鼠标指针变为“+”。3在文档窗口中，按住鼠标左键并拖动，可以绘制出布局在文档窗口中，按住鼠标左键并拖动，可以绘制出布局表格，表格的框线显示为绿色。表格，表格的框线显示为绿色。4要绘制多个布局表格，要绘制多个布局表格，按住按住Ctrl键同时单击键同时单击“绘制绘制布局表格布局表格”按钮。按钮。5每个布局表格都在顶端每个布局表格都

21、在顶端有标签，并在布局表格的底有标签，并在布局表格的底端或顶端显示表格的大小。端或顶端显示表格的大小。5.2.25.2.2 绘制布局表格和布局单元格绘制布局表格和布局单元格5.2 表格布局表格布局7单击单击“绘制布局表格绘制布局表格”按钮，可以在布局表格内绘制嵌按钮，可以在布局表格内绘制嵌套的布局表格如图所示，嵌套的表格大小不能超过包含它的布局套的布局表格如图所示，嵌套的表格大小不能超过包含它的布局表格。表格。5.2.25.2.2 绘制布局表格和布局单元格绘制布局表格和布局单元格5.2 表格布局表格布局（二）绘制布局单元格（二）绘制布局单元格（二）绘制布局单元格（二）绘制布局单元格1切换到布局

22、视图模式切换到布局视图模式2单击单击“绘制布局单元格绘制布局单元格”按钮按钮，鼠标指针变为，鼠标指针变为“+”3在布局表格中合适位置，在布局表格中合适位置，按住鼠标左键并拖动，可以绘按住鼠标左键并拖动，可以绘制出布局单元格，单元格的框制出布局单元格，单元格的框线显示为蓝色，如图所示。线显示为蓝色，如图所示。4要绘制多个单元格，要绘制多个单元格，可以在按住可以在按住Ctrl键的同时单击键的同时单击“绘制布局单元格绘制布局单元格”按钮并绘制。按钮并绘制。5.2.25.2.2 绘制布局表格和布局单元格绘制布局表格和布局单元格5.2 表格布局表格布局（一）移动布局表格和布局单元格（一）移动布局表格和布

23、局单元格（一）移动布局表格和布局单元格（一）移动布局表格和布局单元格1单击布局表格标签，可以选中布局表格；单击单元格边单击布局表格标签，可以选中布局表格；单击单元格边框，可以选择布局单元格；框，可以选择布局单元格；2用鼠标拖动布局表格或布局单元格到合适位置。用鼠标拖动布局表格或布局单元格到合适位置。（二）调整布局表格和布局单元格大小（二）调整布局表格和布局单元格大小（二）调整布局表格和布局单元格大小（二）调整布局表格和布局单元格大小1选择要调整的布局表格和布局单元格。选择要调整的布局表格和布局单元格。2选择的表格或单元格四周会出现控制点，拖动控制点可选择的表格或单元格四周会出现控制点，拖动控制

24、点可以调整其大小。以调整其大小。（三）向单元格中添加内容（三）向单元格中添加内容（三）向单元格中添加内容（三）向单元格中添加内容1将光标定位在要添加内容的单元格。将光标定位在要添加内容的单元格。2插入文字和图像等各种网页元素。插入文字和图像等各种网页元素。5.2.35.2.3 编辑布局表格和布局单元格编辑布局表格和布局单元格5.2 表格布局表格布局（四）删除布局表格或布局单元格（四）删除布局表格或布局单元格（四）删除布局表格或布局单元格（四）删除布局表格或布局单元格删除布局表格或布局单元格的操作为：删除布局表格或布局单元格的操作为：1选择要删除的布局表格和布局单元格。选择要删除的布局表格和布局

25、单元格。2执行以下操作之一：执行以下操作之一：单击菜单栏中单击菜单栏中“编辑编辑”|“清除清除”命令。命令。使用键盘上的使用键盘上的“Delete”键。键。5.2.35.2.3 编辑布局表格和布局单元格编辑布局表格和布局单元格5.2 表格布局表格布局（五）设置布局表格属性（五）设置布局表格属性（五）设置布局表格属性（五）设置布局表格属性1布局表格属性布局表格属性 2布局单元格属性布局单元格属性5.2.35.2.3 编辑布局表格和布局单元格编辑布局表格和布局单元格5.2 表格布局表格布局（四）利用表格制作垂直线和水平线（四）利用表格制作垂直线和水平线（四）利用表格制作垂直线和水平线（四）利用表格

26、制作垂直线和水平线（1）在网页中插入一个无边框、无边距的表格）在网页中插入一个无边框、无边距的表格（2）定位光标在制作水平线的单元格内）定位光标在制作水平线的单元格内（3）在）在“属性检查器属性检查器”中，设置高度（或宽度）为中，设置高度（或宽度）为“1”，为单，为单元格添加背景颜色。元格添加背景颜色。（4）单击）单击“文档文档”工具栏中工具栏中的的“拆分拆分”按钮，按钮，切换到切换到“代码和设代码和设计视图计视图”，删除单，删除单元格内的元格内的“ ”代码，如图。代码，如图。5.2.35.2.3 编辑布局表格和布局单元格编辑布局表格和布局单元格5.2 表格布局表格布局（4）保存网页

27、，在浏览器中预览网页，如图所示。）保存网页，在浏览器中预览网页，如图所示。5.2.35.2.3 编辑布局表格和布局单元格编辑布局表格和布局单元格5.2 表格布局表格布局5.3 框架布局框架布局5.3.1 建立框架建立框架5.3.2 框架面板框架面板5.3.3 设置框架的属性设置框架的属性5.3.4 保存框架保存框架5.3.5 框架中的超链接框架中的超链接1定位光标在要插入框架集的窗口中。定位光标在要插入框架集的窗口中。2执行以下操作之一：执行以下操作之一：单击菜单栏中单击菜单栏中“插入插入”|“HTML”|“框架框架”命令，在子菜命令，在子菜单中单击相应的框样式。单中单击相应的框样式。在在“插

28、入插入”栏的栏的“布局布局”类别中，单击框架按钮右类别中，单击框架按钮右侧的下拉按钮，弹出下拉侧的下拉按钮，弹出下拉菜单，单击相应的框架集菜单，单击相应的框架集图标。建立框架网页图标。建立框架网页。5.3.1 5.3.1 建立框架建立框架5.3 框架布局框架布局（）打开框架面板）打开框架面板单击菜单栏中单击菜单栏中“窗口窗口”|“框架框架”命令，打开框架面板。在面板中命令，打开框架面板。在面板中标识了每个框的名称。标识了每个框的名称。（二）框架面板的基本操作（二）框架面板的基本操作：1选择框架集：在选择框架集：在“框架框架”面板中单击最外层的边框，使其出现面板中单击最外层的边框，使其出现粗黑边

29、显示，则选中了框架集。粗黑边显示，则选中了框架集。2选择框架：在选择框架：在“框架框架”面板中单击要选择的框架，使其出现细面板中单击要选择的框架，使其出现细黑边显示，则选中了框架。黑边显示，则选中了框架。5.3.25.3.2框架面板框架面板5.3 框架布局框架布局（一）设置框架集属性（一）设置框架集属性（一）设置框架集属性（一）设置框架集属性：选中框架集，打开框集属性选中框架集，打开框集属性 1边框选项设置边框选项设置2框架集中框架大小设置框架集中框架大小设置（二）设置框架属性（二）设置框架属性（二）设置框架属性（二）设置框架属性选择框架后（如选择左侧框架），打开框架属性选择框架后（如选择左侧

30、框架），打开框架属性5.3.35.3.3 设置框架的属性设置框架的属性5.3 框架布局框架布局（一）保存框架集的操作（一）保存框架集的操作：1在框架面板中，选择中要保存的框架集。在框架面板中，选择中要保存的框架集。2单击菜单栏中单击菜单栏中“文件文件”|“保存框架页保存框架页”命令。命令。3打开打开“另存为另存为”对话框，设置保存位置和文件名，单击对话框，设置保存位置和文件名，单击“保保存存”按钮，保存了框架集网页。按钮，保存了框架集网页。（二）保存框架的操作（二）保存框架的操作：1定位光标在要保存的框架内，或在框架面板中选择要保存的定位光标在要保存的框架内，或在框架面板中选择要保存的框架。框

31、架。2单击菜单栏中单击菜单栏中“文件文件”|“保存框架保存框架”命令，打开另存为对命令，打开另存为对话框。话框。3打开打开“另存为另存为”对话框，设置保存位置和文件名，单击对话框，设置保存位置和文件名，单击“保保存存”按钮，保存了框架。按钮，保存了框架。5.3.45.3.4 保存框架保存框架5.3 框架布局框架布局如图中的网页为如图中的网页为“上方及左侧嵌套上方及左侧嵌套”框架，左侧设置为导航条，框架，左侧设置为导航条，右侧为链接打开的目标窗口。右侧为链接打开的目标窗口。5.3.5 5.3.5 框架中的超链接框架中的超链接5.3 框架布局框架布局在框架中设置超链接的操作为：在框架中设置超链接的

32、操作为：1选择超链接的载体，如左侧框架的选择超链接的载体，如左侧框架的“电影城电影城”图像。图像。2在在“属性检查器属性检查器”中，中，“链接链接”项中设置超链接为：项中设置超链接为：dianying.html。3在在“属性检查器属性检查器”中的中的“目标目标”下拉菜单中选择目标框架或窗下拉菜单中选择目标框架或窗口，选择口，选择“mainFrame”如图。如图。5.3.5 5.3.5 框架中的超链接框架中的超链接5.3 框架布局框架布局5.4 CSSCSS布局布局DreamweaverDreamweaver提供了多种示例样式表，包括文本样式、提供了多种示例样式表，包括文本样式、表单样式、链接样

33、式、颜色样式等多种样式表。用户表单样式、链接样式、颜色样式等多种样式表。用户可以借鉴示例样式表，在其基础上加以修改，形成符可以借鉴示例样式表，在其基础上加以修改，形成符合自己要求的样式表。也可定义自己的布局模板。合自己要求的样式表。也可定义自己的布局模板。5.4 CSSCSS布局布局CSSCSS布局是一种布局是一种弹性布局提：弹性布局提：1.由于弹性布局的总体大小取决于用户的默认字体由于弹性布局的总体大小取决于用户的默认字体大小，因此弹性布局更难预测。如果正确使用的话，大小，因此弹性布局更难预测。如果正确使用的话，弹性布局对于那些需要较大字体的用户更为方便，弹性布局对于那些需要较大字体的用户更

34、为方便，因为行的长度仍保持适当比例。因为行的长度仍保持适当比例。2.此布局中此布局中 div 的大小取决于的大小取决于 body 元素中的元素中的 100%字体大小。如果您通过对字体大小。如果您通过对 body 元素或元素或#container 使用使用“font-size:80%”来减小文本的总来减小文本的总体大小，请记住整体布局将按比例缩小。您最好增体大小，请记住整体布局将按比例缩小。您最好增加各个加各个 div 的宽度以对此进行补偿。的宽度以对此进行补偿。3.如果字体大小在每个如果字体大小在每个 div 中按不同的量进行更改中按不同的量进行更改（例如，（例如，#sidebar1 上的字体

35、大小为上的字体大小为 70%，#mainContent 上的字体大小为上的字体大小为 85%），而不是对总），而不是对总体设计进行更改，则将按比例更改每个体设计进行更改，则将按比例更改每个 div 的总体的总体大小。您最好根据最终的字体大小来进行调整。大小。您最好根据最终的字体大小来进行调整。5.4 CSSCSS布局布局5.4 CSSCSS布局布局2列固定宽度左窄右宽型列固定宽度左窄右宽型+头部头部 This is the Header div id=This is the sidebar 2列固定宽度左窄右宽型列固定宽度左窄右宽型+头部头部 5.4 CSSCSS布局布局layout.css

36、文件文件body font-family:Verdana;font-size:14px;margin:0;#container margin:0 auto;width:900px;#header height:100px;background:#6cf;margin-bottom:5px;#mainContentmainContent margin-bottom:5px;#sidebar float:left;width:200px;height:500px;background:#9ff;#content float:right;width:695px;height:500px;backgr

37、ound:#cff;/*因为是固定宽因为是固定宽度，采用左右浮动方法可有效避免度，采用左右浮动方法可有效避免ie 3像素像素bug*/本章小结本章小结本章小结本章小结第第5章章 网页页面布局网页页面布局插入表格插入表格框架中的超链接框架中的超链接网网页页页页面面布布局局表表 格格表格布局表格布局框架布局框架布局添加内容添加内容选择表格选择表格设置表格属性设置表格属性编辑表格的基本操作编辑表格的基本操作布局视图布局视图绘制布局表格和单元格绘制布局表格和单元格编辑布局表格和单元格编辑布局表格和单元格建立框架建立框架框架面板框架面板设置框架的属性设置框架的属性保存框架保存框架第第 五五 章章 结结 束束