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

实验八使用框架布局网页【实验目的】使学生熟练掌握使用框架布局复杂的网页界面，设置框架集和框架的属性，在框架的网页文档中设计网页，并能在框架集的框架中添加超级链接，使页面在框架间相互访问。【实验器材】安装有 Windows 98/2000/xp；Dreamweaver CS3，Flash CS3，Fireworks CS3；IE 浏览器，NetScape 浏览器，IIS5.0 等软件的计算机。【实验内容】在你的个人站点“在线歌曲”栏目中的“MP3 点播”网页文档中，使用框架布局网页界面，使得用户单击左侧导航栏中歌曲名称时，网页在右侧的框架中显示对应得MP3 歌曲的播放器及其歌词。用户不管在点播最后哪一首歌曲，用户始终能够看到右侧的二级导航栏目。实验的内容包括如下3 个方面：在网页中插入一个顶部和嵌套的左侧框架集结构。设置框架集的边框属性，设置被嵌套的左侧和右侧框架的滚动条属性，使其中的页面内容超过框架的区域时，在垂直放上出现滚动条。在左侧的框架中添加添加超级链接，单击不同的链接时，其链接的目标网页在右侧框架中显示。图 8-1 实验任务的效果图【实验步骤】实验任务一：在网页中插入一个顶部和嵌套的左侧框架集结构，设置框架集及其中框架属性，并编辑、保存每个框架中的网页文档。名师资料总结-精品资料欢迎下载-名师精心整理-第 1 页，共 9 页 -第 1 步：新建包含框架集的网页文件。在你的个人站点中，新建一个名为“Framesets.html”的网页文件，如图 8-2 所示。图 8-2 新建包含框架集的网页文件第 2 步：插入框架结构。在DW 的插入工具面板中，选择“布局”选项卡，单击其中的“框架”图表按钮，在其下拉的菜单列表中选择“顶部和嵌套的左侧框架集结构”菜单选项，如图8-3 所示。图 8-3 插入框架的工具面板第 3 步：设置框架标题属性。在系统弹出的标题属性对话框中，为其中的3 个框架指定个性化的框架标题，如图 8-4 所示，然后单击“确定”按钮，完成框架标题属性，最后DW 自动在网页设计窗口中插入一个如名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 9 页 -图 8-5 所示的框架结构。图 8-4 设置框架标题属性第 4 步：设置框架集的属性。首先，设置嵌套框架集中外部框架集的属性，使用鼠标单击上部框架的“横向”边框，选中框架集，在下面的属性面板中设置框架集的属性，边框设为“是”，边框颜色设为墨绿色（#336600），边框宽度为3 个像素，如图8-5 所示。然后，设置嵌套框架集中内部框架集的属性，使用鼠标单击左侧框架的“纵向”边框，选中框架集，在下面的属性面板中设置框架集的属性，边框设为“默认”，边框颜色设为红色（#FF0000），边框宽度为5 个像素。图 8-5 设置框架集的属性第 5 步：保存框架集及其中的框架网页文件。首先，保存框架集所在网页文件，使用鼠标单击外层框架的边框，单击“文件”菜单中的“框架集另存为”菜单选项，如图8-6 所示，然后将其保存为步骤1 中新建的 framesets.html 文件，如图 8-7 所示。然后，分别保存框架所在网页文件，把鼠标光标移动到上部框架中，名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 9 页 -如图 8-8 所示，单击“文件”菜单中的“保存框架”或“框架另存为”菜单命令，在弹出的文件保存对话框中输入“topFrame.html”文件名，然后单击“保存”按钮，如图8-9 所示，即可将上面的框架的网页保存 为topFrame.html；然 后 分 别 为 下 部 左 侧的 框架 保 存 为“leftFrame.html”，下 部 右 侧 框架 保 存为“mainFrame.html”。图 8-6 保存框架集的菜单命令图 8-7 保存框架集所在网页为framesets.html 名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 9 页 -图 8-8 保存框架所在网页的菜单命令8-9 保存上部框架所在网页文件第 6 步：按 F12 建，预览添加了框架集的网页界面效果，如图8-10 所示。图 8-10 预览效果名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 9 页 -实验任务二：为每个框架所在网页添加页眉内容，并在左侧的框架中添加添加超级链接，单击不同的链接时，其链接的目标网页在右侧框架中显示。第 1 步：为框架集中的上部框架添加你的个人网站的“一级导航栏”。将鼠标光标移至上部框架内，单击属性面板中的“页面属性”按钮，如图8-11 所示；然后，在弹出的如图8-12 所示的对话框中设置当前网页的页边距，使页边距等于0；最后，使用拷贝功能，从别的网页中把你的个人网站的“一级导航栏”拷贝到当前框架所在网页，如图8-13。图 8-11 属性面板中的“页面属性”按钮图 8-12 设置网页的页边距图 8-13 添加个人网站的“一级导航栏”名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 9 页 -第 2 步：为下部框架集中左侧框架所在网页文件添加“在线歌曲”栏目的“二级导航栏”。首先，参照步骤 1 的方法设置左边框架所在网页的页面边距，是网页的四个页边距均为0 个像素；然后，在其中插入一个表格，输入如图8-14 所示的“在线歌曲”二级导航栏。图 8-14 在下部框架集的左侧框架中添加“在线歌曲”二级导航栏第 3 步：为下部框架集中右侧框架所在网页文件添加3 首 MP3文件的播放器及其歌词。首先，参照步骤1的方法设置右边框架所在网页的页面边距，是网页的四个页边距均为0 个像素；然后，将原来MP3在线点播的三首歌曲的播放器和歌词拷贝到右边框架所在的网页，如图8-15 所示。图 8-15 在下部框架集的右边框架中输入在线点播的三首歌曲的播放器和歌词第 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 页 -