1 前言
隨著Internet/Intranet的不斷普及和發展，越來越多的公司、企業和個人正在開始建立自己的Web網站、編寫Web網頁，以一種新的方式向外界發布訊息，供人們去瀏覽、閱讀和應用。因此，網頁製作已經受到越來越多的專業人員的重視。
網頁是指透過Internet向全球提供資訊的一些文件文件，包括個人資訊、商業、娛樂等內容。網頁是利用超文本標誌語言HTML(HyperText Markup Languge)編寫的，存放在Internet/Intranet上的網頁伺服器中，供訪客使用瀏覽器(Browser)來閱讀。利用HTML語言編寫出來的網頁又稱為超文本，即網頁中包含有文本、圖形、聲音、圖像和超連結(HyperLink)等多媒體資訊。
2 DHTML簡
我我在瀏覽器中能接觸到大量使用HTML和腳本語言編寫的網頁。為了方便瀏覽，各電腦廠商紛紛推出了自己的瀏覽器，這些瀏覽器對HTML的支援還沒有一個統一的規範，顯然這不利於互連網的發展。因此，萬維網協會W3C(World Wide Web Consortium)制定了一個與平台和語言無關的規範，即文件物件模型DOM(Document Object Model)。
DOM將HTML、CSS(層疊樣式表)和腳本語言聯合起來組成一個或多個人都能實現的互通模型。 Netscape、Microsoft都向W3C提出了實作DOM的建議：使用動態HTML，也就是DHTML(Dynamic HTML)來解決問題。
DHTML是在保持與現有HTML相容的基礎上擴展出來的幾種新功能的總稱。這些新功能主要是指動態功能、定位功能以及利用CSS的功能。
使用DHTML的原因有二：一是DHTML將網頁上的每一個元素分割成許多獨立的對象，這些對象的屬性透過CSS來指定。二是DHTML將每個物件向一個程式設計和腳本語言的框架開放，可使用程式語言C++操縱網頁上的對象，也可使用Java script、VBscript操縱網頁上的物件。這表示Web頁和其上的一切東西都是可編程的，這為Web頁帶來了新的功能。當我們在執行應用程式時就會發現不同之處：以前在Web上執行程式時，每次在單一元素後必須等待該網頁重新下載，如果一個Web頁包含了大量隱藏的對象，甚至一螢幕全新的頁面，那將會經歷一個再次訪問伺服器的過程；而使用DHTML，可以點擊螢幕上方的某個圖象，就可以使螢幕下方的段落立刻發生變化，而不必再存取伺服器。所有的表格將變成活的資料庫，使用者可以動態和排序的篩選其中的資料。這樣一來，就減少了對伺服器的請求，因此降低了伺服器的負荷，提高了客戶機和伺服器的整體效能。
3 使用樣式表CSS
DHTML的基礎是層疊樣式表CSS(Cascading Style Sheets)，樣式是指由Web頁作者定義的一組顯示和定位屬性。 CSS最大的特色就是物件導向的網頁設計，也就是說，把每一頁、每一段、每個圖象和表格都看成是一個物件。然後聲明該物件的每個實例。每個實例都有一種樣式(Style)，即一組屬性或顯示指令。只要聲明一次，這些屬性就會貫穿整個網頁甚至整個網站。可以對每一種樣式賦予一個名字，如H1、Li如果該樣式的名稱與一個有效的DHTML元素(或標記)的名稱相同，則該樣式就自動的作用於該元素的每一個實例；如果給一種樣式所起的名稱沒有對應的DHTML標記，就必須人工地將該樣式施加到希望它出現的地方。
3.1 定義並使用基本樣式下面的程式段中有兩個樣式：H1和favor，H1是一個有效的DHTML元素，在程式中由〈H1〉〈／H1〉標記的部分將繼承樣式H1的全部屬性； favor則是一個非DHTML元素，定義它的時候須在前面加上一個圓點，引用時要用〈class〉來聲明，在程式中由〈favor〉〈／favor〉標記的部分將繼承樣式favor的全部屬性。
〈HTML〉
〈HEAD〉〈TITLE〉test〈／TITLE〉
〈STYLE TYPE=”text／css〉
〈 !--
H1{font-style:normal;
font-weight:bold;
color：green;
line-height:20pt} ／定義式H1／
.favor{font-style:normal;
fontsize:15pt;
background-image:url(back.imag.gif);
textalign:center} /定義樣式favor／
--〉
〈／STYLE〉
〈／HEAD〉
〈H1〉THIS IS A TEST!〈／H1〉 ／使用樣式H1／
〈P CLASS=”favor”〉DO YOU LIKE THIS?〈/P〉 ／使用樣式favor／
3.2 使用外部樣式樣式表還可以存放在外部文件中，這個文件與頁面的聯繫可以透過IMPORT或LINK，例如，樣式表存放在文件mysite.css中，在文件中可以插入下列程式碼呼叫外部樣式表：
〈LINK REL=STYLESHEET
HREF=”mysite.css”
TYPE=”text／css”
Title=”Test Style”〉
4 實現交互功能
CSS本身沒有交互功能，要實現交互，就須將CSS定義的對象與文檔模型(DOM)結合在一起，將Web文檔轉換為DHTML文檔。 DOM提供了腳本語言存取頁上元素的途徑，Microsoft和Netscape支援的物件模型有些不同。
在Microsoft的模型中，腳本語言可以存取HTML頁面上的所有元素，所有元素都反映為document.all中的物件。下面的程式段用來寫出頁面中所有的元素：
for (I=0;I〈document.all.length;I++)
{
document.write(document.all［I］.tagName+”＼n” )；
}
在Netscape的模型中，腳本語言可以存取HTML頁面上特定集合的元素，如〈layer〉標籤中的內容。下面的程式段用來寫出頁面中所有layer的名稱：
for (I=0;I〈document.layers.length;I++)
{
document.write(document.layers［I］.name+”＼n” )；
}
5 定位技術的使用
在HTML中，任何物件的位置與網頁結構的其他部分總是相對的，我們編制網頁時經常會因為添加一段文字而把一個圖象擠出頁面。現在，使用DHTML的定位技術可以把物件固定下來，還可以堆疊起來，也就是在頁面的同一位置擺放多個圖象，然後不斷的指定擺放在最上面的物件來實現動畫效果。
例子：
*myback{background-color:transparent}
*mypoit
position:absolute;
top:5in;
right:5in;
width:10in}
BODY{background-image:url(／image／back.gif);}
〈class=.mypoint〉 Img(src=”／image／a.gif)
〈DIV CLASS=”pile”ID=”image1”style=”z-index:4”〉
〈DIV CLASS=”pile”ID=”image2”style=”z-index:3”〉
〈DIV CLASS=”pine”ID=”image3”style=”z-index:2”〉
〈DIV CLASS=”pine”ID=”image4”style=”z-index:1”〉
〈／BODY〉
在上面的程式段中，背景設成了讓光線透過底圖，這樣的效果在以前是要透過專門的做圖工具才能完成的。在頁面上還堆疊放置了4張圖，它們所產生的動畫效果也是很不錯的。
6 結論
以上對如何使用DHTML編制網頁做了一些研究，還有許多技術問題等待網頁製作者們共同深化。
蔚笑檀北交大交通運輸學院就讀碩士研究生100044 北京市