DHTML

如何用用DHTML编制网页

时间:2024-10-17 15:09:44 DHTML 我要投稿
  • 相关推荐

如何用用DHTML编制网页

  用DHTML编制网页

  1 前 言

  随着Internet/Intranet的不断普及和发展,越来越多的公司、企业和个人正在开始建设自己的Web站点、编写Web网页,以一种新的方式向外界发布信息,供人们去浏览、阅读和应用。因此,网页制作已经受到越来越多的专业人员的重视。

  网页是指通过Internet向全球提供信息的一些文档文件,包括个人信息、商业、娱乐等内容。网页是利用超文本标志语言HTML(HyperTextMarkupLanguge)编写的,存放在Internet/Intranet上的Web服务器中,供访问者使用浏览器(Browser)来阅读。利用HTML语言编写出来的网页又称为超文本,即网页中包含有文本、图形、声音、图像和超链接(HyperLink)等多媒体信息。

  2 DHTML简

  我我在浏览器中能接触到大量使用HTML和脚本语言编写的网页。为了方便浏览,各计算机厂商纷纷推出了自己的浏览器,这些浏览器对HTML的支持还没有一个统一的规范,显然这不利于互连网的发展。因此,万维网协会W3C(WorldWideWebConsortium)制定了一个与平台和语言无关的规范,即文档对象模型DOM(DocumentObjectModel)。

  DOM将HTML、CSS(层叠样式表)和脚本语言联合起来组成一个或多个人都能实现的互操作模型。Netscape、Microsoft都向W3C提出了实现DOM的建议:使用动态HTML,即DHTML(DynamicHTML)来解决问题。

  DHTML是在保持与现有HTML兼容的基础上扩展出来的几种新功能的总称。这些新功能主要是指动态功能、定位功能以及利用CSS的功能。

  使用DHTML的原因有两个:一是DHTML将网页上的每一个元素划分成许多独立的对象,这些对象的属性通过CSS来指定。二是DHTML将每个对象向一个编程和脚本语言的框架开放,可使用编程语言C++操纵网页上的对象,也可使用Javascript、VBscript操纵网页上的对象。这就表示Web页和其上的一切东西都是可编程的,这给Web页带来了新的功能。当我们在执行应用程序时就会发现不同之处:以前在Web上运行程序时,每次在单个元素后必须等待该网页重新下载,如果一个Web页包含了大量隐藏的对象,甚至一屏屏全新的页面,那将会经历一个再次访问服务器的过程;而使用DHTML,可以单击屏幕上方的某个图象,就可以使屏幕下方的段落立刻发生变化,而不必再访问服务器。所有的表格将变成活的数据库,用户可以动态和排序的筛选其中的数据。这样一来,就减少了对服务器的请求,因此降低了服务器的负荷,提高了客户机和服务器的总体性能。

  3 使用样式表CSS

  DHTML的基础是层叠样式表CSS(CascadingStyleSheets),样式是指由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〉

  〈STYLETYPE=”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〉THISISATEST!〈/H1〉 /使用样式H1/

  〈PCLASS=”favor”〉DOYOULIKETHIS?〈/P〉 /使用样式favor/

  3.2 使用外部样式

  样式表还可以存放在外部文件中,这个文件与页面的联系可以通过IMPORT或LINK,例如,样式表存放在文件mysite.css中,在文档中可以插入下列代码调用外部样式表:

  〈LINKREL=STYLESHEET

  HREF=”mysite.css”

  TYPE=”text/css”

  Title=”TestStyle”〉

  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://www.knowsky.com/”/image/a.gif)

  〈DIVCLASS=”pile”ID=”image1”style=”z-index:4”〉

  〈DIVCLASS=”pile”ID=”image2”style=”z-index:3”〉

  〈DIVCLASS=”pine”ID=”image3”style=”z-index:2”〉

  〈DIVCLASS=”pine”ID=”image4”style=”z-index:1”〉

  〈/BODY〉

  在上面的程序段中,背景设成了让光线透过底图,这样的效果在以前是要通过专门的做图工具才能完成的。在页面上还堆叠放置了4幅图,它们所产生的动画效果也是很不错的。

【如何用用DHTML编制网页】相关文章:

网页打不开如何解决02-14

如何学好网页美工设计09-05

工程资料编制整理及归档知识04-08

网页设计的色彩运用09-11

施工图预算编制内容要点08-02

网页滚动文字的制作HTML代码04-10

工程施工进度计划编制要点02-03

网页制作中PS图像处理的应用07-16

网页设计色彩搭配的基本知识03-28

不能打开网页的解决办法04-13