在同一个站点的页面中有很多东西是相同的，例如每一个页面都有返回主页的超级链接，每个页面都有导航栏，这样访问者才能自由地访问一个站点。如果在不同的网页中重复创建这些相同的内容，在增大工作量的同时，也浪费了宝贵的网络空间。使用框架则可以轻易地解决这种问题。

框架是窗口的一部分，它将一个Web页面分成几个部分，其中每一个部分都是独立的。一个框架中的超级链接可以指定为在另一个框架中打开，这样在打开超级链接的时候，整个页面保持不变，链接的内容在目标框架中显示。

1.创建框架

框架由框架集和单个框架组成。框架集是在一个文档内定义一组框架结构的HTML网页。它定义文件显示的框架数量、框架大小、载入框架的网页及其他可定义的属性等。单个框架是指在网页中定义的一个区域。

在Dreamweaver CS6中创建框架有以下几种方法：

◆ 插入预设框架。Dreamweaver在“插入”/“HTML”/“框架”下拉菜单中提供了13种预定义的框架，选择其中一个子菜单选项，即可插入对应的框架。

◆ 自定义框架。执行“查看”/“可视化助理”/“框架边框”命令显示边框，然后在文档窗口中拖动框架边框到合适的位置。例如，先拖动左边的框架边框到中间位置，然后拖动底部的框架边框到中间位置，最终形成的框架结构如图2-19所示。

图2-19 自定义框架效果

◆ 创建嵌套框架。将光标定位在要嵌套的框架内，执行“修改”／“框架集”命令下的拆分框架子命令，图2-20所示的效果是先拆分上框架，然后在下方的框架中拆分左、右框架而形成的嵌套框架。

2．框架的基本操作

执行“窗口”／“框架”菜单命令，打开图2-21所示的“框架”面板。框架面板为文档中的框架提供了一个直观的表示方式。

图2-20 嵌套框架效果

图2-21 “框架”面板

（1）选取框架或框架集。

◆ 在“框架”面板中用鼠标单击要选取的框架或框架集的边框，即可选取相应的框架或框架集。此时，文档窗口中选取的框架或框架集的四周显示虚线。

◆ 在文档窗口中单击要选取的框架的边框，即可选中框架；单击框架集的边框，可以选取框架集。

（2）设置框架与框架集属性。框架与框架集的属性设置在图2-22所示的面板中进行。

图2-22 框架与框架集属性面板

属性面板中的部分属性功能介绍如下：

◆ 滚动：指定在框架中是否显示滚动条。

◆ 边界宽度、边界高度：设置内容与框架边框左右或上下的距离。

◆ 框架集：当前选定的框架集中所包含的框架行数和列数。

◆ 行列选定范围：用于设置选定框架集中各行各列的框架大小。单击“行列选定范围”框内的标签，选取行或列，然后在“值”域中输入数值，“值”域中指定单位。

（3）删除框架。删除框架的操作比较特殊，选中框架后按Delete键并不能删除框架，而是采取下面的方法：将光标放在框架的边框上，当光标变为双向箭头时按住鼠标左键将框架的边框拖出父框架或页面之外，即可删除框架。如果对HTML语言比较熟悉，可以直接在HTML代码中删除框架和框架集。

（4）保存框架和框架集。由于每一个框架代表一个单独的网页，所以在保存文件时，不仅要保存整个文档的框架结构，还必须保存各个子框架。方法如下：执行“文件”/“保存全部”命令，弹出保存文件窗口，同时框架集被选中。输入文件名，然后单击“保存”按钮保存整个框架集。在弹出的下一个保存文件的窗口中输入当前被选中的框架的文件名，单击“保存”按钮保存该子框架。用同样的方法保存其他子框架，如果有N个框架，就必须保存N+1次文件。

3.在框架中打开文档(www.daowen.com)

如果要在一个框架中打开另一个框架中的超级链接，可以执行以下操作：

（1）在设计视图中选择要创建链接的文本或对象。

（2）在属性面板的“链接”文本框中指定要链接到的文件。

（3）在“目标”下拉列表中选择链接的文档应显示的框架或窗口。

如果在属性面板中命名了框架，则框架名称将出现在“目标”下拉列表中。

4.框架的应用实例

下面将制作一个包含框架结构的页面，以加深读者对框架的理解。页面的最终效果如图2-23所示。

图2-23 实例效果图

本例页面由三个框架组成，上框架、左下框架和右下框架。分别用于显示主题、导航和教程的内容。当单击导航按钮时，右下框架将显示对应的页面。具体制作步骤如下：

（1）新建一个文档。

（2）执行“插入”/“HTML”/“框架”/“上方及左侧嵌套”命令插入框架，然后调整各框架大小至合适位置。

（3）调出“框架”面板。在“框架”面板中单击顶部的框架，然后在属性面板上输入框架的名称TopFrame，其余选项保留默认设置。同样的方法为左下部和右下部的框架分别命名为LeftFrame和MainFrame。

（4）右击TopFrame框架内部，在弹出的快捷菜单中选择“页面属性”命令。设置页面字体为隶书，文本颜色为红色，并设置背景图像。

（5）把光标定位于TopFrame框架内，单击“常用”面板上的图标，在框架内插入图片。选择插入的图片，在属性面板设置对齐方式为“左对齐”。

（6）在TopFrame框架内输入文本：“Dreamweaver CS6 DIY教程”。然后在属性面板中设置文本的“大小”为36，居中放置。

（7）在框架LeftFrame内单击鼠标右键，在弹出的快捷菜单中选择“页面属性”命令，设置“背景颜色”值为“#9C9”。

（8）在LeftFrame框架内插入一个5行1列的表格。此时的页面效果如图2-24所示。

图2-24 插入表格后的页面

（9）将光标放置在表格第1行的单元格中，然后在单元格中插入一个预先制作好的按钮，并在属性面板上设置链接目标。

（10）用同样的方法插入其余4个按钮，并指定链接目标。

（11）在框架MainFrame内单击鼠标右键，在弹出的快捷菜单中执行“页面属性”命令，设置背景图像。

（12）在MainFrame框架内输入文本并调整文字格式。

（13）执行“文件”/“保存全部”命令，依次保存框架文档。

（14）新建一个无框架普通文档。设置页面背景，并在文档中输入文本，效果如图2-25所示。保存文件为“文本与链接”按钮的“链接”属性所指向的文件名textandlink.html。再用同样方法制作其他文件。

图2-25 textandlink.html

（15）页面制作完毕，按F12键可以在浏览器中预览效果。