用Dreamweaver建立框架页面

实验8 用Dreamweaver建立框架页面

实验目的：通过实验，掌握如何如何创建和应用框架页面，了解框架的基本分布结构和各个框架页面之间的相互联系。

实验步骤：

1. 启动Dreamweaver程序，选择菜单“文件”“新建”命令，打开“新建文档”对话框。在对话框中“常规”标签下选择“类别”列表中的“框架集”选项，然后再右边的“框架集”列表中选择“上方固定”选项，如图8-1所示。单击“创建”按钮创建框架网页。

2. 选择菜单“窗口”“框架”命令，打开框架控制面板。

3. 用鼠标单击框架控制面板中的下部分，选中mainFrame框架。如图8-2所示：

图8-1 套用框架图11-2 选择框架集的子框架

4. 将鼠标放在选中的边框上，使鼠标变成双向箭头，然后拖动鼠标将该框架分成左右两个子框架。如图8-3所示。

图8-3 把主框架切分为子框架

5. 在框架编辑窗口中，单击顶部框架，选择菜单“文件”→“保存框架”命令，保存框架为页面。

6. 将光标停放到下部分框架的左边框家中，选择菜单“文件”→“保存框架”命令，保存框架为页面。

7. 按同样的方法，将右边的框架保存为页面。

8. 单击框架面板上最外层的边框，或单击页面编辑窗口中的最外层边框，使外框出现虚线。如图8-4所示：

图8-4选中整个框架

说明鼠标单击所选中的框架，

页面中的框架边框会出现虚线，所选

中的框架就是当前正在编辑的页面.

9. 选择菜单“文件”—>“保存

全部”命令，保存所有框架和框架集，

框架集文件名称为.如图8-5所示.

10. 单击框架面板上的topFrame框架，选中网页.

11. 打开属性面板，在属性面板上的“滚动”下拉菜单中选择“否”，

然后勾选旁边的“不能调整大小”复选框；在“边界宽度”和“边界高度”的文本框中都输入0，参数设置如图8-6所示.

图8-6 top框架的属性设置

说明框架属性面板上的“滚动”下拉菜单中有“是”.“否”.“自动”.和“默认”四项，其中选择“是”表示允许页面左右.上下出现滚动条；选择“自动”.“默认”表示根据网页内容，需要时自动显示滚动条；选择“否”表示不允许出现滚动条.

12. 单击top框架页面，在属性面板中单击“页面属性”按钮。

13. 打开“页面属性”对话框，在“左边框.右边框.上边框.下边框”各文本框中输入0，使网页边距都为0.单击“确定”返回框架页编辑窗口.

14. 单击“插入”面板上的“表格”按钮，插入2行4列，宽为100%的表格.

15. 打开属性面板，设置第2列两个表格背景颜色为“浅蓝色”（色标值为#E0E4F4），然后选择第4列单元格，设置同样的背景颜色；设置第3列单元格的背景颜色为“深蓝色”（色标值为#3A4593）

16. 单击属性面板的“拆分单元格为行或列”按钮，分别在第2行的各个单元格插入行，把增加行的单元格背景颜色设置为“深蓝色”（色标值为#3A4593）

17. 将光标停放在第1行中的第2单元格内，打开属性面板，选择“水平”下拉菜单中的“居中对齐”命令，选择“垂直”下拉菜单中“底部”命令，使光标移动到底部中间的位置；同样，使第4单元格中的光标移动到底部中间的位置.

18. 单击插入面板上的“表格”按钮，在第1行中的第2个单元格内插入1行7列的嵌套表格，然后依次在表格内输入“公司简介”.“旅游路线“.”特色产品“.“主题活动”.“旅游咨讯”.“论坛聊天”.“联系我们”等栏目标题.

19. 同样，在第4列第2行的单元格中插入1行2列的嵌套表格，然后在表格中输入“首页”.“站点导航”标题.

20. 在内容输入完毕后，top 框架上的页面制作好了,此页就是,显示效果如图8-7所示.

图8-7 完成页面

说明有时候在完成top框架后,框架中底部的内容被下部分的框架遮盖了,这表示top框架内容较多或下部的框架位置过高,这时可以打开框架控制面板,单击最外层框架边框或下部框架边框,然后在属性面板"行"或"列"的文本框中输入合适的值.

21. 在框架面板上单击左边leftFrame框架，在属性面板上“滚动”列表中选择“否”.然后单击页面编辑窗口中的页面，设置页面属性的“左边距.右边距.上边距.下边距”各文本框中输入0，使网页边距都为0，确定页面属性设置.

22. 单击框架面板上的下部最外层边框，然后在属性面板中“列”文本框中输入600像素.

23. 把光标放到页面中，单击插入面板上“表格”按钮，在页面中插入1行2列的表格，表格宽度为100%.

24. 设置第2个单元格背景颜色为“浅蓝色”（色标值为#E0E4F4），在“水平”列表中选择“居中对齐”选项，在“垂直”列表中选择“底部”选项.如图8-8所示.

图8-8 在左边框的页面中插入表格

说明如果左边框的宽度不够，则可以在边框的属性“列”值中进行调试，直到达到效果为止.

25. 在第2个单元格内，单击插入面板上的“图像”按钮，在表格中插入图像文件“”.

26. 把光标放到第1个单元格中，在表格中插入4行3列，宽度为106像素，单元格边距为4的嵌套表格.

27. 选中嵌套表格第1列的单元格，单击属性面板上的“合并所选单元格”按钮，合并第1列单元格，设置背景颜色为“深蓝色”（色标值为#3A4593）.

29. 在第3列的第2，3，4单元格内，分别输入“衣食住行”.“购物娱乐”.“历史文化”，完成后保存整个框架.

30. 单击框架面板上右侧的mainFrame框架，然后在属性面板的“滚动”选项中选择“默认”.

31. 将光标放到页面中，单击插入面板上的“表格”按钮，插入2行1列，宽度为300像素，各边距都为0的表格.

32. 在表格中输入如图8-9右边中的内容.

图8-9 框架中的内容

33. 制作好页面的内容之后，然后选择菜单“文件”—>“保存全部”命令，保存所有页面，按下F12在浏览器中查看网页效果.如图8-9所示.

说明框架集制作好了，现在就可以利用框架上的导航制作各个框架内容页面的超级链接，这也是制作框架的重要意义.

34. 将鼠标光标放在页面中，选择菜单“文件”—>“框架另存为”命令，把另存为网