您的位置:首页 > 软件资讯 > 正文

如何用DHTML编制网页

来源:网络 作者: 时间:2020-08-01

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=”/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 北京市


华帝燃气灶维修电话 http://gd15674.51sole.com

【责任编辑:admin】