高中信息技术 5.3应用动态HTML学案.doc

《高中信息技术 5.3应用动态HTML学案.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、5.3应用动态HTML【学习目标】知识与技能：在网页中加入JavaScript特效；了解动态HTML设计原则。过程与方法：通过自主探究，让学生掌握在网页中插入JavaScript特效的方法。情感态度价值观：合理地借鉴他人动态HTML技术,体验代码复用技术的优越性。教学重点、难点重点：JavaScript特效在网页中的实现难点：如何简单修改JavaScript代码课时安排1-2课时教学设计为了方便大家学习在网页中使用JavaScript特效，我们收集了许多JavaScript特效实现的代码，准备做一个相关的专题网站。为了便于大家查找，请你从HTML素材找出其对应的效果网页帮他归归类(学生可分

2、组完成)，将特效类型拖至相应的文件夹中。你了解哪些网页特效：。课前延伸学生欣赏课本配套光盘上特效实例，并根据效果进行归类。【课前热身】：学生进行特效整理归类。课内探究上节的学习中，我们了解了JavaScript能实现日期时间、旋转文字的特效制作，我们再来观看一些图片、窗口页面、鼠标、状态栏等特效设置。请根据自己的喜好选择一些动态效果（《HTML素材》）运用到网页中，增加Web界面的生动性、“智能性”。一、创设情境，明确任务（点击进入素材目录）先展示《HTML素材》中的一些特效网页，让学生回顾一下Javascript脚本语言书写的基本结构，为本节的学习做好铺垫。【思考】：以上这些特效，我们如

3、何将这样的动态效果应用到自己设计的网页中？【分析】：这些脚本具有共同的标记(强调Script标签就是脚本容器)，引用这段标记代码就能实现代码相应的功能，当然必要时需要修改。Javascript脚本语言书写具有其基本结构，我们有必要来回味一下：中间添入脚本代码例如：alert("")是弹出一个对话框的语名window.open("网页文件名","","height=数字,width=数字")是弹出一个指定大小的新窗口语句。二、学生动手，尝试实践（提供学习帮助）通过以上动态HTML效果的介绍，自己独立完成js.htm弹

4、出窗口的操作，可以借鉴学习帮助。【实践一】：编辑“HTML素材”文件夹下的js.htm，将alert(“欢迎进入JS学习网页！”)这段JavaScript代码插入到HTML代码的body区域中，并保存并预览效果。三、挑战一下，探索实践【实践二】：分析网页特效代码，大致了解其意义，完成move_picture.htm的代码复制和修改。将……这段代码复制到目标网页的head区域中，并且将body属性和图片的有关位置代码做些修改（即双下划线部分）

5、