5.3应用动态HTML【学习目标】知识与技能：在网页中加入JavaScript特效；了解动态HTML设计原则。过程与方法：通过自主探究，让学生掌握在网页中插入JavaScript特效的方法。情感态度价值观：合理地借鉴他人动态HTML技术,体验代码复用技术的优越性。教学重点、难点重点：JavaScript特效在网页中的实现难点：如何简单修改JavaScript代码课时安排1-2课时教学设计课前延伸学生欣赏课本配套光盘上特效实例，并根据效果进行归类。【课前热身】：学生进行特效整理归类。课内探究上节的学习中，我们了解了JavaScript能实现日期时间、旋转文字的特效制作，我们再来观看一些图片、窗口页面、鼠标、状态栏等特效设置。请根据自己的喜好选择一些动态效果（《HTML素材》）运用到网页中，增加Web界面的生动性、“智能性”。为了方便大家学习在网页中使用JavaScript特效，我们收集了许多JavaScript特效实现的代码，准备做一个相关的专题网站。为了便于大家查找，请你从HTML素材找出其对应的效果网页帮他归归类(学生可分组完成)，将特效类型拖至相应的文件夹中。你了解哪些网页特效：。【实践一】：编辑“HTML素材”文件夹下的js.htm，将
alert(“欢迎进入JS学习网页！”)这段JavaScript代码插入到HTML代码的body区域中，并保存并预览效果。Javascript脚本语言书写具有其基本结构，我们有必要来回味一下：中间添入脚本代码例如：alert("")是弹出一个对话框的语名window.open("网页文件名","","height=数字,width=数字")是弹出一、创设情境，明确任务（点击进入素材目录）先展示《HTML素材》中的一些特效网页，让学生回顾一下Javascript脚本语言书写的基本结构，为本节的学习做好铺垫。【思考】：以上这些特效，我们如何将这样的动态效果应用到自己设计的网页中？【分析】：这些脚本具有共同的标记(强调Script标签就是脚本容器)，引用这段标记代码就能实现代码相应的功能，当然必要时需要修改。二、学生动手，尝试实践（提供学习帮助）通过以上动态HTML效果的介绍，自己独立完成js.htm弹出窗口的操作，可以借鉴学习帮助。三、挑战一下，探索实践制作了一张简单的特效网页后，我们来借鉴一段他人的JavaScript代码使用到自己的网页中，【实践二】：分析网页特效代码，大致了解其意义，完成move_picture.htm的代码复制和修改。将……这段代码复制到目标网页的head区域中，并且将body属性和图片的有关位置代码做些修改（即双下划线部分）让学生小组合作探究，教师行间巡视，及时辅助。【提问】：网页中有许多动态效果的源代码，是不是都像时间日期特效那样不经过任何修改就能复制粘贴到自己设计的网页中呢？【提炼要点】：其实用JavaScript制作动态网页需要注意：1.注重版权2.会做适当修改。3.操作要点：一定要定位好插入效果的位置，认真阅读相关JavaScript程序的使用方法，最后将代码插入并编辑。【实践三】：安装网页特效梦工厂软件（软件目录）。（学生以5人为一组，观赏网页中的一些特效集锦）（仍以小组为单位，将主题网站优化）【作品展示】:分享部分小组收集的特效网页（鼓励踊跃发言）【提问】：提问学生这些网页如何应用到网页中去？【回答】：请小组长作答。【提问】：网页中有时我们需要使用多个Javascript脚本代码，如何只是复制粘贴，网页将会冗余不堪，实际操作中我们有没有更好的简化措施呢？【分析】：可以将多个网页特效代码定义成.js文件，然后引用这个代码，这样避免了网页中篇幅较多、代码杂乱的现象。要是多个网页中都使用同样效果，则可以多次调用这个文件，充分体现了代码复用的优越性（这里可以类比外联式CSS理解）。其格式如下：【实践四】：继续编辑“HTML素材”文件夹下的js.htm、move.htm(js脚本文件在js文件夹中)，将
