用比较法设计“动态HTML”教学案

1、用比较法设计5.1.1 动态html教学案 比较法是通过观察、分析，找出研究对象的相同点和不同点，它是认识事物的一种基本方法。通过综合比较，直观的反映出物体或对象之间的异同。这种方法切合马克思唯物辩证哲学思想的矛盾统一观，运用这种方法，有利于充分显示事物的矛盾，突出事物的特征。本课的重难点是要让同学掌握动态html与普通静态网页的区别，具有“动态”效果的flash动画和gif图片动画特效与动态html特效之间的区别等等。这决定了本课的教学案特别适合用比较法设计。教材分析：本节是高二选修网络技术应用（2004年10月第1版 教育科学出版社）第五章的第一小节，主要解决“什么是动态html”这一问题

2、。教材中给出的定义是“指即使在脱离网络环境的情况下，网页下载到浏览器以后仍能随时变换的html”，这一定义相对模糊。为此书上列举了多许事例，如：当鼠标指针移至文章段落中，段落能够变成蓝色；鼠标指针滑过一幅图片时，这幅图片会产生变化；在网页中加入日期、时间等文字特效、鼠标特效、网页特效。书中还特别强调gif图片动画不属于动态html效果。这些介绍并不能使同学们明确理解到底什么是动态html，哪些特效属于动态html，哪些特效又不属于动态html，有没有一个明确的判别标准呢？这些是本节课教学设计中需要解决的重难点问题。为此笔者特意在网上对有关“动态html”这一概念进行了大量的信息检索，发现对于这

3、个概念并没有一个权威的定义，一般认为：“动态html是向原有的html加入程序的一种方法。”；“它是一种通过javascript、vbscript、document object model（文件目标模块）、layers和 cascading style sheets（css）等各种技术的综合发展而得以实现的概念。因此笔者认为“通过各种代码使网页产生的动态效果就属于动态html”更有利于学生的理解。学情分析：在学习本节之前，学生已系统的学习了使用frontpage2000制作普通网页的基本方法,html代码也进行过专门学习。多数同学能较熟练的制作普通网页，为本节学习打下了良好的基础。但有的同学

4、在网页制作的细节把握上还存在不足，如：网页保存时忽略了要将图片、声音、动画等文件保存在images文件夹下，部分网页制作的操作可能已经遗忘等等。为此在学习本节内容之前先安排学生上机做一个普通网页练习，既对网页制作进行了复习又能自然过渡到本节新知识的学习。教学目标：1、 复习在网页中插入图片、动画、音乐等基本技能。2、 掌握区分动态html特效与非动态html特效的方法。3、 学习并掌握在网页中设置字幕、横幅广告管理器、悬停按钮及文字特效的方法。教学重难点：1、区分哪些特效属于或不属于动态html的范畴2、熟练掌握字幕及悬停按钮等网页特效的设置方法教学策略及方法：先通过一个简单网页制作让同学进入

5、学习状态；教师演示同一主题的纯静态网页与具有“动”的效果的网页巨大效果差异，突出“动态”效果可以使网页变得丰富生动起来的优点；阅读教材“什么是动态html”，思考与讨论：“是不是网页中所有动的效果都属于动态html范畴？”；教师演示并总结判断的方法；同学继续网页制作，在网页中加入部分动态特效；评价同学练习情况，小节本课主要知识点。教学设计：一、课前准备：1、在服务器上下载本课练习素材，并解压缩。2、安装“java组件.msi”程序。解决frontpage制作的网页特效无法在本地ie浏览器中正常显示这一问题。3、阅读“学生课内练习.doc”文档，了解本课学习的内容及上机练习的具体任务。二、巩固与

6、复习：学生活动：制作如下图所示网页：此主题相关图片如下：1.jpg主要练习内容：设置网页背景；插入背景音乐；在指定的位置插入图片及flash动画；保存网页等。可能存在的问题：背景音乐设置 flash动画设置 正确的保存网页。解决方法：同学交流与协作；教师巡视与指导。教师活动：大多数同学完成该网页制作后，简要点评同学网页制作中存在的问题及解决方法。重点演示某同学在保存网页时不注意将图片和动画保存到xizang文件夹下的解决办法：将该目录下的图片及动画文件移动到images文件夹下，重新保存网页即可。学生活动：检查自己网页制作中存在的问题并修正错误。三、导入新课：教师活动：展示课件中同一主题的两个

7、不同风格网页：一个纯静态网页和一个具有“动态”效果的网页，哪一个网页更丰富生动、更具有视觉吸引力？同学回答：第二个网页更具有吸引力。幻灯片展示教师提出的四个问题：第二个网页是不是就是今天要学习的动态html？ 什么是动态html？ 动态html具有哪些表现形式？ 哪些特例不属于动态html范畴？同学阅读教材，讨论并回答上述问题（略）。四、深入讨论，精讲重难点：教师活动：同学们通过阅读教材，非常正确的回答了老师提出的上述四个问题，现在就请同学们在你们刚才制作的网页中找出哪些特效属于动态html范畴，哪些有不属呢？学生活动：分组讨论交流。教师活动：打开教师制作好的“动态网页”用鼠标指向某特效请同学

8、回答是否属于动态html？答：滚动字幕、悬停按钮、横幅广告管理器、 鼠标特效、 日期特效等属于动态html； 教师继续提问：动画gif图片是否属于动态html？答：不属于； 教师：同学们回答得太好了，你们是怎么判断出来的？同学：书上写的！（同学们笑）教师：同学们的领悟能力真是太强了，下面老师再提两个难一点的问题看同学们能不能判断出来：flash动画是不是属于动态html范畴？ 同学有的回答属于，有的回答不属于。教师：同学们的意见不统一，那么是否属于动态html有没有一个统一标准呢？书上没有写，同学们能否自己总结一下呢？同学小声交流，没有人回答。教师讲解引导学生思考:从动态html的定义出发进行

9、分析,动态html是“动态超文本标记语言”的意思，强调的是通过代码来使网页产生的动态效果。教师演示：选中一个悬停按钮，切换到html视图观察：此主题相关图片如下：2.jpg选中一个滚动字幕，切换到html视图观察：此主题相关图片如下：3.jpg选中一个横幅广告管理器，切换到html视图观察：此主题相关图片如下：4.jpg打开日期特效、鼠标特效，进行观察，这些特效都是通过代码来实现动态效果的。因此它们属于动态html范畴。教师演示并讲解：再看不属于动态html的特例gif图片动画的代码：此主题相关图片如下：5.jpg同学们可以发现，在网页中是直接调用该图片文件，该动态效果并不是由代码产生的，因此

10、不属于我们今天研究的动态html范畴。下面我们再来研究flash动画是否属于动态html范畴？看代码：此主题相关图片如下：6.jpg同学们判断flash动画是否属于动态html范畴？同学回答：不属于教师：演示在互联网上大量存在的gif图片动画和flash动画素材。教师：请同学们记住，网页中能产生动的效果并不一定都属于动态html范畴，在网页中大量存在的gif图片动画和flash动画就不属于。判断一个动态效果是否属于动态html范畴的关键是看这一特效是否是由代码产生的。 教师：再请同学们想一想，产生动态效果的代码一定要是超文本标记语言吗？学生活动：请同学阅读教材p126页各种动态网页制作技术的比

11、较。教师：通过阅读教材，我们知道了产生动态网页制作技术有许多种，但我们只需要牢记：凡是通过代码使网页发生变化的特效才属于动态html范畴。五、课堂练习：在网页中加入特效：同学们按照“学生课内练习.doc”文档，要求进行滚动字幕、悬停按钮、文字从右下角飞入、横幅广告管理器等动态效果制作。该部分练习内容分为基础练习和拓展与提高两部分。基础部分同学必须熟练掌握，拓展与提高部分练习，提供给基础好操作快的同学进行研究与制作。教师活动：巡视机房，观察学生完成情况，及时指导同学练习过程中出现的问题。教师活动：展示学生作品，简要讲评学生网页制作情况。对练习过程出现问题较多的滚动字幕、横幅广告管理器操作进行规范

12、演示。教师活动：演示在横幅广告管理器插入不同大小的两幅图片，并预览效果。让同学知道：在横幅广告管理器中插入的图片最好要尺寸大小一致为好。学生活动：更正网页制作中的错误，完成网页制作。六、自主学习与研究：对于部分优秀同学在完成上述网页制作后，可参考教材p117页5.3 应用动态html章节内容，尝试在网页中插入“时间特效”和“根随鼠标的莹火虫”两个javascript特效。七、本课小节：通过幻灯片展示，简要回顾本课所讲述的两个基本知识：如何区分网页中“动”的效果是否为动态html效果？请举例说明网页中“动”的效果中有哪些不属于动态html效果？教后反思：教学设计亮点：本课教学设计中较多的运用了比

13、较法，以纯静态网页与具有动态效果的网页进行比较，引出了“动态html”这一概念；通过对动态html特效代码与非动态html特效代码的比较，总结出判断是否为动态html效果的标准。在学生练习的网页制作中，同样采用了比较法，将正常效果的横幅广告管理器效果与非正常横幅广告管理器进行比较，让同学知道了横幅广告管理器中使用的图片要大小相近才好。较好的突出了本节课的重难点，便于同学清晰直观的掌握有关的知识。同时在教学设计中，不忘加强学生网页制作能力的培养，通过对同一网页各有侧重的三次不同制作练习，既巩固了网页制作的基本知识，又学习了frontpage2000中常用动态网页特效制作方法，更给部分优秀同学进行拓展学习javascript特效留下研究与制作素材。总的来说教学设计是严谨的，教学内