第4章节第4章节 表格与框架.ppt

图 4-14 表格布局综合实例 3 图 4-15 表格布局综合实例 4 图 4-16 表格布局综合实例 5 4.4 创建框架 4.4.1 什么是框架 最常见的框架结构是 Web 型的联机帮助系统（其本质也就是网页），它们通常都采用一种目录式结构，左边是帮助主题，右边是帮助内容；当单击左边的超链接时，相应内容显示在右边的框架中。例如，图 4-17 就显示了 Dreamweaver4.0 联机帮助的效果。 图 4-17 框架结构的联机帮助系统 框架的这种导航功能，在实际的网页制作中应用非常广泛。例如，图 4-18显示了一个个人站点（取自作者学生的作业，该网站完全用手工 HTML 编写，当然图像是用 Photoshop 处理的）某栏目的导航结构，当单击左边的目录时，相应内容会在右边显示，图中左上是单击“大使教材”时的效果，右下是单击“辣极文章”时的效果。 图 4-18 框架结构的网页 4.4.2 指定框架结构 一个典型的框架集网页如下所示： HTML HEADTITLE框架集网页/TITLE/HEAD FRAMESET cols=200,* FRAME FRAME /FRAMESET /HTML 注意：在 HTML 文档中，如果包含 FRAMESET 标记符，则不能再包含 BODY 标记符，反之亦然。 图 4-19 框架集示例1 该框架集的显示效果如图 4-19 所示。 以下框架集将窗口在垂直方向上分为 3 个框架，上下两个框架分别为 80 像素高，中间的框架占窗口的剩余部分，效果如图 4-20 所示。 FRAMESET rows=80,*,80 FRAME FRAME FRAME /FRAMESET 图 4-20 框架集示例2 以下框架集将窗口在水平方向上分为 3 个框架，中间的框架为 250 像素，而左边的框架占剩余空间的 1/4，右边的框架占剩余空间的 3/4，效果如图 4-21 所示。 FRAMESET cols=*,250,3* FRAME FRAME FRAME /FRAMESET 图 4-21 框架集示例3 4.4.3 框架的嵌套 以下 HTML 代码创建了一个带有嵌套框架的框架集，其显示效果如图 4-22 所示。 图 4-22 嵌套框架示例 HTML HEADTITLE嵌套框架/TITLE/HEAD FRAMESET rows=100,* FRAME FRAMESET cols=150,* FRAME FRAME /FRAMESET NOFRAMES BODYP太遗憾了，您的浏览器不支持框架！/P/BODY /NOFRAMES /FRAMESET /HTML 4.4.4 框架的初始化 以下 HTML 代码显示了为框架设置初始页面的效果，如图 4-23 所示。 图 4-23 框架初始化效果 * * 第4章 表格与框架 4.1 创建表格 4.2 表格的属性设置 4.3 使用表格设计网页布局 4.4 创建框架 4.5 控制框架的显示效果 4.6 使用框架设计网页布局 4.1 创建表格 4.1.1表格的基本构成 以下实例显示了如何在 HTML 中生成一个表格，效果如图 4-1 所示。 图 4-1 表格示例 HTML HEADTITLE表格示例/TITLE/HEAD BODY TABLE border CAPTIONH2课程表H2/CAPTION TR THIMG src=fire.gifTH星期一TH星期二TH星期三TH星期四TH星期五 TR TH第1大节TD数学TD英语TD数学TD英语TD哲学 TR TH第2大节TD物理TD计算机TD计算机TDTD计算机 TR TH第3大节TD计算机TDTD英语TD计算机TD /TABLE /BODY /HTML 4.1.2 合并单元格 4.1.3 构造表格的步骤 4.2 表格的属性设置 4.2.1 边框与分隔线 4.2.1.1 frame属性 4.2.1.2 rules 属性 4.2.1.3 border 属性 以下两条语句的含义相同： TABLE border=2 TABLE border=2 frame=border rules=all 以下 HTML 代码显示了表格设置边框和分隔线时的显示效果，如图 4-3 所示。 HTML HEAD TITLE表格的边框和分隔线示例/TITLE /HEAD BODY TABLE bord