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

《《表格与页面布局》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第7章表格与页面布局本章要点1.表格的功能和基本结构2.表格在页面布局中的作用3.在Dreamweaver中制作各种表格4.CSS布局概述5.使用AP元素进行布局6.使用框架进行布局1.表格的功能和基本结构表格的基本功能是用来显示行列分明的数据，例如列车时刻表、体育比赛积分表、日程表等。

2、R>

3、像素）控制表格的高度或宽度Width：设置表格列宽，可取像素或百分比Height：设置表格行高，可取像素或百分比1.1表格标记符及其属性Frame：控制表格最外层的四条边框值意义值意义void缺省值，无边框above仅有上边框lhs仅有左边框below仅有下边框rhs仅有右边框hsides仅有上下边框box包含全部四个边框vsides仅有左右边框border包含全部四个边框1.1表格标记符及其属性Rules：控制是否显示及如何显示单元格之间的分隔线值：none-缺省值，表示无分隔线rows表示仅有行分隔线cols表示仅有列分隔线

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

5、eight：控制单元格高度，取值为像素数Width：控制单元格宽度，取值为像素数Bgcolor：设置背景颜色Background：设置背景图案2表格在页面布局中的作用布局表格中包含若干多个布局单元格，只能在布局单元格中添加网页内容，例如，文本、图片以及其他的一些多媒体信息等，这样通过布局表格与布局单元格的相互配合，就形成了页面的布局。设计网页布局实际就是要设计布局表格与布局单元格，这两者之间位置排列、表格大小以及前后顺序的设计，往往直接决定了整个布局的质量。表格效果样例:表格可以实现多种多样的效果练习：请画出下面HTML文件在浏

6、览器中的显示效果aaabbbcccdddeeefffggghhhiiijjjkkkmmmnnn练习：编写HTML代码，完成下表3.在Dreamweaver中制作各种表格使用插入栏中的布局类别中的表格按钮添加表格，此外还可以使用属性检查器修改表格的各种基本属性(主要指行、列属性

7、其他属性可以使用定义CSS样式的方式来修饰)。3.1制作简单表格演示3.2制作嵌套表格嵌套表格是指表格单元格中的内容是另外一个表格，通常用于实现复杂的布局效果。演示3.3制作复制表格复杂表格是指包含合并单元格的表格。演示3.4表格网页布局示例演示1演示24.CSS布局概述CSS页面布局使用层叠样式表技术，对页面内容进行组织。CSS布局基本构造块是div标记符，在大多数情况下用作文本、图像或其他页面元素的容器。设计者创建CSS布局时，应将div标记符放在页面的不同位置上，然后向这些标记符中添加内容。div标记符可以出现在网页上的任

8、何位置。进行CSS布局时，既可以用绝对方式（指定x和y坐标）也可以用相对方式（指定与其他页面元素的距离）来定位div标记符。4.CSS布局概述创建CSS布局有多种方法，最常见的包括三种：使用Dreamweaver提供的预设计CSS布局。使用Dreamweaver