网页编程教学第4章.ppt

《网页编程教学第4章.ppt》由会员分享，可在线阅读，更多相关《网页编程教学第4章.ppt（65页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第4章 表格与框架 4.1 4.1 创建表格创建表格 4.2 4.2 表格的属性设置表格的属性设置4.3 4.3 使用表格设计网页布局使用表格设计网页布局 4.4 4.4 创建框架创建框架4.5 4.5 控制框架的显示效果控制框架的显示效果4.6 4.6 使用框架设计网页布局使用框架设计网页布局 4.1 4.1 创建表格创建表格 4.1.14.1.1表格的基本构成表格的基本构成 以以下下实实例例显显示示了了如如何何在在 HTML HTML 中中生生成成一一个个表表格，效果如图格，效果如图 4-1 4-1 所示。所示。图 4-1 表格示例表格示例表格示例课程表课程表 IMG =fire.gif星

2、期一星期一星期二星期二星期三星期三星期四星期四星期五星期五 第第1 1大节大节数学数学英语英语数学数学英语英语哲学哲学 第第2 2大节大节物理物理计算机计算机计算机计算机计算机计算机 第第3 3大节大节计算机计算机英语英语计算机计算机4.1.2 4.1.2 合并单元格合并单元格4.1.3 4.1.3 构造表格的步骤构造表格的步骤4.2 4.2 表格的属性设置表格的属性设置4.2.1 4.2.1 边框与分隔线边框与分隔线 4.2.1.1 frame4.2.1.1 frame属性属性4.2.1.2 rules 4.2.1.2 rules 属性属性4.2.1.3 border 4.2.1.3 bor

3、der 属性属性以下两条语句的含义相同：以下两条语句的含义相同：以以下下 HTML HTML 代代码码显显示示了了表表格格设设置置边边框框和和分分隔线时的显示效果，如图隔线时的显示效果，如图 4-3 4-3 所示。所示。表格的边框和分隔线示例表格的边框和分隔线示例TABLE border=4 frame=rules=rows!-我的日程表我的日程表星期一星期一星期二星期二星期三星期三星期四星期四星期五星期五 MUDNBA2001 MUDNBA2001联众军棋联众军棋联众军棋联众军棋笑傲江笑傲江湖湖DiabloIIDiabloII DiabloIIDiabloII联众军棋联众军棋升级升级MUDM

4、UDMUDMUD睡觉睡觉学习学习打篮球打篮球打篮球打篮球图 4-3 表格边框和分隔线的显示效果4.2.2 4.2.2 控制单元格空白控制单元格空白以以下下示示例例显显示示了了这这两两个个属属性性如如何何影影响响单单元元格格内内和和单元格间的空白，效果如图单元格间的空白，效果如图4-4所示。所示。表格单元格空白示例表格单元格空白示例表格表格1大话西游大话西游大内密探大内密探008少林足球少林足球鹿鼎记鹿鼎记喜剧之王喜剧之王九品芝麻官九品芝麻官逃学威龙逃学威龙食神食神百变金刚百变金刚表格表格2大话西游大话西游大内密探大内密探008少林足球少林足球鹿鼎记鹿鼎记喜剧之王喜剧之王九品芝麻官九品芝麻官逃学

5、威龙逃学威龙食神食神百变金刚百变金刚图 4-4 单元格空白示例4.2.3 4.2.3 表格的对齐表格的对齐4.2.3.14.2.3.1表格的页面对齐表格的页面对齐 4.2.3.24.2.3.2表格内容的水平对齐表格内容的水平对齐图 4-5 表格数据的水平对齐 以以下下HTML代代码码显显示示了了单单元元格格内内容容水水平平对对齐齐的的效效果，如图果，如图4-5所示。所示。表格数据的水平对齐表格数据的水平对齐表格数据的水平对齐表格数据的水平对齐本行数据右对齐本行数据右对齐右右右右左左本行数据为默认左对齐本行数据为默认左对齐左左中中中中本行数据居中对齐本行数据居中对齐4.2.3.34.2.3.3表

6、格内容的垂直对齐表格内容的垂直对齐图 4-6 表格数据的垂直对齐以以下下HTML代代码码显显示示了了单单元元格格内内容容垂垂直直对对齐齐的的效效果，如图果，如图4-6所示。所示。表格数据的垂直对齐表格数据的垂直对齐表格数据的垂直对齐表格数据的垂直对齐野蛮人野蛮人barbarian女巫女巫sorceress巫巫师师necromancer4.3 4.3 使用表格设计网页布局使用表格设计网页布局4.3.1 4.3.1 控制表格和单元格大小控制表格和单元格大小以以下下HTML HTML 代代码码将将页页面面划划分分为为四四个个部部分分（为为了了显显示效果，为表格添加了边框），如图示效果，为表格添加了边

7、框），如图4-74-7所示。所示。图 4-7 用表格划分页面区域 nbsp;TD;&width=300 nbsp;&; nbsp;TD&=3 height=100 nbsp;4.3.2 4.3.2 设置表格和单元格的背景设置表格和单元格的背景以以下下 HTML HTML 代代码码显显示示了了设设置置表表格格和和单单元元格格背背景的效果，如图景的效果，如图 4-8 4-8 所示。所示。图 4-8 表格和单元格背景示例TABLE border align=center TD&=3 height=100 nbsp;TD width=200&=gray 

8、nbsp; nbsp;TD width=200&=gray nbsp;TD&=3 height=80 nbsp;4.3.3 4.3.3 使用嵌套表格使用嵌套表格以以下下HTML代代码码显显示示了了使使用用嵌嵌套套表表格格构构造造页页面面布布局局的的效效果果（注注意意其其中中包包括括了了很很多多学学过过的内容），如图的内容），如图4-9所示。所示。图 4-9 嵌套表格布局效果游戏游戏  当当前位置：前位置：首页首页>个人天地个人天地>游戏游戏 暗黑破坏神暗黑破坏神2人物角色人物角色三个首要恶魔三个首要恶魔西部王国西部王国快速参考快

9、速参考|首首 页页|网网页页制制作作|读读者者服服务务|个人天地个人天地|4.3.4表格布局综合应用4.3.4.1设置各种细线效果设置各种细线效果1表格框线表格框线以以下下HTML代代码码显显示示了了表表格格框框线线的的细细线线效效果果，如图如图4-10所示。所示。图 4-10 表格框线的细线效果剑客剑客十十年年磨磨一一剑剑，霜霜刃刃未未曾曾试试。今今日日把把示示君君，谁谁有不平事？有不平事？2横竖分隔线横竖分隔线以以下下HTML代代码码显显示示了了横横竖竖分分隔隔线线的的细细线线效效果果，如图如图4-11所示。所示。图 4-11 横竖分隔线的细线效果 如如梦令梦令 昨夜雨

10、昨夜雨疏风骤，疏风骤，浓睡不消残酒。浓睡不消残酒。试问卷帘人，试问卷帘人，却道海棠依旧。却道海棠依旧。知否？知否？知否？知否？应是绿肥红瘦。应是绿肥红瘦。4.3.4.2表格布局的综合实例表格布局的综合实例图图4-12图图4-16列列出出了了一一些些实实际际的的网网页页布布局局效效果，请读者自行分析其中用到的各种技巧。果，请读者自行分析其中用到的各种技巧。图 4-12 表格布局综合实例 1图 4-13 表格布局综合实例 2图 4-14 表格布局综合实例 3图 4-15 表格布局综合实例 4图 4-16 表格布局综合实例 54.4 4.4 创建框架创建框架4.4.1 4.4.1 什么是框架什么是框

11、架 最最常常见见的的框框架架结结构构是是 Web Web 型型的的联联机机帮帮助助系系统统（其其本本质质也也就就是是网网页页），它它们们通通常常都都采采用用一一种种目目录录式式结结构构，左左边边是是帮帮助助主主题题，右右边边是是帮帮助助内内容容；当当单单击击左左边边的的超超链链接接时时，相相应应内内容容显显示示在在右右边边的的框框架架中中。例例如如，图图 4-17 4-17 就就显显示示了了 Dreamweaver4.0 Dreamweaver4.0 联机帮助的效果。联机帮助的效果。图 4-17 框架结构的联机帮助系统框框架架的的这这种种导导航航功功能能，在在实实际际的的网网页页制制作作中中应

12、应用用非非常常广广泛泛。例例如如，图图4-18显显示示了了一一个个个个人人站站点点（取取自自作作者者学学生生的的作作业业，该该网网站站完完全全用用手手工工HTML编编写写，当当然然图图像像是是用用Photoshop处处理理的的）某某栏栏目目的的导导航航结结构构，当当单单击击左左边边的的目目录录时时，相相应应内内容容会会在在右右边边显显示示，图图中中左左上上是是单单击击“大大使使教教材材”时时的的效效果果，右右下下是是单单击击“辣辣极极文文章章”时的效果。时的效果。图 4-18 框架结构的网页4.4.2 4.4.2 指定框架结构指定框架结构一个典型的框架集网页如下所示：一个典型的框架集网页如下所

13、示：框架集网页框架集网页注注意意：在在HTML文文档档中中，如如果果包包含含FRAMESET标标记符，则不能再包含记符，则不能再包含BODY标记符，反之亦然。标记符，反之亦然。图 4-19 框架集示例1该框架集的显示效果如图该框架集的显示效果如图4-19所示。所示。以以下下框框架架集集将将窗窗口口在在垂垂直直方方向向上上分分为为3个个框框架架，上上下下两两个个框框架架分分别别为为80像像素素高高，中中间间的的框框架架占占窗窗口的剩余部分，效果如图口的剩余部分，效果如图4-20所示。所示。图 4-20 框架集示例2以以下下框框架架集集将将窗窗口口在在水水平平方方向向上上分分为为3个个框框架架，中

14、中间间的的框框架架为为250像像素素，而而左左边边的的框框架架占占剩剩余余空空间间的的1/4，右右边边的的框框架架占占剩剩余余空空间间的的3/4，效效果果如如图图4-21所所示。示。图 4-21 框架集示例34.4.3 4.4.3 框架的嵌套框架的嵌套以以下下HTML代代码码创创建建了了一一个个带带有有嵌嵌套套框框架架的的框框架架集集，其其显显示示效果如图效果如图4-22所示。所示。图 4-22 嵌套框架示例 嵌套框架嵌套框架太遗憾了，您的浏览器不支持框架！太遗憾了，您的浏览器不支持框架！4.4.4 4.4.4 框架的初始化框架的初始化以以下下HTML代代码码显显示示了了为为框框架架设设置置初

15、初始始页页面面的的效效果果，如如图图4-23所示。所示。图 4-23 框架初始化效果-以以下下是是框框架架集集文文档档的的内内容容-初始化框架初始化框架-以下是框架集所在目录下以下是框架集所在目录下file1.htm文件的内容文件的内容-file1李白李白-以下是框架集所在目录下以下是框架集所在目录下file2.htm文件的内容文件的内容-file2夜思夜思怨情怨情-以下是框架集所在目录下以下是框架集所在目录下file3.htm文件的内容文件的内容-file3.htm李白（李白（701762），字太白，陕西成纪人。），字太白，陕西成纪人。自幼学自幼学道术，五岁诵六甲道术，五岁诵六甲十五好剑术。

16、年少时轻财仗义，曾手十五好剑术。年少时轻财仗义，曾手刃数人。二十岁时于岷山之阳跟东严子学道术。刃数人。二十岁时于岷山之阳跟东严子学道术。4.5 4.5 控制框架的显示效果控制框架的显示效果 4.5.14.5.1边框效果边框效果 4.5.1.1 4.5.1.1 框架边框的设置框架边框的设置 将图将图4-23所示实例的框架集文件更改为如所示实例的框架集文件更改为如下（其他文件保持不变），则显示效果如图下（其他文件保持不变），则显示效果如图4-24所所示。示。框架边框的设置框架边框的设置图 4-24 框架边框的设置4.5.1.2框架滚动条的设置框架滚动条的设置4.5.1.3 设置边框的不可移动属性设

17、置边框的不可移动属性4.5.2 设置框架空白设置框架空白将将图图4-23所所示示实实例例的的框框架架集集文文件件更更改改为为如如下下（其其他他文文件件保保持持不不变变），则则显显示示效效果果如如图图4-25所所示（注意文字与周围边框的距离加大了）。示（注意文字与周围边框的距离加大了）。初始化框架初始化框架图 4-25 控制框架空白4.6 4.6 使用框架设计网页布局使用框架设计网页布局4.6.1 4.6.1 指定超链接的目标框架指定超链接的目标框架 以以下下实实例例将将图图 4-23 4-23 所所示示的的例例子子全全面面更更改改，效效果如图果如图 4-26 4-26 所示。所示。图 4-26

18、 超链接目标框架效果-以以下下是是框框架架集集文文档档的的内内容容-目标框架示例目标框架示例-以下是框架集所在目录下以下是框架集所在目录下file1.htm文件的内容文件的内容-file1李白李白-以以下下是是框框架架集集所所在在目目录录下下file2.htm文文件的内容件的内容-file2夜夜思思怨怨情情-以以下下是是框框架架集集所所在在目目录录下下file3.htm文件的内容文件的内容-file3李李白白（701762），字字太太白白，陕陕西西成成纪纪人人。自自幼幼学学道道术术，五五岁岁诵诵六六甲甲十十五五好好剑剑术术。年年少少时时轻轻财财仗仗义义，曾曾手手刃刃数数人。二十岁时于岷山之阳跟

19、东严子学道术。人。二十岁时于岷山之阳跟东严子学道术。-以以下下是是框框架架集集所所在在目目录录下下file4.htm文件的内容文件的内容-file4床床前前明明月月光光，疑疑是是地地上上霜霜。举举头头望望明明月月，低头思故乡。低头思故乡。-以以下下是是框框架架集集所所在在目目录录下下file5.htm文件的内容文件的内容-file5美美人人卷卷珠珠帘帘，深深坐坐蹙蹙蛾蛾眉眉；但但见见泪泪痕痕湿湿，不知心恨谁？不知心恨谁？4.6.2 4.6.2 使用页内框架使用页内框架以以下下示示例例显显示示了了如如何何使使用用页页内内框框架架（其其中中file3.htm、file4.htm、file5.htm与与上上小小节节的的示示例例相相同），如图同），如图4-27所示。所示。图 4-27 页内框架效果页内框架示例页内框架示例李白李白静静思思怨怨情情真可惜，您的浏览器不支持框架！真可惜，您的浏览器不支持框架！