2022年实验八使用框架布局网页归纳 .pdf

《2022年实验八使用框架布局网页归纳 .pdf》由会员分享，可在线阅读，更多相关《2022年实验八使用框架布局网页归纳 .pdf（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、实验八使用框架布局网页【实验目的】使学生熟练掌握使用框架布局复杂的网页界面，设置框架集和框架的属性，在框架的网页文档中设计网页，并能在框架集的框架中添加超级链接，使页面在框架间相互访问。【实验器材】安装有 Windows 98/2000/xp；Dreamweaver CS3，Flash CS3，Fireworks CS3；IE 浏览器，NetScape 浏览器，IIS5.0 等软件的计算机。【实验内容】在你的个人站点“在线歌曲”栏目中的“MP3 点播”网页文档中，使用框架布局网页界面，使得用户单击左侧导航栏中歌曲名称时，网页在右侧的框架中显示对应得MP3 歌曲的播放器及其歌词。用户不管在点播最

2、后哪一首歌曲，用户始终能够看到右侧的二级导航栏目。实验的内容包括如下3 个方面：在网页中插入一个顶部和嵌套的左侧框架集结构。设置框架集的边框属性，设置被嵌套的左侧和右侧框架的滚动条属性，使其中的页面内容超过框架的区域时，在垂直放上出现滚动条。在左侧的框架中添加添加超级链接，单击不同的链接时，其链接的目标网页在右侧框架中显示。图 8-1 实验任务的效果图【实验步骤】实验任务一：在网页中插入一个顶部和嵌套的左侧框架集结构，设置框架集及其中框架属性，并编辑、保存每个框架中的网页文档。名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 9 页 -第 1 步：新建包含框架集的网页文件。在你的个

3、人站点中，新建一个名为“Framesets.html”的网页文件，如图 8-2 所示。图 8-2 新建包含框架集的网页文件第 2 步：插入框架结构。在DW 的插入工具面板中，选择“布局”选项卡，单击其中的“框架”图表按钮，在其下拉的菜单列表中选择“顶部和嵌套的左侧框架集结构”菜单选项，如图8-3 所示。图 8-3 插入框架的工具面板第 3 步：设置框架标题属性。在系统弹出的标题属性对话框中，为其中的3 个框架指定个性化的框架标题，如图 8-4 所示，然后单击“确定”按钮，完成框架标题属性，最后DW 自动在网页设计窗口中插入一个如名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 9

4、页 -图 8-5 所示的框架结构。图 8-4 设置框架标题属性第 4 步：设置框架集的属性。首先，设置嵌套框架集中外部框架集的属性，使用鼠标单击上部框架的“横向”边框，选中框架集，在下面的属性面板中设置框架集的属性，边框设为“是”，边框颜色设为墨绿色（#336600），边框宽度为3 个像素，如图8-5 所示。然后，设置嵌套框架集中内部框架集的属性，使用鼠标单击左侧框架的“纵向”边框，选中框架集，在下面的属性面板中设置框架集的属性，边框设为“默认”，边框颜色设为红色（#FF0000），边框宽度为5 个像素。图 8-5 设置框架集的属性第 5 步：保存框架集及其中的框架网页文件。首先，保存框架集所

5、在网页文件，使用鼠标单击外层框架的边框，单击“文件”菜单中的“框架集另存为”菜单选项，如图8-6 所示，然后将其保存为步骤1 中新建的 framesets.html 文件，如图 8-7 所示。然后，分别保存框架所在网页文件，把鼠标光标移动到上部框架中，名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 9 页 -如图 8-8 所示，单击“文件”菜单中的“保存框架”或“框架另存为”菜单命令，在弹出的文件保存对话框中输入“topFrame.html”文件名，然后单击“保存”按钮，如图8-9 所示，即可将上面的框架的网页保存 为topFrame.html；然 后 分 别 为 下 部 左 侧

6、的 框架 保 存 为“leftFrame.html”，下 部 右 侧 框架 保 存为“mainFrame.html”。图 8-6 保存框架集的菜单命令图 8-7 保存框架集所在网页为framesets.html 名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 9 页 -图 8-8 保存框架所在网页的菜单命令8-9 保存上部框架所在网页文件第 6 步：按 F12 建，预览添加了框架集的网页界面效果，如图8-10 所示。图 8-10 预览效果名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 9 页 -实验任务二：为每个框架所在网页添加页眉内容，并在左侧的框架中添加添加超级

7、链接，单击不同的链接时，其链接的目标网页在右侧框架中显示。第 1 步：为框架集中的上部框架添加你的个人网站的“一级导航栏”。将鼠标光标移至上部框架内，单击属性面板中的“页面属性”按钮，如图8-11 所示；然后，在弹出的如图8-12 所示的对话框中设置当前网页的页边距，使页边距等于0；最后，使用拷贝功能，从别的网页中把你的个人网站的“一级导航栏”拷贝到当前框架所在网页，如图8-13。图 8-11 属性面板中的“页面属性”按钮图 8-12 设置网页的页边距图 8-13 添加个人网站的“一级导航栏”名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 9 页 -第 2 步：为下部框架集中左侧

8、框架所在网页文件添加“在线歌曲”栏目的“二级导航栏”。首先，参照步骤 1 的方法设置左边框架所在网页的页面边距，是网页的四个页边距均为0 个像素；然后，在其中插入一个表格，输入如图8-14 所示的“在线歌曲”二级导航栏。图 8-14 在下部框架集的左侧框架中添加“在线歌曲”二级导航栏第 3 步：为下部框架集中右侧框架所在网页文件添加3 首 MP3文件的播放器及其歌词。首先，参照步骤1的方法设置右边框架所在网页的页面边距，是网页的四个页边距均为0 个像素；然后，将原来MP3在线点播的三首歌曲的播放器和歌词拷贝到右边框架所在的网页，如图8-15 所示。图 8-15 在下部框架集的右边框架中输入在线

9、点播的三首歌曲的播放器和歌词第 4 步：在左侧的二级导航栏中歌曲标题增加超级链接。如图8-16，使用鼠标选中左侧框架网页中的“让我 们 荡 起 双 桨”的 歌 曲 标 题，在 属 性 面 板 的 链 接 属 性 栏 目 中 输 入 链 接 目 标 地 址（“mainFrame.html#shuangjiang”，同时在其下面的目标属性下拉菜单中选择打开链接目标的目标框架mainFrame；然后，按照以上操作过程，分别为“蜗牛与黄鹂鸟”和“亲亲我的宝贝”两首歌曲增加在右侧框架打开的超级链接；最后，在文件菜单中选择“保存所有”菜单命令，如图8-17。名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 9 页 -图 8-16 设置框架集中超级链接的属性图 8-17 保存框架集中所有框架网页文件中的修改第 5 步：测试、预览结果。按F12 键，打开IE 浏览器，预览框架集页面，测试框架间的超级链接是否正确，如图8-18。名师资料总结-精品资料欢迎下载-名师精心整理-第 8 页，共 9 页 -图 8-18 预览和测试的结果界面名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 9 页 -