DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> Dreamweaver的行為體驗
Dreamweaver的行為體驗
編輯:Dreamweaver相關     

  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公司的主頁可以下載

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved