创建和编辑框架页.doc

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