《让网页动起来----动态HTML》教学案例.docVIP

《让网页动起来----动态HTML》教学案例 　　一、案例背景信息 　　模块、章节：《网络技术应用》（选修3）第五章第一节 　　教材版本：广东教育出版社 　　年级：高二 　　二、教学设计 　　（一）教学内容分析 　　本课内容主要是动态HTML中的JavaScript脚本语言的应用。JavaScript代码能够令网页中出现动态的效果，这是比较受学生欢迎的学习内容。对于普通高中学生，仅需要了解如何在网页中适当位置加入JavaScript代码即可，无需深入了解JavaScript代码的组成以及原理。因此我将本课的重点定为：1、掌握加入JavaScript代码的方法2、能够在指定位置加入JavaScript代码。 　　（二）教学对象分析 　　本课的教学对象是桂城中学的高二学生。在学习本课之前，他们已经学习了用Dreamweaver制作网页的基本方法，能够制作简单的网页，但不熟悉HTML标记语言。因此在学习粘贴JavaScript代码前，应先讲解HTML的基本结构，让学生对HTML有一个基本的认识。 　　（三）教学目标分析 　　知识目标 　　掌握：（1）在HTML中加入JavaScript代码的方法； 　　（2）能够在指定位置加入JavaScript代码； 　　（3）修改JavaScript代码中文字属性的方法。 　　综合应用：能够根据网页的内容、风格选择适当的网页特效。 　　2.能力目标 3.情感目标 2.能够在指定位置加入JavaScript代码。 2.能够在指定位置加入JavaScript代码。 1.范例教学：为了让学生尽快掌握在HTML中加入JavaScript代码的方法，我首先采用范例教学的策略。本课以一个简单的鼠标跟随文字特效制作为引入例子，让学生了解制作JavaScript特效的基本方法，并要求学生完成同样的特效制作。务求从简单任务入手，让学生从成功的体验中感受到JavaScript特效的有趣之处，激发学生继续深入学习的欲望。 　　（一）教与学的过程描述 　　教学 　　环节 　　教师活动 　　学生活动 　　对学生学习过程的观察与考查 　　信息技术的应用 　　创设情景、引入课题 　　(1分钟) 　　1.展示两张网页，要求学生观察对比，找出不同。 2.分析第二张网页，因为其页面有网页特效因此令页面生色不少。引出学习内容：动态HTML。 1.指出实现动态HTML的方法之一：加入JavaScript代码 2.解释什么是JavaScript. 3.HTML的基本结构：展示教学范例网页的源文件，分析其HTML标记语言的组成。 4.演示在网页中加入鼠标跟随文字特效的操作过程，并板书总结操作步骤。 1.提出问题：如何修改鼠标跟随文字的大小、颜色等等相关属性?布置任务一：制作一段鼠标跟随文字效果。（见附件1） 2.指导学生完成练习、开展小组学习，引导学生间进行讨论，发现问题、总结方法。 1.邀请其中一个学习小组演示修改文字相关属性的操作，引导两位成员总结出修改JavaScript代码的方法。 2.总结在JavaScript代码修改文字属性的方法。 1.同组的两位同学合作回答教师的问题。 2.观察同学的操作演示，听取同学的学习小结。 1.布置任务二：学习在网页中加入其他网页特效的方法（见附件1）。 2.指导学生完成练习。 1.邀请学生展示自己的成果，并介绍操作方法，将学习成果与同学们共同分享。主要介绍两方面： 2.小结练习二：指出学生在练习中容易出现的错误，再次强调如何找到指定位置加入JavaScript代码。 1.回顾本课主要知识点。 2.情感教育：展示毛泽东纪念馆网站，让学生思考在该网站能够加入一些活泼可爱的鼠标跟随代码？ 1.引入课题：好的开始是成功的一半，为了能够激发学生的学习欲望，我设计了两张内容、排版、美工设计完全一样的两张网页，不同在于第二张网页加了三处网页特效。我首先要求学生观察这两张页面找出不同，这样很快就能让学生感受到动态HTML的精彩之处，同时也让学生对如何实现动态HTML感到好奇。 2.学习评价的实现：本课的学习评价主要通过两种方式实现：1、学生练习成果展示。每次任务后，我均安排完成得比较好的学生展示他的练习成果，同时介绍操作经验。这样，不仅能让该学生完成自我学习的小结及评价，同时也能让其余学生通过比较找出差距，对自己的练习过程、练习成果做一次自我评价。2、通过教学论坛进行教学调查。课前我在教学论坛中发表用于进行教学调查及学习反思的帖子，学生可以通过投票的方式选出自己还未掌握的知识点。通过教学调查，可以让学生对本课的学习效果进行一次评价。 3.学习反思的实现：有效的学习反思有助于学生梳理知识体系，为此我在下课前预留5分钟让学生通过回复帖子进行学习反思，主要做三项内容：1、教学调查；2、写出本课的学习感受；3、粘贴出精彩