動態(tài)HTML教程.doc

(第1章 動態(tài)HTML教程)動態(tài)HTML教程作者：佚名1.1第一天經(jīng)過微軟和Netscape關(guān)于瀏覽器大戰(zhàn)新聞發(fā)布會以及種種傳聞和無休止的辯論之后，你從新發(fā)布的這兩種4.0版的瀏覽器中得到了什么呢？只是一個占據(jù)了你的硬盤40-MB空間的龐大怪物？還是可以推動媒體發(fā)展的令人興奮倍受鼓舞的充滿活力的新生事物？除了一些有能力制定4.0版本規(guī)格的大型站點之外，實際上動態(tài)HTML還沒有真正廣泛應(yīng)用于互聯(lián)網(wǎng)。如果你不了解動態(tài)HTML的含義，你應(yīng)該了解dHTML只能應(yīng)用于最新版的瀏覽器，即InternetExplorer4和NetscapeNavigator4。這兩種瀏覽器對于動態(tài)HTML的支持并不相同，所以目前缺少一種編寫dHMTL網(wǎng)頁的通用方式。這就是動態(tài)HTML不能在互聯(lián)網(wǎng)中得到廣泛應(yīng)用的原因。網(wǎng)站開發(fā)者為了使自己的網(wǎng)頁讓盡量多的人看到，寧可使網(wǎng)頁的編寫臃腫不堪也不敢使用動態(tài)HTML使自己的網(wǎng)頁具備更高的效率。因為用動態(tài)HTML編寫的網(wǎng)頁在這兩種廣泛使用的瀏覽器中顯示的效果有很大的區(qū)別。我們將學(xué)習(xí)使用串接樣式表編寫網(wǎng)頁并利用Javascript給網(wǎng)頁加入動畫。如果某些用戶認為在網(wǎng)頁中加入滿天飛的動畫實在是無益的勞動，那么我還要講授一些只有動態(tài)HTML才能做到的非常實用的動態(tài)用戶界面。我們將充分結(jié)合我們大腦兩個半球的優(yōu)勢編寫動態(tài)的事件驅(qū)動的動畫，這種動畫可以根據(jù)用戶的指令進行變化，如果這些還不足夠吸引你，我們還將應(yīng)用結(jié)構(gòu)、數(shù)組循環(huán)、對象引用以及更多的串接樣式表使你擁有編寫可以令任何夢想都變成現(xiàn)實的結(jié)構(gòu)化網(wǎng)頁編程能力。1.2你需配備的工具坦白的地說，動態(tài)HMTL不是為初學(xué)者準(zhǔn)備的教程。要引用動態(tài)HTML，你必須熟悉3中不同的技術(shù)：HTML、樣式表和JavaScript。動態(tài)HTML網(wǎng)頁實際上就是這3種技術(shù)的集成。所以第1天的課程只是一堂復(fù)習(xí)課。你的作業(yè)就是要重溫以前所了解的關(guān)于這3種技術(shù)的知識。不是很難，但你至少要掌握這3種技術(shù)的語法。對于JavaScript,建議你先閱讀Javascript教程。你應(yīng)該特別注意學(xué)習(xí)一下第2日教程中關(guān)于變量的知識，第3日教程中文件對象模塊（DOM）的知識，第4日教程中的循環(huán)和數(shù)組，以及在表單中通過引用來控制對象的技巧。關(guān)于串接樣式表的內(nèi)容，你可以閱讀5日精通樣式表教程熟悉一下樣式表的語法。你還應(yīng)該閱讀CSS定位一文，學(xué)習(xí)如何利用樣式表布局頁面。至于HTML，你應(yīng)該熟悉div和span標(biāo)簽。我并不希望你閱讀和記住所有這些內(nèi)容，你只需瀏覽一下，知道所需要的知識在什么位置可以找到就可以了。1.3這五天的學(xué)習(xí)計劃這里是本教程所要講授的內(nèi)容：第2日：利用CSS定位生成在兩種瀏覽器都可以瀏覽的網(wǎng)頁布局，以及如何將文字和圖象疊放在彼此之上。第3日利用你的布局并制作動畫效果。第4日用動態(tài)HTML建立用戶界面，以及如何隱藏和顯示界面的元素。第5日：更深入地了解動態(tài)HTML以及常見的問題。明天見。2.1第二天在Nadav的DHTML揭密一文中所述，動態(tài)HMTL網(wǎng)頁利用串接樣式表布局，并利用Javascript控制網(wǎng)頁元素。實際并不復(fù)雜或有很多的規(guī)定。我們所需要作的只是要給網(wǎng)頁加入樣式，能使其運動，并且在兩種主要的瀏覽器中都能正確顯示。精通我們將用CSS-P布局網(wǎng)頁，這是學(xué)習(xí)動態(tài)HTML的第1步。學(xué)習(xí)完定位元素之后，我們將接著學(xué)習(xí)編寫使其動態(tài)顯示的腳本。大多數(shù)用于設(shè)計和頁面布局的程序或文件格式必須現(xiàn)生成box，它們的寬度和高度可以改變，它們還能使你控制將對象疊放在對象之上。CSS-P的原理與其相似，你先用HTML定義一個容器（為了便于具備跨平臺應(yīng)用的兼容性，你最好實用DIV或SPAN標(biāo)簽），設(shè)置其水平和垂直位置，然后設(shè)定哪個對象應(yīng)該疊放在哪個對象之上。真的很簡單，它能象大多數(shù)人（尤其那些利用表格定位和布局的人）希望的那樣讓HTML發(fā)揮功能。你只需以一種不同的思維角度來思考網(wǎng)頁的布局，本教程將重點講述一些基本的布局技巧明天我們將利用Javascript控制你的網(wǎng)頁布局。2.2深入動態(tài)HTML中大多數(shù)的內(nèi)容都要用到DIV標(biāo)簽作為容器。(在串接樣式表和CSS定位的規(guī)范草案中規(guī)定可以將任何對象定位，但Netscape的瀏覽器還不支持這項規(guī)定。所以你必須用DIV標(biāo)簽作為類屬容器），在容器內(nèi)加入對象然后再定位。我們先為本教程中的范例生成一個box。htmlheadtitledramatispersonae/titlestyle!-#timposition:absolute;left:10px;top:10px;width:140px;height:91px;-/style/headbodydivid=tim/div/body/html這里是box的顯示結(jié)果（為了辨認的方便，我給它加了一個紅色邊框）現(xiàn)在我們有了一個空的box，其ID名稱為tim，其位置在距窗口左邊10個像素，距窗口頂部10個像素的位置?，F(xiàn)在它還沒有體現(xiàn)出動態(tài)HTML的魅力，所以我們在這個box中填入Tim的圖片，并給它加一點說明：Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.在3.2版本的HTML的網(wǎng)頁（即不能支持動態(tài)HTML的網(wǎng)頁）中，你將會注意到文字一直流到屏幕邊緣之外，而Tim的圖片朝左浮動。Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.實際上是它浮動到了本文所在的表格單元的左邊。這是一個重要的區(qū)別。當(dāng)你將HTML放在一個已經(jīng)被定位了的DIV之內(nèi)時，你可以把它看作是放在了一個表格單元中（或者象在其他出版系統(tǒng)之內(nèi)的制作方法那樣）。在支持HTML3.2以后的版本的網(wǎng)頁中，你可以看到文字自動回行：Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.現(xiàn)在這個DIV標(biāo)簽里已經(jīng)填充了內(nèi)容，讓我們利用CSS-P的LEFT和TOP選項技將其定位。htmlheadtitledramatispersonae/titlestyle!-#timposition:absolute;left:300px;top:10px;width:140px;height:91px;-/style/headbodydivid=tim/div/body/html顯示結(jié)果:Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.2.3相對和絕對定位你可能會注意到在本例中我使用了相對定位。在相對定位和絕對定位中有一個很微妙但確確實實的區(qū)別。當(dāng)你將一個對象用絕對定位指令定位時，你實際將其從你的HTML文件流中抽了出來，將其直接根據(jù)網(wǎng)頁的左上角的位置進行定位。這種情況下各個對象有可能互相重疊在一起。相對定位并不指根據(jù)百分比值或其他某個元素的位置來定位這個元素的位置。它實際占據(jù)的就是它在這個HTML文件中的位置，它的定位起點基于HTML頁所在的位置，這里是一個例子：Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.這兩個句子中，單詞Webmonkey都定位在距左邊200像素的位置。第1個句子用的是絕對定位，第2個用的是相對定位。注意相對定位的句子中空出了相當(dāng)于單詞Webmonkey長度的空間，而絕對定位了的句子中沒有這個空間，如果我給兩個句子都加一個top參數(shù)值，則你會看到絕對定位了的句子將飄在文章的頂部，而相對定位的句子則就在它所在的句子的位置之下：Tim,thehero.Webmonkeyeditorandresidentbanjo-picker.現(xiàn)在我們已經(jīng)了解了兩種定位的不同。我們作一個小練習(xí)。我們用CSS-P作一個網(wǎng)頁。這里是該網(wǎng)頁的屏幕快照。試著做出這個網(wǎng)頁，然后我們將制作更復(fù)雜的布局（提示：你可以用這個屏幕快照中的圖象作為網(wǎng)頁背景圖象來幫助你定位。注意將字體采用ComicSansMS）。2.4學(xué)習(xí)分層技術(shù)你可以注意到上面的那個布局用表格就能很輕易地做到。但是串接樣式表比表格有一項獨特的優(yōu)勢：分層。你肯定注意到你無法用表格將幾幅圖片或文字疊放在一起。一般情況下，如果人們希望實現(xiàn)這種效果只有制作一幅位圖，在圖片中制作出文字或圖象疊放在一起的效果，然后將圖片放在網(wǎng)頁中。而利用動態(tài)HTML，則可以利用分層順序?qū)B放顯示各個對象，例：HereisAaroninfrontofadesk.HereisAaronbehindadesk.在這個例子中，Aaron在他的桌子后面，Aaron的圖片首先出現(xiàn)在源代碼中：divid=aaronimgsrc=/dhtml/aaron.gif/divdivid=deskimgsrc=/dhtml/extraDesk.gif/div但是如果我們想讓Aaron站在桌子前面，我們可以這樣寫HTML代碼：divid=deskimgsrc=/dhtml/extraDesk.gif/divdivid=aaronimgsrc=/dhtml/aaron.gif/div這種類型的分層在HTML暗示編寫。所以搭建動態(tài)HTML網(wǎng)頁的方法之一就是將各個對象按照顯示的前后層次順序排列排在顯示底層的對象最先列出，而排在顯示最上層的對象在源代碼順序的最后列出。但是這種方式不一定不出問題。很多時候象在源代碼中的順序和它最后的顯示順序必須沒有任何關(guān)系。而此時就需要用到z-indexCSS屬性。這里是重新制作后的例子。這次的HTML標(biāo)識和一起一樣，但是對象采用了明示的z-index。Aaronhasaz-indexof2.Thedeskhasaz-indexof1.Aaronandthedeskhaveanimpliedz-index.兩個例子的HTML都是相同的，但CSS不同。styletype=text/css#aaronposition:absolute;left:8px;top:31px;width:79px;height:73px;z-index:2/stylez-index可以是一個正值或一個負值（帶負值的元素將位于母體元素的下面），它所造成的顯示效果為：如果一個對象的z-index比另一個元素大，則z-index為1時的視覺效果和Z-index為2時的視覺效果的區(qū)別相當(dāng)于1和1000Z之間的區(qū)別。2.5家庭作業(yè)這些定位的基本知識是你搭建跨平臺動態(tài)HTML的第1步。明天我們將學(xué)習(xí)到動態(tài)HTML的精華之處以及目前所受的局限。但是現(xiàn)在，讓我們作一個家庭作業(yè)。這里是act1,scene1。下載這些文件，然后將其按照屏幕快照的布局安排布局。明天我們還要將屏幕中的圖象制作出動畫效果。所以你最好先把今天的作業(yè)完成了，因為明天的課程中我們還要它。明天我們將陶醉在JavaScript的神奇魅力中。3.1第三天今天我們將開始學(xué)習(xí)動態(tài)HTML最精彩的部分：動態(tài)HTML編程。HTM之所以成功的原因之一在于它提供了在互聯(lián)網(wǎng)上展現(xiàn)網(wǎng)頁的統(tǒng)一方式。一旦你標(biāo)識了一個網(wǎng)頁，它在任何地方都可以看到。Javascript也是如此。及時它的版本會有很多種，但它的核心和語法是統(tǒng)一的，它在支持Javascript的所有瀏覽器中都可以應(yīng)用。CSS也具有統(tǒng)一的語法。在所有的瀏覽器中它的顯示結(jié)果也應(yīng)該是一致的。所以它能幫助你生成跨平臺風(fēng)格一致的動態(tài)網(wǎng)頁。但是，還有一些小問題。在1997中期時，Netscape和Microsoft都推出了自己的動態(tài)HTML瀏覽器，但那時沒有一種規(guī)范編程語言同網(wǎng)頁元素之間的交流的統(tǒng)一規(guī)定。但是在那時已經(jīng)有了JavaScript同網(wǎng)頁中的圖象、鏈接和表單元素進行交流的規(guī)范。然而這兩家公司對于如何控制網(wǎng)頁元素存在不同的見解。Netscape對JavaScript加入了一系列的對象，并引入了LAYER標(biāo)簽，伴隨產(chǎn)生的便是它的dHTML理念：或者采用LAYER標(biāo)簽分層的內(nèi)容分層，或者DIV標(biāo)簽的CSS定位，它們可以用Javascript的對象訪問，而且它的屬性(left,top,visibility,和backgroundcolor)可以被控制。但是微軟走得更深入一些。它推出了全新的HTML生成引擎，它不僅能定位任何元素，還能改變對CSS設(shè)置的任何選項。（例如，你可以改變字體或你的EM標(biāo)簽)，而且，它還完善了文件對象模塊（DocumentObjectModel），使其能通過任何IE支持的編程或腳本語言訪問。這兩種體制之間的明顯區(qū)別在于其語法。Netscape支持樹形語法：document.layerstopLayer.document.layerssubLayer.document.layersbottom.left而InternetExplorer將所有的HTML對象都放在一個水平結(jié)構(gòu)上，使你可以修改也是對象：bottom.style.left如果你在這種瀏覽器中使用了另一種瀏覽器支持的方法，則瀏覽器會顯示錯誤信息。但是還有許多技術(shù)可以對這種不兼容性作出變通處理。一旦你掌握了其中的訣竅，你就可以左右逢源，無所不能。本課中將學(xué)習(xí)如何利用最少量的條件訪問文件對象模塊DOM，然后我們將介紹一個將對象在屏幕中移動的簡單Javascript腳本。3.2微軟和網(wǎng)景不同的語法首先我們學(xué)習(xí)為兩種瀏覽器生成不同的動態(tài)HTML。我不打算在此列出兩種瀏覽器各自的動態(tài)HTML特點，我只列出兩種瀏覽器所支持的相同的動態(tài)HTML功能。FunctionNavigatorExplorer改變某個區(qū)域的內(nèi)容:object.document.open();object.document.writeln();object.document.close();object.innerHTML識別不同的區(qū)域:根據(jù)母體對象的左邊定位:object.leftobject.style.left根據(jù)母體對象的頂部定位:object.topobject.style.top堆棧順序:object.zIndexobject.style.zIndex對象的可視性:object.visibilityobject.style.visibilityclipping區(qū)域:object.clipobject.style.clip背景圖象:object.backgroundobject.style.backgroundImage背景顏色:object.bgColorobject.style.backgroundColor你可以看到它們之間沒有完全相同的項目。似乎相同，但是對對象使用CSS時必須制定ID屬性，所以你只能對圖象、鏈接和表單使用該功能。所以為了編寫腳本，你必須設(shè)定很多條件。聽起來很痛苦，但其實還不象你想象的那么糟。3.3使其在兩種瀏覽器中都可用有很多中辦法可以利用Javascript設(shè)定條件。其中辦法是確定用戶所使用的瀏覽器的類型和版本，并據(jù)此作出評估。但現(xiàn)在我還發(fā)現(xiàn)了更好的解決辦法。瀏覽器類型和版本條件設(shè)定的第1個問題是瀏覽器的改變的問題。如果你將瀏覽器版本設(shè)定為InternetExplorer4.0和Netscape4.0，那么等5.0版的瀏覽器發(fā)布時你的網(wǎng)頁會發(fā)生什么情況？或者這兩種新發(fā)布的瀏覽器版本互相兼容，而你的腳本中都沒有考慮到這些問題又會如何？所以根據(jù)瀏覽器類型和版本設(shè)定條件的方法不可行。更好的方法是根據(jù)功能設(shè)定條件。如果你對JavaScript比較熟悉的話，你一定知道Javascript的if語句中測試一個語句返回的是真true(1)還是假false(0)，然后它將根據(jù)返回的布爾值執(zhí)行一個語句。通常情況下它被用來測試某些變量的條件，例如：if(x=5)setTimeout(doSomething(),500);但是一個對象是否存在也可以作為被測試的條件。如果某個對象存在，則返回真，否則返回假。所以為了提供一個有效的測試條件，你必須從某個特定角度來測試一個對象的代表性質(zhì)以便應(yīng)用動態(tài)HMTL。Netscape利用分層運行動態(tài)HTML。它的運行方式同圖象數(shù)組在Navigator中的方式類似。你設(shè)定一個分層對象的數(shù)組，象對圖象的引用那樣設(shè)定引用方式。所以document.layersfoobar則是代表被相對定位或是絕對定位了的DIV的對象(在Netscape模式中，它必須是在你的文件NAME或ID屬性為foobar的一個絕對定位或相對定位了的DIV或SPAN)。然后你就可以設(shè)定上述各種屬性。你還可以用document.foobar來代表這個對象。在InternetExplorer中，則用一種水平的結(jié)構(gòu)來代表對象。所以ID或NAME屬性為foobar的DIV就是foobar，所以你可以用foobar.style.left來訪問或設(shè)定這個對象的左邊的位置。還有許多種循環(huán)訪問一系列對象的方法（非常有用）。在Explorer的文件對象模塊（DocumentObjectModel）中，對象可以代表所有在該對象之下的對象（objectobjectobject）。所以foobar.all包含所有包含在foobar之下的HTML標(biāo)簽。無論什么時候你都可以找到一個很好的類屬對象document.all，因為所有的網(wǎng)頁中都有一個文件（document），因此它必然有一個document.all對象。3.4腳本如何運行所以如果你想控制某個對象的位置，你應(yīng)該這樣編寫你的JavaScript:scriptlanguage=javascriptfunctionmoveIt()if(document.layers)document.truck.left-=5;if(document.truck.left0)document.truck.left=480elseif(document.all)truck.style.left=parseInt(truck.style.left)5;if(parseInt(truck.style.left)0)truck.style.left=480;if(document.layers)|(document.all)setTimeout(moveIt(),100);/script它的執(zhí)行結(jié)果應(yīng)該是:代碼的含義如下：如果客戶端支持document.layers對象,將名為truck的對象層左移5個位置.如果名為truck的對象層的位置小于0,則名為truck的對象層的的left屬性設(shè)置為480。但是，如果客戶端支持document.all對象,則將名為truck的HTML對象的樣式選項left的整數(shù)值減去5。如果名為truck的HTML對象的樣式選項left的整數(shù)值小于0，則將其數(shù)值設(shè)為480。如果客戶端支持document.all或document.layers對象中的任何一種，等候10秒鐘，然后執(zhí)行函數(shù)moveIt?，F(xiàn)在你自己作一下這個程序。讓拖拉機在頁面中移動。注意：你應(yīng)該采用行內(nèi)樣式，例：DIVid=truckstyle=position:absolute;left:20;top:20。3.5訪問對象的一個技巧現(xiàn)在你已經(jīng)可以在頁面中移動對象了。但是如果你需要將多個對象按照特定的順序移動或者執(zhí)行多個事件觸發(fā)的行為時，不僅的代碼體積會增加（每次訪問一個對象時你都必須使用一次if/then語句），而且每次都必須為某個行為鍵入document.truck.left是一件很煩人的事。在Netscape模塊中，當(dāng)你嵌入DIV時，文件對象模塊的層次結(jié)構(gòu)就會增加，如下：divid=foodivid=bardivid=sna/div/div/div要訪問foo，則必須執(zhí)行document.foo,而要訪問bar，則必須執(zhí)行document.foo.document.bar。而要訪問sna，則必須執(zhí)行document.foo.document.bar.document.sna。我快要受不了啦啦啦！所以你必須解決引用對象時造成的代碼體積膨脹的問題，還得避免每次移動一個對象時必須設(shè)定條件。但你可以用一個技巧解決這個問題。任何用JavaScript編寫過網(wǎng)頁的人都知道任何打開一個小窗口：windowID=window.open(name,/);這項指令就可打開一個小窗口，但是你還可以通過使用windowID作一個引用在繼續(xù)控制追趕窗口。例如windowID.location=/就可以改變窗口資源的定位。windowID.close()就可關(guān)閉該窗口。你所做的只是對一個Javascript對象設(shè)置一個引用。在動態(tài)HTML中也可以使用同樣的技巧。你可能會注意到在上一頁的圖表中，大多數(shù)定位屬性的語法都很相似。只不過它們被用在了不同的對象上。我們可以用一個JavaScript例程解決上面的問題。scriptfunctionsetup()if(document.layers)daTruck=document.truck;elseif(document.all)daTruck=truck.style;/script現(xiàn)在moveIt函數(shù)可以被改為functionmoveIt()daTruck.left=parseInt(daTruck.left)-5;if(parseInt(daTruck.left)0)daTruck.left=480;setTimeout(moveIt(),100);代碼短了一些，對吧？下面我們將使頁面這些圖象都動起來。3.6制作互相追趕的動畫效果現(xiàn)在你所能控制的屬性已經(jīng)不只是left和top了，當(dāng)然，還有z-index?，F(xiàn)在我們制作圖片互相追趕的效果。functionmoveMonkey(monkey,dir)if(document.all)varwtMonkey=document.all(monkey).style;elseif(document.layers)varwtMonkey=document.monkeyContainer.document.layersmonkey;if(parseInt(wtMonkey.left)150)dir=dir*-1;wtMonkey.zIndex=5-dir;wtMonkey.left=parseInt(wtMonkey.left)+dir;setTimeout(moveMonkey(+monkey+,+dir+),100);圖片的名字被傳遞給函數(shù)，函數(shù)則改變圖片的左邊的定位。然后進行標(biāo)準(zhǔn)的功能檢查，為特定的瀏覽器設(shè)定引用參數(shù)。然后它改變z-index，如果圖片移動到了桌子的任何一端，則函數(shù)改變圖片移動的方向。注意這不是編制類屬JavaScript移動例程的唯一方法。你可以隨意添加、減少或編寫自己的例程。下面是今天的家庭作業(yè)。將actI,sceneI作出動畫效果。你可以使用上面所提供的代碼或者編寫你自己的代碼。當(dāng)你編寫例程時注意Netscape嵌入定位對象的方法。4.1讓我們編寫一些有用的東西如果你認真閱讀了本教程并做了留給你的家庭作業(yè)的話，你心中肯定還存在這樣一個疑問：這個動畫是很有趣，但是你做的網(wǎng)站仍然是比較樸實無華的那種，所以動態(tài)HTML對你來說可能沒有太大的價值。沒關(guān)系，今天的教程就是針對你這樣的問題制作的。今天我們將建立幾個用戶界面元素，處理用戶事件，動態(tài)改變背景，自動變換網(wǎng)頁內(nèi)容以及顯示或隱藏某些頁面對象。所有這些內(nèi)容都有很強的實用性。你最好能先了解JavaScript語言中關(guān)于鏈接事件的課程，以便對用戶事件具備初步的了解。在今天的課程中將經(jīng)常用到鏈接事件。4.2下拉菜單腳本讓我們編寫一些我們所熟悉的用戶界面元素下拉菜單，子菜單。這些元素和你現(xiàn)在正在瀏覽的窗口頂部的菜單條很類似。大多數(shù)操作系統(tǒng)都有一個類屬專用接口工具集，當(dāng)你需要應(yīng)用下拉菜單時就可調(diào)用該工具集。然后你可以設(shè)定被選項目的的名稱和執(zhí)行的行為。由于HTML不包含這樣的專用接口工具集，所以你必須建立自己的工具集。首先你必須描述它的外觀。我們在菜單條上加入一定的顏色以及描述各項功能的名稱，例如file、edit、view等等。當(dāng)你點擊該文字時，就會顯示該菜單項下的子菜單。在子菜單框中點擊相應(yīng)的菜單項目就可觸發(fā)某個執(zhí)行程序的行為。讓我們在HTML中編寫這樣的菜單。首先，你需要生成一個DIV作為頂部的菜單條：divid=menuBar/div現(xiàn)在將該菜單條放在頁面頂部，加上特定的顏色：styletype=text/css#menuBarposition:absolute;left:0;top:0;width:100%;height:22px;border:1pxsolid#99ffff;background-color:#99ffff;layer-background-color:#99ffff;/style則生成這樣一個DIV：你可能會對最后一條CSS規(guī)范不知所以然，這項是Netscape對CSS的擴展，它指的是絕對定位了的元素的背景色。由于邊框設(shè)置為border:1pxsolid#99ffff;，所以有必要加入這一條使背景色延伸到DIV的邊框。否則背景色只能在DIV所包含的內(nèi)容底下顯示。4.3使菜單初具規(guī)模下面我們插入一個菜單目錄。我們將標(biāo)題設(shè)置為Menuitem。styletype=text/css#menuBarposition:absolute;left:0;top:0;width:100%;height:22px;border:1pxsolid#99ffff;background-color:#99ffff;layer-background-color:#99ffff;.daMenuposition:absolute;width:100px;height:22px;border:1pxsolid#99ffff;top:0px/style.divid=menuBar/divdivid=webmonkeyclass=daMenuMenuitem/div顯示結(jié)果如下：MenuItem下面在webmonkey菜單項下加入子菜單：style.moreMenuposition:absolute;width:100px;border:1pxsolidred;background-color:red;layer-background-color:red;top:22px;/style.divid=moreMonkeyclass=moreMenuAaronbrCaptainCursorbrCassandrabrChrisbrCourtneybrJeffbrJoannebrJeanPierrebrKlugbrKristinbrNadavbrTaylorbrThaubrTimbrWendybr/div同其他菜單項結(jié)合后顯示結(jié)果如下：MenuItemAaronCaptainCursorCassandraChrisCourtneyJeffJoanneJeanPierreKlugKristinNadavTaylorThauTimWendy下面我們?yōu)椴藛雾椩O(shè)定功能。首先要做的是選擇moreMenu類，并將其隱藏。因為通常情況下，如果你不點擊菜單項，它不會顯示子菜單目錄。所以，你應(yīng)該加入下面的代碼：.moreMenuposition:absolute;width:100px;border:1pxsolidred;background-color:red;layer-background-color:red;visibility:hidden;top:22px;現(xiàn)在這個DIV仍然在頁面中，但瀏覽器不將它顯示出來。4.4完成菜單條的制作現(xiàn)在給菜單條加入腳本使其能響應(yīng)鼠標(biāo)的行為并執(zhí)行相應(yīng)的功能。我們利用visibility屬性隱藏子菜單項目并在菜單項目被點擊時顯示子菜單。處理visibility時，你會立刻遇到DOM不兼容的問題。Netscape的DOM更多地受其LAYER標(biāo)簽和屬性的影響。所以即使在DOM中你將一個對象的visibility屬性設(shè)置為hidden（隱藏），Netscape也會將其顯示出來。如果你加入下面這條：if(daMenu.visibility=hidden)你所得到的不是樣式表語法的參數(shù)值，而是LAYERS語法的參數(shù)值。所以如果你設(shè)置document.foo.visibility=visible,則代碼將會按照你預(yù)想的那樣執(zhí)行，對象foo在屏幕中可以被看到。如果你用alert(document.foo.visibility)檢查參數(shù)值,則返回的數(shù)值是show。解決辦法是設(shè)置一些變量，用標(biāo)準(zhǔn)的條件并設(shè)定一個名為visible的變量用于Netscape中的show，在InternetExplorer中則設(shè)置visible。在Netscape中設(shè)置一個名為hide的變量，在InternetExplorer則用hidden。在相應(yīng)的字符串位置放入這些變量，則問題就解決了。scriptif(document.layers)visible=show;hidden=hide;elseif(document.all)visible=visible;hidden=hidden;functionbarTog(menu)if(document.layers)daMenu=document.layersmenu;elseif(document.all)daMenu=document.all(menu).style;if(daMenu.visibility=visible)daMenu.visibility=hidden;elsedaMenu.visibility=visible;lastMenu=daMenu;/scriptbarTog函數(shù)所做的是設(shè)置標(biāo)準(zhǔn)的條件語句，如果在被傳送的變量菜單中設(shè)定的對象是visible，則隱藏該對象，否則就顯示該對象。然后將對該對象的引用傳遞給名為lastMenu的全局變量（這樣以來，以后你可以再關(guān)閉它）。接下來你要做的就是調(diào)用這個函數(shù)，所以在菜單條中你將Webmonkey設(shè)定一個anchor（錨區(qū)），并設(shè)定被點擊是執(zhí)行的行為。divid=webmonkeyclass=daMenuahref=#class=itemAnchoronclick=javascript:barTog(moreMonkey);returnfalse;Webmonkey/a/div這段代碼執(zhí)行barTog函數(shù)，并將應(yīng)該被打開或關(guān)閉的DIV的名稱傳遞給它。顯示結(jié)果如下。4.5使菜單具備相應(yīng)的功能下面要做的是給每個菜單條設(shè)定一個行為。你可以設(shè)定任何一種行為，不一定非得是動態(tài)HTML。但由于本教程講的是動態(tài)HTML，而我們的課題是將如何改變layers的visibility（可視性）屬性。所以我們?yōu)槊恳粋€菜單項目設(shè)定隱藏和顯示包含相應(yīng)的網(wǎng)猴圖象的層（layer）。scriptfunctionmenuItem(item)if(document.layers)daLast=document.layerslastItem;daItem=document.layersitem;elseif(document.all)daLast=document.all(lastItem).style;daItem=document.all(item).style;daLast.visibility=hidden;daItem.visibility=visible;lastMenu.visibility=hidden;lastItem=item;varlastItem=aaron;/script這段腳本仍然用我們的老朋友條件語句調(diào)用兩個對象，現(xiàn)調(diào)用item，然后是最后被打開的lastitem(lastItem的缺省設(shè)置是aaron)，并且該語句還要記憶被打開的最后一個菜單（我們在barTog中設(shè)置的lastMenu）。設(shè)置完所有visibility后還記憶lastItem。下面需要給每個菜單項目加上相應(yīng)的anchor調(diào)用。ahref=#class=itemAnchoronclick=menuItem(captCursor);returnfalse這條代碼調(diào)用menuItem函數(shù)，并指示其顯示ID為captCursor的DIV?，F(xiàn)在將anchor錨定每個菜單項目并將每個DIV指向相應(yīng)的網(wǎng)猴的名稱?，F(xiàn)在當(dāng)你從菜單中選擇相應(yīng)的菜單時就會顯示相應(yīng)的圖片?，F(xiàn)在你可以制作你自己的菜單并在其中加入自己的菜單項目，隱藏及顯示DIV，并在DIV中加入表單元素。明天的課程中我們將結(jié)合前面所學(xué)的知識作一個完整的展示。5.1排錯現(xiàn)在，經(jīng)過四天的動態(tài)HTML教程，你已經(jīng)知道如何制作動畫和用戶界面。你可以定位對象，在網(wǎng)頁中移動它們，用程序改變它們的z-index和可視性。你知道如何條件化不同的DOM和寫在Microsoft和Netscape的瀏覽器中都可用的文檔。也許你覺得用手工編碼太辛苦，于是你拋棄了文本編輯器，投入所見即所得的編輯工具的懷抱。但是不管你用哪中工具，你都會遇到一些問題。比如你想真正讓導(dǎo)航條一直放在瀏覽器的右側(cè)?；蛘哂脩粼L問你的站點時不停地調(diào)整瀏覽器的大小，于是Netscape用戶會抱怨所有的樣式信息突然消失（當(dāng)你調(diào)整窗口尺寸時，Netscape扔掉了所有的樣式信息）?；蛟S，你在制作動畫，并把所有的演員放在后臺，讓他們等著進入，但是有的人有一個非常大的高分辨率顯示器，能看出頁面邊緣的演員。你在使用動態(tài)HTML時會遇到所有這些問題。教程的最后一天將涉及其中的一些問題。5.2放在底部和右面CSS在定位上的缺點是它只有l(wèi)eft和top屬性，但是沒有bottom或right。這就意味著你只能放一個對象在離瀏覽器窗口50個像素的位置，但是你不能只用CSS就能把對象放在離瀏覽器窗口右邊50像素的地方。這個問題在CSS2中應(yīng)該能得到解決，樣式表的下一代specification正在出籠；在它被主流瀏覽器支持之前，你只好求助于JavaScript。用JavaScript解決這個問題的最好方式是基于文檔寬度的計算。兩種4.0瀏覽器都在DOM中包含文檔大小的對象。所以定位對象的方式是把窗口的寬度減去對象的寬度。divid=fooyourcontenthere/divscriptif(document.layers)document.foo.left=window.innerWidth-document.foo.clip.width;elseif(document.all)foo.style.left=document.body.offsetWidth-parseInt(foo.style.width);/script這可以把div定位到屏幕的右邊。這種技術(shù)也可以把對象定位到窗口底部。兩種瀏覽器都支持的屏幕對象是：FeatureInternetExplorerNetscapeNavigatorheightofthescreenscreen.heightscreen.heightwidthofthescreenscreen.widthscreen.widthcolordepthofthescreenscreen.colorDepthscreen.colorDepthheightofthewindowdocument.body.offsetHeight*window.innerHeightwidthofthewindowdocument.body.offsetWidth*window.innerWidth*從技術(shù)上講，這是文檔的高度和寬度，不是窗口的，但是大多數(shù)情況下可以把它們看成一件事。5.3Netscape的調(diào)整大小問題如果你用的是Netscape，在看這篇教程的時候，可能要調(diào)整瀏覽器窗口的大小以便達到較好的顯示效果。這是可能會突然出現(xiàn)一個可怕的閃光，然后所有的定位信息都消失了，你的頁面看起來象。這是Netscape4.0的一個bug。有解決辦法嗎？較簡單的方式是在頁面上放一個提示：如果您是Netscape用戶，當(dāng)調(diào)整瀏覽器尺寸時，需要重新下載頁面。或者可以使用程序：scriptif(document.layers)window.onResize=reloadIt;functionreloadIt()document.location=document.location;/script這種方法在大多數(shù)情況下管用。（但是，Netscape偶爾會進入重新下載文檔的死循環(huán)。）5.4一定要把樣式加在標(biāo)記中嗎？如果你經(jīng)常訪問網(wǎng)猴，你可能知道我們鼓吹在線文檔中結(jié)構(gòu)、表現(xiàn)和行為的分離。你保持你的HTML結(jié)構(gòu)，用CSS進行布局，然后用JavaScript做一些事情。盡可能地不要把這三者混在一起。問題是，當(dāng)你從文檔的head部分應(yīng)用樣式規(guī)則到對象時，在IE中，整個規(guī)劃會分離到不同部分。htmlheadtitleDOMexample/titlestyle#fooposition:absolute;left:10px;top:10px/stylescriptfunctionalertIt()alert(foo.style.left);/script/headbodyonload=alertIt()divid=fooThisisthesample/div/body/html你得到一個空的對話框，是嗎？你的第一個反映可能是假定下載過程中斷了。但是實際上是IE把這個整體分離。因為如果你查看文檔，對象foo并沒有樣式在其中，雖然它有一個指向樣式表的ID。所以foo的唯一屬性是ID。你可以做一個實驗，在foo標(biāo)記中加入：divid=foobar=neatThisisthesample/div現(xiàn)在alert(foo.bar)會返回neat。你看出來在IE中發(fā)生什么了嗎？標(biāo)記中的任何屬性都在DOM中作為對象的屬性出現(xiàn)。但是如果它不在對象內(nèi)，就在DOM中沒有反映。這就是為什么把樣式加到標(biāo)記中。為了修正這個問題，我們再一次使用JavaScript的object-as-reference能力。但是不指向HTML對象，我們?yōu)榘凑誌D為對象指定樣式表規(guī)則。頁面的結(jié)果和在你的腳本中的一致，但是不需要把樣式放在標(biāo)記行中。scriptfunctionsetup(myId)if(document.layers)myObj=document.layersmyID;elseif(document.all)for(ss=0;ssdocument.styleSheets.length;ss+)for(sr=0;srdocument.styleSheets(ss).rules.length;sr+)if(document.styleSheets(ss).rules(sr).selectorText=#+myId)myObj=document.styleSheets(ss).rules(sr).style;/script結(jié)果是循環(huán)經(jīng)過所有的頁面的樣式表。如果其中一個與你的對象的ID匹配，它就作為這個對象的別名。你可以象從