中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

如何用DHTML编制网页 - okajax.com - Ajax中国

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > Ajax技术 > DHTML > 如何用DHTML编制网页

如何用DHTML编制网页

2008-06-29    文章来源:互联网    浏览次数:

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 北京市

TAGs:

文章评论(查看全部)

看不清楚?单击换一张。
loading.. 评论加载中....
关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部