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