文档介绍：动态HTML,让网页更生动!
教学内容分析
教育科学出版社《网络与技术应用(选修)》第五章是对动态网页制作的系统介绍。作为动态网页的重要组成部分,动态HTML是本章知识的一个重点。利用动态HTML在网页中制作出动态效果,是学生比较感兴趣的学****内容。对于高中学生,需要了解动态HTML的特点,掌握制作动态HTML的方法,并加以运用。
学情分析
作为四星级高中的高一学生,具备一定的自主学****能力,经过第四章《建立主题网站》的学****对网页的制作已有一定的基础,对Frontpage2000的操作也比较熟练,对网页的美化普遍很感兴趣。在本节课之前,对“HTML基本结构”这一知识点有基本的认识。
教学目标分析
知识与技能:
了解动态HTML,实现简单的动态HTML效果;
能够在适当位置复用JavaScript代码,并对代码适当修改;
过程与方法:
根据网页的性质、特点选择适当的网页特效;
情感态度与价值观:
体验成功的喜悦,激发对网页制作的兴趣。
教学重点
了解动态HTML的特点;
JavaScript代码的结构及使用方法;
根据需要修改JavaScript代码。
教学难点
复用JavaScript代码,并根据需要修改代码;
根据网页性质、特点制作恰当的特效。
教学方法与策略
教学方法:任务驱动、演示法、自主探究
教学策略:
本节课采用任务驱动为主体的教学模式,设计了4个任务,通过任务1,让学生认识动态HTML;通过任务2,让学生了解实现动态HTML的工具之一——JavaScript;通过任务3,,让学生理解JavaScript 的使用;通过任务4,让学生根据实际情况综合运用动态HTML。在任务的驱动下,依托moodle平台,以学生自主探究为主,培养学生动手操作的能力,在实践过程中,充分理解并运用知识点,激发学生的学****兴趣,提高学生的信息素养。
教学课时:2课时
教学过程:
教学
环节
教师活动
学生活动
设计意图
情景
引入
对比两张网页,分析动态效果,指出为页面增色的元素:动态HTML
观察两张网页,指出第二张页面中的各种特效
通过网页特效,引出课题,激发学生兴趣
探
究
新
知
一、动态HTML
1. 什么是动态HTML?
提出问题1:如何在网页中实现动态HTML效果?
请学生自学知识点,尝试任务1。
请学生展示各自完成的网页动态效果。
引导学生总结动态HTML的特点:不依附于网络,离线状态仍能正常显示。
自学moodle平台中的知识点,根据提示,制作简单的动态HTML效果。
完成任务1。
体会动态HTML的特点
通过实践,以简单的例子引入,激发学生兴趣。
引导学生归纳总结
二、JavaScript
1. 展示第三张特效网页,指出实现动态HTML的方法之一: JavaScript
2. 介绍JavaScript ,指导学生自学JavaScript的基本结构
提出问题2:如何为网页加入JavaScript特效?
请学生自学知识点,尝试任务2。
请出现问题的学生展示网页,及时纠正错误,指出添加JavaScript的正确位置,并强调Script标签的基本结构。
自学moodle平台中的知识点,识别JavaScript的基本结构。
通过实践,尝试添加JavaScript的基本方法。
完成任务2。
观察同学的错误,指出原因。
让学生根据提示,认识并运用JavaScript,实现简单的JavaScript效果,激发学生深入学****的欲望。
通过错误的演示,让学生自己发现错误,并纠正。
3. 提出问题3:能否利用JavaScript添加更生动的动态效果?
指出JavaScript的运用方法之一:代码复用。
请学生自学知识点,尝试任务3中的第1个小任务。
4. 提出问题4:如何修改代码,得到符合我们需要的效果?
请学生尝试任务3中的第2个小任务。
请学生演示操作,及时发现问题。
指导学生总结。
自学moodle平台中的知识点。通过实践,掌握JavaScript代码复用的方法。
尝试修改JavaScript代码。完成任务3。
个别学生演示,对比自己的操作过程,总结添加JavaScript的步骤
加深Script标签印象,掌握JavaScript代码复用,并通过修改,得到合适的特效。
引导学生归纳总结。
5. 提出问题:能否根据不同网页的不同性质,添加各种特效?
请几位学生展示自己的成果,谈谈作品的设计初衷和特点。
指出JavaScript运用中较为普遍的错误,强调代码添加的正确位置
6. 根据学生的作品,分析动态HTML的设计原则:
根据网页的不同特点添加网页特效,