《表格与页面布局》PPT课件.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