应用动态html教学反思,理解动态HTML教学的设计.doc

理解动态HTML教学的设计

理解动态HTML教学的设计

优质课展台

2012年10月底，江南大学举办的“国培计划”高中信息技术教师研修班在无锡市天一中学开课，听了由夏燕萍和马畅两位老师上的两节《理解动态HTML》的同题异构课。两位老师的教学方式各有千秋，在同一教学内容的处理方面显现了各自的特点，我们又邀请了湖南的张葵老师为此次同课异构的两节课做了点评。

● 教材分析

《理解动态HTML》是教育科学出版社出版的高二选修《网络技术应用》第五章第二节。第四章是“建设主题网站”，本章所学的技术正好能够用在主题网站上，可以使网页更加生动活泼，具备更丰富、更个性化的交互功能。本章的第一节《认识动态网页》主要阐述了“动态HTML”、“动态网页”的概念以及“动态网页和静态网页的比较”等问题，并且教会学生使用FrontPage自带的“动态HTML效果”来实现一些简单的网页特效。本节课的内容分为两部分，分两课时来上。第一课时主要介绍动态HTML的核心技术，着重讲解客户端脚本语言和JavaScript的概念，以及使用JavaScript脚本的两种方式。第二课时则是介绍CSS层叠样式表的概念和三种使用方式，为第三节《应用动态HTML》的教学做好铺垫。

● 学生分析

通过第四章以及本章第一节的学习，学生已经对网页、HTML标记语言及动态HTML等概念有了比较清晰的认识，也掌握了基本的网页设计技能。为了承前启后，并且激发学生的兴趣，本节课提供了两个主题网站，请学生为其添加动态效果。由于是借班上课，主题网站是笔者的学生做的，开课班的学生对网站内容不完全熟悉，操作起来稍有难度。学生一般会对网页代码产生畏难情绪，而本节课的重点并不在JavaScript脚本语言上，只要求学生能在网页源代码中识别JavaScript脚本，并能将脚本代码插入到网页的适当位置即可。因此，对知识与技能的要求并不高，但要将脚本运用得恰到好处，对学生的技术运用能力有一定的挑战。

● 教学目标

知识与技能目标：初步了解动态HTML的三个核心技术；理解客户端脚本语言和JavaScript的概念；学会在HTML中嵌入JavaScript脚本，并能做适当修改；学会建立JavaScript脚本文件，并能在网页中调用；能够根据网页的内容、风格选择适当的网页特效。

过程与方法目标：通过半成品加工掌握JavaScript脚本的使用方法；通过学习网站，学会自主学习，掌握知识及技能；通过作品交流，培养表达、交流和鉴赏能力。

情感态度与价值观目标：通过网页欣赏和制作，培养发现美、欣赏美和创造美的意识和能力；通过学习和应用客户端脚本，培养严谨、细致的学习习惯，体验技术的魅力和价值，提高学习兴趣；通过作品交流，增进同学间互动，学会分享和倾听，体验成功喜悦和同学友谊。

● 教学重、难点

重点：客户端脚本和JavaScript的概念，网页中使用JavaScript脚本的两种方法。

难点：动态HTML和客户端脚本的概念，JavaScript脚本代码的识别及修改。

● 教学策略

本节课采用基于学习网站的自主学习方式，引导学生主动探索动态HTML的奥秘，理解客户端脚本语言及JavaScript代码的概念，学会在网页中运用JavaScript脚本的两种方式，并运用到练习网站中，最后通过作品交流来分享技术和成果。在新课导入中，以两个有趣的动态网页为例，揭示动态HTML的三大核心技术，用以激发学生兴趣。在知识要点中，教师简明扼要地介绍了相关概念和技术要领。在学习活动中，教师循序渐进地安排了三个任务，分别是嵌入JS脚本、自选脚本及调用JS文件的练习。在作品交流中，教师要求学生介绍并演示自己在练习网站中所用的JS效果，分享练习感受，并推荐其他学生的作品。

● 教学过程

1.情境导入(5分钟)

师：请同学们打开浏览器，访问学习网站http：//00/，使用学号登录网站。打开左侧“新课导入”栏目，查看两个动态网页实例及技术揭秘，并验证。

学生登录网站并访问相应网页。学生打开实例一：Happy halloween(万圣节快乐)，如图1，网页一中会弹出两个对话框，还能用鼠标让南瓜图片跳舞。查看网页一的源代码，查找关键词“Script”和“Document”。学生打开实例二：Slide Bar(网页调色板)，如图2，可以移动网页二中的三个滑块，实现调色板功能。查看网页二的源代码，找到关键词“Script”、“Document”及“Style”。

教师解释关键词的含义，引入动态HTML的三大核心技术：客户端脚本(Script)、文档对象模型(DOM)和层叠样式表(Style)。

2.新知导学及学习活动(35分钟)

(1)新知导学

教师打