1、,第十一章,DW中的行為,行為基礎(chǔ) 行為實(shí)例 拼圖游戲的制作 下拉菜單的制作 行為總結(jié),行為（Behavior）基礎(chǔ)：前面在制作一對(duì)多關(guān)系的翻滾圖時(shí)，我們用到了行為（Behavior），那么， Dreamweaver 中的行為倒底是些什么東西？實(shí)際上，Dreamweaver 中的行為，只不過是一系列 JavaScript 程序的集成，它包括兩部分的內(nèi)容，一個(gè)部分是事件，另一個(gè)部分是動(dòng)作，動(dòng)作是特定的 JavaScript 程序，只要在事件發(fā)生（如鼠標(biāo)點(diǎn)擊，或者頁面裝載）后，該程序（動(dòng)作）就會(huì)自動(dòng)運(yùn)行。Window/Behaviors 命令可以打開行為面板，如圖,點(diǎn)擊左上角的 + 號(hào)，彈出一個(gè)長

2、長的菜單，里面全是一些特效動(dòng)作，所有當(dāng)前不可用的選項(xiàng)都是灰色的，只有在設(shè)定一定條件下那些灰色的動(dòng)作才能使用。如圖,對(duì)這些動(dòng)作的解釋如下：Call JavaScript：調(diào)用 Javascript 腳本。 Dreamweaver 雖然內(nèi)集了豐富的可供調(diào)用的 Javascript ，但如果你覺得不滿意的話，可以調(diào)用自己制作的 Javascript 或第三方開發(fā)的 Javascript ，而這時(shí)就需要使用本選項(xiàng)。Change Property：改變屬性，如發(fā)生某個(gè)事件后，自動(dòng)改變文本或圖片信息，等等。Check Browser：檢查瀏覽器。同一個(gè)網(wǎng)頁，在不同的瀏覽器上的顯示可能大為不同，如果你要讓自

3、己的網(wǎng)頁適合于大多數(shù)瀏覽器的話，可以分別針對(duì)不同的瀏覽器將所有的網(wǎng)頁制作成幾個(gè)不同的類別，然后再調(diào)用 Check Browser ，根據(jù)訪問者瀏覽器的不同，進(jìn)入相應(yīng)的網(wǎng)頁，從而讓你的網(wǎng)頁在每種瀏覽器上都是完美無缺的。Check Plugin：檢查插件。插件？比如你做了個(gè) Flash 動(dòng)畫并放到自己的網(wǎng)頁上，當(dāng)訪問者的瀏覽器有 Flash 播放插件，則可以播放動(dòng)畫，如果沒有，這時(shí)如果你的網(wǎng)頁具有 Check Plugin 功能，則可按你的解決方案對(duì)訪問者進(jìn)行提醒，如你應(yīng)該安裝 Flash 播放器，下載地址.。,Control Shockwave or Flash：控制 Flash 影像。為什么要

4、控制 Flash 影像？其實(shí)，并不是每個(gè) Flash 動(dòng)畫都是隨網(wǎng)頁打開就開始播放了，更多的是在網(wǎng)頁上做一些按鈕之類的帶交互作用的圖標(biāo)，可以點(diǎn)擊它開始播放動(dòng)畫，也可以通過拖拉進(jìn)度條前進(jìn)或后退，等等，而這，就需要 Control Shockwave or Flash 功能的支持。Set Text/Set Text of Status Message：在狀態(tài)欄顯示信息。一般情況是，當(dāng)鼠標(biāo)放到某幅圖像上會(huì)自動(dòng)彈出信息提示；或者當(dāng)鼠標(biāo)指向某個(gè)鏈接會(huì)在該處自動(dòng)顯示鏈接信息，而狀態(tài)欄中始終只有一個(gè)網(wǎng)頁圖標(biāo)。要充分利用網(wǎng)頁的有效空間，避免信息混雜現(xiàn)象，可以把那些事件信息通過壯態(tài)欄進(jìn)行顯示，這就需要在網(wǎng)頁中進(jìn)

5、行 Set Text of Status Message 的設(shè)置。Drag Layer：拖曳圖層，主要用來制作隨鼠標(biāo)移動(dòng)而發(fā)生位移的網(wǎng)頁特效。Go to URL：跳轉(zhuǎn)頁面。在輸入欄中輸入網(wǎng)址，然后回車，就可以到想去的網(wǎng)站。但在整個(gè)過程中，全是手工操作，而 Go to URL 卻不同，只要你到了某個(gè)網(wǎng)頁，不用你再動(dòng)手，它自己就會(huì)把你帶到另外的指定的網(wǎng)址去。最常見的例子是那些網(wǎng)址發(fā)生變化的網(wǎng)站，它們常常在舊網(wǎng)址的首頁上注明網(wǎng)址已變，然后通過設(shè)置舊網(wǎng)頁的 Go to URL 自動(dòng)將訪問者帶到新的地址去。,Open Browser Window：打開瀏覽器。Popup Message：彈出信息提示框。

6、最常見的例子是訪問者進(jìn)入某個(gè)頁面，該頁面就會(huì)自動(dòng)彈出一個(gè)消息框，顯示先設(shè)定好的文本，如歡迎訪問本站等等。Preload Images：預(yù)取圖片，主要功能在于保持效果的連續(xù)性，避免事件發(fā)生時(shí)的讀取延遲。Show/Hide Layers：顯示/隱藏圖層，非常通用的網(wǎng)頁特效，如當(dāng)鼠標(biāo)移到某個(gè)對(duì)象上時(shí)，原來隱藏的圖層顯示出來，從而顯示出該圖層中的對(duì)象；當(dāng)鼠標(biāo)離開原對(duì)象，顯示和圖層再次隱藏。Swap Image：翻滾圖，用它不僅可以建立一對(duì)一的翻滾圖，還可以建立一對(duì)多等更為復(fù)雜的替換特效。Timeline中，Play Timeline/Stop Timeline/Go to Timeline Frame

7、：主要是對(duì)等時(shí)線控制。等時(shí)線猶如一個(gè)動(dòng)畫過程集合，在不同的時(shí)間可以播放不同的動(dòng)畫，關(guān)于它的詳細(xì)介紹我們將在下一節(jié)中講解。本節(jié)中，你只需知道 Behavior 可以控制復(fù)雜的等時(shí)線并產(chǎn)生非常智能化的特效就行了。Validage Form：表單驗(yàn)證。表單中如果有諸如密碼式，字符數(shù)目等的限制，就可以應(yīng)用表單驗(yàn)證功能。,行為示例：上面我們就大部分常用的動(dòng)態(tài)技術(shù)進(jìn)行了解釋，現(xiàn)在來看一看如何將這些特效變成實(shí)實(shí)在在的東西。由于內(nèi)容太多，我們只是選擇了幾個(gè)比較簡單的例子，以便于大家能夠很容易地進(jìn)行掌握。1.在狀態(tài)態(tài)顯示信息：從上面我們知道，Set Text/Set Text of Status Message

8、 可以控制狀態(tài)欄的顯示信息，現(xiàn)在我們來看如何制作。.最終效果如圖,圖中，當(dāng)將鼠標(biāo)移到請(qǐng)看狀態(tài)欄這幾個(gè)字上的時(shí)候，狀態(tài)欄中會(huì)顯示請(qǐng)看狀態(tài)欄字樣，當(dāng)鼠標(biāo)移開時(shí)狀態(tài)欄中的信息消失，本例顯示了帶鏈接的內(nèi)容在狀態(tài)欄顯示信息的方法；當(dāng)將鼠標(biāo)移動(dòng)到圖像上時(shí)，狀態(tài)欄中會(huì)顯示這是索尼網(wǎng)站的一個(gè)圖片字樣，當(dāng)鼠標(biāo)移開，狀態(tài)欄中信息消失，本例顯示了普通內(nèi)容如圖片在狀態(tài)欄中顯示信息的辦法。.制作步驟：先在編輯區(qū)域輸入請(qǐng)看狀態(tài)欄字樣，并隨便為它加上個(gè)鏈接信息。如圖,全選幾個(gè)字，用 Window/Behaviors 命令打開行為窗口。點(diǎn)擊左上角的 “+”號(hào)，然后在彈出的窗口中選擇 Set Text/Set Text of

9、Status Bar 命令，如圖 然后彈出如圖六的窗口，其中， Message 對(duì)話框中的內(nèi)容就是要在狀態(tài)欄中顯示的信息。這時(shí)只需向其中輸入“請(qǐng)看狀態(tài)欄”字樣就行了。如圖 從前面我們已經(jīng)知道，行為其實(shí)是一種針對(duì)事件（Event）觸發(fā)的特殊效果，效果與事件缺一不可。剛才我們?cè)O(shè)置了效果（就是在狀態(tài)欄中顯示的信息），現(xiàn)在得設(shè)置事件了。,回到行為面板上，看左邊 Events 下是什么事件。此處是 onmouseover （鼠標(biāo)移上），那就不需要改了，因?yàn)槲覀冋且谑髽?biāo)移上那幾個(gè)字樣上時(shí)在狀態(tài)欄顯示特別信息，但這只是系統(tǒng)的默認(rèn)事件，而且在本例中這個(gè)默認(rèn)事件又恰恰合適，而在許多其他情況下，這種事件是需要

10、另行選擇的。要進(jìn)行選擇，只需點(diǎn)按 onmouseover 右邊那個(gè)向下的小三角形，然后在彈出的菜單中進(jìn)行選擇就行了。如圖,置完鼠標(biāo)移上效果，還得設(shè)置鼠標(biāo)移出，狀態(tài)欄信息消失的效果。辦法很簡單，還是選中那幾個(gè)字，Set Text/Set Text of Status Bar ，然后在彈出的窗口中什么也別寫（以便在狀態(tài)欄中什么也不顯示），點(diǎn)按 OK 后回到動(dòng)作面板上，最后再將動(dòng)作由 onMouseOver （鼠標(biāo)移上）改為 onMouseOut （鼠標(biāo)移出）。如圖 帶鏈接的文本設(shè)置完畢，下面我們加入圖片（image/photo.gif），并按剛才的原理給它添加效果。不同的地方只是不用給圖片添加鏈接

11、信息，在狀態(tài)欄中顯示的信息不同，其他的設(shè)置完全一樣，大家可以自己試著做一下。,2.彈出信息：Popup Message 可以制作彈出信息效果，也就是打開頁面，頁面自動(dòng)彈出對(duì)話窗口并提示預(yù)設(shè)好的信息。.最終效果如圖,.制作步驟：現(xiàn)在我們用現(xiàn)成的 16.htm 文件來制作彈出式效果。用 Dreamweaver 打開 16.htm ，并用 File/Save As 命令將文件另存為一個(gè)新文件。請(qǐng)仔細(xì)找到編輯窗口中左下角的 Body符號(hào)，如圖 選中 body符號(hào)，然后在行為面板的行為菜單中點(diǎn)按 Popup Message 命令，如圖,然后會(huì)彈出如圖十二的窗口， Message 輸入框中輸入的信息將作為

12、提示信息彈出。在輸入框中輸入“歡迎大家來到我的網(wǎng)頁”字樣。 最后點(diǎn)按 OK 并進(jìn)行保存，彈出式效果制作完畢。,制作拼圖游戲 工具:Layer（層）與Behavior（行為事件）菜單命令。 在瀏覽別人網(wǎng)頁的時(shí)候，你也許經(jīng)常發(fā)現(xiàn)網(wǎng)頁上的某些圖片（或文字） 可以用鼠標(biāo)隨意拖動(dòng)。如果把此效果運(yùn)用到你的網(wǎng)頁中，不是也可以為你 的網(wǎng)頁增添一點(diǎn)靈性?不過你或許會(huì)覺得制作起來比較麻煩，其實(shí)恰恰相反， 用DW做此效果特別簡單。相信看了下面的制作過程，你也會(huì)發(fā)出這樣的感 嘆。 一般情況下，我們都固定住圖的一部分，在此基礎(chǔ)上再用圖的其它部 分（可以被拖動(dòng)的）進(jìn)行組合拼裝，當(dāng)然也可以讓圖全部都可以被拖動(dòng)。 下面是具體

13、的制作步驟。 步驟一:準(zhǔn)備好要進(jìn)行拼裝的圖形，然后將其分割。分割圖形可使用Photoshop 之類的軟件，如果沒有，用Windows自帶的畫圖工具也可以。 步驟二:選定分割后圖形的一部分，作為頁面上固定部分，用菜單“Insert” 中的“Image”命令直接插入到頁面上的合適位置就可以。,步驟三:制作活動(dòng)圖形。在頁面上插入一個(gè)層（Layer），選定分割后 圖形可被拖動(dòng)的部分，將其插入層中，選中該層，彈出Behavior框，在其 中的“Events For”框中選擇“IE 4.0”。 單擊“+”，在菜單中選擇“Drag Layer”，彈出對(duì)話框。 “Layer”表示選定層的名稱（此項(xiàng)一定要選正確

14、），至于其它參數(shù)用 默認(rèn)值或不填也可以了。選擇“More Options”將會(huì)有更多的參數(shù)，見下 圖，同樣使用默認(rèn)值也可以。 步驟四:在Behavior框的“Events”中點(diǎn)黑色箭頭，選擇“onMouseOver” 或“onMouseDown”。 步驟五:如還有活動(dòng)圖形，重復(fù)步驟三、四，直至全部做完。 拼裝圖形只是DW中Behavior命令的一個(gè)簡單應(yīng)用，還有更多的功能在著我們進(jìn)一步去開發(fā)，把我們的網(wǎng)頁點(diǎn)綴得更加精彩！,用Dreamweaver制作下拉菜單 Dreamweaver是制作下拉菜單最常用的工具，方法簡單，控制自由，可以最大限度地隨心打造菜單樣式，是制作下拄菜單的必修課。 用Dre

15、amweaver制作下拉菜單的原理很簡單，它利用了Behaviors（行為）面板中的內(nèi)置方法Show-Hide Layers（隱藏-顯示層）方法，并用onMouseOver（鼠標(biāo)移至）和onMouseOut（鼠標(biāo)移開）來觸發(fā)層的隱藏和顯示，而將要出現(xiàn)的菜單就在層中。 因此，我們可以分四步來制作下拉菜單，首先我們需要一個(gè)導(dǎo)航條，它用來放置首先出現(xiàn)在瀏覽者眼前的主菜單；然后再制作開始隱藏著而將會(huì)出現(xiàn)的下拉選單；接著，進(jìn)行最關(guān)鍵的一步，為主菜單和下拉選單添加上隱藏和顯示層的效果；最后，我們進(jìn)行菜單的美化修飾。最終看到的效果如圖。,一、 導(dǎo)航條的制作 首先進(jìn)行一些必要的前期工作，按CTRL+J，打開P

16、age Properties（頁面屬性）窗口，參數(shù)設(shè)置如圖二，這一設(shè)置對(duì)菜單的位置將有影響，所以請(qǐng)如圖設(shè)置。,按CTRL+F2打開Objects面板，點(diǎn)擊層按鈕后在頁面中按住鼠標(biāo)不放拖出一個(gè)層，然后在層的Properties（屬性）面板中設(shè)置各參數(shù)，Layer ID框填入title，L、T、W、H框分別填入8、15、480、15，背景色填入#006699，如圖。 將光標(biāo)移至層內(nèi)，點(diǎn)擊Objects面板上的表格按鈕，插入一個(gè)一行四列的表格，設(shè)置如圖。,按住CTRL鍵不放點(diǎn)取表格的四個(gè)單元格，然后設(shè)置它們的寬度為120，并在前兩個(gè)單元格中輸入文字，就是你的主菜單名，可按自己想要的名字輸入，我用經(jīng)典

17、論壇和天極網(wǎng)為例，并加上鏈接。,二、 下拉選單的制作 現(xiàn)在開始制作將要下拉出現(xiàn)的菜單，同樣用層來制作。 再次從Objects面板插入一個(gè)層到前面我們做好的導(dǎo)航條的下方，各項(xiàng)參數(shù)填為：Layer ID框填入menu1，L、T、W、H框分別填入8、34、120、80，背景色填入#999966，其中L和T兩個(gè)參數(shù)是設(shè)置這個(gè)層距離窗口左邊框和上邊框的距離，一定不能填錯(cuò)，不然菜單將會(huì)錯(cuò)位，也將影響完成后的可用性。,這時(shí)候，我們便可以在menu1這個(gè)層中輸入我們所要的菜單內(nèi)容。為了排版方便，我在這還是使用表格來做菜單。這個(gè)層將作為經(jīng)典論壇的下拉選單出現(xiàn)，填入你所需要的菜單鏈接。同樣的方法，再為天極網(wǎng)也做一

18、個(gè)下拉選單（層menu2）。 這一步要注意的地方就是下拉選單所在的層（menu1、menu2）的位置非常重要（由L和T兩個(gè)參數(shù)決定）。它們的上邊線應(yīng)該緊貼導(dǎo)航條的下邊線，這樣才能保證在后面我們完成第三個(gè)步驟后，菜單能正常使用。因?yàn)槿绻h(yuǎn)離導(dǎo)航條的話，鼠標(biāo)一離開導(dǎo)航條，菜單就消失了。 按F2打開LAYER（層）面板，其中列出了網(wǎng)頁中的三個(gè)層，點(diǎn)menu1和menu2的前面一格，出現(xiàn)閉著的眼睛圖標(biāo)，這兩個(gè)層便隱藏起來了。操作這一步是因?yàn)橄吕藛蔚某跏紶顟B(tài)是不可見的。,三、 顯示和隱藏效果的添加 這一步驟是化腐朽為神奇的關(guān)鍵一步，大家仔細(xì)跟我來做。 本步驟分為兩部分：第一，對(duì)導(dǎo)航條中的主菜單添加控制

19、顯示隱藏的命令；第二，給下拉選單本身添加顯示隱藏的命令。 1導(dǎo)航條部分 首先按CTRL鍵不放點(diǎn)擊導(dǎo)航條中的第一個(gè)單元格，現(xiàn)按Shift+F3打開Behaviors窗口，點(diǎn)按鈕，在下拉選項(xiàng)中選中Show-Hide Layers（如圖）。如果選項(xiàng)中沒有這一項(xiàng)，則選擇Show Events For下的IE 5.0后，重新點(diǎn) 按鈕，此時(shí)Show-Hide Layers將出現(xiàn)。,這時(shí)將會(huì)彈出一個(gè)窗口，如下圖。在Named Layers框中會(huì)列出當(dāng)前網(wǎng)頁所有的層，選中 layer menu1 ，因?yàn)槲覀兿胍猰enu1這個(gè)層對(duì)經(jīng)典論壇響應(yīng)。然后點(diǎn)下面的show按鈕，OK。 這時(shí)會(huì)回到Behaviors窗口，

20、窗口中出現(xiàn)如下圖所示字樣，點(diǎn)擊Events下的文字onClick，會(huì)出現(xiàn)一個(gè)向下的小箭頭，點(diǎn)擊它，在下拉選項(xiàng)中選中onMouseOver。這一步的作用是實(shí)現(xiàn)當(dāng)鼠標(biāo)移至第一個(gè)單元格時(shí)，下拉選單menu1的狀態(tài)變?yōu)轱@示（Show）。,下一步是讓下拉選單menu2在鼠標(biāo)移至第二個(gè)單元格時(shí)再變加隱藏狀態(tài)。 再點(diǎn)按鈕，在下拉選項(xiàng)中選中“Show-Hide Layers”，在彈出窗口中選中“ layer ”menu1“ ”，因?yàn)槲覀兿胍猰enu1這個(gè)層對(duì)“經(jīng)典論壇”響應(yīng)。然后點(diǎn)下面的“hide”按鈕，OK。 回到Behaviors窗口，點(diǎn)擊向下的小箭頭，在下拉選項(xiàng)中選中onMouseOut。,2下拉選單部

21、分 先選中層menu1，方法是點(diǎn)擊層的邊緣或在LAYER面板中點(diǎn)擊menu1，用與導(dǎo)航條部分同樣的方法在Behaviors窗口中為它添加顯示與隱藏自己的命令。這樣做的效果是當(dāng)鼠標(biāo)移出層menu1時(shí)，層menu1就自動(dòng)隱藏。最后層menu1的狀態(tài)如圖所示。 3重復(fù)以上兩部分，為導(dǎo)航條的第二個(gè)主菜單天極網(wǎng)和層menu2添加顯示、隱藏層命令。,四、 下拉菜單的美化修飾 到這里，下拉菜單的功能效果已經(jīng)實(shí)現(xiàn)了，你現(xiàn)在按F12就可以看到。不過你一定也發(fā)現(xiàn)菜單有點(diǎn)難看，字不夠精細(xì)，菜單選項(xiàng)的默認(rèn)鏈接色不好看，菜單也沒有邊框，那就讓我們來稍稍為它美容一下。 1定義菜單字體樣式 按Shift+F11打開CSS Style（樣式）面板，點(diǎn)擊面板下面的按鈕 在彈出的New Style窗的Tag框內(nèi)選中td標(biāo)簽，Type選第二項(xiàng)Redefine HTML Tag，Define選This Document Only，如圖。,此時(shí)彈出設(shè)置窗口，不管其它的，只在右邊的Size框里選中12