8.6框架的使用

8.6　框架的使用

在浏览网页的时候，细心的读者可能已经注意到站点页面通常具有一个统一的外观，一些基本的导航菜单和网站Logo等并不会在每个页面发生变动，页面中变化的只是一些具体的内容。针对这种情况，可以使用框架结构来将不变的导航放入一个页面，而将变化的内容放入各自的页面，再将这两部分组合起来即构成了框架结构的外观。

框架是浏览器窗口中的一个区域，一个框架对应一个单独的HTML文档。例如，一个网页中有两个框架，实际上它有3个HTML文档，一个是框架集文件，另外两个是框架文件。由于一个框架即是一个HTML文档，而通常网页中又包含多个框架，这多个框架统一后，即成为一个框架集。框架集定义了网页显示的框架数、框架的大小、载入框架的网页源等。

为了更好地理解什么是框架，我们画一张示意图来进行讨论，如图8-32所示。

图8-32　框架示意图

这是一个左右结构的框架。事实上这样的一个结构是由3个网页文件组成的。首先外部的框架是一个文件，图中我们用index.htm命名。框架中左边命名为A，指向的是一个网页A.htm；右边命名为B，指向的是一个网页B.htm。

下面我们就来从头开始制作一个框架（以左右框架结构为例）。

1．点“文件/新建”，弹出“新建文档”对话框如图8-33所示。

图8-33　“新建文档”对话框

或在“插入栏/布局/左侧框架”选择左侧框架，如图8-34所示。

图8-34　框架结构下拉列表

Dreamweaver 8.0生成一个空白的框架页面，如图8-35所示。

图8-35　空白框架页

2．选择“窗口/框架”，弹出“框架”面板，如图8-36所示。从框架面板可知，系统对左右框架生成命名。左框架名为：leftFrame，右框架名为：mainFrame，当然你可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。

图8-36　框架面板

3．保存框架。在“文件”菜单中点击“保存全部”。系统弹出对话框。这时，保存的是一个框架结构文件。我们按照惯例把它命名为index.htm。

保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构，如图8-37所示。

图8-37　保存框架结构

虚线笼罩在右边就是保存框架中右边网页，如图8-38所示。

图8-38　保存框架中右边网页

虚线笼罩在左边就是保存框架中左边的网页，如图8-39所示。

至此，3个页面保存完毕。

4．下面我们要实现按左边的超级链接、对应的页面出现在右边的功能。在左边的页面中做出超级链接，并指向一个已经存在的页面。注意做好链接以后，要在目标栏中设置为mainFrame，如图8-40所示。

5．设置完毕，保存全部，按“F12”键预览网页。链接指向的页面出现在右边框架中。

图8-39　保存框架中左边网页

图8-40　框架中的超级链接

6．重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。

注意：框架有很多优点，但是若理解得不够透彻，容易搞混。如果你的网站页面不多，可以创建一个不使用框架的Web页面来完成框架的功能。例如，如果你想让导航条显示在页面的左侧或顶部，既可以使用框架页面，也可以在每一页包含该导航条而不使用框架。创建导航条下面有详细介绍。

超级链接属性面板中的目标选项。“目标”我们称它为目标区，也就是超级链接指向的页面出现在什么目标区域。默认的情况下域中总有四个选项。

（1）_blank：单击链接以后，指向页面出现在新窗口中。

（2）_parent：用指向页面替换它外面所在的框架结构。

（3）_self：将链接页面显示在当前框架中。

（4）_top：跳出所有框架，页面直接出现在浏览器中。

提示：如果链接到你的站点外的某一页面，请始终使用“_top”或“_blank”来确保该页面不会嵌入框架内。