用Dreamweaver建立框架页面

《用Dreamweaver建立框架页面》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、实验8用Dreamweaver建立框架页面实验目的：通过实验，掌握如何如何创建和应用框架页面，了解框架的基本分布结构和各个框架页面之间的相互联系。实验步骤：1.启动Dreamweaver程序，选择菜单“文件”“新建”命令，打开“新建文档”对话框。在对话框中“常规”标签下选择“类别”列表中的“框架集”选项，然后再右边的“框架集”列表中选择“上方固定”选项，如图8-1所示。单击“创建”按钮创建框架网页。2.选择菜单“窗口”“框架”命令，打开框架控制面板。3.用鼠标单击框架控制面板中的下部分，选中mainFrame框架。如图8-2所示：图8-1套用框架图11-2选择框架集的子框架4.将鼠标放在选中

2、的边框上，使鼠标变成双向箭头，然后拖动鼠标将该框架分成左右两个子框架。如图8-3所示。图8-3把主框架切分为子框架5.在框架编辑窗口中，单击顶部框架，选择菜单“文件”→“保存框架”命令，保存框架为top.htm页面。6.将光标停放到下部分框架的左边框家中，选择菜单“文件”→“保存框架”命令，保存框架为left.htm页面。7.按同样的方法，将右边的框架保存为right.htm页面。8.单击框架面板上最外层的边框，或单击页面编辑窗口中的最外层边框，使外框出现虚线。如图8-4所示：图8-4选中整个框架说明鼠标单击所选中的框架，页面中的框架边框会出现虚线，所选中的框架就是当前正在编辑的页面.9.选

3、择菜单“文件”—>“保存全部”命令，保存所有框架和框架集，框架集文件名称为index.htm.如图8-5所示.10.单击框架面板上的topFrame框架，选中top.htm网页.图8-5保存框架集11.打开属性面板，在属性面板上的“滚动”下拉菜单中选择“否”，然后勾选旁边的“不能调整大小”复选框；在“边界宽度”和“边界高度”的文本框中都输入0，参数设置如图8-6所示.图8-6top框架的属性设置说明框架属性面板上的“滚动”下拉菜单中有“是”.“否”.“自动”.和“默认”四项，其中选择“是”表示允许页面左右.上下出现滚动条；选择“自动”.“默认”表示根据网页内容，需要时自动显示滚动条；选择“否

4、”表示不允许出现滚动条.12.单击top框架页面，在属性面板中单击“页面属性”按钮。13.打开“页面属性”对话框，在“左边框.右边框.上边框.下边框”各文本框中输入0，使网页边距都为0.单击“确定”返回框架页top.htm编辑窗口.14.单击“插入”面板上的“表格”按钮，插入2行4列，宽为100%的表格.15.打开属性面板，设置第2列两个表格背景颜色为“浅蓝色”（色标值为#E0E4F4），然后选择第4列单元格，设置同样的背景颜色；设置第3列单元格的背景颜色为“深蓝色”（色标值为#3A4593）16.单击属性面板的“拆分单元格为行或列”按钮，分别在第2行的各个单元格插入行，把增加行的单元格背景

5、颜色设置为“深蓝色”（色标值为#3A4593）17.将光标停放在第1行中的第2单元格内，打开属性面板，选择“水平”下拉菜单中的“居中对齐”命令，选择“垂直”下拉菜单中“底部”命令，使光标移动到底部中间的位置；同样，使第4单元格中的光标移动到底部中间的位置.18.单击插入面板上的“表格”按钮，在第1行中的第2个单元格内插入1行7列的嵌套表格，然后依次在表格内输入“公司简介”.“旅游路线“.”特色产品“.“主题活动”.“旅游咨讯”.“论坛聊天”.“联系我们”等栏目标题.19.同样，在第4列第2行的单元格中插入1行2列的嵌套表格，然后在表格中输入“首页”.“站点导航”标题.20.在内容输入完毕后，

6、top框架上的页面制作好了,此页就是top.htm,显示效果如图8-7所示.图8-7top.htm完成页面说明有时候在完成top框架后,框架中底部的内容被下部分的框架遮盖了,这表示top框架内容较多或下部的框架位置过高,这时可以打开框架控制面板,单击最外层框架边框或下部框架边框,然后在属性面板"行"或"列"的文本框中输入合适的值.21.在框架面板上单击左边leftFrame框架，在属性面板上“滚动”列表中选择“否”.然后单击页面编辑窗口中的left.htm页面，设置页面属性的“左边距.右边距.上边距.下边距”各文本框中输入0，使网页边距都为0，确定页面属性设置.22.单击框架面板上的下部最外

7、层边框，然后在属性面板中“列”文本框中输入600像素.23.把光标放到页面中，单击插入面板上“表格”按钮，在页面中插入1行2列的表格，表格宽度为100%.24.设置第2个单元格背景颜色为“浅蓝色”（色标值为#E0E4F4），在“水平”列表中选择“居中对齐”选项，在“垂直”列表中选择“底部”选项.如图8-8所示.图8-8在左边框的页面中插入表格说明如果左边框的宽度不够，则可以在边框的属性“列”值中进行调试，直到