动态网页制作教案

一、教学目标：

1、知识目标

（1）了解动态HTML，动态网页的概念

（2）能够实现简单的动态HTML效果，能够插入简单的javascript代码（3）掌握动态网页的特性

2、能力目标

（1）培养学生的探究学习能力

（2）进一步提高学生的审美能力

3、情感目标

（1）培养学生正确评价、选择、运用信息的价值观

（2）培养学生的版权意识

（3）使学生正确认识技术的两面性。

二、教学重点与难点

重点：

（1）动态HTML和动态网页的概念

（2）插入简单的动态HTML特效

难点

插入javascript网页特效

三、教学过程

（一）动态HTML的概念

1、情景创设

教师：展示做好的网页，网页中有许多动态HTML的效果，

问：请观察以下网页，注意哪些地方发生了动态的变化？

学生：仔细观察，发现有文字移动，背景颜色随鼠标变化等特效，兴趣大增。教师引导：同学们想不想学呢，这是什么技术呢？

2、动态HTML(DHTML)的概念

教师给出概念：在脱离网络环境下，网页下载到浏览器以后仍能够随时变换的HTML

3、教师演示：

在FrontPage中，提供了一些动态HTML效果，教师演示操作步骤

例1：实现简单的动态HTML效果

演示:鼠标特效

方法：格式----动态HTML

教师只演示其中一个，其他例子先让学生自己探索。培养学生的自学能力。

学生探索研究后，老师请先完成的同学出来演示，并讲解难点，如鼠标悬停效果。

4、学生练习

教师讲解完后，让学生继续巩固动态HTML特效，做练习一

练习一：实现简单的动态HTML效果

（1）、网页加载效果

（2）、鼠标悬停效果（提供背景图片）

（3）、单击

（4）、双击

5、学生成果交流与评价

问：是不是动态效果越多越好呢?培养学生审美观。

让学生相互评价，哪些地方加得恰到好处，哪些地方加得不大合适？

教师总结：frontpage2000自带的动态HTML特效，实质上是在原网页上自动增加了一些代码，那么，除了frontpage2000自带的动态HTML特效，还有更丰富更具个性化的特效吗？

6、引伸：

为进一步理解动态HTML，不仅仅是ftontpage自动产生的那些，还有更加丰富更加全面各种特效，教师提供一些简单的javascript小程序，对动态HTＭＬ作一些引伸，

例2：插入简单的javascript网页特效

教师演示：怎样插入“显示当前日期”的代码

强调难点：一定要注意插入代码的位置。

练习二：请插入以下几个网页特效

（1）、记数器

（2）、显示当前时间

（3）、跟随鼠标的时钟

（4）、礼花背景

教师事先准备好这几个小程序，学生分组练习，分四组，每个组只要完成其中一个特效。

7、学生作品交流与评价

教师小结：这里只是插入的最简单的代码，还有一些复杂的代码在以后的章节中有要求进一步学习，javascript小程序是实现动态HTML特效的主要工具。还有css等等

注意：使用别人代码时，要注意别人的版权信息。

同学们还想更多特效，教师提供以下网址，

课外资源

七色风网页特效

网页特效观止

网页特效

你知道乱用javascript特效的后果吗？有些人专门编制了这种小程序，对网页产生了一些破坏作用，这是非常不道德的。

同学们对于动态HTML非常感兴趣，特鼓励同学好好专研，成为javascript的编程高手。过渡：进一步理解动态网页的概念。

动态网页不仅局限于动态HTML

还包括采用CGI、ASP、JSP、PHP、Perl等技术动态生成的页面

（二）、动态网页的概念

这里所谓的动态主要强调的是人机关系，即，按照访问者的不同需要对访问者输入的信息作不同的响应，并提供相应的信息。

教师展示网站，让学生体验良好的人机关系，这些网站主要是由asp、php等技术生成的例3：认识几种动态网站

搜索引擎

/zm/exam/在线考试系统

/platform/index.php?t=book_index_first

购物网站

/default_login.asp数据检索，后台数据库

/jswzb博客系统

通过演示，让学生体会到本节所说的动态网页这个“动”字的涵义，主要强调的是一种人机交流，而不是一种动画技术。

（三）、总结：静态网页和动态网页的比较

请学生讨论完成以下表格：

静态网页动态网页

是否支持动态显示效果无法实现动态显示效果能实现个性化的交互功能，

能否及时更新和响应维护繁琐，不便人机交互,信息反馈更少的刷新、更快的响应并减轻了服务器负担，维护简单，交互功能强，交流方便

是否能支持数据库无法支持数据库支持数据库，查询修改数据方便