实验五框架型的制作.doc

实验五　框架型网页的制作 一、实验目的 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、按【Ctr