Dreamweaver從出道以來,其簡單易用而又功能強大的「行為」(Behavior)一直是大家所關注的熱點之一。在Dreamweaver MX(DW MX)中,對此功能又有了擴充與改進。
在DW MX中,行為指的是為了回應某一事件(Event)而採取的一個動作(Action)。其中Event 指的是瀏覽器的事件,例如視窗刷新、滑鼠移動等。而Action 指的是後台回應事件的JavaScript 程式碼,可以完成對應的動作,例如播放聲音、翻轉圖片等。
用DW MX製作導覽下拉選單是網頁中常用的特效之一。 (如圖1)主要應用了DW MX中的「Show-Hide Layers」行為。
圖1
首先製作好導覽條(圖1中的「產品中心」那一欄),接著新增一個層,作為下拉式選單將要顯示的位置,並填入下拉式選單的對應欄位。
接下來,開啟「Behaviors」面板,同時選取「產品中心」連結(注意,這個時候不能夠選取剛剛建造的圖層,否則無法套用「Show-Hide Layers」行為),點選「+」號,選擇“Show-Hide Layers”,就可以看到我們剛剛建造的層在選擇項目中,可以設定為隱藏或顯示(如圖2)。
圖2
行為的妙用主要體現在:如果我們要實現下拉式選單,關鍵就是讓滑鼠移到「產品中心」連結上時,使層顯示;而滑鼠離開連結時,使層隱藏。根據這個思想,我們先為這個層設立兩個Action,一個選擇Hide,一個選擇Show。然後,調整Event,將Hide Layer的Event設為OnMouseOut,即為滑鼠離開連結;而將Show Layer的Event設為OnMouseOver,即為滑鼠選取連結。按下「F12」預覽,就可看到我們期盼的效果。
這樣,平常我們覺得很神秘的導覽下拉選單就可以輕易在行為中實現。也可以在導覽連結上繼續套用「Swap Image」行為,實現滑鼠點選連結時出現圖片翻轉效果。
行為不是一個個孤立的特效,可以由多個行為組合疊加實現複雜的功能,除了DW MX預設設定好的行為外,我們還可以從www.mcromedia.com上下載更多更酷的第三方行為,我們只需將它們直接複製到DreamweaverMXConfigurationBehaviorsActions目錄下即可,從而使DW MX的這一閃光點更加眩目。