dhtml

很多朋友可能都听说过Dynamic HTML也就是动态HTML，以下称之
为DHTML。但到底DHTML是什么呢？

　　我们首先来看一看HTML。它是一种“静态”的网页设计语
言，主要提供文本和图形的显示功能。但它很难提供多媒体、二
维空间移动、精确定位文字、图形的大小和位置。

　　DHTML作为浏览器自带的功能，实际上只是一种概念，它并
不属于一种专门技术（如JavaScript，ActiveX），它也不是指
标签，Plug-in，或者是浏览器。

　　DHTML是近年来网络发展进程中最振奋人心也最具实用性的
创新之一。它是一种通过各种技术的综合发展而得以实现的概念。
当然，不同的浏览器，实现的程度也不同），这些技术包括
JavaScript, VBScript, Document Object Model(文件目标模块)
简称DOM，Layers和Cascading Style Sheets(CSS)等。

笔者注：Layer 不是技术，而只是个概念。它是网景首先提出来
的标签以支持 dhtml。微软则用 style 标签。制作IE4及NN4兼
容的 dhtml 网页必须先使用这两个标签达到兼容。

　　那么，什么是 DHTML？简而言之，DHTML 就是一种即使在网
页下载进浏览器以后仍然能够随时变换更新网页内容排版样式以
及动画等等。因为IE4和NN4所宣称的DHTML内容并不完全一致，
所以后面我们共同来了解两种浏览器各自所提供的功能。

　　当您拨号上网，键入了正确的URL（网址）。HTML便下载到
了您的电脑里。这就需要我们提到的构成DHTML的各种技术来指
使浏览器完成这些变化。

1. 客户端的脚本程序语言。
　　长期以来人们用脚本语言（JavaScript和VBScript）来编写，
使 HTML 产生动态效果。如果您使用的是IE4 或NN4 以上版本的
浏览器。当您的鼠标在一些图形和控键上移过时便会产生一些奇
妙的变化。

2. 文件目标模块（DOM）
　　在某种意义上，DOM 是动态 HTML 的真正核心内容。正是它
使得 HTML 具备了变动性。DOM 体现的是网页元素的等级关系，
这些元素在指定的时间在浏览器上呈现。DOM 包括时空背景信
息，如当前的日期、时间，包括浏览器自身属性，如浏览器的
版本号，包括窗口自身属性，如网页的 URL，最后还包括各HTML
元素，如 <P> 标签，<div>，或者表格。通过将
DOM 向动态 HTML 语言公开，浏览器能够使网页更多的功能元
素发挥作用。如果象日期、时间之类的元素不能够自动变换的
话，它也可以通过 Scripts 修改其他元素来完成。IE4 的DOM
是多数人选择IE 浏览器的其中一个原因。尽管 Netscape 的DOM
较之IE 的有很多的局限性，Netscape 声称在以后浏览器的新
版本中，这种功能将完全支持 W3C 所定的 DOM 标准。

3.层叠样式表（Cascading Style Sheets，CSS)
 　CSS属于DOM的一部分，它的属性可以通过动态HTML编写语
言得到体现，因此能够实现页面外在视觉效果的几乎一切变化。
通过改变页面元素的CSS属性（如颜色、位置、大小），你可
以达到你机器的带宽和处理器运行速度允许范围内的一切效果。

　综上所述，CSS是你进行网页改变的对象，DOM 是其具有变
动性的机制，而客户端的脚本语言是实际促成变化的程序。这，
就是动态HTML。

  如果您是一位初步接触HTML的朋友可能仍然会觉得这些概念
有些抽象，没关系这很正常。您不用着急马上了解每一个名词
的具体含义以及程序代码。还是先让我们直观的看一看DHTML
在IE4 和NN4 这两种最常用的浏览器中的功能。

1、 IE4 版本
1） 动态排版样式：可以精确的以象素、点、英尺等单位设定
HTML中字体类型、粗细、样式、行高、颜色、加线等，图象、
背景图象的排版功能。并可随时改变样式。

2） 移动：配合JavaScript、VBScript语言与IE4 内建的
ActiveX 提供移动、变换图形的功能。

3） 动态内容：动态更新网叶内容，随时插入表格和文本等功
能。

4） 动画内容：IE4 内建的媒体控制提供动画的播放功能。

5） 内建数据库支持：不用复杂的程序（这是我们最希望的），
不用费服务器很多资源便可以处理网页设计人员的数据（能省
钱当然更是我们最希望的呀）。DHTML 可以处理三种数据源，
包括文件、SQL、JDBC。

笔者注：IE4 接受中文显示的局限性太大，往往降低电脑速度。
在 dhtml 中，如由 <form> 形成的按钮与其它对象重叠
时，则大大减低按钮的灵活性，甚至失灵。

2、 NN4版本

1） 动态排版样式：可使用JavaScript控制Style Sheets.

2） 动态层：提供图文定位、改变图文重叠顺序、控制隐藏或显
示图文、移动图文的功能，让您设计出动画效果。

3） 动态字体：提供服务器下载字体功能。

笔者注：NN4 对JavaScript 的反映太慢。在动画相当多时，有
时速度极慢，甚至死机。不支持声音文件类的对象。<form>
按钮作为对象时，不能控制其在CSS中的层次(z-index:)。表格
作为对象时，再在它上面加链接常常出错。当然，NN4 在支持
dhtml 方面较 IE4 保守。

　　看了那么多文字是不是有些累呢？还是因为感觉没有得到
什么实惠而有些后悔呢？下面我给大家举一个很简单的例子，
相信您一定有所收获。

 　　这是CSS控制文字的一段程序：

    <head>
    <style type="text/css">
    <!--
    A:link,a:visited{ text-decoration: none }
    A:link{color:blue}
    A:hover{color:red}
    -->
    </style>
    </head>

 　　看一看，很简单吧。真正的代码就三句。<style>是
CSS的标签<!-->是为了使不支持它的浏览器跳过这一段代
码。A:是指后面的程序<body>中的标签<a></a>中的文字
内容有效，也就是我们通常做链接的内容，里面的内容一
看就明白了，用我借你一个字典吗？

 　　这样一来，链接的文字不仅没有了讨厌的下划线，
而且还有onmouseover的效果（鼠标从链接的文字上划过
有不同的颜色显示。

 　　不要犹豫了，加到网页里看一看效果。试试再改一改。
加一句a:hover {text-decoration:underline}是不是效果
更好？

笔者注：用 NN4 试试？是不是也如此？(您会发现，IE4 与
NN4 的明争暗斗给编程人员带来了多大麻烦。) :-((

 　　和图片同样的效果而字符又加快了下载速度，代码
又如此容易，今天有收获吧。赶快把它转化为生产力吧。

笔者注：代码容易？你得先决定拿谁看，IE4 还是 NN4 ？若
IE4 及 NN4 都能看，代码可能就麻烦点儿了:-D。不信您看
本页闪电的 dhtml 代码，为了二者兼容，笔者多写了多少
行？