用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. 将鼠标光标放在页面中，选择菜单“文件”—>“框架另存为”命令，把另存为网
页.
35. 然后将页面中的内容删除，添加新的内容.如图8-10所示.
图8-10 在右框架中制作新的页面
36. 选中左边框架上的“衣食住行”文字，打开属性面板，单击“链接”文本框后面按钮，选择页面，然后在“目标”下拉菜单中选择mainFrame.
说明目标下拉菜单上的命令，是指链接页面的显示方式，其中，_blank表示新的浏览器窗口中显示，_parent表示在当前窗口的父框架中打开，_self表示在本框架页面中打开，_top表示在整个浏览器窗口中打开（即取消框架显示），除了这些保留名称之外，根据用户所建立框架的不同，还会有其他框架名称.例如，在本示例中，mainFrame表示在框架集的主框架中打开，leftFrame表示在框架集的左边框架中打开，topFrame 表示在框架集的上部打开.
37. 按同样的方法，选中“购物娱乐”链接到页面，在“目标”下拉菜单中选择mainFrame. 如图8-11所示.
图8-11在右框架中制作新的页面
38. 选中框架上部导航条中的“公司简介”，链接到文件夹中的页面(由自己设计)，“目标”下拉菜单中选择_blank，使之重新打开一个页面.
39. 按同样的方法设置其他导航链接，选择对应的页面，显示方式根据网页的情况选择“目标”中的类型.
40. 超级链接设置完了，选择菜单“文件”—>“保存全部”命令，按F12键浏览网页，测试链接是否正确.
说明框架是分页制作网页的最好方式，特别是在不需要更换局部内容的时候.这样，每次浏览的都调用同一网页，如导航菜单等，既可以提高浏览速度，又省时省力.。