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

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

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

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

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

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

代碼 

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

　　< a href="contact_us.html"> 

　　Contact Us< /a> 

　　第二步改變當(dāng)鼠標(biāo)移到文本鏈接上時該鏈接所顯示的顏色。其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; 　　 

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

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

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

事半功倍 

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

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

　　style = "text-decoration: none" 

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

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

　　window.event.srcElement.style. 

　　textDecoration = "underline"; 

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

　　window.event.srcElement.style. 

　　textDecoration = "none"; 

　　以上這些很快即可實(shí)現(xiàn)的修改功能顯示了簡單的DHTML腳本程序的威力，它無需裝入任何圖像，而是用一段高度靈活的可移植代碼來產(chǎn)生引人注目的視覺效果，我可以說，你用它能訪問任意文檔，即使是在老版本的瀏覽器中也不會產(chǎn)生錯誤。想要獲得此代碼并自己加以掌握和應(yīng)用的話，請訪問我們的網(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)頁上的②普通文本鏈接變成③交互式的鼠標(biāo)擊活鏈接(mouseover)。 

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

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

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

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

　　關(guān)于DOM的更多信息，請訪問網(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í)例，請訪問：windowspro.com">www.windowspro.com和www.projectcool.com（試試將Saturn到處拖動），并請瀏覽“View source”。 

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