网页制作中的“调味剂”——《客户端脚本语言》教学设计【教材分析】:本小节课选自教育科学出版社《网络技术应用》第五章第二节,主要介绍客户端脚本语言JavaScript的应用,展示JavaScript制作的动态网页效果。本节内容是对必修所学知识技能的加强与提升,对学生实际操作能力有较高的要求,相对以前较有难度。【学生分析】:学生都畏惧纯语言性的代码,担心因没有接触过编程而看不懂HTML代码,所以学习这部分内容,总有学生消化不了要点而提不起学习精神。学生原有的网页制作基础仅限于在所见即所得的平台中插入相应的可视化对象,如同于word编辑文档的操作。【设计思想】:为了消除学生学习中的畏难情绪,引导学生挖掘教材知识点内在的逻辑性,帮助学生从知识发展的生成性中建构完美的知识结构,本节课设计了四个深浅适宜的问题,以“旧”导“新”,层层递进,巧妙地融合教材内容,并通过范例教学法、比较法,帮助同学澄清认知上的误区,感性认识客户端脚本语言在HTML的应用。【教学目标】:知识与技能:(1)初步认识网页脚本,了解脚本功能;(2)能实现简单的网页特效;(3)了解常见的HTML代码,有能力的同学可进行代码的适当修改;过程与方法:通过范例教学,从模仿中探索、在探索中改进,循序渐进地认识客户端脚本语言;情感态度价值观:合理运用网页特效,提升网页的生气,增强自身的网页审美能力,提高网页制作水平。【教学重点与难点】:重点:客户端脚本语言在网页中的应用;难点:在网页的适当位置插入网页客户端脚本,突出动态效果;【教学策略】:采用任务驱动教学模式进行教学,理论和实践的结合,化难为易,提高学生的学习兴趣。【教学环境】:多媒体微机教室、网络广播软件、多媒体课件【教学过程】:欣赏网页特效,如:跟随鼠标的图片、日期时间表盘、由下而上的字幕滚动效果、浮动的广告图片等,引出学习主题——客户端脚本语言,把学生生活中悉知的事实与知识概念相结合,提升理论基础,激发学习热情。(一)、学前热身参照信息学业水平测试题型,提供“留白”网页,利用操作比较法,区分gif格式与swf格式的不同之处,复习回顾,同时突出上述动画效果不属于动态HTML效果,即不属于客户端脚本语言。任务一:“热身”训练。打开index.htm页面,在信息提示处完成相应操作。(1)插入robot.gif动画(2)插入logo.swf动画问题:浏览网页效果,比较gif格式动画的插入方法与flash动画的插入方法相同吗?以上“动”的效果属动态HTML效果吗?任务二:浏览index.htm的“HTML”视图,查看任务一的操作,“单元格”、“图片”标签各为何?认识基本的HTML标签。为嵌入客户端脚本语言作铺垫,认识HTML标签及其属性。将相应标签写在黑板上易于讲解嵌入JavaScript的编写原则,加强学生记忆。(二)、实战模仿输入简单源代码或自行修改代码能提高学生对脚本细节的认识。从错误中建构、完善知识结构更易让人记忆深刻。任务三:写一写。打开index.htm页面,弹出警示窗口。(1)弹出警示窗口:提示内容“欢迎访问机器人做学玩网站!”(alert语句)变一变:连续弹出警示窗口,如何实现?(2)若多个页面中用到相同的JavaScript功能,如何实现?问题:能否实现弹出警示窗口,观察上述的源代码,若不能实现,原因是什么?此部分内容较难理解,故借助课本范例,引导学生先模仿再探索。通过点评学生的讨论、板书,比较不同的JavaScript源代码实现效果的异同点,引导学生发现嵌入JavaScript代码的共性,掌握规律,从而使学生在实践中归纳出实现JavaScript效果的方法。(三)、应用与提升任务四:通读提供的代码,打开index.htm页面(1)提示处插入“系统日期”代码,并修改日期字体颜色。(2)提示处插入“滚动字”代码,并修改相应内容。从模仿到应用,启发学生利用所给的不同源代码迁移到其他效果练习上,教师巡视作出必要的指导。修改相应内容则体现学生对代码的认识程度,个性化内容更能激发学生的学习兴趣。(四)、回归目标任务四:欣赏“来自地狱的网站”中的部分网站,讨论“差”在何处。问题:网页制作技术与内容孰重孰轻?如何合理使用JavaScript特效?“来自地狱的网站”致力于...