正在加载数据...

最新推荐

  • 暂无资料

热点排行

  • 暂无资料
扫码可在移动端浏览

制作网页特效

作者:董丽红 来源:点击数: 发布时间:2019年04月10日

制作网页特效   

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  

收藏 打印文章

上一篇:图像处理-抠图(导学案)

下一篇:没有了!