網(wǎng)站建設(shè)是指使用標(biāo)識(shí)語(yǔ)言（markup language)，通過(guò)一系列設(shè)計(jì)、建模、和執(zhí)行的過(guò)程將電子格式的信息通過(guò)互聯(lián)網(wǎng)傳輸，最終以圖形用戶(hù)界面（GUI）的形式被用戶(hù)所瀏覽。簡(jiǎn)單來(lái)說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)的目的就是產(chǎn)生網(wǎng)站。簡(jiǎn)單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過(guò)使超文件標(biāo)示語(yǔ)言、可擴(kuò)展超文本標(biāo)記語(yǔ)言等標(biāo)示語(yǔ)言放置到網(wǎng)站頁(yè)面上。

　　盡管Dynamic HTML看似熱鬧，實(shí)際上，整個(gè)Web幾乎依然是靜態(tài)的。當(dāng)然，一段時(shí)間以來(lái)，一些比較前衛(wèi)的網(wǎng)點(diǎn)已經(jīng)有了一些交互式的內(nèi)容，但它們中的大部分還是在用插件或者是用針對(duì)不同版本的瀏覽器編寫(xiě)多個(gè)頁(yè)面的方式實(shí)現(xiàn)的。對(duì)于大多數(shù)網(wǎng)頁(yè)制作者來(lái)說(shuō)，即使他們很想為一個(gè)頁(yè)面編寫(xiě)多個(gè)版本，他們也很難有這個(gè)時(shí)間，再加上能達(dá)到交互式效果的網(wǎng)頁(yè)通常都需要很高的帶寬，這樣做出來(lái)的網(wǎng)頁(yè)是作者和瀏覽者都無(wú)法接受的。然而，并不是非得這樣不可。在這里，你可以學(xué)習(xí)到一個(gè)既快捷又簡(jiǎn)單的方法，它會(huì)給網(wǎng)頁(yè)在低帶寬情況下增加DHTML效果，這就是鼠標(biāo)擊活鏈接(mouseovers)的方法，這個(gè)方法既不用裝入任何圖片也不用編寫(xiě)多個(gè)頁(yè)面。 

更好的鼠標(biāo)捕捉信息方法 

　　鼠標(biāo)擊活鏈接(mouseover)是Web應(yīng)用最廣泛和最有效的動(dòng)態(tài)方法之一，一個(gè)很好的原因在于，它能使瀏覽者獲得清晰、直接的反饋。可以這樣設(shè)想：將鼠標(biāo)移到一個(gè)超文本鏈接上，該鏈接將會(huì)變?yōu)楦吡炼蕊@示、改變顏色，或者產(chǎn)生其他的變化以表示“我是一個(gè)鏈接！”。 

　　這并不是說(shuō)所創(chuàng)建的所有鼠標(biāo)擊活鏈接(mouseover)都是相同的。它們是不同的。最糟糕的情況是鼠標(biāo)擊活鏈接(mouseover)是用Java語(yǔ)言或者專(zhuān)用格式實(shí)現(xiàn)的，如Macromedia的Shockwave格式，它需要瀏覽者裝入插件才能看到效果。最好的情況是鼠標(biāo)擊活鏈接(mouseover)是用各瀏覽器都支持的JavaScript編寫(xiě)的。但即使是用JavaScript來(lái)實(shí)現(xiàn)，也需要瀏覽器裝入兩幅圖，分別用于高亮度和正常狀態(tài)的顯示，這對(duì)于帶寬的利用是一種浪費(fèi)。 

　　現(xiàn)在來(lái)看看DHTML，用它創(chuàng)建的鼠標(biāo)擊活鏈接(mouseover)無(wú)需裝入任何圖像。唯一需要注意的是，DHTML代碼需要通過(guò)瀏覽器來(lái)打開(kāi)Web頁(yè)面對(duì)象，如鏈接和風(fēng)格，以便由Document Object Model (DOM)來(lái)進(jìn)行描述。換句話(huà)說(shuō)，該代碼目前還只能在Internet Explorer 4.0中使用。不過(guò)，Netscape的第五代瀏覽器（預(yù)計(jì)今年年底出臺(tái)）將完全支持DOM。同時(shí)，不必?fù)?dān)心鼠標(biāo)擊活鏈接(mouseover)在不兼容瀏覽器中的使用，不支持頁(yè)面中的DHTML代碼的瀏覽器會(huì)簡(jiǎn)單地忽略它們。（細(xì)節(jié)請(qǐng)看后面的“在你的網(wǎng)點(diǎn)上讓DOM發(fā)揮作用”一節(jié)） 

代碼 

　　普通的Web頁(yè)面分為兩個(gè)主要的區(qū)域：一個(gè)是內(nèi)容區(qū)，一個(gè)是導(dǎo)航區(qū)。鼠標(biāo)擊活鏈接(mouseover)通常都出現(xiàn)在導(dǎo)航區(qū)。典型的情況是用高亮度按鈕指示瀏覽者進(jìn)入該網(wǎng)點(diǎn)的不同區(qū)域，如網(wǎng)點(diǎn)圖或反饋?lái)?yè)面。我們現(xiàn)在不用按鈕，而要將普通文本鏈接變成交互式的鼠標(biāo)擊活鏈接(mouseover)，方法是：首先在文檔中插入普通文本連鏈接，如： 

　　< a href="contact_us.html"> 

　　Contact Us< /a> 

　　第二步改變當(dāng)鼠標(biāo)移到文本鏈接上時(shí)該鏈接所顯示的顏色。其DHTML腳本程序如下： 

　　function rollon( ){ 

　　 if (window.event. 

　　 srcElement.tagName = = "A"){ 

　　 window.event.srcElement. 

　　 style.color = "red";} 

　　 } 

　　function rolloff( ){ 

　　 if (window.event. 

　　 srcElement.tagName = = "A"){ 

　　 window.event.srcElement. 

　　 style.color = "";} 

　　 } 

　　document.onmouseover = rollon; 

　　document.onmouseout = rolloff; 　　 

　　將這段代碼放在一對(duì)< script>標(biāo)記中間，插入到Web頁(yè)面的< head>中，立刻就能實(shí)現(xiàn)在每一個(gè)文本鏈接上的鼠標(biāo)擊活鏈接(mouseover)效果了。下面我們?cè)敿?xì)分析一下這是怎樣實(shí)現(xiàn)的。 

　　前面所寫(xiě)的腳本程序定義了兩個(gè)關(guān)鍵性的函數(shù)：rollon（當(dāng)鼠標(biāo)移到鏈接上時(shí)激活）和rolloff（當(dāng)鼠標(biāo)移離鏈接時(shí)激活）。每個(gè)函數(shù)都從一個(gè)簡(jiǎn)單的'if'語(yǔ)句開(kāi)始，它的意思是：Web文檔每次調(diào)用onmouseover事件時(shí)，rollon函數(shù)都會(huì)通知瀏覽器來(lái)判斷激活該事件的對(duì)象是否是一個(gè)Anchor標(biāo)記 (window.event.srcElement.tagName = = "A")。如果是，則該腳本程序?qū)�把特別的風(fēng)格（在本例中是紅顏色）用到鏈接上。類(lèi)似地，在出現(xiàn)onmouseout事件時(shí)，rolloff函數(shù)將使該風(fēng)格恢復(fù)為其缺省的顏色 (color="")。 

　　這段腳本程序的最后兩行是通知瀏覽器在onmouseover事件發(fā)生時(shí)執(zhí)行rollon函數(shù)并在onmouseout事件發(fā)生時(shí)關(guān)閉鼠標(biāo)擊活鏈接(mouseover)功能。 

事半功倍 

　　Internet Explorer 4.0允許你用DHTML來(lái)控制文檔中的每一個(gè)對(duì)象，自然就可以實(shí)現(xiàn)除改變Anchor標(biāo)記的顏色之外更多的功能。實(shí)際上，你可以將任何Cascading Style Sheets（CSS，是W3C的標(biāo)準(zhǔn)格式規(guī)范）中的元素應(yīng)用到任何類(lèi)型的對(duì)象或資源組件上。例如，除了使一個(gè)鏈接顯示為紅色之外，還可以給它加上或去掉下劃線(xiàn)。 

　　要去掉下劃線(xiàn)，只需簡(jiǎn)單地將如下風(fēng)格屬性插入到該頁(yè)面上的所有Anchor標(biāo)記中即可： 

　　style = "text-decoration: none" 

　　這個(gè)語(yǔ)句將去掉鏈接的下劃線(xiàn)，使它顯示為正�；蛉笔�狀態(tài)。（在缺省情況下，Internet Explorer 4.0和Navigator 4.0將所有文本鏈接都加下劃線(xiàn)，上述語(yǔ)句將逐個(gè)地改變這些鏈接的缺省狀態(tài)。） 

　　然后，在rollon函數(shù)下邊加上如下語(yǔ)句： 

　　window.event.srcElement.style. 

　　textDecoration = "underline"; 

　　現(xiàn)在，你所定義的鼠標(biāo)擊活鏈接(mouseover)事件的資源將變成紅色并且有下劃線(xiàn)風(fēng)格。要注意在rolloff函數(shù)中加上如下語(yǔ)句可以再把下劃線(xiàn)去掉： 

　　window.event.srcElement.style. 

　　textDecoration = "none"; 

　　以上這些很快即可實(shí)現(xiàn)的修改功能顯示了簡(jiǎn)單的DHTML腳本程序的威力，它無(wú)需裝入任何圖像，而是用一段高度靈活的可移植代碼來(lái)產(chǎn)生引人注目的視覺(jué)效果，我可以說(shuō)，你用它能訪(fǎng)問(wèn)任意文檔，即使是在老版本的瀏覽器中也不會(huì)產(chǎn)生錯(cuò)誤。想要獲得此代碼并自己加以掌握和應(yīng)用的話(huà)，請(qǐng)?jiān)L問(wèn)我們的網(wǎng)點(diǎn)：windowspro.com">www.windowspro.com。 

　　----------------- 

　　Edward Grossman是windowspro.com">www.windowspro.com網(wǎng)點(diǎn)的制作人，哲學(xué)博士，Web出現(xiàn)以前從事哲學(xué)領(lǐng)域的研究。他的E-mail：Edward_Grossman@zd.com 

　　只需在文檔的①head中加入約15行代碼，就可以將任何Web網(wǎng)頁(yè)上的②普通文本鏈接變成③交互式的鼠標(biāo)擊活鏈接(mouseover)。 

　　------------ 

　　在你的網(wǎng)點(diǎn)上讓DOM發(fā)揮作用 

　　有了Dynamic HTML (DHTML)，面向?qū)ο蟮某绦蛟O(shè)計(jì)已不再是只有編程專(zhuān)家才能作的事情，它正成為所有有經(jīng)驗(yàn)的網(wǎng)頁(yè)制作者也能涉足的領(lǐng)域。這在很大程度上要?dú)w功于Document Object Model，即DOM。這個(gè)W3C規(guī)范將文檔中的每個(gè)成分都視為對(duì)象，不論它是一個(gè)、一種風(fēng)格還是一個(gè)鏈接。腳本程序可以根據(jù)用戶(hù)的輸入、瀏覽器的類(lèi)型或許多其他變量對(duì)這些對(duì)象進(jìn)行修改，包括改變 的大小，改變風(fēng)格，或者更新鏈接。 

　　DOM可以打開(kāi)整個(gè)文檔，讓W(xué)eb制作者創(chuàng)建高度可定制的交互式頁(yè)面，而不給用戶(hù)造成大量下載的開(kāi)銷(xiāo)。這不僅可以實(shí)現(xiàn)低帶寬的鼠標(biāo)擊活鏈接(mouseover)，還可以實(shí)現(xiàn)可折疊的網(wǎng)頁(yè)瀏覽菜單及可移動(dòng)的頁(yè)面組件（如圖像、文本塊等）。 

　　關(guān)于DOM的更多信息，請(qǐng)?jiān)L問(wèn)網(wǎng)點(diǎn)：www.w3.org/dom、www.microsoft.com/workshop/author/dhtml/和developer.netscape.com/docs/manuals/communicator/dynhtml/。 

　　有關(guān)DHTML的應(yīng)用實(shí)例，請(qǐng)?jiān)L問(wèn)：windowspro.com">www.windowspro.com和www.projectcool.com（試試將Saturn到處拖動(dòng)），并請(qǐng)瀏覽“View source”。 

　　在IE 4.0中，可以用Dynamic HTML實(shí)現(xiàn)對(duì)幾十種對(duì)象的操作。在網(wǎng)點(diǎn)www.microsoft.com上有詳細(xì)內(nèi)容的列表。