国产毛片午夜福利,国产黄网,国产亚洲天堂,97国产精品

  •  
    如何用DHTML編制網(wǎng)頁(yè)
    發(fā)布時(shí)間:2005-03-31   瀏覽次數(shù):1186281
    1 前 言   隨著Internet/Intranet的不斷普及和發(fā)展,越來(lái)越多的公司、企業(yè)和個(gè)人正在開(kāi)始建設(shè)自己的Web站點(diǎn)、編寫(xiě)Web網(wǎng)頁(yè),以一種新的方式向外界發(fā)布信息,供人們?nèi)g覽、閱讀和應(yīng)用。因此,網(wǎng)頁(yè)制作已經(jīng)受到越來(lái)越多的專業(yè)人員的重視。   網(wǎng)頁(yè)是指通過(guò)Internet向全球提供信息的一些文檔文件,包括個(gè)人信息、商業(yè)、娛樂(lè)等內(nèi)容。網(wǎng)頁(yè)是利用超文本標(biāo)志語(yǔ)言HTML(HyperText Markup Languge)編寫(xiě)的,存放在Internet/Intranet上的Web服務(wù)器中,供訪問(wèn)者使用瀏覽器 (Browser)來(lái)閱讀。利用HTML語(yǔ)言編寫(xiě)出來(lái)的網(wǎng)頁(yè)又稱為超文本,即網(wǎng)頁(yè)中包含有文本、圖形、聲音、圖像和超鏈接(HyperLink)等多媒體信息。 2 DHTML簡(jiǎn)   我我在瀏覽器中能接觸到大量使用HTML和腳本語(yǔ)言編寫(xiě)的網(wǎng)頁(yè)。為了方便瀏覽,各計(jì)算機(jī)廠商紛紛推出了自己的瀏覽器,這些瀏覽器對(duì)HTML的支持還沒(méi)有一個(gè)統(tǒng)一的規(guī)范,顯然這不利于互連網(wǎng)的發(fā)展。因此,萬(wàn)維網(wǎng)協(xié)會(huì)W3C(World Wide Web Consortium)制定了一個(gè)與平臺(tái)和語(yǔ)言無(wú)關(guān)的規(guī)范,即文檔對(duì)象模型DOM(Document Object Model)。   DOM將HTML、CSS(層疊樣式表)和腳本語(yǔ)言聯(lián)合起來(lái)組成一個(gè)或多個(gè)人都能實(shí)現(xiàn)的互操作模型。Netscape、Microsoft都向W3C提出了實(shí)現(xiàn)DOM的建議:使用動(dòng)態(tài)HTML,即DHTML(Dynamic HTML)來(lái)解決問(wèn)題。   DHTML是在保持與現(xiàn)有HTML兼容的基礎(chǔ)上擴(kuò)展出來(lái)的幾種新功能的總稱。這些新功能主要是指動(dòng)態(tài)功能、定位功能以及利用CSS的功能。   使用DHTML的原因有兩個(gè):一是DHTML將網(wǎng)頁(yè)上的每一個(gè)元素劃分成許多獨(dú)立的對(duì)象,這些對(duì)象的屬性通過(guò)CSS來(lái)指定。二是DHTML將每個(gè)對(duì)象向一個(gè)編程和腳本語(yǔ)言的框架開(kāi)放,可使用編程語(yǔ)言C++操縱網(wǎng)頁(yè)上的對(duì)象,也可使用Java script、VBscript操縱網(wǎng)頁(yè)上的對(duì)象。這表示W(wǎng)eb頁(yè)和其上的一切東西都是可編程的,這給Web頁(yè)帶來(lái)了新的功能。當(dāng)我們?cè)趫?zhí)行應(yīng)用程序時(shí)會(huì)發(fā)現(xiàn)不同之處:以前在Web上運(yùn)行程序時(shí),每次在單個(gè)元素后必須等待該網(wǎng)頁(yè)重新下載,如果一個(gè)Web頁(yè)包含了大量隱藏的對(duì)象,甚至一屏屏全新的頁(yè)面,那將會(huì)經(jīng)歷一個(gè)再次訪問(wèn)服務(wù)器的過(guò)程;而使用DHTML,可以單擊屏幕上方的某個(gè)圖象,可以使屏幕下方的段落立刻發(fā)生變化,而不必再訪問(wèn)服務(wù)器。所有的表格將變成活的數(shù)據(jù)庫(kù),用戶可以動(dòng)態(tài)和排序的篩選其中的數(shù)據(jù)。這樣一來(lái),減少了對(duì)服務(wù)器的請(qǐng)求,因此降低了服務(wù)器的負(fù)荷,提高了客戶機(jī)和服務(wù)器的總體性能。 3 使用樣式表CSS   DHTML的基礎(chǔ)是層疊樣式表CSS(Cascading Style Sheets),樣式是指由Web頁(yè)作者定義的一組顯示和定位屬性。CSS的特點(diǎn)是面向?qū)ο蟮木W(wǎng)頁(yè)設(shè)計(jì),也是說(shuō),把每一頁(yè)、每一段落、每個(gè)圖象和表格都看成是一個(gè)對(duì)象。然后聲明該對(duì)象的每個(gè)實(shí)例。每個(gè)實(shí)例都有一種樣式 (Style),即一組屬性或顯示指令。只要聲明一次,這些屬性會(huì)貫穿在整個(gè)網(wǎng)頁(yè)甚至整個(gè)站點(diǎn)中?梢詫(duì)每一種樣式賦予一個(gè)名字,如H1、Li如果該樣式的名稱與一個(gè)有效的DHTML元素(或標(biāo)記)的名稱相同,則該樣式自動(dòng)的作用于該元素的每一個(gè)實(shí)例;如果給一種樣式所起的名稱沒(méi)有相應(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〉來(lái)聲明,在程序中由〈favor〉〈/favor〉標(biāo)記的部分將繼承樣式favor的全部屬性。 〈HTML〉 〈HEAD〉〈TITLE〉test〈/TITLE〉 〈STYLE TYPE=”text/css〉 〈 !-- H1{font-style:normal; font-weight:bold; color:green; line-height:pt}  /定義樣式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〉 。褂脴邮紿1/ 〈P CLASS=”favor”〉DO YOU LIKE THIS?〈/P〉 。褂脴邮絝avor/  3.2 使用外部樣式   樣式表還可以存放在外部文件中,這個(gè)文件與頁(yè)面的聯(lián)系可以通過(guò)IMPORT或LINK,例如,樣式表存放在文件mysite.css中,在文檔中可以插入下列代碼調(diào)用外部樣式表: 〈LINK REL=STYLESHEET HREF=”mysite.css” TYPE=”text/css” Title=”Test Style”〉 4 實(shí)現(xiàn)交互功能   CSS本身沒(méi)有交互功能,要實(shí)現(xiàn)交互,須將CSS定義的對(duì)象與文檔模型(DOM)結(jié)合在一起,將Web文檔轉(zhuǎn)換為DHTML文檔。DOM提供了腳本語(yǔ)言訪問(wèn)頁(yè)上元素的途徑,Microsoft和Netscape支持的對(duì)象模型有一些不同。   在Microsoft的模型中,腳本語(yǔ)言可以訪問(wèn)HTML頁(yè)面上的所有元素,所有元素都被反映為document.all中的對(duì)象。下面的程序段用于寫(xiě)出頁(yè)面中所有的元素:   for (I=0;I〈document.all.length;I++)    {    document.write(document.all[I].tagName+”\n” );    }   在Netscape的模型中,腳本語(yǔ)言可以訪問(wèn)HTML頁(yè)面上特定集合的元素,如〈layer〉標(biāo)簽中的內(nèi)容。下面的程序段用于寫(xiě)出頁(yè)面中所有l(wèi)ayer的名稱:   for (I=0;I〈document.layers.length;I++)    {     document.write(document.layers[I].name+”\n” );    } 5 定位技術(shù)的使用   在HTML中,任何對(duì)象的位置與網(wǎng)頁(yè)結(jié)構(gòu)的其他部分總是相對(duì)的,我們編制網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)由于添加一段文字而把一個(gè)圖象擠出頁(yè)面,F(xiàn)在,使用DHTML的定位技術(shù)可以把對(duì)象固定下來(lái),還可以堆疊起來(lái),即在頁(yè)面的同一位置擺放多個(gè)圖象,然后不斷的指定擺放在最上面的對(duì)象來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。 例子: *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〉   在上面的程序段中,背景設(shè)成了讓光線透過(guò)底圖,這樣的效果在以前是要通過(guò)專門(mén)的做圖工具才能完成的。在頁(yè)面上還堆疊放置了4幅圖,它們所產(chǎn)生的動(dòng)畫(huà)效果也是很不錯(cuò)的。 6 結(jié)束語(yǔ)   以上對(duì)如何使用DHTML編制網(wǎng)頁(yè)做了一些研究,還有許多技術(shù)問(wèn)題等待網(wǎng)頁(yè)制作者們共同深化。 蔚笑檀 北方交大交通運(yùn)輸學(xué)院 在讀碩士研究生 100044 北京市
    立即預(yù)約