表格与页面布局.ppt

《表格与页面布局.ppt》由会员分享，可在线阅读，更多相关《表格与页面布局.ppt（27页珍藏版）》请在三一办公上搜索。

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

2、ground：设置背景图案 控制边框和分隔线Frame：控制表格最外层的四条边框Rules：控制是否显示及如何显示单元格之间的分隔线控制单元格空白Cellspacing：控制单元格之间的空白。（像素）Cellpadding：控制表格分割线与数据之间的空白。（像素）控制表格的高度或宽度Width：设置表格列宽，可取像素或百分比Height：设置表格行高，可取像素或百分比,1.1表格标记符及其属性,Frame：控制表格最外层的四条边框,1.1表格标记符及其属性,Rules：控制是否显示及如何显示单元格之间的分隔线 值：none-缺省值，表示无分隔线rows表示仅有行分隔线cols表示仅有列分隔线a

3、ll 表示包括所有分隔线,1.1表格标记符及其属性,：定义表格的一行属性：Height：设置当前行的高度，取值为像素Width：设置当前行的宽度，取值为像素Bgcolor：设置当前行的背景色Background：设置当前行的背景图案Bordercolor：设置当前行的边框颜色,1.1表格标记符及其属性,定义表格行列单元格内容属性：Rowspan：行合并，其取值表示纵向方向上合并的行数Colspan：列合并，其取值表示横向方向上合并的列数。Align：控制单元格内容的水平对齐Valign：控制单元格内容的垂直对齐Height：控制单元格高度，取值为像素数Width：控制单元格宽度，取值为像素数B

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

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

6、像或其他页面元素的容器。设计者创建 CSS 布局时，应将 div 标记符放在页面的不同位置上，然后向这些标记符中添加内容。div 标记符可以出现在网页上的任何位置。进行 CSS 布局时，既可以用绝对方式（指定 x 和 y 坐标）也可以用相对方式（指定与其他页面元素的距离）来定位 div 标记符。,4.CSS 布局概述,创建 CSS 布局有多种方法，最常见的包括三种：使用 Dreamweaver 提供的预设计 CSS 布局。使用 Dreamweaver 绝对定位元素（AP 元素）创建 CSS 布局。手动插入 div 标记符创建页面布局。,7.3.2 使用内置 CSS 布局,演示,7.3.3 使用

7、 AP 元素进行布局,在 Dreamweaver 中，所谓 AP 元素就是绝对定位（Absolute Positioning）元素，它们是使用 CSS 绝对定位技术创建出的容器（较早版本的 Dreamweaver 称其为“层”）。AP 元素可以包含文本、图像或其他任何可放置到 HTML 文档正文中的内容。在使用 AP 元素进行布局时，可以将一个 AP 元素放置到另一个 AP 元素的前后，或者隐藏某些 AP 元素而显示其他 AP 元素，以及在屏幕上移动 AP 元素等。,7.3.3 使用 AP 元素进行布局（续）,演示1演示2,7.4.1 什么是框架,框架是在一个浏览器窗口中显示多个网页的技术，通

8、过为超链接指定目标框架，可以为框架之间建立起内容之间的联系，从而实现页面导航的功能，所以框架经常用于页面的导航和信息的组织。最典型的框架结构是各种联机帮助系统，它们通常都采用一种目录式结构，左边是帮助主题，右边是帮助内容；当单击左边的超链接时，相应的内容显示在右边的框架。,7.4.1 什么是框架（续）,框架结构的优点是：导航清楚、下载速度快。框架的缺点是：难以为特定页面设置书签。（如果网站的观众是所有互联网用户，一般建议不要使用框架。如果网站的观众是某特定群体，例如某教学网站针对的特定学生群体，则可以根据需要选择是否使用框架。）,7.4.1 什么是框架（续）,可以使用插入栏布局类别中的框架按钮，创建框架结构的网页。框架结构网页包含了框架集和框架，可以使用框架面板来选择框架集或框架。如果需要修改框架集或框架的属性，应该使用属性检查器来修改具体的属性。,7.4.2 框架布局示例,演示,