制作网页特效

2016
11/03
00:00
作者:董丽红

制作网页特效   

1611)班  

网站建设与管理  

20161026  

  

  

  

1、掌握运用onMouseOver事件制作样式特效。  

2、掌握运用onMouseOut事件制作样式特效。  

二、过程与方法目标  

1、让学生掌握常见的网页样式属性  

2、让学生掌握给事件添加代码的格式  

三、情感、态度、价值观目标  

1、让学生网络在我们生活中巨大作用。  

2、培养学生主动学习、大胆创新、认真细致的学习习惯。  

新授课  

1课时  

onMouseOveronMouseOut事件在网页中的应用。  

事件代码的编写。  

如何将网页样式特效和事件联系起来。  

直观演示法活动探究法、小组合作学习法。  

多媒体教学设备。  

  

一、复习提问:  

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">会员名:&nbsp;&nbsp;</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  

作者:董丽红  612

版权所有© 郑州市信息技术学校 地址:郑州市郑东新区金龙路188号  邮编:451464
电话:党政办公室 (0371)-61130909  招生就业处 (0371)-61130911  实训处 (0371)-61130921
国家信息产业部ICP备案:
豫ICP备20022638号-1