
第九课 框架布局网页 教学目标: 1、理解框架结构的含义和用途; 2、掌握建立框架网页的方法; 3、掌握框架属性的设置方法; 4、掌握框架网页的保存方法。教学重点: 1、网页框架的建立。 2、理解“设置初始网页”和“新建网页”的含义。教学难点: 掌握框架属性的设置:调整框架大小、设置框架边界、改变边框线的宽度等。教学方法: 任务驱动法、情景教学法、合作学习法、自主学习法和分组讨论法。教学准备: 1、教师准备一些文字和图片素材。 2、教师提供一些制作框架网页的演示动画。 3、教师准备一些用网页框架制作的优秀作品。教学过程: 导入:除表格外,框架也是网页的一种重要布局工具。使用表格构建网页布局的方法,本章介绍框架的应用,主要包括框架网页的创建,以及框架和框架集的基本操作。对初学者来说,本章内容可能不太好理解,希望大家认真学习。 框架网页的创建 与使用表格布局网页不同的是,框架布局通常适合页面中有一个区域发生变化, 而其它区域不发生变化的网页,如网站后台管理界面和一些论坛网页。 关于框架和框架集 在框架网页中,浏览器窗口被划分成了若干区域,每个区域称为一个框架,每个框架可显示不同的文档内容,彼此之间互不干扰。框架网页最明显的特征就是当一个框架的内容固定不动时,另一个框架中的内容仍可以通过滚动条进行上下翻动。 框架网页主要包括两部分,一是框架集,二是框架。框架记录具体的网页内容, 每个框架对应一个网页;框架集是特殊的 HTML 文件,它定义整个框架页面中各框架的布局和属性,包括框架的数目、大小和位置,以及在每个框架中初始显示的页面 URL 。 框架集文件本身不包含要在浏览器中显示的 HTML 内容,只是向浏览器提供应如何显示一组框架,以及在这些框架中应显示哪些文档。 要在浏览器中查看一组框架,需要输入框架集文件的 URL ,浏览器随后打开要显示在这些框架中的相应文档。 使用框架的最常见情况是,一个框架显示包含导航控件的文档,另一个框架显示含有主要内容的文档。例如,图 9-1-1 显示了一个由两个框架组成的框架网页: 一个较窄的框架位于左侧,其中包含导航条;一个大框架占据了页面的其余部分, 包含网页的主要内容。当访问者浏览站点时,单击左侧框架中的某一超链接,要么展开或收缩其中的栏目,要么更改右侧框架的内容。 图 9-1-1 由两个框架组成的框架网页 知识库 : 学完本节后,大家可能会问,到底应该使用框架还是应该使用表格布局网页呢?使用框架时,访问者容易确认自己的位置,也比较方便跳转到其它网页。但是如果使用过多的框架,加载框架的时间就会变长,而且在使用框架制作网页时,搜索引擎只会检索当前的框 架,因此大多数情况下还是使用表格制作网页,或同时使用表格和框架布局网页。 了解框架网页构造 11430001259725图 9-1-1 所示网页至少由三个单独的网页文档组成:两个框架区域中显示的两个网页文档和把这两个文档显示在一个界面上的框架集文档。在 Dreamweaver 中设计使用框架的网页时,必须全部保存这三个文件,框架网页才能在浏览器中正常显示。为帮助大家理解,图 9-1-2 显示了该框架网页的结构。 图 9-1-2 框架网页结构 在框架网页中,每个框架都有自己的名称。如果没有理解前面所讲框架的概念, 可能会搞不清楚框架名称和网页文档名称的区别。简单来说,因为一个界面被分成多个框架,如果没有框架名称,则不能确定要在哪个框架中打开所链接的网页文档。为方便记忆和理解,可自行设置框架名称。 创建框架集 Dreamweaver 中有预定义的框架集,可以使用“新建文档”对话框创建,也可以使用“布局”插入栏创建,还可以手动创建,下面分别介绍。 使用“新建文档”对话框创建 使用“新建文档”对话框创建框架集的方法同创 ... ...
~~ 您好,已阅读到文档的结尾了 ~~