Dreamweaver 4 簡明教學(八、為網頁增添互動效果2)
作者:Eve Cole
更新時間:2009-05-30 18:35:33
八、為網頁增添互動效果
製作更複雜的互動效果
在Dreamweaver中,更複雜的效果是透過一個叫做Behaviors的功能實現的,Behaviors的從字面上理解是“行為”,我們又稱為事件的回應。透過網頁元素的變化,如滑鼠的移動、點擊等「事件」 (Events),觸發彈出窗口,關閉頁面等「回應」(Actions),就是事件的回應。而值得高興的是,「行為」的製作過程幾乎是傻瓜式的。
按Shift+F3,開啟行為面板,如下圖:
在網頁加入行為,需要以下三個步驟:
1.選取產生行為的元素,例如圖片、有連結的文字、圖層等。若需要在頁面一載入就開始出現效果,可以選擇狀態列上的標籤2、按按鈕選擇一種回應(不同的元素,對應的回應也有所不同),並在隨後的對話方塊中設定此回應的屬性;以下是可以供選擇的回應說明:
Call JavaScript:呼叫一段JavaScript;
Change Property:改變Html標籤的CSS樣式;
檢查 Browser:根據不同的瀏覽器,進入不同的頁面;
Check Plugin:檢查瀏覽器是否裝有必要的插件;
Control Shockwave or Flash:控制Shockwave或Flash動畫的播放;
Drag Layer:讓瀏覽者可拖曳圖層中的元素;
Go To URL:連結到指定的網址;
Jump Menu、Jump Menu Go:跳頁式的選單及Go按鈕;
Open Browser Window:開啟新瀏覽視窗;
Play Sound:播放聲音;
Popup Message:彈出警告視窗;
Preload Images:提前讀入圖片;
Set Nav Bar Image:設定導覽列的圖片;
Set Text:在特定的地方顯示文字;
Show Hide Layer:顯示或隱藏圖層;
Swap Image、Swap Image Restore:變換圖片和還原原來的圖片;
Timeline:控制時間軸的播放;
Validate Form:驗證表單的正確性;
Get More Behaviors:下載更多的行為事件。
3、 選擇事件(Events),決定在什麼情況下觸發回應。常見的的事件有:
onMouseOver:滑鼠移到目標上;
onMouseUp:按下滑鼠再放開左鍵時;
onMouseOut:滑鼠移開時;
onMouseDown:按下滑鼠時(不需要放開左鍵);
onClink:點擊時;
onDblClick:雙擊時;
onLoad:載入網頁時;
onUnload:離開頁面時;
onResize:當瀏覽者改變瀏覽視窗的大小;
onScroll:當瀏覽者拖曳捲軸的時。