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

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

更好的鼠標捕捉信息方法 

　　鼠標擊活鏈接(mouseover)是Web應用最廣泛和最有效的動態方法之一，一個很好的原因在于，它能使瀏覽者獲得清晰、直接的反饋。可以這樣設想：將鼠標移到一個超文本鏈接上，該鏈接將會變為高亮度顯示、改變顏色，或者產生其他的變化以表示“我是一個鏈接！”。 

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

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

代碼 

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

　　< a href="contact_us.html"> 

　　Contact Us< /a> 

　　第二步改變當鼠標移到文本鏈接上時該鏈接所顯示的顏色。其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>標記中間，插入到Web頁面的< head>中，立刻就能實現在每一個文本鏈接上的鼠標擊活鏈接(mouseover)效果了。下面我們詳細分析一下這是怎樣實現的。 

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

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

事半功倍 

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

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

　　style = "text-decoration: none" 

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

　　然后，在rollon函數下邊加上如下語句： 

　　window.event.srcElement.style. 

　　textDecoration = "underline"; 

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

　　window.event.srcElement.style. 

　　textDecoration = "none"; 

　　以上這些很快即可實現的修改功能顯示了簡單的DHTML腳本程序的威力，它無需裝入任何圖像，而是用一段高度靈活的可移植代碼來產生引人注目的視覺效果，我可以說，你用它能訪問任意文檔，即使是在老版本的瀏覽器中也不會產生錯誤。想要獲得此代碼并自己加以掌握和應用的話，請訪問我們的網點：windowspro.com">www.windowspro.com。 

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

　　Edward Grossman是windowspro.com">www.windowspro.com網點的制作人，哲學博士，Web出現以前從事哲學領域的研究。他的E-mail：Edward_Grossman@zd.com 

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

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

　　在你的網點上讓DOM發揮作用 

　　有了Dynamic HTML (DHTML)，面向對象的程序設計已不再是只有編程專家才能作的事情，它正成為所有有經驗的網頁制作者也能涉足的領域。這在很大程度上要歸功于Document Object Model，即DOM。這個W3C規范將文檔中的每個成分都視為對象，不論它是一個、一種風格還是一個鏈接。腳本程序可以根據用戶的輸入、瀏覽器的類型或許多其他變量對這些對象進行修改，包括改變 的大小，改變風格，或者更新鏈接。 

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

　　關于DOM的更多信息，請訪問網點：www.w3.org/dom、www.microsoft.com/workshop/author/dhtml/和developer.netscape.com/docs/manuals/communicator/dynhtml/。 

　　有關DHTML的應用實例，請訪問：windowspro.com">www.windowspro.com和www.projectcool.com（試試將Saturn到處拖動），并請瀏覽“View source”。 

　　在IE 4.0中，可以用Dynamic HTML實現對幾十種對象的操作。在網點www.microsoft.com上有詳細內容的列表。