Dreamweaver(以下簡稱DW)提供了一種稱為「Behavior」(行為)的機制,幫助你建構頁面中的互動行為。行為,就是在網頁中進行一系列動作,透過這些動作實現使用者與頁面的互動。利用DW的行為,你不需要書寫一行程式碼,就可以實現豐富的動態頁面效果,達到使用者與頁面的互動。
一個行為是由事件和動作組成的。事件是動作被觸發的結果,而動作是用於完成特殊任務的預先編好的JavaScript程式碼,諸如打開一個瀏覽器窗口,播放聲音等。
當對一個頁面元素使用行為時,你可以指定動作和觸發的事件。在DW中已經提供了一些確定的動作,你可以把它們應用在頁面元素中。
一、內建的一些基本行為
1.呼叫JavaScript(Call JavaScript)
這個行為允許你設定當某些事件被觸發時,呼叫對應的JavaScript腳本,以實現對應的動作。在這個行為設定時,你可以直接輸入JavaScript腳本或是函數。
2.改變屬性(Change Property)
這個行為允許你動態地改變物件屬性,例如圖像的大小、圖層的背景色等等。需要注意的是,這個行為的設定取決於瀏覽器的支援。
3.檢查瀏覽器(Check Brower)
不同瀏覽器的支援能力有一定的差異,利用這個行為,我們可以檢查瀏覽器的版本,以跳到不同的頁面。
4.檢查插件(Check Plugin)
有時候我們製作的頁面需要某些插件的支持,例如使用Flash製作的網頁,所以有必要對使用者瀏覽器的插件進行檢查,看看它是否安裝了指定的插件。這個行為就可以實現這一點。
5.控制Shockwave或Flash(Control Shockwave or Flash)
Shockwave和Flash是目前網頁製作經常插入的對象,而這個行為就是用來控制這些對象的。用它可以控制動畫的播放、停止、返回,還可以控制直接跳到第幾格。
6.行動分層(Drag Layer)
「行動分層」行為可以實現在頁面上分層的移動,甚至是分層內容的移動。
7.跳到URL(Go To URL)
你可以製定目前瀏覽器視窗或指定的框架視窗載入指定的頁面。
8.跳轉表單(Jump Menu)
「跳轉表單」行為主要用於編輯跳轉表單。
9.彈出訊息對話框(Popup Message)
如果你要在頁面上顯示一個訊息對話框,或是給使用者一個提示訊息,就可以使用這個行為了。
二、簡單實例
下面我們就以動態圖片為例,介紹一下行為的使用。首先你要製作兩張大小相同的圖片1和圖片2。下面是具體步驟。
1.開啟DW建立一個頁面,在這個頁面中插入圖1。
2.在DW編輯視窗選擇好圖1。
3.在選單「windows」中選擇「Behaviors」或是按F8來開啟Behavior面板。注意,在Events For的彈出式選單中,“3.0 and Later Browsers”應該被選擇。
4.按下「+」號按鈕新增一個新的行為-「Swap Image」(變換圖片),這時會跳出「Swap Image」的對話框。在圖片列表中,你將看見在頁面中的所有圖片的列表,選中你要變換的圖片1,這是原始圖片,當滑鼠指標移到它上面時,它將會被一張高亮顯示的圖片2所替代。
5.點選Browse按鈕,選擇好你要替換的,透過「onMouseOver」事件,選擇的圖片2取代了原始圖片1。
6.選擇預設設定進行圖片的預先呼叫和儲存。
「Preload Images」選項表示在整個頁面下載時,把進行變換的圖片放進瀏覽器的快取裡,當瀏覽者第一次把滑鼠指標移到Our Story圖片上時,他幾乎感覺不到高亮圖片的出現有什麼延遲。 「Restore Images onMouseOut」選項表示當「onMouseOut」(滑鼠移開)事件發生時,自動地將圖片恢復原狀。
7.設定完成後點選「OK」按鈕關閉「Swap Image「對話框,套用剛才的設定。
這時Behavior面板包含了你剛才為圖片所設定的事件和動作。 「OnMouseOver」事件旁邊有一個「Swap Image」動作的標記,在它上面還有「onMouseOut」事件以及對應的「Swap Image Restore」的動作(該behavior是當你在Swap Image對話框中接受缺省的選項而被定義的)。
8.關閉Behavior面板。按F12預覽頁面。當你把滑鼠指標分別移到圖片1上,你會發現已經被圖片2取代。
以上的例子只是DW的Behavior的一個簡單應用實例。用途還有很多,這裡就不作一一說明了。此外,DW還允許用戶使用擴充功能的行為,在Macromedia公司的主頁可以下載