动态HTML技术

第五章 动态网页的制作5.1 动态HTML【学科】信息技术 【授课教师】 【年级】 【班级】 【课时】 【备课时间】 【教研组长签字】 学习目标：1、了解什么是动态HTML 2、学会使用动态HTML技术和脚本技术制作简单的动态网页学习重难点：1、理解动态HTML、脚本、事件等概念 2、掌握简单的脚本语言及其在实例中的运用 3、掌握样式表定位技术及其简单运用 4、掌握DOM及其简单运用学习方法：任务驱动法教学过程：一、导入新课我们在上网冲浪时经常会看到各网站上让人眼花缭乱的各种动画效果，同时我们也会惊叹一些网站的更新速度之快，这些让人惊叹的效果都可以通过动态HTML技术来实现。那么什么是动态HTML：在了解动态HTML之前我们先来了解一下什么是HTML。HTML是一种“静态”的网页设计语言，主要提供文本和图形的显示，难以实现页面元素运动和对文字图像等进行精确定位的功能。动态HTML即DynamicHTML，简称DHTML，它作为浏览器的一个扩展功能，是几种技术的结合客户端脚本、样式表定位和文档对象模型（Document Object Modules，简称DOM）。上述三种技术的结合产生了网页的动态效果，如第四章中网页动态特效的网页过渡效果制作就是一个很好的实例。二、讲授新课（一） 网页脚本观摩：P1411、 脚本（Script）脚本是脚本script是使用一种特定的描述性语言，依据一定的格式编写的可执行文件，又称作宏或批处理文件。脚本通常可以由应用程序临时调用并执行。各类脚本目前被广泛地应用于网页设计中，因为脚本不仅可以减小网页的规模和提高网页浏览速度，而且可以丰富网页的表现，如动画、声音等。举个最常见的例子，当我们点击网页上的Email地址时能自动调用Outlook Express或Foxmail这类邮件软件，就是通过脚本功能来实现的。在万维网上，人们常用脚本语言（javascript和vbscript）来编写是HTML产生动态效果或制作更强的交互功能，例如，近年出现的AJAX技术。常见的脚本语言：Scala、JavaScript，VBScript，ActionScript，MAX Script，ASP，JSP，PHP，SQL，Perl，Shell，python，Ruby，JavaFX，Lua，AutoIt等。下面所介绍的脚本以JavaScript为例。例如：表示脚本采用JavaScript1.2版本程序语言。表示脚本需要嵌入外部脚本程序，程序名为animate.js。这个外部脚本程序是一个文本文件，里面编写了实现动画效果的JavaScript代码段。JavaScript脚本程序可在任何客户机或服务器上运行。JavaScript是一种面向对象语言，它构建在WEB浏览器中，不能单独运行。它是一个向浏览器提供指令的语句集合。JavaScript的代码对大小写敏感。用户必须严格遵守程序书写格式。由于JavaScript是按行逐一解释执行的，如果中间出现错误，脚本程序将停止执行后面的语句操作。VBScript（visual basic scripting edition）是Microsoft公司开发的一种解释执行的基于对象的脚本语言，并不是所有的浏览器都支持这种脚本。2、事件（Event）事件是浏览器响应用户操作的机制，JavaScript的事件处理功能可改变浏览器响应这些操作的方式，从而开发具有交互性的网页。事件是说明用户与网页交互时产生的操作，例如，当用户单击超链接或网页中的按钮时都会产生一个事件（鼠标单击事件），从而完成进入网页或离开网页的操作，浏览器等待事件发生并在事件发生时进行相应的处理。几种常见事件事件表示何时处理onClick单击链接、按钮等onLoad浏览器显示图形、文档时onUnload用户退出文档时onMouseOver当鼠标经过连接时onMouseOut当鼠标移到连接时任务运用JavaScript脚本技术实现网页加载时弹出欢迎词。操作如下：尝试改变进入网页时的效果。我们通过一个小JavaScript脚本程序，体验脚本程序的编写过程。（1） 打开“虎门销烟启思录”网站首页，切换到HTML视图。（2） 在HTML代码的he 标记之间加入一段JavaScript脚本代码，注意字符大小写。Function SayHello() alert(“Hello,欢迎访问虎门销烟启思录网站”)；（3）修改标记中的onload事件，改写为：（4）保存网页，预览效果（二）样式表定位在第四章中，我们曾运用样式表对网页上显示的样式进行控制，例如：字体的颜色、文档的背景、图片的边距等。样式表定位是样式表的延伸，它为屏幕上所有元素赋予了精确到像素的定位。样式表定位技术最主要、最基础的内容是：使用标记来放置页面元素。在主题网站的设计中，导航栏的设计是很关键的。导航栏要清晰反映网站的结构不容易，因为一个网站的栏目往往是很多的，这时可以采用下拉菜单来节省屏幕空间，需要时菜显示相关内容。任务结合脚本技术与标记，制作一个简单的下拉菜单。操作如下：（1）新建一个网页文件，切换到HTML视图编辑。（2）制作思路：编写菜单的代码，首先你必须描述它的外观。在菜单条上加入一定的颜色以及描述各项功能的名称，例如file、edit、view等等。当点击该文字时，就会显示该菜单项下的子菜单。在子菜单框中点击相应的菜单项目就可触发某个程序。制作过程：生成一个顶部的菜单条：。现在将该菜单条样式放在页面顶部，加上特定的颜色：#menuBarposition:absolute; left: 0; top: 0;width: 100%; height: 22px; border: 1px solid #99ffff; background-color:#99ffff; layer-background-color:#99ffff;下面依照第步的设置样式表的做法逐一完成菜单目录。最后给菜单条加入脚本使其能响应鼠标的动作，并执行相应的功能。（三）文档对象模型文档对象模型是动态HTML的核心内容。DOM体现的是网页各元素之间的关系，包括浏览器自身属性（如浏览器的版本号），窗口自身的属性（如网页的URL），各HTML元素，甚至还包括一些背景信息（如当前日期、时间等）。通过利用脚本语言编程控制DOM，可使更多的网页元素产生变化（如自动显示最新刷新时间等）。任务：结合运用脚本技术与文档对象模型，制作浏览器状态栏“走马灯”文字提示，操作如下：Function scrollit_r21(seed) var m1 = “状态栏文字运动”； var m2 = “ ”; var msg=m1+m2;var out = “ ”; var c = 1; var speed = 0 if (seed 100) seed-=2; var cmd=”scrollit_r21(“ + seed + ”)”; timerTwo=window,setTimeout(cmd,speed); else if (seed 0) for (c=0 ; cseed ; c+) out+=” ”; out+=msg; seed-=2; var cmd=”scrollit_r21(“ + seed + ”)”; window.status=out; timerTwo=window.setTimeout(cmd,speed); else if (seed=0) if (-seed主要到代码中除了我们已经学习过的脚本外，还有window.status的代码。其中window表示浏览器窗口本身，status表示的是浏览器窗口状态栏，他们都是DOM元素，通过脚本程序，可以对这些DOM元素进行控制，实现各种各样的特殊效果。三、作业：尝试运用DOM与脚本技术，为你的主题网站首页状态栏加上一个滚动字幕。四、教学反思：