Ｄｒｅａｍｗｅａｖｅｒ行為功能的分析與實現

摘要：該文介紹了Dreamweaver軟件的行為功能，分析了該功能實現過程中可能出現的各種問題，最后通過用戶與頁面的交互實例提供了完整的腳本代碼。

關鍵詞：Dreamweaver；行為；事件

中圖分類號：TP317文獻標識碼：A文章編號：1009-3044(2008)32-1210-02

Analysis and Implementation of Action Function of Dreamweaver

DING hui1，2

(1.Jiangsu University， Zhenjiang 212013， China; 2.Nanjing Forest Police College， Nanjing 210046， China)

Abstract: This paper introduces the action function of Dreamweaver. Analyzes the problems easy to occur during the implementation process and provides the complete script code of example of interaction between use and web page.

Key words: dreamweaver; action; events

當一個網頁做好之后，有時需要它能夠接受外界的信息，并且對這些信息做出相應的響應。這時就要為網頁添加相應的動態或交互內容，使網頁能對外界的信息進行反饋，然后自動執行它內部制定的動作。一般說來，動態網頁是通過JaveScript或基于JaveScript的DHTML代碼來實現的。包含JaveScript腳本的網頁，還能夠實現用戶與頁面的簡單交互。但是編寫腳本既復雜又專業需要專門學習，而Dreamweaver提供的“行為”的機制，雖然行為也是基于JaveScript來實現動態網頁和交互的，但卻不需書寫任何代碼。在可視化環境中按幾個按鈕，填幾個選項就可以實現豐富的動態頁面效果，實現人與頁面的簡單交互。

行為是事件與動作的彼此結合。例如，當鼠標移動到網頁的圖片上方時，圖片高亮顯示，此時的鼠標移動稱為時間，圖片的變化稱為動作，一般的行為都是要有事件來激活動作。動作時由預先寫好的能夠執行某種任務的JavaScript代碼組成，而事件是由瀏覽器前用戶的操作相關，如單擊鼠標、鼠標上滾等。

1 了解行為

行為是通過響應某一具體事件而采取的一個或多個動作，也就是說，行為是要由事件和動作來組成的。當把一個事件和一個動作組合成一個行為后，再把它賦給一個頁面元素，當發生指定事件時，就會觸發執行動作，運行相應的JavaScript程序。“行為”可以創建網頁動態效果，實現用戶與頁面的交互。行為是由事件和動作組成的，例如：將鼠標移到一幅圖像上產生了一個事件，如果圖像發生變化（前面介紹過的輪替圖像），就導致發生了一個動作。與行為相關的有三個重要的部分——對象、事件和動作。

1.1 對象(Object)

對象是產生行為的主體，很多網頁元素都可以成為對象，如圖片、文字、多媒體文件等，甚至是整個頁面。

1.2 事件(Event)

事件是觸發動態效果的原因，它可以被附加到各種頁面元素上，也可以被附加到HTML標記中。一個事件總是針對頁面元素或標記而言的，例如：將鼠標移到圖片上、把鼠標放在圖片之外、單擊鼠標，是與鼠標有關的三個最常見的事件(onMouseOver、onMouseOut、onClick)。不同的瀏覽器支持的事件種類和多少是不一樣的，通常高版本的瀏覽器支持更多的事件。

1.3 動作(Action)

行為通過動作來完成動態效果，如：圖片翻轉、打開瀏覽器、播放聲音都是動作。動作通常是一段JaveScript代碼，在Dreamweaver中使用Dreamweaver內置的行為往頁面中添加JaveScript代碼，就不必自己編寫。

1.4 事件與動作

將事件和動作組合起來就構成了行為，例如，將onClick行為事件與一段JaveScript代碼相關聯，單擊鼠標時就可以執行相應的JaveScript代碼（動作）。一個事件可以同多個動作相關聯(1:n)，即發生事件時可以執行多個動作。為了實現需要的效果，我們還可以指定和修改動作發生的順序。

2 使用行為

如果想要使網頁更“聰明”的話，就要使用行為來感知外界的信息并做出相應的響應。這些外界信息包括鼠標的活動，如頁面的調用與關閉、鼠標移動到頁面元素上點擊元素或移開元素，以及焦點的改變和鍵盤的情況等各種變化，對不同的頁面內容有不同的事件，另外能夠響應的事件也和瀏覽器有關，一般說來，3.0的瀏覽器能夠響應的事件要少于4.0瀏覽器，而IE4能夠響應的事件要多于Netscape4.0瀏覽器，我們可以根據不同的瀏覽器進行不同的設置。

2.1 改變對象屬性

使用“改變屬性”動作更改對象某個屬性（例如層的背景顏色或表單的動作）的值。您可以更改的屬性是由瀏覽器決定的。例如，您可以動態設置層的背景顏色。只有在您比較熟悉HTML和JavaScript 的情況下才使用此動作。若要使用“改變屬性”動作，請執行以下操作：選擇一個對象并打開“行為”面板，從“動作”彈出菜單中選擇“更改屬性”。從“對象類型”彈出菜單中選擇您要更改其屬性的對象的類型。 “命名對象”彈出菜單馬上列出所有所選類型的命名對象。從“命名對象”彈出菜單中選擇一個對象。從“屬性”彈出菜單中選擇一個屬性，或在文本框中輸入該屬性的名稱。例如：在網頁中插入一個圖片，并且設置圖片的名字為image1，最終要求：瀏覽者用鼠標單擊圖片時，圖片變為另一幅。

2.2 顯示/隱藏層

“顯示－隱藏層”動作顯示、隱藏或恢復一個或多個層的默認可見性。此動作用于在用戶與頁進行交互時顯示信息。“顯示→隱藏層”還可用于創建預先載入層，即一個最初擋住頁的內容的較大的層，在所有頁組件都完成載入后該層即消失（可做一個廣告效果，記得在新浪見過這樣的廣告）。“顯示→隱藏層”動作，具體操作：

1) 選擇“插入”→“布局對象”→“層”然后在“文檔”窗口中繪制一個層。

2) 重復此步驟可以創建其它的層。

3) 在“文檔”窗口中單擊取消對層的選擇，然后打開“行為”面板。

4) 單擊加號(+)按鈕并從“動作”彈出菜單中選擇“顯示→隱藏層”。

在“命名的層”列表中選擇要更改其可見性的層。單擊“顯示”以顯示該層、單擊“隱藏”以隱藏該層、或單擊“默認”以恢復層的默認可見性。

2.3 彈出消息

“彈出消息”動作顯示一個帶有您指定的消息的 JavaScript 提示。因為 JavaScript 提示只有一個按鈕（“確定”），所以使用此動作可以提供信息，而不能為用戶提供選擇。要注意的是：我們無法控制 JavaScript 提示的外觀，它取決于訪問者的瀏覽器。如果我們希望對消息的外觀進行更多的控制，可考慮使用“打開瀏覽器窗口”行為。具體制作過程：插入一個按鈕，選擇按鈕，打開“行為”面板，從動作中選擇“彈出消息”。并且輸入我們要在消息窗口中顯示的內容。在“消息”文本框中輸入我們要告訴瀏覽者的信息。別忘了看看行為面板中設置的動作是onclick，單擊“確定”，保存文檔。

2.4 設置文本

這里，本人介紹如何設置層文本、文本域文本、狀態欄文本。

2.4.1 設置層文本

“設置層文本”動作用您指定的內容替換頁上現有層的內容和格式設置。該內容可以包括任何有效的 HTML 源代碼。通過在“設置層文本”對話框的“新建 HTML”文本框中包括 HTML 標簽，可對內容進行格式設置。具體實現的步驟：選擇“插入”→“布局對象”→“層”。在層內輸入你需要的文字，打開行為面板，從“動作”中選擇“設置文本”→“設置層文本”。

2.4.2 設置文本域文本

“設置文本域文本”動作用您指定的內容替換表單文本域的內容。具體制作的過程：選擇“插入”→“表單”，然后再選擇“插入”→“表單”→“文本域”。注意文本域要包含在表單當中。 在文本域中鍵入內容。選擇文本域并打開“行為”面板，從“動作”中選擇“設置文本”→“設置文本域文本”。

2.4.3 設置狀態欄文本

“設置狀態欄文本”動作在瀏覽器窗口底部左側的狀態欄中顯示消息。我們經常在一些網站看到這個效果啊，制作簡單比較實用。具體制作的過程：選擇一個對象或者什么也不選擇也可以，打開“行為”面板，從動作中選擇“設置文本”→“設置狀態欄文本”。

2.5 播放聲音

使用“播放聲音”動作來播放聲音。例如，可以要在每次鼠標指針滑過某個鏈接時播放一段聲音效果，或在頁載入時播放音樂剪輯，或者點擊某個按鈕播放聲音等等。要注意：瀏覽器可能需要用某種附加的音頻支持（例如音頻插件）來播放聲音。因此，具有不同插件的不同瀏覽器所播放聲音的效果通常會有所不同。很難準確地預測出站點的訪問者對網頁制作者提供的聲音感受如何。

3 行為的具體實例

我們可以用這些方法編寫出十分精彩的網頁，比如：當我們開啟一個網頁的時候先奏一段音樂（這里用到對onLoad事件的響應），當瀏覽者將鼠標移動到網頁的各個項目上時，這一項目閃爍并響起音樂且狀態條顯示項目的說明（這里用到對onMouseOver事件的響應，響應為圖片來源控制、聲音控制和狀態條信息的設置），當瀏覽者隨超鏈接進入新的頁面并點擊頁面的MOV格式的電影時檢查瀏覽器是否有quicktime插件，如果有就播放這段電影（對onClick事件響應，響應為檢查插件），我們可以將一幅圖片作為一超鏈接，當瀏覽者點擊或按下任意鍵時顯示目標頁（用到對onKeyPress 和onMouseOver事件的響應），如果是商業或教育網頁我們還可以對onHelp 和onError等事件產生響應。我們還可以對整個頁面進行控制（用到對onReadyStateChange事件的響應），如果瀏覽者結束瀏覽時說一些感謝的話或傳達一些信息或打開相關網頁就要用到對onClose事件的響應等等，還有許多更精彩的事件和不同尋常的響應事件留給廣大讀者去發現。

4 結論

行為，就是在網頁中進行一系列動作，通過這些動作實現用戶與頁面的交互。利用Dreamweaver的行為，不需要書寫一行代碼，就可以實現豐富的動態頁面效果，達到用戶與頁面的交互。在實際應用中，Dreamweaver 還提供了更多的行為，需要大家去進一步的了解；還有很多技巧，只有不斷的實踐和探索，才能很好的把握，取得更好的效果。將網頁制作工作做得更上一個臺階。

參考文獻：

[1] 李月，李曉春.Dreamweaver網頁制作標準教程[M].北京：清華大學出版社，2005:152-175.

[2] 傅連仲，楊小勁，張明學.網頁設計與制作教程[M].北京：清華大學出版社，2005.

[3] 齊建玲.網頁設計與制作[M].北京：清華大學出版社，2006.

[4] 袁鑫.Dreamweaver 8 的行為應用[J].科技咨詢導報，2007(09):13.