第9章 使用框架布局网页.pdfVIP

《Dreamweaver网页设计》电子版教科书第9章

第9章使用框架布局网页

除表格外，框架也是网页的一种重要布局工具。第3章介绍了使用表格构建网页布局

的方法，本章介绍框架的应用，主要包括框架网页的创建，以及框架和框架集的基本操作。

对初学者来说，本章内容可能不太好理解，希望大家认真学习。

9.1框架网页的创建

与使用表格布局网页不同的是，框架布局通常适合页面中有一个区域发生变化，而其

它区域不发生变化的网页，如网站后台管理界面和一些论坛网页。

9.1.1关于框架和框架集

在框架网页中，浏览器窗口被划分成了若干区域，每个区域称为一个框架，每个框架

可显示不同的文档内容，彼此之间互不干扰。框架网页最明显的特征就是当一个框架的内容

固定不动时，另一个框架中的内容仍可以通过滚动条进行上下翻动。

框架网页主要包括两部分，一是框架集，二是框架。框架记录具体的网页内容，每个

框架对应一个网页；框架集是特殊的HTML文件，它定义整个框架页面中各框架的布局和

属性，包括框架的数目、大小和位置，以及在每个框架中初始显示的页面URL。

框架集文件本身不包含要在浏览器中显示的HTML内容，只是向浏览器提供应如何显

示一组框架，以及在这些框架中应显示哪些文档。

要在浏览器中查看一组框架，需要输入框架集文件的URL，浏览器随后打开要显示在

这些框架中的相应文档。

使用框架的最常见情况是，一个框架显示包含导航控件的文档，另一个框架显示含有

主要内容的文档。例如，图9-1-1显示了一个由两个框架组成的框架网页：一个较窄的框架

位于左侧，其中包含导航条；一个大框架占据了页面的其余部分，包含网页的主要内容。当

访问者浏览站点时，单击左侧框架中的某一超链接，要么展开或收缩其中的栏目，要么更改

右侧框架的内容。

图9-1-1由两个框架组成的框架网页

知识库：学完本节后，大家可能会问，到底应该使用框架还是应该使用表格布局网页呢？使

用框架时，访问者容易确认自己的位置，也比较方便跳转到其它网页。但是如果使用过多的

框架，加载框架的时间就会变长，而且在使用框架制作网页时，搜索引擎只会检索当前的框

1

《Dreamweaver网页设计》电子版教科书第9章

架，因此大多数情况下还是使用表格制作网页，或同时使用表格和框架布局网页。

9.1.2了解框架网页构造

图9-1-1所示网页至少由三个单独的网页文档组成：两个框架区域中显示的两个网页文

档和把这两个文档显示在一个界面上的框架集文档。在Dreamweaver中设计使用框架的网

页时，必须全部保存这三个文件，框架网页才能在浏览器中正常显示。为帮助大家理解，图

9-1-2显示了该框架网页的结构。

图9-1-2框架网页结构

在框架网页中，每个框架都有自己的名称。如果没有理解前面所讲框架的概念，可能会

搞不清楚框架名称和网页文档名称的区别。简单来说，因为一个界面被分成多个框架，如果

没有框架名称，则不能确定要在哪个框架中打开所链接的网页文档。为方便记忆和理解，可

自行设置框架名称。

9.1.3创建框架集

Dreamweaver中有预定义的框架集，可以使用“新建文档”对话框创建，也可以使用

“布局”插入栏创建，还可以手动创建，下面分别介绍。

1.使用“新建文档”对话框创建

使用“新建文档”对话框创建框架集的方法同创建普通页面的方法相似，具体操作如

下。

Step01启动Dreamweaver8，选择“文件”→“新建”菜单，打开“新建文档”对话框。

Step02在“类别”列表中选择“框架集”选项，右侧显示系统预定义的框架集类型，选择

其中一种（此处选择“上方固定，左侧嵌套”），如图9-1-3所示。

图9-1-3“新建文档”对话框

2