dreamweaver網(wǎng)頁制作第8章行為

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

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

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

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

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

6、頁中建立行為的元素且尚未釋放鼠標之前，就會觸發(fā)該事件。OnMousemove:在瀏覽器中，當用戶將光標在使用行為的元素上移動時，就會觸發(fā)該事件。OnMouseover:在瀏覽器中，當用戶將鼠標指向一個使用行為的元素時，就會觸發(fā)該事件。OnMouseout:在瀏覽器中，當用戶將光標從建立行為的元素移出后，就會觸發(fā)該事件。OnMouseup:在瀏覽器中，當用戶在使用行為的元素上按下鼠標并釋放后，就會觸發(fā)該事件。OnUnload:當用戶離開當前網(wǎng)頁(關(guān)閉瀏覽器或跳轉(zhuǎn)到其他網(wǎng)頁)時，就會觸發(fā)該事件。使用DreamweaverCS4內(nèi)置的行為DreamweaverCS4內(nèi)置了20多種行為，如彈出信息、打

7、開瀏覽器窗口、播放聲音、調(diào)用Javascript、改變屬性、檢查表單、檢查插件、檢查瀏覽器、交換圖像、控制Flash、設(shè)置導航欄圖像、設(shè)置文本、跳轉(zhuǎn)菜單、拖動AP元素、顯示/隱藏元素、轉(zhuǎn)到URL等。本節(jié)將具體介紹如何使用這些DreamweaverCS4內(nèi)置的行為，輕松實現(xiàn)各種效果使網(wǎng)頁更具交互性。8.3.1彈出信息使用彈出信息動作，在事件發(fā)生時彈出一個事先指定好的信息提示框，可以為瀏覽者提供信息，該提示框只有一個“確定”按鈕。下面以網(wǎng)頁中的按鈕為例，單擊按鈕，彈出信息提示框，單擊信息提示框的“確定”按鈕，信息提示框關(guān)閉，如圖15.7所示。具體操作步驟如下下面我們做一個標準的彈出對話框的例子。第

8、一步，先選中頁面中的物件，一段文字、一幅圖像、一個單元格都行。F8打開Behaviorsinspector窗口。第二步，在Behaviorsinspector窗口中點擊“+”按按，拉開菜單，在其中選擇“PopUpMessage”。第三步，在彈出的對話框中錄入文字，如“隨心所夢”，點擊確定關(guān)閉對話框。第四步，這時就會在Behaviorsinspector窗口內(nèi)出現(xiàn)OnClick|PopUpMessage啲字樣，點擊“OnClick”就可以選擇觸發(fā)“PopUpMessage”的動作了。8.3.2打開瀏覽器窗口使用打開瀏覽器窗口動作，可以在事件發(fā)生時打開一個新瀏覽器窗口。用戶可以設(shè)置新窗口的各種屬性

9、，如窗口名稱、大小等。例如當瀏覽者打開網(wǎng)站首頁時，同時彈出廣告窗口“ad.html”,效果如圖15.11所示。為網(wǎng)頁添加背景音樂在Dreamweaver中網(wǎng)頁文件，單擊窗口右下角的按鈕紅眄，選中整個網(wǎng)頁。單擊窗口右邊浮動面板中“設(shè)計”左邊的，打開“設(shè)計”面板，單擊“行為”，打開“行為”選項卡。然后單擊也，在彈出的菜單中選擇“播放聲音”，打開“播放聲音”對話框。在“播放聲音”對話框中，單擊瀏覽|，在“選擇文件,，對話框中，單擊搜尋,，文本框右邊旺，在下拉選項中選中聲音文件“music.midi”，單擊確認。完成設(shè)置。使用播放聲音動作可以設(shè)置網(wǎng)頁的背景音樂。例如，當用戶將網(wǎng)頁載入瀏覽器時播放音樂，

10、或當用戶在網(wǎng)頁中單擊某個對象時，開始播放聲音。具體操作步驟如下：(1)在DreamweaverCS4中打開網(wǎng)站首頁index.htm。(2)在“行為,面板中單擊“+,號按鈕，從下拉菜單中選擇“播放聲音,命令，彈出“播放聲音,對話框，在“播放聲音,文本框中輸入要播放的音頻文件名稱與路徑，單擊“確定,按鈕，如圖15.14所示。(3)在“行為,面板中，單擊事件名稱旁邊的下拉箭頭，在打開的下拉列表框中選擇需要的事件，這里選擇onLoad,如圖15.15所示(4)保存文件，在瀏覽器中預(yù)覽即可看到效果。當頁面加載時，就開始播放聲音調(diào)用JavaScript使用調(diào)用JavaScript動作,當事件發(fā)生時執(zhí)行事

11、先設(shè)計好的JavaScript函數(shù),下面以“后退,按鈕為例具體操作步驟如下：調(diào)用JavaScript是使選中的物件具有可執(zhí)行的能力。方法：1、選取物件，并打開Behaviorsinspector。2、在Behaviorsinspector窗口中點擊“+”號，打開下拉選單。在其中選擇“CallJavaScript”動作。3、在打開的窗口中錄入JavaScript語句或變量。我們可以錄入：window.close()4、點擊確定退出對話框。并確認其缺省事件值為“OnClick。5、F12預(yù)覽一下，當我們點擊按按鈕時，瀏覽器會自動關(guān)閉。改變屬性允許動態(tài)地改變對象屬性，比如圖像的大小，層、表格、單元格

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

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

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

15、設(shè)置文本動作包括設(shè)置層文本、設(shè)置框架文本、設(shè)置文本域文本、設(shè)置狀態(tài)欄文本。設(shè)置層文本設(shè)置框架文本設(shè)置文本域文本設(shè)置狀態(tài)欄文本8.4下載并安裝擴展行為插件可以用于拓展DreamweaverCS4的功能。DreamweaverCS4中的插件主要有三種：命令(Command)，對象(Object，行為(Behavior)命令可以用于在網(wǎng)頁編輯的時候?qū)崿F(xiàn)一定的功能，例如設(shè)置表格的樣式；對象用于在網(wǎng)頁中插入元素，例如在網(wǎng)頁中插入圖片或者電影等；行為主要用于在網(wǎng)頁上實現(xiàn)動態(tài)的交互功能例如單擊圖片后，彈出窗口等。本節(jié)就來學習如何利用插件管理器安裝、管理插件，并舉例說明如何DreamweaverCS4中應(yīng)用插件。8.4.1插件管理器插件管理器(E