第13课 制作框架网页
教学目标： 1.掌握表格的拆分与合并。
2.学会创建框架、制作框架网页和保存框架网页。
3.能制作鼠标经过图像的动态效果。
4.学会制作超级链接和电子邮件链接。
5.掌握目标设置在网页制作过程中的作用和方法。
教学重点：创建框架和制作框架网页。
教学用具：多媒体网络教室。
教学方法：讲解、学生练习。
时间安排：2节课
教学过程：
一、课程导入
一个网站常常划分成多个区域，对于每个区域来说，其色彩搭配、网站风格、网站标题、网站导航都是统一的。为了能做到这种统一，我们每个网页中相同的内容固定在一个区域。我们通过创建框架制作框架网页，可以轻松实现网页结构划分和布局。看一个使用了框架的网页范例，师大资源网（http://source.xjnu.edu.cn）。使大家对框架有一个初步的了解和感性认识。
二、新课讲授
1.新建站点
（1）将“安全自护我能行”站点文件夹safe传到学生机。
（2）新建站点。
2.创建框架和框架集
制作框架网页的前提是创建框架，并根据网页布局设计框架的样式，然后再具体设计制作网页的内容。
（1）规划“框架”文件夹。
（2）新建框架集
步骤1：执行“文件”——》“新建”命令，打开“新建文档”对话框，在 “类别”中选择 “框架集”。
步骤2：单击“创建”按钮，在弹出对话框中单击“确定”，框架创建完成。
（3）保存框架集
步骤1：执行“文件”——》“保存全部”命令，保存到frame文件夹中。
步骤2：重命名框架集文件和每个框架文件。
（4）设置框架和框架属性
框架的属性包括框架名称、源文件、边距、尺寸、滚动条等；框架集的属性包括框架面积、框架边界颜色、距离等。
步骤1：执行“窗口”——》“框架”命令，打开框架面板。
步骤2：单击“框架”面板中的框架边缘部分，选中框架集，在 “属性”面板中设置框架集的属性。
步骤3：单击“框架”面板中的topFrame框架和mainFrame框架，在“属性”面板中设置所选框架的属性。
（5）制作框架网页
①制作上框架网页
步骤1：打开网页top.html，设置背景颜色#EAFF8A，上边距为0像素。
步骤2：插入一个2行5列的表格并调整行列的高宽。。。。。。
步骤3：在导航表格中，设置鼠标经过图像。
步骤4：为图片添加超链接，设置打开方式（目标）。
②制作下框架网页
步骤1：打开网页main.html，设置背景颜色#EAFF8A，上边距为0像素。
步骤2：插入一个5行9列的表格并调整行列的高宽。。。。。。
步骤3：合并相关单元格。
步骤4：插入图片，并为图片添加超链接。
步骤5：添加邮件链接。
三、学生练习
学生小组合作完成书上的练习任务，并将任务上交到教师机。
四、作品评价
对于较快完成任务并且完成任务较好的同学进行表扬鼓励。
五、本课小结
1.创建框架，实现网页风格的统一，保存框架时，需要保存框架集文件和含有框架的所有文件。
2.利用鼠标经过图像，可以制作网页导航动态按钮。
3.超级链接是实现网页互联的关键，设置网页的打开方式，可以调整链接网页的显示位置。