第7章 表格与页面布局.ppt

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

1、第第7章章 表格表格与页面布局与页面布局本章要点本章要点1.表格的功能和基本结构2.表格在页面布局中的作用3.在Dreamweaver中制作各种表格4.CSS 布局概述5.使用 AP 元素进行布局6.使用框架进行布局1.表格的功能和基本结构表格的功能和基本结构表格的基本功能是用来显示行列分明的数据，例表格的基本功能是用来显示行列分明的数据，例如列车时刻表、体育比赛积分表、日程表等。如列车时刻表、体育比赛积分表、日程表等。表格标题 第一行第一个单元格 第一行第二个单元格 .第二行第一个单元格 第一行第二个单元格 .1.1表格标记符及其属性表格标记符及其属性 定义整个表格，表格中的所有内容都必须位

2、于定义整个表格，表格中的所有内容都必须位于之间。之间。1.1表格标记符及其属性表格标记符及其属性属性：属性：Align：对齐方式：对齐方式Bordercolor：设置表格边框的颜色：设置表格边框的颜色Bgcolor：设置背景颜色：设置背景颜色Background：设置背景图案：设置背景图案 控制边框和分隔线控制边框和分隔线Frame：控制表格最外层的四条边框：控制表格最外层的四条边框Rules：控制是否显示及如何显示单元格之间的分隔线：控制是否显示及如何显示单元格之间的分隔线控制单元格空白控制单元格空白Cellspacing：控制单元格之间的空白。（像素）：控制单元格之间的空白。（像素）Cel

3、lpadding：控制表格分割线与数据之间的空白。（像素）：控制表格分割线与数据之间的空白。（像素）控制表格的高度或宽度控制表格的高度或宽度Width：设置表格列宽，可取像素或百分比：设置表格列宽，可取像素或百分比Height：设置表格行高，可取像素或百分比：设置表格行高，可取像素或百分比1.1表格标记符及其属性表格标记符及其属性Frame：控制表格最外层的四条边框：控制表格最外层的四条边框值值意义意义值值意义意义void缺省值，无边框缺省值，无边框above仅有上边框仅有上边框lhs仅有左边框仅有左边框below仅有下边框仅有下边框rhs仅有右边框仅有右边框hsides仅有上下边框仅有上下边

4、框box包含全部四个边框包含全部四个边框vsides仅有左右边框仅有左右边框border包含全部四个边框包含全部四个边框1.1表格标记符及其属性表格标记符及其属性 Rules：控制是否显示及如何显示单元格之间的分隔线：控制是否显示及如何显示单元格之间的分隔线 值：值：none-缺省值，表示无分隔线缺省值，表示无分隔线rows表示仅有行分隔线表示仅有行分隔线cols表示仅有列分隔线表示仅有列分隔线all 表示包括所有分隔线表示包括所有分隔线1.1表格标记符及其属性表格标记符及其属性：定义表格的一行属性：Height：设置当前行的高度，取值为像素Width：设置当前行的宽度，取值为像素Bgcolo

5、r：设置当前行的背景色Background：设置当前行的背景图案Bordercolor：设置当前行的边框颜色1.1表格标记符及其属性表格标记符及其属性 定义表格行列单元格内容属性：Rowspan：行合并，其取值表示纵向方向上合并的行数Colspan：列合并，其取值表示横向方向上合并的列数。Align：控制单元格内容的水平对齐Valign：控制单元格内容的垂直对齐Height：控制单元格高度，取值为像素数Width：控制单元格宽度，取值为像素数Bgcolor：设置背景颜色Background：设置背景图案2 表格在页面布局中的作用表格在页面布局中的作用布局表格中包含若干多个布局单元格，只能在布局

6、单元格中添加网页内容，例如，文本、图片以及其他的一些多媒体信息等，这样通过布局表格与布局单元格的相互配合，就形成了页面的布局。设计网页布局实际就是要设计布局表格与布局单元格，这两者之间位置排列、表格大小以及前后顺序的设计，往往直接决定了整个布局的质量。表格效果样例表格效果样例:表格可以实现多种多样的效果练习：请画出下面练习：请画出下面HTML文件在浏览器中的显示效果文件在浏览器中的显示效果 aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk mmm nnn练习：编写练习：编写HTML代码，完成下表代码，完成下表3.在在Dreamweaver中制作各种表格中制

7、作各种表格使用插入栏中的布局类别中的表格按钮添加表格，此外还可以使用属性检查器修改表格的各种基本属性(主要指行、列属性其他属性可以使用定义CSS 样式的方式来修饰)。3.1 制作简单表格制作简单表格演示3.2 制作嵌套表格制作嵌套表格嵌套表格是指表格单元格中的内容是另外一个表格，通常用于实现复杂的布局效果。演示3.3 制作复制表格制作复制表格复杂表格是指包含合并单元格的表格。演示3.4 表格网页布局示例表格网页布局示例演示1演示24.CSS 布局概述布局概述CSS 页面布局使用层叠样式表技术，对页面内容页面布局使用层叠样式表技术，对页面内容进行组织。进行组织。CSS 布局基本构造块是布局基本构

8、造块是 div 标记符，标记符，在大多数情况下用作文本、图像或其他页面元素的在大多数情况下用作文本、图像或其他页面元素的容器。容器。设计者创建设计者创建 CSS 布局时，应将布局时，应将 div 标记符放在页标记符放在页面的不同位置上，然后向这些标记符中添加内容。面的不同位置上，然后向这些标记符中添加内容。div 标记符可以出现在网页上的任何位置。进行标记符可以出现在网页上的任何位置。进行 CSS 布局时，既可以用绝对方式（指定布局时，既可以用绝对方式（指定 x 和和 y 坐坐标）也可以用相对方式（指定与其他页面元素的距标）也可以用相对方式（指定与其他页面元素的距离）来定位离）来定位 div

9、标记符。标记符。4.CSS 布局概述布局概述创建 CSS 布局有多种方法，最常见的包括三种：使用 Dreamweaver 提供的预设计 CSS 布局。使用 Dreamweaver 绝对定位元素（AP 元素）创建 CSS 布局。手动插入 div 标记符创建页面布局。7.3.2 使用内置使用内置 CSS 布局布局 演示7.3.3 使用使用 AP 元素进行布局元素进行布局在 Dreamweaver 中，所谓 AP 元素就是绝对定位（Absolute Positioning）元素，它们是使用 CSS 绝对定位技术创建出的容器（较早版本的 Dreamweaver 称其为“层”）。AP 元素可以包含文本、

10、图像或其他任何可放置到 HTML 文档正文中的内容。在使用 AP 元素进行布局时，可以将一个 AP 元素放置到另一个 AP 元素的前后，或者隐藏某些 AP 元素而显示其他 AP 元素，以及在屏幕上移动 AP 元素等。7.3.3 使用使用 AP 元素进行布局（续）元素进行布局（续）演示1演示27.4.1 什么是框架什么是框架框架是在一个浏览器窗口中显示多个网页的技术，通过为超链接指定目标框架，可以为框架之间建立起内容之间的联系，从而实现页面导航的功能，所以框架经常用于页面的导航和信息的组织。最典型的框架结构是各种联机帮助系统，它们通常都采用一种目录式结构，左边是帮助主题，右边是帮助内容；当单击左边的超链接时，相应的内容显示在右边的框架。7.4.1 什么是框架（续）什么是框架（续）框架结构的优点是：导航清楚、下载速度快。框架的缺点是：难以为特定页面设置书签。（如果网站的观众是所有互联网用户，一般建议不要使用框架。如果网站的观众是某特定群体，例如某教学网站针对的特定学生群体，则可以根据需要选择是否使用框架。）7.4.1 什么是框架（续）什么是框架（续）可以使用插入栏布局类别中的框架按钮，创建框架结构的网页。框架结构网页包含了框架集和框架，可以使用框架面板来选择框架集或框架。如果需要修改框架集或框架的属性，应该使用属性检查器来修改具体的属性。7.4.2 框架布局示例框架布局示例演示