|
用DHTML編制網(wǎng)頁
1 前 言 隨著Internet／Intranet的不斷普及和發(fā)展,，越來越多的公司、企業(yè)和個人正在開始建設(shè)自己的Web站點,、編寫Web網(wǎng)頁，以一種新的方式向外界發(fā)布信息,，供人們?nèi)g覽,、閱讀和應用。因此,，網(wǎng)頁制作已經(jīng)受到越來越多的專業(yè)人員的重視,。 網(wǎng)頁是指通過Internet向全球提供信息的一些文檔文件，包括個人信息,、商業(yè),、娛樂等內(nèi)容。網(wǎng)頁是利用超文本標志語言HTML(HyperText Markup Languge)編寫的,，存放在Internet／Intranet上的Web服務(wù)器中,，供訪問者使用瀏覽器 (Browser)來閱讀。利用HTML語言編寫出來的網(wǎng)頁又稱為超文本,，即網(wǎng)頁中包含有文本,、圖形,、聲音、圖像和超鏈接(HyperLink)等多媒體信息,。 2 DHTML簡 我我在瀏覽器中能接觸到大量使用HTML和腳本語言編寫的網(wǎng)頁,。為了方便瀏覽，各計算機廠商紛紛推出了自己的瀏覽器,，這些瀏覽器對HTML的支持還沒有一個統(tǒng)一的規(guī)范,，顯然這不利于互連網(wǎng)的發(fā)展。因此,，萬維網(wǎng)協(xié)會W3C(World Wide Web Consortium)制定了一個與平臺和語言無關(guān)的規(guī)范,，即文檔對象模型DOM(Document Object Model)。 DOM將HTML,、CSS(層疊樣式表)和腳本語言聯(lián)合起來組成一個或多個人都能實現(xiàn)的互操作模型,。Netscape、Microsoft都向W3C提出了實現(xiàn)DOM的建議：使用動態(tài)HTML,，即DHTML(Dynamic HTML)來解決問題,。 DHTML是在保持與現(xiàn)有HTML兼容的基礎(chǔ)上擴展出來的幾種新功能的總稱,。這些新功能主要是指動態(tài)功能,、定位功能以及利用CSS的功能。 使用DHTML的原因有兩個：一是DHTML將網(wǎng)頁上的每一個元素劃分成許多獨立的對象,，這些對象的屬性通過CSS來指定,。二是DHTML將每個對象向一個編程和腳本語言的框架開放，可使用編程語言C++操縱網(wǎng)頁上的對象,，也可使用Java script,、VBscript操縱網(wǎng)頁上的對象。這就表示W(wǎng)eb頁和其上的一切東西都是可編程的,，這給Web頁帶來了新的功能,。當我們在執(zhí)行應用程序時就會發(fā)現(xiàn)不同之處：以前在Web上運行程序時，每次在單個元素后必須等待該網(wǎng)頁重新下載,，如果一個Web頁包含了大量隱藏的對象,，甚至一屏屏全新的頁面，那將會經(jīng)歷一個再次訪問服務(wù)器的過程,；而使用DHTML,，可以單擊屏幕上方的某個圖象，就可以使屏幕下方的段落立刻發(fā)生變化,，而不必再訪問服務(wù)器,。所有的表格將變成活的數(shù)據(jù)庫，用戶可以動態(tài)和排序的篩選其中的數(shù)據(jù),。這樣一來,，就減少了對服務(wù)器的請求,，因此降低了服務(wù)器的負荷，提高了客戶機和服務(wù)器的總體性能,。 3 使用樣式表CSS DHTML的基礎(chǔ)是層疊樣式表CSS(Cascading Style Sheets),，樣式是指由Web頁作者定義的一組顯示和定位屬性。CSS最大的特點是面向?qū)ο蟮木W(wǎng)頁設(shè)計,，也就是說,，把每一頁、每一段落,、每個圖象和表格都看成是一個對象,。然后聲明該對象的每個實例。每個實例都有一種樣式 (Style),，即一組屬性或顯示指令,。只要聲明一次，這些屬性就會貫穿在整個網(wǎng)頁甚至整個站點中,?？梢詫γ恳环N樣式賦予一個名字，如H1,、Li如果該樣式的名稱與一個有效的DHTML元素(或標記)的名稱相同,，則該樣式就自動的作用于該元素的每一個實例；如果給一種樣式所起的名稱沒有相應的DHTML標記,，就必須人工地將該樣式施加到希望它出現(xiàn)的地方,。 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} ?。x樣式H1／ .favor{font-style:normal; fontsize:15pt; background-image:url(back.imag.gif); textalign:center} ?。x樣式favor／ --〉 〈／STYLE〉 〈／HEAD〉 〈H1〉THIS IS A TEST!〈／H1〉 ／使用樣式H1／ 〈P CLASS=”favor”〉DO YOU LIKE THIS?〈／P〉 ?。褂脴邮絝avor／ 3.2 使用外部樣式 樣式表還可以存放在外部文件中,，這個文件與頁面的聯(lián)系可以通過IMPORT或LINK，例如,，樣式表存放在文件mysite.css中,，在文檔中可以插入下列代碼調(diào)用外部樣式表： 〈LINK REL=STYLESHEET HREF=”mysite.css” TYPE=”text／css” Title=”Test Style”〉 4 實現(xiàn)交互功能 CSS本身沒有交互功能，要實現(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〉標簽中的內(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)頁時經(jīng)常會由于添加一段文字而把一個圖象擠出頁面。現(xiàn)在,，使用DHTML的定位技術(shù)可以把對象固定下來,，還可以堆疊起來，即在頁面的同一位置擺放多個圖象,，然后不斷的指定擺放在最上面的對象來實現(xiàn)動畫效果,。 例子： *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./”／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〉 在上面的程序段中，背景設(shè)成了讓光線透過底圖,，這樣的效果在以前是要通過專門的做圖工具才能完成的,。在頁面上還堆疊放置了4幅圖,，它們所產(chǎn)生的動畫效果也是很不錯的,。 用DHTML編制網(wǎng)頁 |
|
|
