認識DHTML

　　在聽到Dynamic HTML（以下簡稱DHTML）或是「動態網頁」時，你想到的是什麼？是有動畫效果的網頁？還是嵌了影片、音效的網頁？假如你真的以為只是一些加了簡單的GIF動畫或是電影片段的話，那麼我們要告訴您，真正的動態網頁可是遠遠超過您的想像喔！因為DHTML所謂的「動態」不僅僅表現在網頁的視覺呈現方式，更重要的是對於網頁各類內容的控制與變化。

嚴格說來，DHTML並不是什麼新技術或標準的稱謂，換句話說，事實上並沒有任何一種技術或標準就叫做DHTML。那到底什麼是DHTML呢？其實，DHTML是一些現有網頁技術與標準的整合，與其說它是一種技術或標準，倒不如說它是一種新的網頁建置觀念。
　　既然是現有網頁技術與標準的整合，DHTML當然還是以HTML為基礎，但是相較於過去單純以HTML來設計網頁的方式，DHTML所帶來的最大轉變，在於它加入了「物件化」的網頁設計觀念。接下來，我們就先來瞭解一下DHTML到底涵蓋了哪些技術層面。

HTML 4.0

HTML是網頁文件的共通格式，其版本發展至今已經是4.0版了。和前幾個版本比較起來，HTML 4.0除了將原有的標籤予以擴充外，其最大的變革是可以將網頁上的圖形或是文字當成物件，並透過script程式來控制。這種改變對於網頁內容的「動態」顯示或控制可是非常重要的。

CSS

　　CSS（Cascading Style Sheets；串接樣式表）是W3C協會（World Wide Web Consortium）為了彌補HTML在樣式排版上的不足，所制定的一套「延伸」樣式標準。由於HTML標籤的樣式屬性非常有限，且無法透過Script程式碼來控制，因此CSS擴充了HTML各標籤的屬性設定（稱為樣式），使網頁內容的視覺效果有更多的變化。再者，由於CSS樣式可透過Script來控制，因而網頁的呈現方式也更靈活、多變化。
　　換個角度來看，在DHTML的網頁設計觀念上，網頁的基本語法還是HTML，但是樣式的設定工作則由CSS取代了傳統的HTML標籤屬性。
　　CSS目前有1.0和2.0兩個版本，其中CSS 1.0在4.0版之後的瀏覽器（即IE和Netscape）已廣泛受到支援。而新的CSS 2.0目前則只有IE 5獨家支援，不過也還只是部份支援而已。

瀏覽器的物件模型

在4.0版以後的IE或Netscape都是物件化的，也就是說，瀏覽器本身就是由許多的物件所組成，這些物件有各自的性質、方法和事件，因此網頁設計者可透過script程式來控制或叫用這些物件。
　　例如，設計者如果希望在瀏覽者一開始連網頁時，即辨識出其使用的瀏覽器類型和版本，那麼就可以利用window.navigator物件所提供的性質，來取得瀏覽器的各項資訊。
目前Microsoft和Netscape的瀏覽器物件模型都是以W3C所公佈的文件物件模型（Document Object Model; DOM）為基礎，再加上自己的延伸物件而成。

Script

　　基本上，script是整個DHTML中的靈魂角色，因為在DHTML裡，網頁之所以能夠動起來，最主要的原因即在於網頁中的物件必須透過script程式才能加以控制，進行互動式的變化。
不過在不同的瀏覽器中，所能使用的Script語言並不相同。目前，Netscape裡支援的script語言是JavaScript; 而IE所支援的則包括了JavaScript、JScript和VBScript。在HTML文件中，如果不特別指定使用的Script語言種類，則不管是IE或是Netscape，都會以JavaScript為預設的Script語言。
　綜合上述，相信你已經發現，DHTML仍然是植基於傳統的HTML，而另外輔以CSS來延伸其排版樣式上的不足。此外，由於瀏覽器以及網頁內容的物件化，使得Script程式得以存取這些物件，達到對網頁的動態控制。簡單來說，DHTML的組成大概可以這麼表示：

DHTML = HTML + 瀏覽器物件的模型 + CSS + Script

　　瞭解DHTML的整體架構後，再來看看以DHTML觀念設計出來的網頁有些什麼特點。

動態內容

　　透過瀏覽器與網頁文件的物件模型，網頁不用重新下載，其內的物件即可動態地新增、刪除、或是變更顯示內容。

動態樣式

　　CSS除了可以延伸HTML標籤的樣式屬性，還可以透過Script程式來做變更。傳統網頁的內容樣式與版面編排，在下載到瀏覽器後，即是固定不能改變的。相較之下，以CSS定義樣式的網頁，只要透過Script的控制，網頁就算已經下載並顯示出來了，還是隨時可以改變其字形、顏色、甚至是版面編排等。

絕對定位

　　透過CSS，網頁中的圖形、文字等各種HTML元件都可以做到絕對定位。網頁設計者可以指定元件的X、Y軸座標，如此，版面配置就不會隨視窗大小的改變而大亂。除了平面的定位外，更棒的是CSS樣式提供了Z軸的定位座標，也就是說，你可以在網頁上堆疊物件，建立三維的立體空間。

　　以上所提到的DHTML架構與觀念大體上都適用於4.0版以後的IE與Netscape瀏覽器，不過在細部的技術上則不盡相同。但就對於W3C的標準支援度來說，微軟的IE瀏覽器倒是較Netscape高得多。此外，為了擴充瀏覽器的延展性與靈活性，微軟又替IE增加了一些DHTML的延伸功能，其目的在於簡化網頁設計者的網頁設計工作，同時也讓瀏覽者有更佳的瀏覽經驗。

內建多媒體特效

　　以往網頁設計者如果要為網頁內容加上一些多媒體特效，例如網頁切換時，淡入淡出的過場畫面，一般都是會需要設計者自己撰寫Script。可是通常要能產生這類效果的Script程式都相當複雜，因此除非網頁設計者本身就具有豐富的程式設計經驗，否則對於一般的網頁設計人員而言，這實在不是一件容易的事。
　　IE瀏覽器內建了多種多媒體濾鏡特效，當您在設計網頁時，只要加上一些簡單的CSS和Script的控制程式，來指定攄鏡的參數，就可以輕鬆製做出具有多媒體特效的網頁。

資料庫連結

　　Web資料庫是近年來相當熱門的一個Web技術應用領域，網頁與資料庫的結合已經越來越普遍。然而一般說來，當網頁在連結後端資料庫時，最為人詬病的就是瀏覽器必須常常和資料庫保持連線狀態，即使只是簡單的資檢視、排序動作，都需要來回地透過網路和後端資料庫做連結，因此會浪費相當多的時間和網路資源在這些來來回回的網路傳輸上。
　　IE提供了資料連結（Data Binding）的功能。使用者可以將遠端資料庫上的資料取回後，在自己的機器上建立一個臨時資料暫存區，因此簡單的資料檢視與排序動作，可以直接在使用者的電腦上進行，而不需要和遠端的資料庫進行頻繁的網路傳輸。

Web應用程式開發平台

　　事實上，IE5對於DHTML的定義較W3C或是其他瀏覽器所認定的標準更為廣義，因為在IE5裡，IE其實已經是在朝一個「Web應用程式開發平台」的方向發展了。舉例來說，在IE5裡，你可將HTML文件儲存為HTML應用程式（HTML Application; HTA）檔案，然後再插入HTML文件中。如此，原本只是網頁文件的HTML檔案，就搖身一變成為瀏覽器上的一個應用程式，且具有一般應用程式的屬性與使用方式。

　　就目前而言，要設計網頁並不是太困難的事，因為現在已經有許多「所見即所得」的HTML網頁設計工具程式。利用這些工具，設計者即使不懂任何HTML語法，也可以設計網。但如果要設計出真正能吸引人，且效率也較好的網頁，那麼，你一定要瞭解DHTML。

如欲轉載，請來信通知