实验五 框架型网页的制作

实验五框架型网页的制作

一、实验目的

1、掌握框架集和框架的创建和保存；

2、掌握框架、框架集的编辑和属性的设置；

3、掌握框架超级链接。

二、实验内容

利用框架制作如下图所示的页面效果，框架集网页为index.html，

其中：图2-9-1为打开index.html的效果图；

图2-9-2 单击左侧“动物类”的网页效果图；

图2-9-3 单击左侧“插花类”的网页效果图；

图2-9-4 单击左侧“海洋类”的网页效果图；

图2-9-5 单击左侧“邮票类”的网页效果图；

图2-9-6 单击左侧“诗歌”的网页效果图，其中诗歌内容在“si.txt”文档中；

图2-9-7 单击左侧“散文”的网页效果图，其中散文内容在“爱情人生.doc”文档中。

图2-9-1 图2-9-2

图2-9-3 图2-9-4

图2-9-5 图2-9-6

图2-9-7

三、知识点分解

该实验主要涉及的知识点就是框架和框架集的保存以及设置超链接的目标框架。

四、实验步骤

1、选择[文件]/[新建]菜单命令。

2、在“新建文档”对话框“类别”列表中选择“框架集”选项。

3、从“框架集”列表选择相应的框架集，如图2-9-8所示。

图2-9-8 “新建文档”对话框

4、单击按钮，则会弹出“框架标签辅助功能属性”对话框，为每一框架

指定一个标题，单击“确定”按钮，则上方框架标题为“topFrame”，左侧框架标题为“leftFrame”，右侧框架标题为“mainFrame”。

5、选择[查看]/[可视化助理]/[框架边框]菜单命令，则在文档中就会出现框架的边框。

6、选择[文件]/[保存全部]菜单命令，将框架集文件保存为index.html，上方框架文件保存为top.html，左侧框架文件保存为left.html，右侧框架文件保存为main.html。

注意：对于框架集和框架文件保存的文件名，一定要做的看到文件名就能知道该文件对应与该框架集中的哪个框架。

7、选择[窗口]/[框架] 菜单命令，打开“框架”面板，直接在面板中单击最外面的框架集，打开属性对话框，设置“行值”：119px，再选择里面嵌套的框架集，设置“列值”：253px。

8、打开top.html，将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，切换到“布局”模式，单击“布局表格”按钮，绘制一个宽：350px 高：88px，“居中对齐”的表格，再在该表格内绘制一个同样大小的单元格，并将该单元格背景图像设为“top_bak.gif”，水平“居中对齐”，垂直“居中”，再在该单元格内写上文字“我的收藏”，并将该文字设为：字体“隶书”，大小“16px”，颜色“#993300”。

注意：可以不需要打开相对应的框架文件，直接在index.html文档中对框架文件进行编辑。

9、接着上面表格的下方再绘制一个表格，并将其宽设为“自动伸展”，高：8，背景图像设为“line1.gif”。

10、按【Ctrl+S】保存该网页。

11、打开left.html，将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，切换到“布局”模式，单击“布局表格”按钮，绘制一个宽：162px，高：40px，背景颜色“#FFCCCC”，“右对齐”的表格。

12、再在该表格中布一个同样大小的单元格，单击“在下面插入行”按钮，连续插

7行，将光标定位到每个单元格，分别输入文字：图片收藏，动物类，插花类，海洋类，邮票类，文章收藏，诗歌，散文，并将“图片收藏”和“文章收藏”设为“黑体”，“左对齐”，其余文字都设为“居中对齐”。

13、按【Ctrl+S】保存该网页。

14、打开main.html，将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就

出现“布局”工具栏，切换到“布局”模式，单击“布局表格”按钮，绘制一个宽：500px，高：355px，背景图像“back.gif”的表格。

15、单击“布局单元格”按钮，从表格的左下角开始绘制一个宽：112px，高：268px 的单元格，输入文字“收藏精美的图片，凄美、忧郁、壮丽的文章是我最大的爱好，它们能带给我无穷的乐趣，无限的遐想。”并将文字设为：字体“楷体”，大小“14px”，颜色“#CC6633”。

16、切换到“标准”模式，单击“绘制层”按钮，绘制一个层，选中表格，将表格拖到该层内，选中层，打开属性面板，设置：左“84px”，上“29px”。

17、按【Ctrl+S】保存该网页。

18、新建一个文档，将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，单击“绘制层”按钮，绘制一个层，打开属性面板，设置：左“84px”，上“29px”。

19、将光标定位到层内，单击“表格”按钮，插入一个2行4列，宽：500px，高：271px，间距：5，对齐：居中对齐，边框：1，边框颜色：#996600，背景图像：right_bak.jpg 的表格。

20、合并第1行的单元格，设置该行高：83px，边框：#FF99CC，输入文字“动物类：”，字体为“黑体”。

21、在第2行的4个单元格内分别插入图像“animal1.jpg”，“animal4.jpg”，“animal3.jpg”，“animal2.jpg”，设置图像:宽“100”，高“150”，“居中对齐”，设置该行的边框颜色：#FF99CC。

22、按【Ctrl+S】将该网页保存为dongwu.html。

23、重复步骤18-22，制作chahua.html，haiyang.html，youpiao.html；并将其中的图像替换掉即可。

24、新建一个文档，将si.txt的内容复制，粘贴到该文档中，选中所有文字，设为“居中对齐”，选中标题“献给我的同代人”，设置颜色“#990000”。

25、按【Ctrl+S】将该网页保存为sige.html。

26、新建一个文档，将“爱情人生.doc”导入到该文档中，选中所有的文字，设置“左对齐”，将光标定位到标题“爱情人生”，敲“回车键”，选中该文字，设置颜色“#FF0000 ”，“居中对齐”。

27、按【Ctrl+S】将该网页保存为sanwen.html。

28、回到index.html，选中文字“动物类”，打开属性面板，设置链接：dongwu.html，目标：mainFrame。

29、同理分别选中文字“插花类”，“海洋类”，“邮票类”，打开属性面板，分别设置链接：chahua.html，haiyang.html，youpiao.html，目标都为：mainFrame。

30、选中文字“诗歌”，打开属性面板，设置链接：sige.html，目标：leftFrame或_self。

31、选中文字“散文”，打开属性面板，设置链接：sanwen.html，目标： _black。

32、按【Ctrl+S】保存该网页。

33、回到index.html，按【F12】预览。

五、思考题

创建完框架集后，选择“文件|保存全部”，有的同学没有按要求将框架页保存为top.html、left.html、main.html，而是保存为默认的文件，当他发现没按要求保存时又把相应的文件重命名为top.html、left.html、main.html，但是预览框架集文件index.html 时，发现框架页显示“该页无法显示”，问题出在哪？怎么修改？