框架是将浏览器窗口划分成几个部分，将一些不需要更新的元素放在一个框架内作为单独的网页文档，这个文档是不变的，其他经常更新的内容放在主框架内。框架通常是由框架集和框架两部分组成，框架集实际上是一个页面，这个页面里包含了好多框架窗口，每个框架窗口可以单独显示一个HTML文档，这些HTML文档之间可以通过超链接联系起来，下面我们就使用Dreamweaver CS3快速地创建框架。

一、框架网页

框架将一个浏览器窗口分为多个独立的区域，每个区域（框架）显示一个单独的可滚动页面，每个框架都是浏览器窗口内的一个独立窗口。典型的框架网页如图1所示，这是关于某个电子商务网站的“客户中心”服务页面。该网页由3个框架组成，每个框架单独显示一张网页。顶部框架用于显示横幅广告，对应于网页top.html；左侧框架放置客户中心的一些服务列表，用于页面导航，对应于页面left.html；右侧窗口用于显示具体某项客户中心服务的信息，对应于页面right.html。为了浏览方便，当浏览者单击左侧客户中心服务列表的超链接时，右侧窗口显示相应的客户中心服务信息。

图1 网页中的多个框架

二、制作框架网页

Dreamweaver CS3提供了多种创建框架的方法，用户可以使用Dreamweaver CS3提供的预置框架集，也可以自己通过手写HTML代码任意地建立框架集。使用Dreamweaver CS3如何实现如图1所示的结构清晰、风格统一的框架集页面？下面我们就使用Dreamweaver CS3预置的框架集通过操作来实现如图5.22所示的框架集页面。制作过程如下。

1.新建框架网页

要新建框架网页，请事先规划好网页的设计布局，然后执行如下步骤。

(1) 选择“文件”一“新建”命令。

(2) 在“新建文档”对话框中，选择“框架集”类别。

(3) 从“框架集”列表中选择一个合适的框架集，如图2所示。

图2 选择符合自己要求的框架集
 

(4) 单击“创建”按钮，结果如图3所示。

2.设置框架集属性

要设置框架集的属性，请执行如下步骤。

(1) 选中框架集：将鼠标指针移至某个框架的边框线上，然后单击，这时将选中整个框架集，如图3所示。

(2) 设置框架集的边框宽度：通过“框架集”属性检查器，可修改边框设置为“是”，边框宽度设置为“1”，这里我们不设边框。

图3 框架集
 

要调整某个框架的宽度或高度，请将鼠标移至框架的边框线上，左右或上下拖动。

3.添加每个框架的内容

如果事先没有准备每个框架的网页内容，现在可以直接在这些空白的框架中插入内容，然后在保存的时候，将提示逐个保存每个框架的网页。如果事先准备好了每个框架的网页内容，现在可以设置每个框架所关联的网页。由于我们事先已准备好了网页top.html、left.html和right.html。

下面我们就为每个框架设置对应的网页文件。

(1) 选择“窗口”一“框架”命令，打开“框架”面板，展现框架的缩略图，如图4所示。

图4 框架面板

(2) 单击“框架”面板中的每个框架，“属性”检查器中出现相应框架的属性，如图5所示。单击“源文件”旁边的文件夹图标，选择该框架对应的网页。

图5 设置框架对应的网页文件
 

(3) 按照同样的方法设置其他框架所对应的网页。

(4) 每个框架Dreamweaver都有个默认的名称，如顶部框架默认为topFrame，左侧框架默认为leftFrame，右侧框架默认为mainFrame．如图5所示。您也可以单击“框架名
称”文本框，修改其名称，本例暂不修改。

(5) 框架内容添加后的效果如图6所示。

4.设置超链接

左侧窗口内容为“客户中心”服务项目，现在希望当用户单击这些服务项目超链接时，链接的网页将会在右侧主窗口中打开，右侧窗口的名称是“mainFrame”。左侧窗口中的“客户中心”服务项目及其对应超链接如图1所示。

要达到上述效果，请执行如下步骤。

(1) 选中要设置超链接的图片或文本，如“注册&认证”。

(2) 选择“窗口”一“属性”命令，打开“属性”面板，如图6所示。

图6 超链接属性面板

(3) 单击“链接文件”图标，选择链接文件，如“right.html”。

(4) 单击“目标”下拉列表框，选择超链接在哪个框架中打开，这里为了在右侧框架打开，所以选择“mainFrame”。

(5) 同理，设置另外两个超链接。

5.预览网页

要预览网页，请按快捷键F12或单击工具栏中的“预览”图标，将会看到网页的显示效果。单击左侧窗口中的“客户中心”服务项目，链接内容将在右侧窗口显示。

本节作业：

使用Dreamweaver制作如图1所示的页面效果。

注意事项：

1.根据教程和图示完成作业。

2.在Dreamweaver CS3中点击框架即会切换到选定页面，随时注意自己在修改的是哪一个页面。

网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后才进入下一次教程，动起手来吧！

点击下载第五章案例及作业资源 返回《HTML入门经典》教程列表