本站原创优质课展台
2012年10月底,江南大学举办的“国培计划”高中信息技术教师研修班在无锡市天一中学开课,听了由夏燕萍和马畅两位老师上的两节《理解动态HTML》的同题异构课.两位老师的教学方式各有千秋,在学内容的处理方面显现了各自的特点,我们又邀请了湖南的张葵老师为此次同课异构的两节课做了点评.
● 教材分析
《理解动态HTML》是教育科学出版社出版的高二选修《网络技术应用》第五章第二节.第四章是“建设主题网站”,本章所学的技术正好能够用在主题网站上,可以使网页更加生动活泼,具备更丰富、更个性化的交互功能.本章的第一节《认识动态网页》主要阐述了“动态HTML”、“动态网页”的概念以及“动态网页和静态网页的比较”等问题,并且教会学生使用FrontPage自带的“动态HTML效果”来实现一些简单的网页特效.本节课的内容分为两部分,分两课时来上.第一课时主要介绍动态HTML的核心技术,着重讲解客户端脚本语言和JaScript的概念,以及使用JaScript脚本的两种方式.第二课时则是介绍CSS层叠样式表的概念和三种使用方式,为第三节《应用动态HTML》的教学做好铺垫.
● 学生分析
通过第四章以及本章第一节的学习,学生已经对网页、HTML标记语言及动态HTML等概念有了比较清晰的认识,也掌握了基本的网页设计技能.为了承前启后,并且激发学生的兴趣,本节课提供了两个主题网站,请学生为其添加动态效果.由于是借班上课,主题网站是笔者的学生做的,开课班的学生对网站内容不完全熟悉,操作起来稍有难度.学生一般会对网页代码产生畏难情绪,而本节课的重点并不在JaScript脚本语言上,只要求学生能在网页源代码中识别JaScript脚本,并能将脚本代码插入到网页的适当位置即可.因此,对知识与技能的要求并不高,但要将脚本运用得恰到好处,对学生的技术运用能力有一定的挑战.
● 教学目标
知识与技能目标：初步了解动态HTML的三个核心技术；理解客户端脚本语言和JaScript的概念；学会在HTML中嵌入JaScript脚本,并能做适当修改；学会建立JaScript脚本文件,并能在网页中调用；能够根据网页的内容、风格选择适当的网页特效.
过程与方法目标：通过半成品加工掌握JaScript脚本的使用方法；通过学习网站,学会自主学习,掌握知识及技能；通过作品交流,培养表达、交流和鉴赏能力.
情感态度与价值观目标：通过网页欣赏和制作,培养发现美、欣赏美和创造美的意识和能力；通过学习和应用客户端脚本,培养严谨、细致的学习习惯,体验技术的魅力和价值,提高学习兴趣；通过作品交流,增进同学间互动,学会分享和倾听,体验成功喜悦和同学友谊.
● 教学重、难点
重点：客户端脚本和JaScript的概念,网页中使用JaScript脚本的两种方法.
难点：动态HTML和客户端脚本的概念,JaScript脚本代码的识别及修改.
● 教学策略
本节课采用基于学习网站的自主学习方式,引导学生主动探索动态HTML的奥秘,理解客户端脚本语言及JaScript代码的概念,学会在网页中运用JaScript脚本的两种方式,并运用到练习网站中,最后通过作品交流来分享技术和成果.在新课导入中,以两个有趣的动态网页为例,揭示动态HTML的三大核心技术,用以激发学生兴趣.在知识要点中,教师简明扼要地介绍了相关概念和技术要领.在学习活动中,教师循序渐进地安排了三个任务,分别是嵌入JS脚本、自选脚本及调用JS文件的练习.在作品交流中,教师要求学生介绍并演示自己在练习网站中所用的JS效果,分享练习感受,并推荐其他学生的作品.
● 教学过程
1.情境导入（5分钟）
师：请同学们打开浏览器,访问学习网站http：//192.168.1.100/,使用学号登录网站.打开左侧“新课导入”栏目,查看两个动态网页实例及技术揭秘,并验证.
学生登录网站并访问相应网页.学生打开实例一：Happy halloween（万圣节快乐）,如图1,网页一中会弹出两个对话框,还能用鼠标让南瓜图片跳舞.查看网页一的源代码,查找关 键 词 “Script”和“Document”.学生打开实例二：Slide Bar（网页调色板）,如图2,可以移动网页二中的三个滑块,实现调色板功能.查看网页二的源代码,找到关 键 词 “Script”、“Document”及“Style”.
教师解释关 键 词 的含义,引入动态HTML的三大核心技术：客户端脚本（Script）、文档对象模型（DOM）和层叠样式表（Style）.
2.新知导学及学习活动（35分钟）
（1）新知导学
教师打开教学网页“知识要点”,解释动态HTML的三大核心技术.教师强调：我们今天主要学习客户端脚本的使用方法,不要求大家编写脚本,只要学会如何把已有的JaScript脚本运用到网页中.因此,这节课奉行的就是“拿来主义”,关键是怎么拿及怎么放.教师介绍JaScript脚本的使用方法一：嵌入法.
（2）活动一：在练习网站的欢迎页index.上弹出对话框
学生打开学习网站的“资源链接”栏目,在两个练习网站（几米漫画或狼的世界）中任选一个下载到本地机的D盘,解压缩并打开网站首页index.,按照要求完成学习活动.
教师提醒学生：不会时可以观看教师的操作演示,出现错误时可以求助教师和同学.教师及时分析学生中常见的错误：缺少</script>结束标记；单词拼写错误；标点符号使用了全角字符或者输入错误.
设计意图：提供两个练习网站的目的,是希望学生学以致用.两个网站一个以漫画为主题,主色调是白色的,另一个是以狼为主题,主色调为黑色.学生可以选择一个感兴趣的网站,将本节课所学的技术运用到网页中,体现出一定的个性和创造性,获得一点乐趣和成就感.活动一没有提供现成的代码,要求学生自己根据学习网页的提示,在网页中输入代码.这样才能让学生充分暴露操作中的问题,加深对嵌入法和<script>标记的印象,培养耐心细致的操作习惯. （3）活动二：在练习网站中选择合适的网页,为其添加2～3种你喜欢的JaScript特效
学生打开学习网站的“资源链接”栏目,查看教师提供的各种特效,选择自己喜欢的效果.
（说明：下表中“效果一”的演示网页上都提供了现成的脚本代码供学生复制,并指导学生粘贴到网页的具体标记中,所以效果一的难度较低.“效果二”的演示网页中只有文字提示,不提供脚本代码,学生必须自己查看源文件才能找到代码并且要注意观察脚本粘贴的目标位置,所以难度略大.）
教师打开练习网站,演示一个简单的例子,如将“分时问候”效果加入网页.学生选择2～3种特效运用到练习网站中,发现问题或错误可求助教师和同学.教师在教室中巡视,观察学生操作情况,及时给予指导和帮助,并对较普遍的问题予以说明.
设计意图：JaScript特效有很多种,笔者按照类别分别提供了两种特效供学生选用.表格中的特效,从上到下难度也是递进的,目的是让学生了解到越是漂亮的特效,其代码也越复杂,同时为后面调用JaScript文件做好铺垫.
课堂实录：由于特效演示网页上都有具体的提示,告诉学生如何使用脚本,本来笔者不准备演示,学生完全可以直接根据网页的指导操作.鉴于活动一的情况,还是决定演示一个简单的特效“分时问候”,并且选择了背景色为黑色的网页来设置疑难问题：原本黑色的问候语如何能在黑色的背景上显示?由于这个问题可能有一小半学生会碰到（一共两个练习网站,一个是白色基调,一个是黑色基调）,所以笔者认为有必要说明.其实解决方法就是改变问候语的颜色,用到的知识就是HTML代码,只要在嵌入的脚本前后,插入和标记就可以了.这个小问题告诉学生一个道理,任何特效应用到网页上,都有一个适用性问题,遇到问题就要具体问题具体分析了.教师在辅导学生时发现,很多学生选择了效果漂亮、难度较大的鼠标、图片特效.但是由于缺乏网页制作的经验积累,遇到了具体问题又不会解决.这就要求教师加强个别辅导,解决不同学生遇到的各种问题,这一环节的辅导也花费了较多的时间.当然,有相当多的学生完成了想要的特效.
（4）活动三：在练习网站中选择若干网页,使用“调用JaScript文件”的方式实现同一种网页特效
师：不少同学已经实现了较难的页面特效、鼠标特效或图片特效.他们也发现这些特效代码比较复杂,如果想在不同的网页上使用同样的效果,就得重复粘贴多次,有没有更好的办法呢?
教师讲解JaScript脚本的使用方法二：调用法.
教师演示文件调用法实现特效（如文字跟随鼠标）,并设置两个文件同时调用同一个JS文件.同时说明,如果修改JS文件中的内容,会引起两张网页同时变化.
学生在学习网站“资源链接”中,选择合适的特效,建立JS文件,并复制到网站文件夹.打开练习网站的两个页面,插入<script>代码,调用JS文件,保存并预览网页特效.
教师在教室中巡视,观察学生操作情况,及时给予指导和帮助,并指出学生常犯的错误：①将<script>标记放入了JS文件中；②<script>标记放到了HTML中的错误位置或者拼写错误.
课堂实录：JaScript的调用法是从活动二中引出的.因为学生成功地将一个效果用到网页上后,总会冒出将同一效果用到不同网页的想法,教师就可自然地引入调用法了.调用法的使用方法在网页上也有图示,很容易理解.鉴于很多学生选择了较难的鼠标效果,笔者就用这个特效来演示调用法,期间由于FrontPage的版本较低不能直接建立JS文件,再改用记事本,稍微浪费了一点时间.演示后的效果就是好几个选择鼠标特效的学生都成功了.
3.作品交流（5分钟）
教师在教室中来回辅导,注意发现完成速度和质量高的学生,同时辅导有问题和困难的学生.教师说明“作品交流”的流程,要求学生介绍以下三点：使用了哪些JaScript特效?遇到了哪些问题,如何解决的?推荐一位学生作品,并说出其特色,由这位学生接着交流.学生打开学习网站的“作品交流”栏目,浏览同学作品,注意寻找优秀作品.教师请2～3名学生轮流发言.
● 教学反思
本节课的设计理念就是“学以致用”,这也是笔者一贯的教学思路.因此,这节课的教学过程也很简单,先了解、学习技术,再操练技术,最后运用技术.我校学生学习网页制作有6周（12课时）的时间,每位学生自选主题,运用所学技术开发个人网站.因此,学习动态网页的阶段是他们最兴奋的时刻,因为他们可以把各种很炫很酷的效果用到自己的网页中,体现自己的个性和创造力.
本堂课是借班上课,笔者也未试讲过.课前有小一段时间跟学生互相熟悉,了解到他们没有开发过网站,在开课前学习了两节课的网页制作和HTML代码.于是就让学生浏览了上课要用的两个练习网站,了解网站内容及结构.浏览网站时,让学生查看网页源代码,有相当一部分学生不会,于是就现场教了一下如何查看源代码.关于HTML代码,提到和
标记,学生都不太熟悉.
上完整节课,笔者的感觉有些许遗憾,反思整个教学过程,在以下几方面有待改进.
首先,本课的教学目标设置可能略高.从课前与学生的交流,能够大致了解学生的网页制作基础.因此,教师应当适当降低活动二的难度,如去掉几个难度较高的效果,建议学生选用简单的特效等,以提高成功率.同时还能减少课堂答疑,为作品交流留足时间.
其次,学习方法指导不够到位.课前跟学生交流,知道他们平时上课,教师都用全屏广播,教师讲课的时候,学生不能操作.而笔者上课一向使用窗口广播.一是便于学生边看演示边练习,二是广播时不会打断学生的操作,三是允许学得快的学生自主学习不看广播.虽然在课前跟学生讲解了窗口广播的好处,但是还有很多学生上课时看着广播不操作,广播完了操作又有问题.上课时,由于忙着演示及个别辅导,教师没有再次提醒学生可以边看边操作.课后也有听课教师质疑：教师演示的时间多了些,学生操作的时间就少了.其实教师演示是在帮助那些操作不熟练的学生,如果学生学会查看广播窗口,是不会减少操作时间的.
再者,师生互动时没有特别留意表现突出的学生.在学习活动中,教师不断地在教室里走动,寻找并辅导遇到问题的学生,同时也观察到了一些很快实现特效的学生,并口头表扬了一番.印象中,整堂课笔者至少辅导了一半的学生.但是由于不熟悉学生,等到最后作品交流时,已经记不得是哪个学生完成了特效.只好随机打开了两个学生的网页,但完成情况都不理想.结果,作品交流的效果不是很好.
最后,对开课教室的软件环境没有作细致的了解.教师曾在开课前去过开课教室安装教学网站,测试教学网页及练习网站,当时发现的问题都一一解决了.唯独没有查看FrontPage软件的版本,那里装的是FrontPage2000,不能直接建立JS脚本文件.而我的机房电脑上安装的是FrontPage2003,可以直接建立JS脚本文件.因此,上课时在这一环节浪费了一点时间.
教学是一门遗憾的艺术,不管我们设计得有多完美,实际教学时都会遇到各种问题,让我们措手不及.及时反思问题并解决问题,正是教师专业成长的必经之路.