《表格与页面布局》PPT课件

第7章表格与页面布局,本章要点,1.表格的功能和基本结构2.表格在页面布局中的作用3.在Dreamweaver中制作各种表格4.CSS布局概述5.使用AP元素进行布局6.使用框架进行布局,1.表格的功能和基本结构,表格的基本功能是用来显示行列分明的数据，例如列车时刻表、体育比赛积分表、日程表等。表格标题第一行第一个单元格第一行第二个单元格.第二行第一个单元格第一行第二个单元格.,1.1表格标记符及其属性,定义整个表格，表格中的所有内容都必须位于之间。,1.1表格标记符及其属性,属性：Align：对齐方式Bordercolor：设置表格边框的颜色Bgcolor：设置背景颜色Background：设置背景图案控制边框和分隔线Frame：控制表格最外层的四条边框Rules：控制是否显示及如何显示单元格之间的分隔线控制单元格空白Cellspacing：控制单元格之间的空白。（像素）Cellpadding：控制表格分割线与数据之间的空白。（像素）控制表格的高度或宽度Width：设置表格列宽，可取像素或百分比Height：设置表格行高，可取像素或百分比,1.1表格标记符及其属性,Frame：控制表格最外层的四条边框,1.1表格标记符及其属性,Rules：控制是否显示及如何显示单元格之间的分隔线值：none-缺省值，表示无分隔线rows表示仅有行分隔线cols表示仅有列分隔线all表示包括所有分隔线,1.1表格标记符及其属性,：定义表格的一行属性：Height：设置当前行的高度，取值为像素Width：设置当前行的宽度，取值为像素Bgcolor：设置当前行的背景色Background：设置当前行的背景图案Bordercolor：设置当前行的边框颜色,1.1表格标记符及其属性,定义表格行列单元格内容属性：Rowspan：行合并，其取值表示纵向方向上合并的行数Colspan：列合并，其取值表示横向方向上合并的列数。Align：控制单元格内容的水平对齐Valign：控制单元格内容的垂直对齐Height：控制单元格高度，取值为像素数Width：控制单元格宽度，取值为像素数Bgcolor：设置背景颜色Background：设置背景图案,2表格在页面布局中的作用,布局表格中包含若干多个布局单元格，只能在布局单元格中添加网页内容，例如，文本、图片以及其他的一些多媒体信息等，这样通过布局表格与布局单元格的相互配合，就形成了页面的布局。设计网页布局实际就是要设计布局表格与布局单元格，这两者之间位置排列、表格大小以及前后顺序的设计，往往直接决定了整个布局的质量。,表格效果样例:,表格可以实现多种多样的效果,练习：请画出下面HTML文件在浏览器中的显示效果,aaabbbcccdddeeefffggghhhiiijjjkkkmmmnnn,练习：编写HTML代码，完成下表,3.在Dreamweaver中制作各种表格,使用插入栏中的布局类别中的表格按钮添加表格，此外还可以使用属性检查器修改表格的各种基本属性(主要指行、列属性其他属性可以使用定义CSS样式的方式来修饰)。,3.1制作简单表格,演示,3.2制作嵌套表格,嵌套表格是指表格单元格中的内容是另外一个表格，通常用于实现复杂的布局效果。演示,3.3制作复制表格,复杂表格是指包含合并单元格的表格。演示,3.4表格网页布局示例,演示1演示2,4.CSS布局概述,CSS页面布局使用层叠样式表技术，对页面内容进行组织。CSS布局基本构造块是div标记符，在大多数情况下用作文本、图像或其他页面元素的容器。设计者创建CSS布局时，应将div标记符放在页面的不同位置上，然后向这些标记符中添加内容。div标记符可以出现在网页上的任何位置。进行CSS布局时，既可以用绝对方式（指定x和y坐标）也可以用相对方式（指定与其他页面元素的距离）来定位div标记符。,4.CSS布局概述,创建CSS布局有多种方法，最常见的包括三种：使用Dreamweaver提供的预设计CSS布局。使用Dreamweaver绝对定位元素（AP元素）创建CSS布局。手动插入div标记符创建页面布局。,7.3.2使用内置CSS布局,演示,7.3.3使用AP元素进行布局,在Dreamweaver中，所谓AP元素就是绝对定位（AbsolutePositioning）元素，它们是使用CSS绝对定位技术创建出的容器（较早版本的Dreamweaver称其为“层”）。AP元素可以包含文本、图像或其他任何可放置到HTML文档正文中的内容。在使用AP元素进行布局时，可以将一个AP元素放置到另一个AP元素的前后，或者隐藏某些AP元素而显示其他AP元素，以及在屏幕上移动AP元素等。,7.3.3使用AP元素进行布局（续）,演示1演示2,7.4.1什么是框架,框架是在一个浏览器窗口中显示多个网页的技术，通过为超链接指定目标框架，可以为框架之间建立起内容之间的联系，从而实现页面导航的功能，所以框架经常用于页面的导航和信息的组织。最典型的框架结构是各种联机帮助系统，它们通常都采用一种目录式结构，左边是帮助主题，右边是帮助内容；当单击左边的超链接时，相应的内容显示在右边的框架。,7.4.1什么是框架（续）,框架结构的优点是：导航清楚、下载速度快。框架的缺点是：难以为特定页面设置书签。（如果网站的观众是所有互联网用户，一般建议不要使用框架。如果网站的观众是某特定群体，例如某教学网站针对的特定学生群体，则可以根据需要选择是否使用框架。）,7.4.1什么