1　前　言

　　随着Internet／Intranet的不断普及和发展，越来越多的公司、企业和团体正在开始建设本人的Web站点、编写Web网页，以一种新的方式向外界发布信息，供人们去浏览、阅读和使用。因此，网页制造曾经遭到越来越多的专业人员的注重。
　　网页是指通过Internet向全球提供信息的一些文档文件，包括团体信息、商业、文娱等内容。网页是利用超文本标志言语HTML(HyperText Markup Languge)编写的，存放在Internet／Intranet上的Web服务器中，供访问者使用浏览器 (Browser)来阅读。利用HTML言语编写出来的网页又称为超文本，即网页中包含有文本、图形、声音、图像和超链接(HyperLink)等多媒体信息。

2　DHTML简

　　我我在浏览器中能接触到大量使用HTML和脚本言语编写的网页。为了方便浏览，各计算机厂商纷纷推出了本人的浏览器，这些浏览器对HTML的支持还没有一个统一的规范，显然这不利于互连网的发展。因此，万维网协会W3C(World Wide Web Consortium)制定了一个与平台和言语无关的规范，即文档对象模型DOM(Document Object Model)。
　　DOM将HTML、CSS(层叠款式表)和脚本言语联合起来组成一个或多团体都能实现的互操作模型。Netscape、Microsoft都向W3C提出了实现DOM的建议：使用动态HTML，即DHTML(Dynamic HTML)来处理问题。
　　DHTML是在保持与现有HTML兼容的基础上扩展出来的几种新功用的总称。这些新功用次要是指动态功用、定位功用以及利用CSS的功用。
　　使用DHTML的缘由有两个：一是DHTML将网页上的每一个元素划分成许多独立的对象，这些对象的属性通过CSS来指定。二是DHTML将每个对象向一个编程和脚本言语的框架开放，可使用编程言语C++操纵网页上的对象，也可使用Java script、VBscript操纵网页上的对象。这就表示Web页和其上的一切东西都是可编程的，这给Web页带来了新的功用。当我们在执行使用程序时就会发现不同之处：以前在Web上运转程序时，每次在单个元素后必须等待该网页重新下载，如果一个Web页包含了大量隐藏的对象，甚至一屏屏全新的页面，那将会经历一个再次访问服务器的过程；而使用DHTML，可以单击屏幕上方的某个图象，就可以使屏幕下方的段落立刻发生变化，而不必再访问服务器。所有的表格将变成活的数据库，用户可以动态和排序的筛选其中的数据。这样一来，就减少了对服务器的请求，因此降低了服务器的负荷，提高了客户机和服务器的总体功用。

3　使用款式表CSS 

　　DHTML的基础是层叠款式表CSS(Cascading Style Sheets)，款式是指由Web页作者定义的一组显示和定位属性。CSS最大的特点是面向对象的网页设计，也就是说，把每一页、每一段落、每个图象和表格都看成是一个对象。然后声明该对象的每个实例。每个实例都有一种款式 (Style)，即一组属性或显示指令。只需声明一次，这些属性就会贯穿在整个网页甚至整个站点中。可以对每一种款式赋予一个名字，如H1、Li如果该款式的名称与一个无效的DHTML元素(或标记)的名称相反，则该款式就自动的作用于该元素的每一个实例；如果给一种款式所起的名称没有相应的DHTML标记，就必须人工地将该款式施加到希望它出现的地方。
3.1　定义和使用基本款式
　　下面的程序段中有两个款式：H1和favor，H1是一个无效的DHTML元素，在程序中由〈H1〉〈／H1〉标记的部分将承继款式H1的全部属性；favor则是一个非DHTML元素，定义它的时候须在前面加上一个圆点，援用时要用〈class〉来声明，在程序中由〈favor〉〈／favor〉标记的部分将承继款式favor的全部属性。
〈HTML〉
〈HEAD〉〈TITLE〉test〈／TITLE〉
〈STYLE TYPE=”text／css〉
〈 !--
H1{font-style:normal;
font-weight:bold;
color：green;
line-height:20pt}　　／定义款式H1／
.favor{font-style:normal;
fontsize:15pt;
background-image:url(back.imag.gif);
textalign:center}　　／定义款式favor／
--〉
〈／STYLE〉
〈／HEAD〉
〈H1〉THIS IS A TEST!〈／H1〉　　／使用款式H1／
〈P CLASS=”favor”〉DO YOU LIKE THIS?〈／P〉　　／使用款式favor／　

3.2　使用外部款式
　　款式表还可以存放在外部文件中，这个文件与页面的联系可以通过IMPORT或LINK，例如，款式表存放在文件mysite.css中，在文档中可以插入下列代码调用外部款式表：
〈LINK REL=STYLESHEET
HREF=”mysite.css”
TYPE=”text／css”
Title=”Test Style”〉

4　实现交互功用

　　CSS本身没有交互功用，要实现交互，就须将CSS定义的对象与文档模型(DOM)结合在一同，将Web文档转换为DHTML文档。DOM提供了脚本言语访问页上元素的途径，Microsoft和Netscape支持的对象模型有一些不同。
　　在Microsoft的模型中，脚本言语可以访问HTML页面上的所有元素，所有元素都被反映为document.all中的对象。下面的程序段用于写出页面中所有的元素：
　　for (I=0;I〈document.all.length;I++)
　　 {
　　　document.write(document.all［I］.tagName+”＼n” )；
　　 }
　　在Netscape的模型中，脚本言语可以访问HTML页面上特定集合的元素，如〈layer〉标签中的内容。下面的程序段用于写出页面中所有layer的名称：
　　for (I=0;I〈document.layers.length;I++)
　　 {
　　　　document.write(document.layers［I］.name+”＼n” )；
　　 }

5　定位技术的使用

　　在HTML中，任何对象的位置与网页结构的其他部分总是绝对的，我们编制网页时经常会由于添加一段文字而把一个图象挤出页面。如今，使用DHTML的定位技术可以把对象固定下来，还可以堆叠起来，即在页面的同一位置摆放多个图象，然后不断的指定摆放在最上面的对象来实现动画效果。
例子：
*myback{background-color:transparent}
*mypoit
　　position:absolute;
　　top:5in;
　　right:5in;
　　width:10in}
BODY{background-image:url(／image／back.gif);}
〈class=.mypoint〉 Img(src=http://edu.cnzz.cn/NewsInfo/”／image／a.gif)
〈DIV CLASS=”pile”ID=”image1”style=”z-index:4”〉
〈DIV CLASS=”pile”ID=”image2”style=”z-index:3”〉
〈DIV CLASS=”pine”ID=”image3”style=”z-index:2”〉
〈DIV CLASS=”pine”ID=”image4”style=”z-index:1”〉
〈／BODY〉
　　在上面的程序段中，背景设成了让光线透过底图，这样的效果在以前是要通过专门的做图工具才能完成的。在页面上还堆叠放置了4幅图，它们所产生的动画效果也是很不错的。

6　结束语

　　以上对如何使用DHTML编制网页做了一些研讨，还有许多技术问题等待网页制造者们共同深化。

蔚笑檀　北方交大交通运输学院　在读硕士研讨生　100044　北京市