用Dreamweaver建立框架页面.doc

。 实验8 用Dreamweaver建立框架页面实验目的：通过实验，掌握如何如何创建和应用框架页面，了解框架的基本分布结构和各个框架页面之间的相互联系。实验步骤：1. 启动Dreamweaver程序，选择菜单“文件” “新建”命令，打开“新建文档”对话框。在对话框中“常规”标签下选择“类别”列表中的“框架集”选项，然后再右边的“框架集”列表中选择“上方固定”选项，如图8-1所示。单击“创建”按钮创建框架网页。2. 选择菜单“窗口” “框架”命令，打开框架控制面板。3. 用鼠标单击框架 控制面板中的下部分，选中mainFrame框架。如图8-2所示： 图 8-1 套用框架 图11-2 选择框架集的子框架4. 将鼠标放在选中的边框上， 使鼠标变成双向箭头，然后拖动鼠标将该框架分成左右两个子框架。如图 8-3所示。 图8-3 把主框架切分为子框架5. 在框架编辑窗口中，单击顶部框架，选择菜单 “文件”“保存框架”命令，保存框架为top.htm页面。6. 将光标停放到下部分框架的左边框家中，选择菜单“文件”“保存框架”命令，保存框架为left.htm页面。7. 按同样的方法，将右边的框架保存为right.htm页面。8. 单击框架面板上最外层的边框，或单击页面编辑窗口中的最外层边框，使外框出现虚线。如图8-4所示：图 8-4选中整个框架 说明 鼠标单击所选中的框架，页面中的框架边框会出现虚线，所选中的框架就是当前正在编辑的页面.9. 选择菜单“文件”“保存全部”命令，保存所有框架和框架集，框架集文件名称为index.htm.如图8-5所示.10. 单击框架面板上的topFrame框架，选中top.htm网页.图 8-5 保存框架集11. 打开属性面板，在属性面板上的“滚动”下拉菜单中选择“否”，然后勾选旁边的“不能调整大小”复选框；在“边界宽度”和“边界高度”的文本框中都输入0，参数设置如图8-6所示. 图 8-6 top框架的属性设置说明 框架属性面板上的“滚动”下拉菜单中有“是”.“否”.“自动”.和“默认”四项，其中选择“是”表示允许页面左右.上下出现滚动条；选择“自动”.“默认”表示根据网页内容，需要时自动显示滚动条；选择“否”表示不允许出现滚动条.12. 单击top框架页面，在属性面板中单击“页面属性”按钮 。13. 打开“页面属性”对话框，在“左边框.右边框.上边框.下边框”各文本框中输入0，使网页边距都为0.单击“确定”返回框架页top.htm编辑窗口.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 框架上的页面制作好了,此页就是top.htm,显示效果如图8-7所示.图8-7 top.htm完成页面说明 有时候在完成top框架后,框架中底部的内容被下部分的框架遮盖了,这表示top框架内容较多或下部的框架位置过高,这时可以打开框架控制面板,单击最外层框架边框或下部框架边框,然后在属性面板行或列的文本框中输入合适的值.21. 在框架面板上单击左边leftFrame框架，在属性面板上“滚动”列表中选择“否”.然后单击页面编辑窗口中的left.htm页面，设置页面属性的“左边距.右边距.上边距.下边距”各文本框中输入0，使网页边距都为0，确定页面属性设置.22. 单击框架面板上的下部最外层边框，然后在属性面板中“列”文本框中输入600像素.23. 把光标放到页面中，单击插入面板上“表格”按钮，在页面中插入1行2列的表格，表格宽度为100%.24. 设置第2个单元格背景颜色为“浅蓝色”（色标值为#E0E4F4），在“水平”列表中选择“居中对齐”选项，在“垂直”列表中选择“底部”选项.如图8-8所示.图 8-8 在左边框的页面中插入表格说明 如果左边框的宽度不够，则可以在边框的属性“列”值中进行调试，直到达到效果为止.25. 在第2个单元格内，单击插入面板上的“图像”按钮，在表格中插入图像文件“1.jpg”.26. 把光标放到第1个单元格中，在表格中插入4行3列，宽度为106像素，单元格边距为4的嵌套表格.27. 选中嵌套表格第1列的单元格，单击属性面板上的“合并所选单元格”按钮，合并第1列单元格，设置背景颜色为“深蓝色”（色标值为#3A4593）.29. 在第3列的第2，3，4单元格内，分别输入“衣食住行”.“购物娱乐”.“历史文化”，完成后保存整个框架.30. 单击框架面板上右侧的mainFrame框架，然后在属性面板的“滚动”选项中选择“默认”.31. 将光标放到right.htm 页面中，单击插入面板上的“表格”按钮，插入2行1列，宽度为300像素，各边距都为0的表格.32. 在表格中输入如图8-9右边中的内容.图8-9 框架中的内容33. 制作好right.htm 页面的内容之后，然后选择菜单“文件”“保存全部”命令，保存所有页面，按下F12在浏览器中查看网页效果.如图8-9所示.说明 框架集制作好了，现在就可以利用框架上的导航制作各个框架内容页面的超级链接，这也是制作框架的重要意义.34. 将鼠标光标放在right.htm 页面中，选择菜单“文件”“框架另存为”命令，把right.htm另存为网页right-1.htm.35. 然后将页面中的内容删除，添加新的内容.如图8-10所示.图8-10 在右框架中制作新的页面36. 选中左边框架上的“衣食住行”文字，打开属性面板，单击“链接”文本框后面按钮，选择right-1.htm页面，然后在“目标”下拉菜单中选择mainFrame.说明 目标下拉菜单上的命令，是指链接页面的显示方式，其中，_blank表示新的浏览器窗口中显示，_parent表示在当前窗口的父框架中打开，_self表示在本框架页面中打开，_top表示在整个浏览器窗口中打开（即取消框架显示），除了这些保留名称之外，根据用户所建立框架的不同，还会有其他框架名称.例如，在本示例中，mainFrame表示在框架集的主框架中打开，leftFrame表示在框架集的左边框架中打开，topFrame 表示在框架集的上部打开.37. 按同样的方法，选中“购物娱乐”链接到right-2.htm页面，在“目标”下拉菜单中选择mainFrame. 如图8-11所示.图8-11在右框架中制作新的页面38. 选中框架上部导航条中的“公司简介”，链接到文件夹中的company.htm页面(由自己设计)，“目标”下拉菜单中选择_blank，使之重新打开一个页面.39. 按同样的方法设置其他导航链接，选择对应的页面，显示方式根据网页的情况选择“目标”中的类型.40. 超级链接