实验八 使用框架布局网页

实验八使用框架布局网页

【实验目的】使学生熟练掌握使用框架布局复杂的网页界面，设置框架集和框架的属性，在框架的网页文档中设计网页，并能在框架集的框架中添加超级链接，使页面在框架间相互访问。

【实验器材】安装有Windows 98/2000/xp；Dreamweaver CS3，Flash CS3，Fireworks CS3；IE浏览器，NetScape浏览器，IIS5.0 等软件的计算机。

【实验内容】

在你的个人站点“在线歌曲”栏目中的“MP3点播”网页文档中，使用框架布局网页界面，使得用户单击左侧导航栏中歌曲名称时，网页在右侧的框架中显示对应得MP3歌曲的播放器及其歌词。用户不管在点播最后哪一首歌曲，用户始终能够看到右侧的二级导航栏目。实验的内容包括如下3个方面：

在网页中插入一个顶部和嵌套的左侧框架集结构。

设置框架集的边框属性，设置被嵌套的左侧和右侧框架的滚动条属性，使其中的页面内容超过框架的区域时，在垂直放上出现滚动条。

在左侧的框架中添加添加超级链接，单击不同的链接时，其链接的目标网页在右侧框架中显示。

图8-1 实验任务的效果图

【实验步骤】

实验任务一：在网页中插入一个顶部和嵌套的左侧框架集结构，设置框架集及其中框架属性，并编辑、保存每个框架中的网页文档。

第1步：新建包含框架集的网页文件。在你的个人站点中，新建一个名为“Framesets.html”的网页文件，如图8-2所示。

图8-2 新建包含框架集的网页文件

第2步：插入框架结构。在DW的插入工具面板中，选择“布局”选项卡，单击其中的“框架”图表按钮，在其下拉的菜单列表中选择“顶部和嵌套的左侧框架集结构”菜单选项，如图8-3所示。

图8-3 插入框架的工具面板

第3步：设置框架标题属性。在系统弹出的标题属性对话框中，为其中的3个框架指定个性化的框架标题，如图8-4所示，然后单击“确定”按钮，完成框架标题属性，最后DW自动在网页设计窗口中插入一个如

图8-5所示的框架结构。

图8-4设置框架标题属性

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

图8-5 设置框架集的属性

第5步：保存框架集及其中的框架网页文件。首先，保存框架集所在网页文件，使用鼠标单击外层框架的边框，单击“文件”菜单中的“框架集另存为”菜单选项，如图8-6所示，然后将其保存为步骤1中新建的framesets.html文件，如图8-7所示。然后，分别保存框架所在网页文件，把鼠标光标移动到上部框架中，

如图8-8所示，单击“文件”菜单中的“保存框架”或“框架另存为”菜单命令，在弹出的文件保存对话框中输入“topFrame.html”文件名，然后单击“保存”按钮，如图8-9所示，即可将上面的框架的网页保存为topFrame.html；然后分别为下部左侧的框架保存为“leftFrame.html”，下部右侧框架保存为“mainFrame.html”。

图8-6 保存框架集的菜单命令

图8-7 保存框架集所在网页为framesets.html

图8-8 保存框架所在网页的菜单命令

8-9 保存上部框架所在网页文件

第6步：按F12建，预览添加了框架集的网页界面效果，如图8-10所示。

图8-10 预览效果

实验任务二：为每个框架所在网页添加页眉内容，并在左侧的框架中添加添加超级链接，单击不同的链接时，其链接的目标网页在右侧框架中显示。

第1步：为框架集中的上部框架添加你的个人网站的“一级导航栏”。将鼠标光标移至上部框架内，单击属性面板中的“页面属性”按钮，如图8-11所示；然后，在弹出的如图8-12所示的对话框中设置当前网页的页边距，使页边距等于0；最后，使用拷贝功能，从别的网页中把你的个人网站的“一级导航栏”拷贝到当前框架所在网页，如图8-13。

图8-11 属性面板中的“页面属性”按钮

图8-12 设置网页的页边距

图8-13添加个人网站的“一级导航栏”

第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。

图8-16 设置框架集中超级链接的属性

第5步：测试、预览结果。按F12键，打开IE浏览器，预览框架集页面，测试框架间的超级链接是否正

确，如图8-18。

图8-18 预览和测试的结果界面