DHTML编写经得起考验的可移植代码

动态HTML（DHTML）技术——实际上是多项技术的组合，包括CSS、DOM和JavaScript——为Web设计者提供了多种选择，能让他们向其网页中添加动态菜单和各种导航的小玩意。但是，这些技术也带来臃肿的代码，导致浏览器互不兼容的问题和向老平台移植性的丢失。简而言之，用于HTML代码编写的动态选择越多，出现错误代码的可能性也就越大。但是只要遵照一些简单的编写原则，你可以保证自己代码的健壮性和高度的可移植性，而不用放弃对DHTML创新技术的巨大依赖。


第一：了解你的浏览器


浏览器互不不兼容是一个困扰Web开发人员多年的问题。但是在很多方面，随着浏览器和标示语言两者复杂性的增加，人们对其兼容性的关注有所减少。然而，有些结构上的冲突的确还在，尤其在你必须考虑自己页面的可访问性的时候。

例如，不是能够在Windows平台上运行的所有Netscape Navigator和Internet Explorer特性都能运行在Mac和Unix系统上。而且不是所有能够运行在Internet Explorer 4.0上的HTML 4.0代码都可以运行在Navigator 4.0。（Navigator 4.0不支持HTML 4.0所有弹出文本的特性。）而且，<BUTTON>标签对Navigator也不友好，诸如此类等等。这个互不兼容的单子很长，即便到现在也是如此。所以除了浏览器探测技术，你现在必须还要能够使用HTML、XHTML和CSS确认等。


第二：编写允许功能缩减的代码

跨平台所导致的错误是对健壮代码的一个重大威胁，但是向后兼容会更严重。尽管软件巨人们都在花大力气推广新版本，但是Internet Explorer和Netscape Navigator两者4.0以前的版本仍在大行其道，所以你的代码应该要能在其上运行——即使你使用的是DHTML的代码。

缩减功能的概念在软件工程中十分常见，它是指对逐渐失效而非突发性失效有所准备。其主旨就是设计一种机制，让相当一部分功能能在不同环境导致性能降低的情况下获得保留。这个概念还被相当多地用于软件，谨慎的开发人员会预计有缺陷的运行条件，并按照部分功能在碰到错误的时候得到保护的方式编写应用程序代码。

在编写Web应用程序代码的时候这一点尤其重要。想一想吧：任何对Internet世界开放的Web页面都需要运行在任何版本、任何数量的浏览器上。由定义可知，没有什么HTML代码能够运行在所有的浏览器上；错误是不可避免的。Java在低于版本3的浏览器上运行时会出问题。对象模型特性在跨当前不同浏览器时会不稳定。有些版本的Navigator只有使用插件才能正常处理ActiveX。当前不同的浏览器对层叠样式表（CSS）的支持也不尽相同等等。这个问题清单也很长。

有合格的设计者不仅应该为每个Web应用程序创建强健的错误处理机制，这要尽量多地考虑环境变化和潜在不兼容性的问题，还应该让应用程序的代码在碰到问题时能够保证更多的功能。

第三：尽可能地让代码形象化

冗余代码是编写易维护系统的最大障碍。创建函数或者子程序是程序员避免这一问题的自然反应，DHTML允许他们在这一点上的变通。

使用脚本和函数能够让动态Web页面程序员把相同的代码捆绑进易维护的程序组。这样，以后维护代码的程序员就能够很容易地读取代码和明确程序的功能，但是捆绑代码还有一个更大的目的：传统的HTML只允许一个函数被分配给一个对象，而嵌入式脚本编写和函数的动态应用能够提供一段专用的代码供多个对象的多个事件使用。

第四：让方法、类和继承为你服务

动态HTML对象模型是Web设计者的福音，它能对事件处理使用面向对象的方法，这个方法会用到OOP的所有关键特性：类、方法和继承的使用。

动态HTML对象模型让为对象分配属性成为可能，也让运用完整的连续性对点击事件设置可能的回应成为可能，同时能在你的路径里保持干净的易于维护的代码。大多数浏览的大多数版本都支持面向对象的特性，这让它们能够轻易地实现跨平台和跨版本。

DHTML功能强大的工具

尽管DHTML能够提供强大的功能，但是代码冗余、不同浏览器和浏览器不同版本之间的兼容性、放置不当的代码，以及难以维护的代码都太容易出现了。在有了正确浏览器的正确版本以后，你可以留下一个画面非常优美和功能极其强大的页面——但是一个不能容错以及千百万用户无法使用的页面是没有什么用的。以上所讲的原则能够有助于你打造出强大的经得起考验的代码。

源码：
<!--样式表部分-->
<style type=text/CSS>
.menu td{font-size:12px;color:white;font-weight:bold;background:#336699;border:1px solid #336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center}
</style>

<!--脚本定义部分-->
<script language=javascript type=text/javascript>
function showFilter(obj){
var tds=obj.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
with(tds[i]){
  onmouseover=function(){
  with(this){
  filters[0].apply();
  style.color='black';
  style.border='1px solid white';
  style.background='#66CCFF';
  filters[0].play();
  }
  }
  onmouseout=function(){
  with(this){
  filters[0].apply();
  style.color='white';
  style.border='1px solid #336699';
  style.background='#336699';
  filters[0].play();
  }
  }
}
}
}
</script>

<!--BODY部分-->
<table cellspacing=4 cellpadding=1 bgColor=#336699 border=0 class=menu width=100 id=xmenu>
<tr><td>0128论坛</td></tr>
<tr><td>例子二</td></tr>
<tr><td>例子三</td></tr>
<tr><td>例子四</td></tr>
<tr><td>例子五</td></tr>
<tr><td>例子六</td></tr>
</table>
<script>showFilter(xmenu); //里面就的xmenu就是表格的ID号此函数可到处调用</script>

·背景颜色 background-color
我想这个我就不用多做介绍了，颜色代码我想大家都知道的，不是用英文来代替就是用指定的代码来表示的。这个的默认值是transparent（透明色）。
例：body{background-color:yellow}
H1{background-color:#000000}

·背景图片 background-image
背景图片和背景颜色在HTML里面的设置也是基本相同的，都可以在里加入相关的语句来完成。但是在这里，我所指的并非是用这种方法，我用的方法还是CSS。background-image这个的主要功能也就是用来显示图片，如果需要显示图片的话，那么只要在后面加上url(图片的地址）就可以了，不显示嘛，那是最简单不过的了，什么也不要就行了，因为这个默认的就是none，而要加的话，就是在后面加上这个none就可以了。
例：body{background-image:url(file&:///C:/Windows/BACKGRND.GIF)}
h1{background-image:url(none)}

大家在使用里的背景图片时，一定常常遇到一些图片因为太小，而产生种种如图片的重复出现而破坏了整个页面的美感，想换成其它图片又不合适之类的麻烦情况吧。不过现在好了，大家只要用了以下的几个CSS里控制图片方法，那么你以后就不会再有此类的麻烦事发生了。

·图片是否重复显示 background-repeat
有时候重复显示是需要的，可是有时候重复显示则是让人头痛的，现在这个可以很好的帮助你了，而且它还可以帮你控制图片重复的方式（水平方向重复、垂直方向重复以及两个方向都有重复），而要实现这三个方向的重复也就只要在bcackground-repeat后面加上repeat-x（水平方向铺开）、repeat-y（垂直方向铺开）、repeat（两个方向铺开）。当然，它可以控制图片的重复，也可以控制图片不重复的。no-repeat这个就是用来表示只显示一幅背景图片，而不是重复出现的，这个可不是默认的哟，默认的是重复显示背景图片（repeat）。
例：body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat}

·定位图片显示位置 background-position
一张背景图片经过上面的设置后往往还不够的，因为当你使用上面的不重复显示设置后，图片只显示在页面的左上角，而不会在其它地方，可是如果要在中间或者其它地方出现这张背景图片的话，那么background-position这个就可以帮你了，因为它就是用来显示图片相对于左上角的一个位置的（就是默认的值0% 0%），由两个值来设定，中间用空格来隔开。它的主要的几个值有left|center|right和top|center|bottom，也可以用百分数值指定相对位置或用一个值来指定绝对位置，如50%表示的位置是在中心，而50px的水平值则表示图片距左上角区域水平移动50px单位；这里要特别指出的是，1当你设置值的时候只提供一个值，则相当于只指定水平位置，垂直自动设置为50%；2当你设置的值是负数的时候，则表示背景图片超出边界。
例：body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat;background-position:100px 10px}

·控制图片是否滚动 background-attachment
上面的两步可以帮你完成图像的定位，可是这样做好以后还不是完美的，因为如果你的页面有滚动条的时候，那么你这张背景图片就不会永远定位在那个位置了，如果想要图片永远定位在那个位置，就只有让这张图片随着页面的内容的滚动而滚动，这时background-attachment就可以帮你了你只要加入scroll（静止）和fixed（滚动）中的其中一个就可以了。当然不是让你乱加的，毕竟scroll是默认的，也就是不让图片随页面的内容而滚动的。
例：body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat;background-attachment:fixed}

好了，经过以上这番设置后，我相信你的背景一定会更美的，但是过多的代码往往可读性很差，容易让人产生错误，所以在这里我要告诉大家的就是可以把以上的代码全部加在一起使用，也就是说把以上相关的代码加到background中。在把代码加到background中的时候要在每个值中间加上空格来隔开，而且不要把背景颜色的代码放在背景图片的URL后面，以免图片显示不出来。
例：body{background:green url(file&:///C:/WINDOWS/BACKGRND.GIF) fixed 100px 50px no-repeat}

最后提醒一下大家，如果用代码直接插入的话，那么一定要放下面这个代码的里后再放在之间才能正常显示出来！

接下来我再介绍一下用DW4制作以上样式的方法，因为在DW中已经很详细的列出各项来了，具体的作用我也说明过了，所以就简要的介绍一下吧，只要大家能够明白就行了。
1.在此之前大家应该把CSS Styles这个窗口打开，如未打开的话，那么就按Shift+F11或者从Window下拉菜单中选择此项就可以了。
2.点击右键选择new style...这个选项或者点击下面的带有+号的图标。
3.在弹出的窗口中的选择如下，tag选择body因为我们上面介绍的CSS样式都是关于body的，而在这里我也只是介绍这个里面的background，其它的不要介绍内容之内；下面的type选择第二个；define也选择第二个，这样你呆会就可以在该文件中的之间找到一个了，而这里面的内容其实就是我上面介绍的。呵~_^
4.点击OK后弹出的窗口才是最重要的。我之前已说过，我们这次主要介绍的是background这个选项，所以在旁边的窗口中选中它吧。选中以后右边的窗口将会变成与它相关的设置项，具体的我在上面介绍过了，大家只要参照上面的介绍就可以完成了。不过需要说明一下的是在这个窗口中的最下面两项其实就是background-position中的水平方向垂直方向。
5.最后再点击OK就可以完成了。完成后你就可以在该页的代码（VIEw下的Code选项）中找到它们了。