1 前 言
随着inte.net／intr.net的不断普及和发展，越来越多的公司、企业和个人正在开始建设自己的web站点、编写web网页，以一种新的方式向外界发布信息，供人们去浏览、阅读和应用。因此，网页制作已经受到越来越多的专业人员的重视。
网页是指通过inte.net向全球提供信息的一些文档文件，包括个人信息、商业、娱乐等内容。网页是利用超文本标志语言html(hypertext markup languge)编写的，存放在inte.net／intr.net上的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=”／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 北京市
Java Asp PHP .Net XML C/C++ CGI VB Jsp J2ee J2se J2me EJB Servlet Tomcat Resin Struts Weblogic Eclipse ANT GUI JMS Web servise IDEA Webphere Hibernate Spring Jboss Applet Swing Socket Javamail Perl Ajax P2P 安全 模式 框架 测试 开源 游戏
Windows XP Windows 2000 Windows 2003 Windows Me Windows 9.x Linux UNIX 注册表 操作系统 服务器 应用服务器
