网页设计与制作_第5章 动态网页以及JavaScript.pptVIP

DHTML着眼于以更少而又更快的页面下载，提供更丰富的图形和数据，特别是它使得依赖于用户的反馈来提供不同的信息变得更容易。它的功能比HTML更为强大，并在保持了一些熟悉的语言的同时还扩展了HTML，DHTML的概念是以更少、更快捷的页面下载，提供更加丰富多彩的图形和数据。但是从实质上来说，DHTML作为浏览器自带的功能，实际上只是一种概念，并不属于一种专门的技术。DHTML就是一种即使在网页下载进入浏览器以后，仍然能够随时变换更新的网页内容排版样式以及动画等等技术，它是一种通过各种技术的综合发展而得以实现的概念。DHTML有三个最主要的优点,即动态样式、动态内容和动态定位。动态样式使制作者改变内容的外部特征而不强制用户再次下载全部的内容；动态内容可以使开发人员改变显示在一页上的文本或图像，以便内容能够交互式地对用户的鼠标和键盘操作做出响应；动态定位则让页面制作者以自动的方式或对用户的操作做出响应的方式来移动页面上的文本和图像。由于DHTML是浏览器自带的功能，因此令人非常遗憾的是Netscape和微软IE所执行的DHTNL不同，并不能通用，但这两种不同风格的DHTML具备各自的优点。为了使网页更具有通用性，在编写脚本程序时应考虑这个问题。 DHTML的三个主要组成部分及其功能如下：１）CSS：CSS控制用XML或HTML语言编写文档的显示，它可以使页面布局和格式比HTML更精确。２）DOM：文档对象模型，为HTML文档定义了一个与平台无关的程序接口。使用该程序接口可以控制文档的内容、结构和样式，Web开发人员借助DOM可以在其Web页引入动态和交互式内容，而不必依赖Web服务器来提供新的内容或改变现有内容的显示方式。３）脚本语言：DHTML的第三个部分是脚本语言，目前广为流行的脚本语言有两种：JavaScript和VBScript。这两种语言可以嵌入到HTML文件之中，无需编译就可以在支持脚本的浏览器中解释运行。通过使用脚本可以大大加强Web页面的交互性，如：显示带有控制的文本、建立交互式表格等等。脚本还可以使Web页面上显示的文本信息动起来或加入一些动画，从而使得Web页面看上去活泼诱人。综上所述，DHTML具有良好的交互性和动态特性，加之网页已有的多媒体超文本实现能力，已经开始得到大力的发展和推广，得到广泛的使用，具有良好的应用前景。 5．2使用DreamWeaver制作动态网页的几个特效 本节介绍用于网页添加交互性的行为，首先介绍行为面板的认识，接着介绍DreamWeaver中常用的行为。 5．2．1行为面板的认识 在DreamWeaver实现网页的动态效果的方法之一就是利用行为面板，行为面板可以让网页具有强大的交互功能，它能够根据访问者通过鼠标的不同动作来让网页执行相应的操作，或相应的更改网页的内容。使用行为面板使得网页制作人员不用编程就能实现一些程序动作，比如验证表单、打开一个浏览器窗口等。 行为面板的认识 行为面板是事件和动作的组合。例如，网页中有一幅图片，当访问者将鼠标指针移到这个图片上的时候（事件），该图片上的内容变为另一张图片的内容（动作）。动作是预先编写好的JavaScript脚本，可用来执行指定的任务，例如打开浏览器、播放声音等。事件则是由浏览器为每个页面元素定义的，是访问者对网页的基本操作，例如OnMouseOver、OnClick等，它们在大多数浏览器中与链接相关联，而OnLoad则是与图像以及文档正文相关联的事件。 简单地说，DreamWeaver的行为是将JavaScript代码放置在文档中，允许访问者与网站页面进行交互，行为面板是事件和由事件所触发的动作的组合。在“行为”面板中，可以指定一个动作或者自己利用脚本语言编写一个动作，也可以指定触发该动作的事件，并可将行为添加到网站页面中。 行为面板的认识 DreamWeaver中使用行为的主要方式是通过“行为”面板。要使用行为面板及其当中的行为可以执行以下步骤： （1）选择“窗口”菜单中的“行为”命令（或按shife+F3组合键），打开行为面板 （2）单击“行为”面板上的按钮，在出现的菜单中选择所需要的动作。 （3）在“行为”面板中选择某一事件，单击按钮便可从事件列表中删除所选择的事件。 （4）在动作列表中，单击（向上）或（向下）按钮可向上或向下移动所选定的动作。 行为面板的认识 用户可以将行为附加给整个文档（body部分），也可以附加给链接、图像、表单等对象或任意其他HTML元素。如果浏览器支持，将会显示在菜单栏中。每个事件可以指定多个动作，动作将按顺序列表依次发生。 5．2．2在DreamWeaver中制作动态网页的实例 1、DreamWeaver自带行为动作的介绍 DreamWeaver自己提供了大约20多个行为动作，这些