制作网页特效
16（11）班
网站建设与管理
2016年10月26号
1、掌握运用onMouseOver事件制作样式特效。
2、掌握运用onMouseOut事件制作样式特效。
二、过程与方法目标
1、让学生掌握常见的网页样式属性
2、让学生掌握给事件添加代码的格式
三、情感、态度、价值观目标
1、让学生网络在我们生活中巨大作用。
2、培养学生主动学习、大胆创新、认真细致的学习习惯。
新授课
1课时
onMouseOver和onMouseOut事件在网页中的应用。
事件代码的编写。
如何将网页样式特效和事件联系起来。
直观演示法、活动探究法、小组合作学习法。
多媒体教学设备。
一、复习提问：
1、如何在页面中添加JavaScript脚本？
<SCRIPT language=“JavaScript” type=“text/JavaScript”>
……编写的脚本代码…..
</SCRIPT>
JavaScript<head>
二、
(javascript)
三、
1、
2、onMouseOveronMouseOut
onMouseOver
onMouseOut
31—
（1）效果展示：
制作随鼠标移动而变化文字背景的页面
（2）案例分析：
当前对象：文字。
触发事件：onMouseOver事件和onMouseOut事件。
网页特效：文字背景发生改变。
老师先演示任务效果，引导学生分析：当前对象是什么？触发哪些事件？对象的什么样式发生的改变？
页面代码…
<TR>
<TD width="444" height="23" align="right">会员名： </TD>
<TD width="454"><INPUT type="text" class="txtBorder" size="19"
onMouseOver="this.style.borderColor='blue'" onMouseOut="this.style.borderColor='' "></TD>
</TR>…页面代码…
43—（老师引导、学生自主学习）
1
2
l如何在页面添加图片?
<IMG src=“images/pic1.jpg”>
l如何在脚本中指定图片路径?
<IMG src=“images/pic1.jpg”
onMouseOver=“this.src=‘images/pic2.jpg’”
onMouseOut=”this.src=’images/pic1.jpg’”>
页面代码
–<TR>
– <TD width="27%"><IMG src="images/bg2.jpg"></TD>
– <TD width="36%">
–<IMG src="images/p1.jpg" onMouseOver="this.src='images/p2.jpg'" onMouseOut="this.src='images/p1.jpg'" >
–</TD>
– <TD width="37%"><IMG src="images/bg3.jpg"></TD>
– </TR>
–…页面代码…
四、
1
2
3
1
2
