dreamweaver網(wǎng)制作-行為

1、第8章行為Dreamweaver CS4提供了豐富的行為，這些行為的使用可以為網(wǎng)頁對象添加一些動態(tài)效果和簡單的交互功能，使那些不熟悉JavaScript語言的網(wǎng)頁設(shè)計師也可以方便的設(shè)計出通過編寫JavaScript語言才能實現(xiàn)的功能。本章將首先介紹一些基本概念，以及“行為”面板的基本操作；接著結(jié)合實例具體講解常用的Dreamweaver CS4內(nèi)置的行為；最后來學(xué)習(xí)利用插件管理器安裝擴展行為，以及如何在 Dreamweaver CS4中應(yīng)用插件?！緦W(xué)習(xí)目標(biāo)】 行為的基本概念和原理。 Dreamweaver 內(nèi)置行為。 擴展行為。8.1 行為面板8.1.1 行為的概念和原理行為是用來動態(tài)響應(yīng)用戶

2、操作、 改變當(dāng)前頁面效果或是執(zhí)行特定任務(wù)的一種方法。一個行為是由事件(Event )和動作(Action )構(gòu)成的。例如，當(dāng)用戶把鼠標(biāo)移動至對象上(事件)，這個對象會發(fā)生預(yù)定義的變化(動作) 。行為是由預(yù)先書寫好的JavaScript腳本代碼構(gòu)成的，使用它可以完成諸如打開新瀏覽窗口、播放背景音樂等任務(wù)。事件是為大多數(shù)瀏覽器理解的通用代碼，例如，onMouseOver,onMouseOut和onClick都是用戶在瀏覽器中對瀏覽頁面的操作，而瀏覽器通過一定的釋譯執(zhí)行來響應(yīng)用戶的動作。舉個例子，當(dāng)把鼠標(biāo)移動至一個鏈接上時，瀏覽器獲取了一個onMouseOver事件，并通過調(diào)用事先已經(jīng)寫好的與此事件

3、關(guān)聯(lián)的JavaScript語言來響應(yīng)這個動作。因此精簡一點說，行為就是一段預(yù)定義好的程序代碼，通過瀏覽器的解釋并響應(yīng)用戶操作的過程。對象是產(chǎn)生行為的主體。網(wǎng)頁中的很多元素都可以成為對象，例如：整個HTML文檔、圖 像、文本、多媒體文件、表單元素等。事件是觸發(fā)動態(tài)效果的條件，而動作是最終產(chǎn)生的動態(tài)效 果。動態(tài)效果可能是圖片的翻轉(zhuǎn)、鏈接的改變、聲音播放等。一個事件也可以觸發(fā)許多動作，用 戶可以為每個事件指定多個動作。動作按照其在“行為”面板列表中的順序依次發(fā)生。Dreamweaver包含了百余個事件、行動。如果這些行為還不足以滿足需求，Dreamweaver同時也提供了擴展行為的功能，可以下載第三

4、方的行為，當(dāng)然如果我們掌握了 JavaScript語言，也可以自己書寫行為。 8.1.2行為面板的基本操作“行為”面板的基本操作包括打開面板、顯示事件、添加行為、刪除行為等，具體操作步驟如 下：8.2 常用的事件在Dreamweaver CS4中，可以將事件分為不同的種類。有的與鼠標(biāo)有關(guān)，有的與鍵盤有關(guān)， 如鼠標(biāo)單擊、鍵盤某個鍵按下。有的事件還和網(wǎng)頁相關(guān)，如網(wǎng)頁下載完畢，網(wǎng)頁切換等。常用的 事件如下：(1) OnBlur :當(dāng)指定的元素停止從用戶的交互動作上獲得焦點時，觸發(fā)該事件。例如，當(dāng)用 戶在交互文本框中單擊后，再在文本框之外單擊，瀏覽器會針對該文本框產(chǎn)生一個onBlur事件。(2) On

5、Click :當(dāng)用戶在頁面中單擊使用行為的元素，如文本、按鈕或圖像時，就會觸發(fā)該事 件。(3) OnDblclick :在頁面中雙擊使用行為的特定元素(文本、按鈕或圖像)時，就會觸發(fā)該 事件。(4) OnError :當(dāng)瀏覽器下載頁面或圖像發(fā)生錯誤時觸發(fā)該事件。(5) OnFocus :指定元素通過用戶的交互動作獲得焦點時觸發(fā)該事件。例如在一個文本框中單 擊時，該文框就會產(chǎn)生一個"onFocus"事件。(6) OnKeydown :當(dāng)用戶在瀏覽網(wǎng)頁時，按下一個鍵后且尚未釋放該鍵時，就會觸發(fā)該事件。該事件常與"onKeydown "與onKeyup &qu

6、ot;事件組合使用(7) OnKeyup :當(dāng)用戶瀏覽網(wǎng)頁時，按下一個鍵后又釋放該鍵時，就會觸發(fā)該事件。(8) OnLoad :當(dāng)網(wǎng)頁或圖像完全下載到用戶瀏覽器后，就會觸發(fā)該事件。(9) OnMouseDown :瀏覽網(wǎng)頁時，單擊網(wǎng)頁中建立行為的元素且尚未釋放鼠標(biāo)之前，就會觸 發(fā)該事件。(10) OnMousemove :在瀏覽器中，當(dāng)用戶將光標(biāo)在使用行為的元素上移動時，就會觸發(fā)該 事件。(11) OnMouseover :在瀏覽器中，當(dāng)用戶將鼠標(biāo)指向一個使用行為的元素時，就會觸發(fā)該事 件。(12) OnMouseout :在瀏覽器中，當(dāng)用戶將光標(biāo)從建立行為的元素移出后，就會觸發(fā)該事件。(13

7、) OnMouseup :在瀏覽器中，當(dāng)用戶在使用行為的元素上按下鼠標(biāo)并釋放后，就會觸發(fā)該 事件。(14) OnUnload :當(dāng)用戶離開當(dāng)前網(wǎng)頁(關(guān)閉瀏覽器或跳轉(zhuǎn)到其他網(wǎng)頁)時，就會觸發(fā)該事 件。8.3 使用Dreamweaver CS4內(nèi)置的行為Dreamweaver CS4內(nèi)置了 20多種行為，如彈出信息、打開瀏覽器窗口、播放聲音、調(diào)用 Javascript、改變屬性、檢查表單、檢查插件、檢查瀏覽器、交換圖像、控制Flash、設(shè)置導(dǎo)航欄圖像、設(shè)置文本、跳轉(zhuǎn)菜單、拖動AP元素、顯示/隱藏元素、轉(zhuǎn)到 URL等。本節(jié)將具體介紹如何使用這些Dreamweaver CS4內(nèi)置的行為，輕松實現(xiàn)各種效

8、果使網(wǎng)頁更具交互性。8.3.1 彈出信息使用彈出信息動作，在事件發(fā)生時彈出一個事先指定好的信息提示框，可以為瀏覽者提供信息，該提示框只有一個“確定”按鈕。下面以網(wǎng)頁中的按鈕為例，單擊按鈕，彈出信息提示框，單 擊信息提示框的“確定”按鈕，信息提示框關(guān)閉，如圖 15.7所示。具體操作步驟如下 下面我們做一個標(biāo)準(zhǔn)的彈出對話框的例子。第一步，先選中頁面中的物件，一段文字、一幅圖像、一個單元格都行。F8打開Behaviorsinspector 窗口。第二步，在Behaviors inspector窗口中點擊"+ "按按，拉開菜單，在其中選擇" PopUpMessage ”。

9、第三步，在彈出的對話框中錄入文字，如“隨心所夢”，點擊確定關(guān)閉對話框。第四步，這時就會在Behaviors inspector窗口內(nèi)出現(xiàn)"OnClick | PopUp Message "的字樣，點擊OnClick ”就可以選擇觸發(fā)PopUp Message ”的動作了。8.3.2 打開瀏覽器窗口使用打開瀏覽器窗口動作，可以在事件發(fā)生時打開一個新瀏覽器窗口。用戶可以設(shè)置新窗口的各種屬性，如窗口名稱、大小等。例如當(dāng)瀏覽者打開網(wǎng)站首頁時，同時彈出廣告窗口 “ ad.html”，效果如圖15.11所示。8.3.3 為網(wǎng)頁添加背景音樂在Dreamweaver中網(wǎng)頁文件，單擊窗口右下

10、角的按鈕。*心，選中整個網(wǎng)頁。單擊窗口右邊浮動面板中“設(shè)計”左邊的 一，打開“設(shè)計”面板，單擊“行為”，打開“行為” 選項卡。然后單擊 上1,在彈出的菜單中選擇“播放聲音”，打開“播放聲音”對話框。在“播放聲音”對話框中，單擊瀏覽,在“選擇文件”對話框中，單擊“搜尋”文本框右邊的回，在下拉選項中選中聲音文件“ music.midi ” ，單擊 確認(rèn) I。完成設(shè)置。使用播放聲音動作可以設(shè)置網(wǎng)頁的背景音樂。例如，當(dāng)用戶將網(wǎng)頁載入瀏覽器時播放音樂，或當(dāng)用戶在網(wǎng)頁中單擊某個對象時，開始播放聲音。具體操作步驟如下：(1)在 Dreamweaver CS4 中打開網(wǎng)站首頁"index.htm”。

11、(2)在“行為”面板中單擊+”號按鈕，從下拉菜單中選擇“播放聲音”命令，彈出“播放聲音”對話框, 在“播放聲音”文本框中輸入要播放的音頻文彳上名稱與路徑，單擊“確定”按鈕，如圖 15.14所示。(3)在“行為”面板中，單擊事件名稱旁邊的下拉箭頭，在打開的下拉列表框中選擇需要的事件，這里選擇"onLoad",如圖15.15所示(4)保存文件，在瀏覽器中預(yù)覽即可看到效果。當(dāng)頁面加載時，就開始播放聲音8.3.4 調(diào)用 JavaScript使用調(diào)用JavaScript動作，當(dāng)事件發(fā)生時執(zhí)行事先設(shè)計好的JavaScript函數(shù)，下面以"后退”按鈕為例具體操作步驟如下：調(diào)用J

12、avaScript是使選中的物件具有可執(zhí)行的能力。方法：1、選取物件，并打開 Behaviors inspector。2、在Behaviors inspector窗口中點擊"+ ”號，打開下拉選單。在其中選擇"Call JavaScript ； 動作。3、在打開的窗口中錄入JavaScript語句或變量。我d可以錄入：window.close()4、點擊確定退出對話框。并確認(rèn)其缺省事件值為" OnClick ”。5、F12預(yù)覽一下，當(dāng)我們點擊按按鈕時，瀏覽器會自動關(guān)閉Submit8.3.5 改變屬性允許動態(tài)地改變對象屬性，比如圖像的大小，層、表格、單元格的背景顏色

13、等。當(dāng)鼠標(biāo)移至 導(dǎo)航條中指定的單元格時，單元格顏色發(fā)生變化；當(dāng)鼠標(biāo)移開時，單元格顏色恢復(fù)為最初顏色， 如圖15.20所示。8.3.6 檢查表單在具有表單的頁面中，使用檢查表單動作可以驗證表單域中輸入數(shù)據(jù)的合法性。使用OnBlur”事件可以將動作使用于單個文本域，當(dāng)用戶填寫完該文本框的內(nèi)容后立即進(jìn)行驗證。也 可以使用“OnSubmit”事件將動作使用于整個表單，當(dāng)用戶單擊“提交”按鈕提交表單時，對表單中 的多個文本域的數(shù)據(jù)進(jìn)行驗證。下面以檢查表單中的“電子郵件”文本框為例，具體步驟如下8.3.7 檢查插件有時候我們制作的頁面需要某些插件的支持，比如使用Flash制作的網(wǎng)頁，所以有必要對用戶瀏覽器

14、的插件進(jìn)行檢查，看看它是否安裝了指定的插件。使用檢查插件動作可以檢查用戶所使用的計算機是否安裝了頁面所需的插件。以 Flash為例，根據(jù)檢查結(jié)果，對于沒有安裝插件的用 戶，直接跳轉(zhuǎn)到可以下載插件的網(wǎng)頁。具體操作步驟如下8.3.8 檢查瀏覽器不同瀏覽器的支持能力有一定的差異，使用檢查瀏覽器動作可以檢測用戶瀏覽器的類型和版本，并使不同類型和版本的瀏覽器用戶轉(zhuǎn)到不同的網(wǎng)頁。用這種方法能夠使那些使用低版本瀏覽器的用戶仍能正常瀏覽網(wǎng)頁的內(nèi)容。具體操作步驟如下8.3.9 交換圖像使用交換圖像動作，可以在頁面中添加交替顯示的圖像。例如當(dāng)鼠標(biāo)移至設(shè)置了行為的圖像上時，顯示其他的圖像，鼠標(biāo)移開則恢復(fù)最初的圖像。

15、具體操作步驟如下8.3.10 控制 Shockwave 或 Flash使用控制Shockwave或Flash動作，可以控制 shockwave或Flash動畫的播放。例如通過單擊按鈕控制影片的播放、停止、返回或跳轉(zhuǎn)到指定位置等。具體操作步驟如下：8.3.11 設(shè)置導(dǎo)航欄圖像使用“設(shè)置導(dǎo)航欄圖像”動作可將某個圖像設(shè)為導(dǎo)航欄圖像，還可以更改導(dǎo)航欄圖像的顯示和動作。下面的例子是將按鈕的圖像設(shè)置為導(dǎo)航欄圖像，隨鼠標(biāo)不同狀態(tài)變化，并控制另外一個圖像變化。比如，按鈕與圖像的初始狀態(tài)如圖15.49所示。當(dāng)鼠標(biāo)滑過按鈕上時，按鈕發(fā)生變化，同時圖像也發(fā)生變化，如圖15.50所示。當(dāng)鼠標(biāo)按下時按鈕狀態(tài)如圖15.5

16、1所示。8.3.12 設(shè)置文本在網(wǎng)頁中使用設(shè)置文本動作，當(dāng)事件發(fā)生時，指定的文本將替代當(dāng)前的內(nèi)容。設(shè)置文本動作包括設(shè)置層文本、設(shè)置框架文本、設(shè)置文本域文本、設(shè)置狀態(tài)欄文本。(1) .設(shè)置層文本(2) .設(shè)置框架文本(3) .設(shè)置文本域文本(4) .設(shè)置狀態(tài)欄文本8.4 下載并安裝擴展行為插件可以用于拓展 Dreamweaver CS4的功能。Dreamweaver CS4中的插件主要有三種：命令(Command),對象(Object),行為(Behavior)。命令可以用于在網(wǎng)頁編輯的時候?qū)崿F(xiàn)一定的功能，例如設(shè)置表格的樣式；對象用于在網(wǎng)頁中插入元素，例如在網(wǎng)頁中插入圖片或者電影等；行為主要用于在網(wǎng)頁上實現(xiàn)動態(tài)的交互功能例如單擊圖片后，彈出窗口等。本節(jié)就來學(xué)習(xí)如何利用插件管理器安裝、管理插件，并舉例說明如何Dreamweaver CS4中應(yīng)用插件。8.