利用框架结构，可以把导航条内容固定在页面的顶部或右边。任何时候用户都可以直接选择上面或右边的导航内容，切换到想要浏览的内容。下面通过一个示例说明该操作的过程。本例最终效果，如图8-32所示。页面由上框架、左下框架和右下框架组成，分别用于显示主题、导航和教程的内容。单击导航按钮时，右下框架将显示相应的内容。

新建一个HTML文档。

选择“插入”|“HTML”|“框架”|“上方及左侧嵌套”菜单命令插入框架，调整各框架大小至如图8-33所示效果。

执行“窗口”|“框架”命令，调出框架管理面板。

在框架管理器中单击顶部的框架，自动选择文档窗口顶部的框架。这时出现框架属性设置面板，在框架属性设置面板的“框架名称”文本框中输入框架的名称TopFrame，其余选项保持系统默认的设置。

用同样的方法给左下部和右下部的框架分别命名为LeftFrame和MainFrame。

用鼠标右键单击TopFrame框架内部，在弹出上下文菜单中执行“页面属性”命令，调出“页面属性”对话框，在该对话框中对选中“分类”列表框中的“外观”进行设置，具体设置值见图8-34所示。

图8-32 实例效果图

图8-33 创建框架

图8-34 设置TopFrame的页面属性

在TopFrame框架内输入文本：“Dreamweaver CS6 DIY教程”。然后新建CSS规则设置文本的属性：“字体”为隶书、“大小”为56、文本颜色设置为“#F00”，居中放置。

用鼠标右键单击LeftFrame框架内部，在弹出上下文菜单中执行“页面属性”命令，调出“页面属性”对话框，在对话框设置属性“背景颜色”值为“#AED433”。

在LeftFrame框架内，插入一个5行1列的表格，然后在属性面板上设置表格的宽度为220像素，边框粗细为0。(www.daowen.com)

将光标放置在表格第1行的单元格中，设置单元格内容水平左对齐，垂直居中，然后单击“常用”插入面板中的“图像”按钮，在该单元格中插入一个导航图像。选中图像，新建CSS规则，选择器类型为“类”，单击“确定”按钮，在弹出的规则定义对话框中选择“边框”分类，设置图片边框为0。

用同样的方法插入其余4个导航图像，如图8-35所示。然后在属性面板上的“链接”文本框中设置链接目标，目标文件打开方式为mainframe。

图8-35 插入导航图像后的页面

用鼠标右键单击MainFrame框架内部，在弹出上下文菜单中执行“页面属性”命令，调出“页面属性”对话框，在对话框设置背景图像。

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

执行“文件”|“保存全部”命令，出现保存文件窗口，同时会显示整个框架被选中的状态。在文件保存窗口中选择合适的保存目录后，在文件名的输入框内输入一个文件名，再单击“保存”按钮保存整个框架。接着会要求保存下一个子框架文档，同时在文档窗口中，被选择保存的子框架周围会出现一个虚线框，在保存文件窗口中的文件名输入框内输入一个文件名后保存。此后，还会同样出现两次保存文件的窗口，同时会选择其他的子框架，依次保存这些文档。

执行“文件”|“新建”命令，新建一个无框架普通文档，如图8-36所示。

图8-36 textandlink.html

保存文件为“文本与链接”按钮设置时链接属性所指向的文件名textanlink.html。再用同样方法制作其他文件。

完成以上步骤就可在浏览器中测试作品效果了，浏览器窗口顶部的“Dreamweaver CS6DIY教程”和左边的导航按钮是固定不变的，右边则根据用户选择不同的导航图像而显示相应的内容。例如，当用户单击左边的“文本与链接”按钮时，在右边的框架中会打开相应的内容，如图8-37所示。

图8-37 实例效果图