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

5.3应用动态HTML
【学习目标】
知识与技能：
在网页中加入JavaScript 特效；
了解动态HTML 设计原则。

过程与方法：
通过自主探究，让学生掌握在网页中插入JavaScript 特效的方法。

情感态度价值观：
合理地借鉴他人动态HTML 技术,体验代码复用技术的优越性。

教学重点、难点 重点：JavaScript 特效在网页中的实现
难点：如何简单修改JavaScript 代码
课时安排
1-2课时
教学设计
课前延伸
学生欣赏课本配套光盘上特效实例，并根据效果进行归类。

【课前热身】：学生进行特效整理归类。

课内探究
上节的学习中，我们了解了JavaScript 能实现日期时间、旋转文字的特效制作，我们再来观看一些图片、窗口页面、鼠标、状态栏等特效设置。

请根据自己的喜好选择一些动态效果（《HTML 素材》）运用到网页中，增加 Web 界面的生动性、“智能性”。

一、创设情境，明确任务（点击进入素材目录）
为了方便大家学习在网页中使用JavaScript 特效，我们收集了许多JavaScript 特效实现的代码，准备做一个相关的专题网站。

为了便于大家查找，请你从．HTML ．．．．素材找出其对应的效果网页．．．．．．．．．．．．帮他归归类(学生可分组完成．．．．．．．)，将特效类型拖至相应的文件夹中。

【实践一】：编辑“HTML 素材”文件夹下的js.htm ，将 <script language="JavaScript"> alert(“欢迎进入JS 学习网页！”) </script>
Javascript 脚本语言书写具有其基本结构，我们有必要来回味一下：
<script language="JavaScript">
中间添入脚本代码
</script>
先展示《HTML 素材》中的一些特效网页，让学生回顾一下Javascript 脚本语言书写的基本结构，为本节的学习做好铺垫。

【思考】：以上这些特效，我们如何将这样的动态效果应用到自己设计的网页中？ 【分析】：这些脚本具有共同的标记(强调Script 标签就是脚本容器)，引用这段标记代码就能实现代码相应的功能，当然必要时需要修改。

二、学生动手，尝试实践（提供学习帮助） 通过以上动态HTML 效果的介绍，自己独立完成js.htm 弹出窗口的操作，可以借鉴学习帮助。

三 、挑战一下，探索实践
制作了一张简单的特效网页后，我们来借鉴一段他人的JavaScript 代码使用到自己的网页中，让学生小组合作探究，教师行间巡视，及时辅助。

．．．．．．．．．．．．．．．．．．． 【实践二】：分析网页特效代码，大致了解其意义，完成move_picture.htm
的代码复制和修改。

将
<script language="JavaScript">
……
</script>
这段代码复制到目标网页的head 区域中，并且将body 属性和图片的
【提问】：网页中有许多动态效果的源代码，是不是都像时间日期特效那样不经过任何修改就能复制粘贴到自己设计的网页中呢？
【提炼要点】：其实用JavaScript制作动态网页需要注意：
1.注重版权
2.会做适当修改。

3.操作要点：一定要定位好插入效果的位置，认真阅读相关JavaScript程序的使用方法，最后将代码插入并编辑。

【实践三】：安装网页特效梦工厂软件（软件目录）。

（学生以5人为一组，观赏网页中的一些特效集锦）（仍以小组为单位，将主题网站优化）
【作品展示】:分享部分小组收集的特效网页（鼓励踊跃发言）
【提问】：提问学生这些网页如何应用到网页中去？
【回答】：请小组长作答。

【提问】：网页中有时我们需要使用多个Javascript脚本代码，如何只是复制粘贴，网页将会冗余不堪，实际操作中我们有没有更好的简化措施呢？
【分析】：可以将多个网页特效代码定义成.js文件，然后引用这个代码，这样避免了网页中篇幅较多、代码杂乱的现象。

要是多个网页中都使用同样效果，则可以多次调用这个文件，充分体现了代码复用
．．．．的优越性（这里可以类比外联式CSS理解）。

其格式如下：
<Script language="Javascript" src="…\…\*.js">
</Script>
r q.js 代码实现在标题栏显示日期时间；
gd.js代码实现文字的滚动特效；
td.js代码实现多幅图片的滚动。

实践中我们可以将js.htm、move.htm都设计为标题栏显示日期时间
【提问】：随着网页技术工具的发展，网页中设计出生动的效果已经越来越容易，动态效果
虽然增强了吸引力，给我强烈的感官刺激，那么我们制作网页是不是效果越多，网页就越精
彩呢？请学生想想，我们在使用这些动态效果时需要把握些什么？
【分析】：教师指出Javascript脚本使用的注意事项，我们不能只顾给浏览者的视觉刺激，而忽略了这些所谓效果会影响浏览者专心地阅读你的网页，有时往往适得其反（同时也影响
客户机的运行速度）。

【学生概括】：我们在制作动态HTML是应注重如下设计原则：
①尽量精简，不要使用太多的动画
②过度的闪烁让人头痛
③合理使用滚动的字幕，变换的选择框以及持续的动画
【调查统计】：对本节课学习以后，我们大家来一同回顾一下，看看究竟学到了哪些内容，
以小组为单位，汇报学习心得体会？
课后提升
四、温故知新，巩固提升
1. 对下面的网页特效作些简单的归类
⒈图片淡入淡出⒉闪烁文字⒊前后翻页⒋全屏显示⒌倒计时显示⒍分
时问候⒎禁止使用右键⒏带开关的时钟⒐页面自动跳转⒑文字渐隐渐显
⒒文字跟随鼠标⒓跑马灯⒔推拉式菜单⒕可拖动的图片⒖页面载入方式窗口特效：鼠标特效：
2.让同学们完成练习题，巩固本节学习内容。

2．通过JavaScript工具书，进一步学习提高。

3. 是否所有的网页动态交互脚本都放置在客户端网页运行？请同学们课后在网上查找
一些关于服务器端的网页技术，通过比较更好地理解及运用动态H TML。

4.欣赏一些优秀的网站，感受技术在实践中应用魅力。