制作框架网页
第五课制作框架网页
教学目标:
1.掌握拆分单元格的方法。
2.掌握创建与保存框架集的方法。
3.熟练掌握利用鼠标经过图像制作网页导航的方法。
4.掌握外部链接和链接的制作方法。
5.掌握目标设置在网页制作过程中的作用和方法。
教学重点:
培养学生的兴趣。
教学媒体:远程教育资源
教学课时:3课时
教学过程
授课日期:4月5日-4月23日
一:引课
在进行网站制作的时候,为了有效地统一网站的风格,常常需要将页面划分成多个区域,将各个网页的相同内容(如网站标题、网站导航等)
固定在一个区域中,使网站导航结构清晰。利用框架可以轻松实现网
页结构划分和布局。
演示网页范例:给学生展示一些比较有特点的使用了框架的网页范例,通过观察了解网页布局的基本规律和框架在网页中的作用,对框架有一个初步
的了解和感性认识。
文件名的命名规则提出任务:用两节课时间,学习如何创建框架、制作框架网页。在制作的过程中,要注意随时保存文件。
二:(1)创建和保存框架集
利用“新建文档”的方式创建框架集,是比较直接的创建框架的方法。根据实际网页布局的需要,可以方便地选择框架集的样式,从而创建合适的框
架。
步骤1:执行“文件”→“新建”命令,选择常规标签,选择框架集选项。单击创建按钮。
步骤 2:执行“文件”→“保存全部”命令。打开另存为对话框。双击frame 文件夹,将文件保存在frame文件夹中。
重命名框架集文件名为all.html,单击保存按钮;重命名下框架集文件名为main.html,单击保存按钮;重命名上框架文件名为top.html,
单击保存按钮即可。
步骤 3:单击框架面板中的边缘部分,选中框架集,在“属性检查器”中设置框架集的属性。
(2)利用鼠标经过图像制作导航按钮
鼠标经过图像由页面载入时显示的原始图像和鼠标指针经过时显示的图像组成,这两个图像应大小相等,如果图像大小不等,将自动调整第
2个图像的大小以匹配第1个图像的属性。在浏览器中当鼠标指针移
过图像时,图像可以发生变化,利用鼠标经过图像的这种特殊效果,
可以制作动态网页导航按钮。
为了制作出效果特殊的鼠标经过图像,所需的原始图像和鼠标经过时显示的图像需要通过图像处理工具进行制作和处理。注意引导鼓励学生
自己处理制作图像,以彰显学生个性,培养学生的创造能力。
(3)表格的高级应用
在本课的任务中,表格被广泛应用,在规则表格的基础上,通过合并单元格制作不规则的表格,以实现网页布局的特殊需要。
①合并单元格
选中需要合并的单元格,通过以下四种方法可以实现:
a. 执行“修改”→“表格”→“合并单元格”命令。
b. 在选中的单元格上右击,执行“表格”→“合并单元格”命令。
c. 按下组合键CTRL+ALT+M。
d. 单击“属性检查器”中的“合并所选单元格,使用跨度”按钮。
②设置单元格背景
结合插入图像和设置单元格背景,可以实现如教材图5.18所示的图像表格效果。
用作表格边框的图像文件,需要利用图像处理工具进行加工处理,以
符合页面布局的需要。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。