动态HTML技术完整版.doc

第五章动态网页的制作

§5.1动态HTML

【学科】信息技术【授课教师】【年级】【班级】

【课时】【备课时间】【教研组长签字】

学习目标：1、了解什么是动态HTML

2、学会使用动态HTML技术和脚本技术制作简单的动态网页

学习重难点：1、理解动态HTML、脚本、事件等概念

2、掌握简单的脚本语言及其在实例中的运用

3、掌握样式表定位技术及其简单运用

4、掌握DOM及其简单运用

学习方法：任务驱动法

教学过程：

一、导入新课

我们在上网冲浪时经常会看到各网站上让人眼花缭乱的各种动画效果，同时我们也会惊叹一些网站的更新速度之快，这些让人惊叹的效果都可以通过动态HTML技术来实现。

那么什么是动态HTML：

在了解动态HTML之前我们先来了解一下什么是HTML。HTML是一种“静态”的网页设计语言，主要提供文本和图形的显示，难以实现页面元素运动和对文字图像等进行精确定位的功能。

动态HTML即Dynamic?HTML，简称DHTML，它作为浏览器的一个扩展功能，是几种技术的结合——客户端脚本、样式表定位和文档对象模型（DocumentObjectModules，简称DOM）。上述三种技术的结合产生了网页的动态效果，如第四章中网页动态特效的网页过渡效果制作就是一个很好的实例。

二、讲授新课

网页脚本

观摩：P141

脚本（Script）

脚本是脚本script是使用一种特定的描述性语言，依据一定的格式编写的可执行文件，又称作宏或批处理文件。脚本通常可以由应用程序临时调用并执行。各类脚本目前被广泛地应用于网页设计中，因为脚本不仅可以减小网页的规模和提高网页浏览速度，而且可以丰富网页的表现，如动画、声音等。举个最常见的例子，当我们点击网页上的E－mail地址时能自动调用OutlookExpress或Foxmail这类邮件软件，就是通过脚本功能来实现的。在万维网上，人们常用脚本语言（javascript和vbscript）来编写是HTML产生动态效果或制作更强的交互功能，例如，近年出现的AJAX技术。

常见的脚本语言：Scala、JavaScript，VBScript，ActionScript，MAXScript，ASP，JSP，PHP，SQL，Perl，Shell，python，Ruby，JavaFX，Lua，AutoIt等。下面所介绍的脚本以JavaScript为例。

例如：scriptlanguage=”JavaScript1.2”

scriptlanguage=”JavaScript1.2”src=”../animate.js”表示脚本需要嵌入外部脚本程序，程序名为animate.js。这个外部脚本程序是一个文本文件，里面编写了实现动画效果的JavaScript

JavaScript脚本程序可在任何客户机或服务器上运行。JavaScript是一种面向对象语言，它构建在WEB浏览器中，不能单独运行。它是一个向浏览器提供指令的语句集合。JavaScript的代码对大小写敏感。用户必须严格遵守程序书写格式。由于JavaScript是按行逐一解释执行的，如果中间出现错误，脚本程序将停止执行后面的语句操作。

VBScript（visualbasicscriptingedition）是Microsoft公司开发的一种解释执行的基于对象的脚本语言，并不是所有的浏览器都支持这种脚本。

2、事件（Event）

事件是浏览器响应用户操作的机制，JavaScript的事件处理功能可改变浏览器响应这些操作的方式，从而开发具有交互性的网页。

事件是说明用户与网页交互时产生的操作，例如，当用户单击超链接或网页中的按钮时都会产生一个事件（鼠标单击事件），从而完成进入网页或离开网页的操作，浏览器等待事件发生并在事件发生时进行相应的处理。

几种常见事件

事件

表示何时处理

onClick

单击链接、按钮等

onLoad

浏览器显示图形、文档时

onUnload

用户退出文档时

onMouseOver

当鼠标经过连接时

onMouseOut

当鼠标移到连接时

任务

运用JavaScript脚本技术实现网页加载时弹出欢迎词。操作如下：

尝试改变进入网页时的效果。我们通过一个小JavaScript脚本程序，体验脚本程序的编写过程。

打开“虎门销烟启思录”网站首页，切换到HTML视图。

在HTML代码的headhe/head标记之间加入一段JavaScript脚本代码，注意字符大小写。

scriptlangua