如何用用DHTML編制網(wǎng)頁
用DHTML編制網(wǎng)頁
1 前 言
隨著Internet／Intranet的不斷普及和發(fā)展，越來越多的公司、企業(yè)和個(gè)人正在開始建設(shè)自己的Web站點(diǎn)、編寫Web網(wǎng)頁，以一種新的方式向外界發(fā)布信息，供人們?nèi)g覽、閱讀和應(yīng)用。因此，網(wǎng)頁制作已經(jīng)受到越來越多的專業(yè)人員的重視。
網(wǎng)頁是指通過Internet向全球提供信息的一些文檔文件，包括個(gè)人信息、商業(yè)、娛樂等內(nèi)容。網(wǎng)頁是利用超文本標(biāo)志語言HTML(HyperTextMarkupLanguge)編寫的，存放在Internet／Intranet上的Web服務(wù)器中，供訪問者使用瀏覽器(Browser)來閱讀。利用HTML語言編寫出來的網(wǎng)頁又稱為超文本，即網(wǎng)頁中包含有文本、圖形、聲音、圖像和超鏈接(HyperLink)等多媒體信息。
2 DHTML簡
我我在瀏覽器中能接觸到大量使用HTML和腳本語言編寫的網(wǎng)頁。為了方便瀏覽，各計(jì)算機(jī)廠商紛紛推出了自己的瀏覽器，這些瀏覽器對HTML的支持還沒有一個(gè)統(tǒng)一的規(guī)范，顯然這不利于互連網(wǎng)的發(fā)展。因此，萬維網(wǎng)協(xié)會(huì)W3C(WorldWideWebConsortium)制定了一個(gè)與平臺(tái)和語言無關(guān)的規(guī)范，即文檔對象模型DOM(DocumentObjectModel)。
DOM將HTML、CSS(層疊樣式表)和腳本語言聯(lián)合起來組成一個(gè)或多個(gè)人都能實(shí)現(xiàn)的互操作模型。Netscape、Microsoft都向W3C提出了實(shí)現(xiàn)DOM的建議：使用動(dòng)態(tài)HTML，即DHTML(DynamicHTML)來解決問題。
DHTML是在保持與現(xiàn)有HTML兼容的基礎(chǔ)上擴(kuò)展出來的幾種新功能的總稱。這些新功能主要是指動(dòng)態(tài)功能、定位功能以及利用CSS的功能。
使用DHTML的`原因有兩個(gè)：一是DHTML將網(wǎng)頁上的每一個(gè)元素劃分成許多獨(dú)立的對象，這些對象的屬性通過CSS來指定。二是DHTML將每個(gè)對象向一個(gè)編程和腳本語言的框架開放，可使用編程語言C++操縱網(wǎng)頁上的對象，也可使用Javascript、VBscript操縱網(wǎng)頁上的對象。這就表示W(wǎng)eb頁和其上的一切東西都是可編程的，這給Web頁帶來了新的功能。當(dāng)我們在執(zhí)行應(yīng)用程序時(shí)就會(huì)發(fā)現(xiàn)不同之處：以前在Web上運(yùn)行程序時(shí)，每次在單個(gè)元素后必須等待該網(wǎng)頁重新下載，如果一個(gè)Web頁包含了大量隱藏的對象，甚至一屏屏全新的頁面，那將會(huì)經(jīng)歷一個(gè)再次訪問服務(wù)器的過程；而使用DHTML，可以單擊屏幕上方的某個(gè)圖象，就可以使屏幕下方的段落立刻發(fā)生變化，而不必再訪問服務(wù)器。所有的表格將變成活的數(shù)據(jù)庫，用戶可以動(dòng)態(tài)和排序的篩選其中的數(shù)據(jù)。這樣一來，就減少了對服務(wù)器的請求，因此降低了服務(wù)器的負(fù)荷，提高了客戶機(jī)和服務(wù)器的總體性能。
3 使用樣式表CSS
DHTML的基礎(chǔ)是層疊樣式表CSS(CascadingStyleSheets)，樣式是指由Web頁作者定義的一組顯示和定位屬性。CSS最大的特點(diǎn)是面向?qū)ο蟮木W(wǎng)頁設(shè)計(jì)，也就是說，把每一頁、每一段落、每個(gè)圖象和表格都看成是一個(gè)對象。然后聲明該對象的每個(gè)實(shí)例。每個(gè)實(shí)例都有一種樣式(Style)，即一組屬性或顯示指令。只要聲明一次，這些屬性就會(huì)貫穿在整個(gè)網(wǎng)頁甚至整個(gè)站點(diǎn)中�？梢詫γ恳环N樣式賦予一個(gè)名字，如H1、Li如果該樣式的名稱與一個(gè)有效的DHTML元素(或標(biāo)記)的名稱相同，則該樣式就自動(dòng)的作用于該元素的每一個(gè)實(shí)例；如果給一種樣式所起的名稱沒有相應(yīng)的DHTML標(biāo)記，就必須人工地將該樣式施加到希望它出現(xiàn)的地方。
3.1 定義和使用基本樣式
下面的程序段中有兩個(gè)樣式：H1和favor，H1是一個(gè)有效的DHTML元素，在程序中由〈H1〉〈／H1〉標(biāo)記的部分將繼承樣式H1的全部屬性；favor則是一個(gè)非DHTML元素，定義它的時(shí)候須在前面加上一個(gè)圓點(diǎn)，引用時(shí)要用〈class〉來聲明，在程序中由〈favor〉〈／favor〉標(biāo)記的部分將繼承樣式favor的全部屬性。
〈HTML〉
〈HEAD〉〈TITLE〉test〈／TITLE〉
〈STYLETYPE=”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〉THISISATEST!〈／H1〉 ／使用樣式H1／
〈PCLASS=”favor”〉DOYOULIKETHIS?〈／P〉 ／使用樣式favor／
3.2 使用外部樣式
樣式表還可以存放在外部文件中，這個(gè)文件與頁面的聯(lián)系可以通過IMPORT或LINK，例如，樣式表存放在文件mysite.css中，在文檔中可以插入下列代碼調(diào)用外部樣式表：
〈LINKREL=STYLESHEET
HREF=”mysite.css”
TYPE=”text／css”
Title=”TestStyle”〉
4 實(shí)現(xiàn)交互功能
CSS本身沒有交互功能，要實(shí)現(xiàn)交互，就須將CSS定義的對象與文檔模型(DOM)結(jié)合在一起，將Web文檔轉(zhuǎn)換為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〉標(biāo)簽中的內(nèi)容。下面的程序段用于寫出頁面中所有l(wèi)ayer的名稱：
for(I=0;I〈document.layers.length;I++)
document.write(document.layers［I］.name+”＼n”)；
5 定位技術(shù)的使用
在HTML中，任何對象的位置與網(wǎng)頁結(jié)構(gòu)的其他部分總是相對的，我們編制網(wǎng)頁時(shí)經(jīng)常會(huì)由于添加一段文字而把一個(gè)圖象擠出頁面�，F(xiàn)在，使用DHTML的定位技術(shù)可以把對象固定下來，還可以堆疊起來，即在頁面的同一位置擺放多個(gè)圖象，然后不斷的指定擺放在最上面的對象來實(shí)現(xiàn)動(dòng)畫效果。
例子：
*myback{background-color:transparent}
*mypoit
position:absolute;
top:5in;
right:5in;
width:10in}
BODY{background-image:url(／image／back.gif);}
〈class=.mypoint〉Img(src=http://www.knowsky.com/”／image／a.gif)
〈DIVCLASS=”pile”ID=”image1”style=”z-index:4”〉
〈DIVCLASS=”pile”ID=”image2”style=”z-index:3”〉
〈DIVCLASS=”pine”ID=”image3”style=”z-index:2”〉
〈DIVCLASS=”pine”ID=”image4”style=”z-index:1”〉
〈／BODY〉
在上面的程序段中，背景設(shè)成了讓光線透過底圖，這樣的效果在以前是要通過專門的做圖工具才能完成的。在頁面上還堆疊放置了4幅圖，它們所產(chǎn)生的動(dòng)畫效果也是很不錯(cuò)的。
【如何用用DHTML編制網(wǎng)頁】相關(guān)文章：
5.如何學(xué)好網(wǎng)頁美工設(shè)計(jì)