《动态HTML让网页更生动！.doc》由会员分享，可在线阅读，更多相关《动态HTML让网页更生动！.doc（13页珍藏版）》请在三一办公上搜索。
1、动态HTML，让网页更生动！一、 教学内容分析教育科学出版社网络与技术应用（选修）第五章是对动态网页制作的系统介绍。作为动态网页的重要组成部分，动态HTML是本章知识的一个重点。利用动态HTML在网页中制作出动态效果，是学生比较感兴趣的学习内容。对于高中学生，需要了解动态HTML的特点，掌握制作动态HTML的方法，并加以运用。二、 学情分析作为四星级高中的高一学生，具备一定的自主学习能力，经过第四章建立主题网站的学习，对网页的制作已有一定的基础，对Frontpage2000的操作也比较熟练，对网页的美化普遍很感兴趣。在本节课之前，对“HTML基本结构”这一知识点有基本的认识。三、 教学目标分析
2、知识与技能：1. 了解动态HTML，实现简单的动态HTML效果；2. 能够在适当位置复用JavaScript代码，并对代码适当修改；过程与方法： 根据网页的性质、特点选择适当的网页特效；情感态度与价值观：体验成功的喜悦，激发对网页制作的兴趣。四、 教学重点1. 了解动态HTML的特点；2. JavaScript代码的结构及使用方法；3. 根据需要修改JavaScript代码。五、 教学难点1. 复用JavaScript代码，并根据需要修改代码；2. 根据网页性质、特点制作恰当的特效。六、 教学方法与策略教学方法：任务驱动、演示法、自主探究教学策略：本节课采用任务驱动为主体的教学模式，设计了4个
3、任务，通过任务1，让学生认识动态HTML；通过任务2，让学生了解实现动态HTML的工具之一JavaScript；通过任务3，让学生理解JavaScript 的使用；通过任务4，让学生根据实际情况综合运用动态HTML。在任务的驱动下，依托moodle平台，以学生自主探究为主，培养学生动手操作的能力，在实践过程中，充分理解并运用知识点，激发学生的学习兴趣，提高学生的信息素养。七、 教学课时：2课时八、 教学过程：教学环节教师活动学生活动设计意图情景引入对比两张网页，分析动态效果，指出为页面增色的元素：动态HTML观察两张网页，指出第二张页面中的各种特效通过网页特效，引出课题，激发学生兴趣探究新知一
4、、动态HTML1. 什么是动态HTML？提出问题1：如何在网页中实现动态HTML效果？请学生自学知识点，尝试任务1。请学生展示各自完成的网页动态效果。2.分析动态HTML的特点引导学生总结动态HTML的特点：不依附于网络，离线状态仍能正常显示。自学moodle平台中的知识点，根据提示，制作简单的动态HTML效果。完成任务1。体会动态HTML的特点通过实践，以简单的例子引入，激发学生兴趣。引导学生归纳总结二、JavaScript1. 展示第三张特效网页，指出实现动态HTML的方法之一： JavaScript 2. 介绍JavaScript ，指导学生自学JavaScript的基本结构提出问题2：
5、如何为网页加入JavaScript特效？请学生自学知识点，尝试任务2。请出现问题的学生展示网页，及时纠正错误，指出添加JavaScript的正确位置，并强调Script标签的基本结构。自学moodle平台中的知识点，识别JavaScript的基本结构。通过实践，尝试添加JavaScript的基本方法。完成任务2。观察同学的错误，指出原因。让学生根据提示，认识并运用JavaScript，实现简单的JavaScript效果，激发学生深入学习的欲望。通过错误的演示，让学生自己发现错误，并纠正。3. 提出问题3：能否利用JavaScript添加更生动的动态效果？指出JavaScript的运用方法之一：
6、代码复用。请学生自学知识点，尝试任务3中的第1个小任务。4. 提出问题4：如何修改代码，得到符合我们需要的效果？请学生尝试任务3中的第2个小任务。请学生演示操作，及时发现问题。指导学生总结。自学moodle平台中的知识点。通过实践，掌握JavaScript代码复用的方法。尝试修改JavaScript代码。完成任务3。个别学生演示，对比自己的操作过程，总结添加JavaScript的步骤加深Script标签印象，掌握JavaScript代码复用，并通过修改，得到合适的特效。引导学生归纳总结。5. 提出问题：能否根据不同网页的不同性质，添加各种特效？ 请几位学生展示自己的成果，谈谈作品的设计初衷和特
7、点。指出JavaScript运用中较为普遍的错误，强调代码添加的正确位置6. 根据学生的作品，分析动态HTML的设计原则：（1）.尽量精简，不要过于繁复；（2）过度的闪烁让人头痛；（3）合理使用滚动字幕等。根据网页的不同特点添加网页特效，并根据自己的实际水平选择难度适当的代码进行修改。完成任务4。观察他人的作品，并进行评价。总结动态HTML的设计原则。任务分层设计，学生根据自身情况选择，理解添加动态网页的目的。巩固操作知识点。通过对他人作品的观察，从操作技术和实际效果两个方面进行评价。根据学生的作品，引导学生归纳总结网页特效的设计原则。总结评价1. 总结知识点2. 对学习过程做出评价：利用moodle平台“随堂测试”，并及时将结果以图表形式向学生展示回顾本节学习内容，完成知识点测试，了解自身学习情况总结知识点，根据教师展示的“知识点掌握情况图表”，反思自己的学习过程课后探索动态HTML的实现除了利用“动态HTML效果”工具栏和JavaScript，还有其他方法吗？课后预习CSS样式表为下次课的内容作知识铺垫附一：课堂任务内容任务1：任务2：任务3：任务4：附二：moodle平台截图附三：课堂小测验附四：测验成绩反馈图表参考资料：1. 江苏省普通高中信息技术课程标准教学要求
