江苏省南通市海安县实验中学高中信息技术 5.3应用动态HTML学案.doc

5.3应用动态html【学习目标】知识与技能：在网页中加入javascript特效；了解动态html设计原则。过程与方法：通过自主探究，让学生掌握在网页中插入javascript特效的方法。情感态度价值观：合理地借鉴他人动态html技术,体验代码复用技术的优越性。教学重点、难点重点：javascript特效在网页中的实现难点：如何简单修改javascript代码课时安排1-2课时教学设计为了方便大家学习在网页中使用javascript特效，我们收集了许多javascript特效实现的代码，准备做一个相关的专题网站。为了便于大家查找，请你从html素材找出其对应的效果网页帮他归归类(学生可分组完成)，将特效类型拖至相应的文件夹中。你了解哪些网页特效： 。课前延伸学生欣赏课本配套光盘上特效实例，并根据效果进行归类。【课前热身】：学生进行特效整理归类。课内探究上节的学习中，我们了解了javascript能实现日期时间、旋转文字的特效制作，我们再来观看一些图片、窗口页面、鼠标、状态栏等特效设置。请根据自己的喜好选择一些动态效果（html素材）运用到网页中，增加 web 界面的生动性、“智能性”。一、创设情境，明确任务（点击进入素材目录） 先展示html素材中的一些特效网页，让学生回顾一下javascript脚本语言书写的基本结构，为本节的学习做好铺垫。【思考】：以上这些特效，我们如何将这样的动态效果应用到自己设计的网页中？【分析】：这些脚本具有共同的标记(强调script标签就是脚本容器)，引用这段标记代码就能实现代码相应的功能，当然必要时需要修改。javascript脚本语言书写具有其基本结构，我们有必要来回味一下： 中间添入脚本代码 例如：alert( )是弹出一个对话框的语名window.open(网页文件名,height=数字,width=数字)是弹出一个指定大小的新窗口语句。二、学生动手，尝试实践（提供学习帮助）通过以上动态html效果的介绍，自己独立完成js.htm弹出窗口的操作，可以借鉴学习帮助。【实践一】：编辑“html素材”文件夹下的js.htm，将 alert(“欢迎进入js学习网页！”) 这段javascript代码插入到html代码的body区域中，并保存并预览效果。三 、挑战一下，探索实践【实践二】：分析网页特效代码，大致了解其意义，完成move_picture.htm的代码复制和修改。将 这段代码复制到目标网页的head区域中，并且将body属性和图片的有关位置代码做些修改（即双下划线部分） 制作了一张简单的特效网页后，我们来借鉴一段他人的javascript代码使用到自己的网页中，让学生小组合作探究，教师行间巡视，及时辅助。【提问】：网页中有许多动态效果的源代码，是不是都像时间日期特效那样不经过任何修改就能复制粘贴到自己设计的网页中呢？【提炼要点】：其实用javascript制作动态网页需要注意：1. 注重版权2. 会做适当修改。3.操作要点：一定要定位好插入效果的位置，认真阅读相关javascript程序的使用方法，最后将代码插入并编辑。【实践三】：安装网页特效梦工厂软件（软件目录）。（学生以5人为一组，观赏网页中的一些特效集锦）（仍以小组为单位，将主题网站优化）【作品展示】:分享部分小组收集的特效网页（鼓励踊跃发言）【提问】：提问学生这些网页如何应用到网页中去？【回答】：请小组长作答。【提问】：网页中有时我们需要使用多个javascript脚本代码，如何只是复制粘贴，网页将会冗余不堪，实际操作中我们有没有更好的简化措施呢？【分析】：可以将多个网页特效代码定义成.js文件，然后引用这个代码，这样避免了网页中篇幅较多、代码杂乱的现象。要是多个网页中都使用同样效果，则可以多次调用这个文件，充分体现了代码复用的优越性（这里可以类比外联式css理解）。其格式如下：rq.js ， gd.js，td.js里面已经有了运行的脚本，这样操作使html语言更简洁、高效。【实践四】：继续编辑“html素材”文件夹下的js.htm、move.htm(js脚本文件在js文件夹中)，将 这段javascript代码插入到html代码的body区域中，并保存并预览效果。素材说明：rq.js 代码实现在标题栏显示日期时间；gd.js代码实现文字的滚动特效；td.js代码实现多幅图片的滚动。实践中我们可以将js.htm、move.htm都设计为标题栏显示日期时间【提问】：随着网页技术工具的发展，网页中设计出生动的效果已经越来越容易，动态效果虽然增强了吸引力，给我强烈的感官刺激，那么我们制作网页是不是效果越多，网页就越精彩呢？请学生想想，我们在使用这些动态效果时需要把握些什么？【分析】：教师指出javascript脚本使用的注意事项，我们不能只顾给浏览者的视觉刺激，而忽略了这些所谓效果会影响浏览者专心地阅读你的网页，有时往往适得其反（同时也影响客户机的运行速度）。【学生概括】：我们在制作动态html是应注重如下设计原则：尽量精简，不要使用太多的动画过度的闪烁让人头痛合理使用滚动的字幕，变换的选择框以及持续的动画你学习中遇到的问题 总结 使用代码复用技术需要注意的问题。 你尝试过哪些 javascript 功能？ 你觉得还需要学习什么网页制作技术？ 【调查统计】：对本节课学习以后，我们大家来一同回顾一下，看看究竟学到了哪些内容，以小组为单位，汇报学习心得体会？课后提升四 、温故知新，巩固提升图片淡入淡出 闪烁文字 前后翻页 全屏显示 倒计时显示 分时问候 禁止使用右键 带开关的时钟 页面自动跳转 文字渐隐渐显 文字跟随鼠标 跑马灯 推拉式菜单 可拖动的图片 页面载入方式窗口特效： 鼠标特效： 图片、文字特效： 时间特效： 其他特效： 1. 对下面的网页特效作些简单的归类2.让同学们完成练习题，巩固本