網(wǎng)頁設(shè)計與制作教程制作動感網(wǎng)頁

網(wǎng)頁設(shè)計與制作實用教程網(wǎng)頁設(shè)計與制作實用教程第1章網(wǎng)頁設(shè)計概述第2章HTML語言第3章添加網(wǎng)頁元素第4章網(wǎng)頁布局第5章制作動感網(wǎng)頁第5章提高網(wǎng)頁制作效率第7章站點的維護(hù)與上傳第8章網(wǎng)站設(shè)計制作綜合實例第5章制作動感網(wǎng)頁5.1行為概述5.2Dreamweaver8的內(nèi)置行為5.3時間軸的基本操作5.4行為與表單綜合應(yīng)用5.1行為概述5.1.1行為的概念和應(yīng)用順序1、行為的概念所謂行為（Behavior），就是在網(wǎng)頁中進(jìn)行的一系列動作，通過這些動作，可以實現(xiàn)用戶同網(wǎng)頁的交互，也可以通過動作使某個任務(wù)被執(zhí)行。5.1行為概述2、行為的應(yīng)用順序可以將行為附加到整個文檔（即附加到body標(biāo)簽），還可以附加到鏈接、圖像、表單元素或多種其它HTML元素中的任何一種。5.1行為概述5.1.1 在Dreamweaver中提供的動作類型在Dreamweaver中提供的動作可以分成三種類型：內(nèi)置動作、自定義動作和第三方行為動作。

Dreamweaver內(nèi)置的行為動作指的是Dreamweaver系統(tǒng)自帶的行為動作，使用這些動作可以在“行為”面板中直接單擊加號(+)按鈕，直接在“動作”彈出菜單中選擇。5.1行為概述Dreamweaver內(nèi)置的行為畢竟有限。Dreamweaver最有用的功能之一就是它的擴展性，即它為精通JavaScript的用戶提供了編寫JavaScript代碼的機會，使他們可以通過代碼擴展Dreamweaver的功能。要獲取第三方行為動作，需從MacromediaExchangeWeb站點下載并安裝新行為。5.1行為概述5.1.1 認(rèn)識事件

OnAbort（IE4、NS3、NS4）事件：當(dāng)用戶停止瀏覽器對圖像的載入（如單擊“停止”按鈕）時被觸發(fā)。

onAfterUpdate（IE4）事件：當(dāng)頁面上一個捆綁數(shù)據(jù)的元素完成對數(shù)據(jù)源的更新時被觸發(fā)。

onBeforeUpdate（IE4）事件：當(dāng)頁面上一個捆綁數(shù)據(jù)的元素中的數(shù)據(jù)被改變，并即將失去焦點時被觸發(fā)。該事件發(fā)生在數(shù)據(jù)源被更新之前。5.1行為概述onBlur（IE3、IE4、NS3、NS4）事件：該事件同onFocus事件正好相反。當(dāng)指定的元素從用戶的交互行為失去焦點時被觸發(fā)。

onBounce（IE4）事件：當(dāng)選取框元素中的內(nèi)容延伸到選取框元素邊界之外時被觸發(fā)。

onChange（IE3、IE4、NS3、NS4）事件：當(dāng)用戶改變頁面中的值時被觸發(fā)。5.1行為概述onClick（IE3、IE4、NS3、NS4）事件：當(dāng)用戶單擊特定的頁面元素（如鏈接、按鈕或圖像映像）時被觸發(fā)。

onDblClick（IE4、NS4）事件：當(dāng)用戶雙擊特定的頁面元素時被觸發(fā)。

onError（IE4、NS3、NS4）事件：若瀏覽器在載入頁面或圖像時發(fā)生錯誤，就會被觸發(fā)。5.1行為概述onFinish（IE4）事件：當(dāng)選取框元素中的內(nèi)容完成一個循環(huán)時就會被觸發(fā)。

onFocus（IE3、IE4、NS3、NS4）事件：當(dāng)指定元素通過用戶的交互行為獲得焦點時被觸發(fā)。

onHelp（IE4）事件：當(dāng)用戶單擊瀏覽器的幫助按鈕（通常是F1）或從瀏覽器的“幫助”菜單中選擇幫助菜單項時被觸發(fā)。5.1行為概述onKeyDown（IE4、NS4）事件：當(dāng)用戶按下了一個鍵，在尚未釋放之前，會被觸發(fā)。

onKeyPress（IE4、NS4）事件：當(dāng)用戶按下鍵然后又釋放鍵，就會被觸發(fā)。該事件很像onKeyDown和onKeyUp事件的組合。

onKeyUp（IE4、NS4）事件：當(dāng)用戶釋放被按下的鍵時被觸發(fā)。5.1行為概述onLoad（IE3、IE4、NS3、NS4）事件：當(dāng)圖像或頁面被完全載入之后被觸發(fā)。

onMouseDown（IE4、NS4）事件：當(dāng)用戶按下鼠標(biāo)鍵，在尚未釋放之前，會被觸發(fā)。

onMouseMove（IE3、IE4）事件：當(dāng)用戶將鼠標(biāo)指針在一個頁面元素上移動時，就會觸發(fā)這個頁面元素的onMouseMove事件。5.1行為概述onMouseOut（IE4、NS3、NS4）事件：當(dāng)鼠標(biāo)指針移出了指定元素（例如鏈接）的范圍時，就會觸發(fā)這個頁面元素的onMouseOut事件。

onMouseOver（IE3、IE4、NS3、NS4）事件：當(dāng)鼠標(biāo)第一次移入指定元素（例如鏈接）的范圍時被觸發(fā)。

onMouseUp（IE4、NS4）事件：當(dāng)按下的鼠標(biāo)鍵被釋放時被觸發(fā)。5.1行為概述onMove（NS4）事件：當(dāng)瀏覽器窗口或框架移動（如拖動瀏覽器窗口，在桌面上移動）時被觸發(fā)。

onReadyStateChange（IE4）事件：當(dāng)指定元素的狀態(tài)被改變時被觸發(fā)。這些可能的元素狀態(tài)包括未初始化（uninitialized）、載入（loading）和完成（complete）等。

onReset（IE3、IE4、NS3、NS4）事件：當(dāng)表單中的數(shù)據(jù)被復(fù)位為默認(rèn)值時被觸發(fā)。

onResize（IE4、NS4）事件：當(dāng)用戶重設(shè)瀏覽器窗口或框架的大小時被觸發(fā)。5.1行為概述onRowEnter（IE4）事件：在當(dāng)前捆綁數(shù)據(jù)源的記錄指針被改變后被觸發(fā)。

onRowExit（IE4）事件：在當(dāng)前捆綁數(shù)據(jù)源的記錄指針將要改變時被觸發(fā)。

onScroll（IE4）事件：當(dāng)用戶利用滾動條或箭頭鍵上下滾動文檔內(nèi)容時被觸發(fā)。

onSelect（IE3、IE4、NS3、NS4）事件：當(dāng)用戶從一個文本框中選中文本時被觸發(fā)。5.1行為概述onStart（IE4）事件：當(dāng)選取框元素中的內(nèi)容開始循環(huán)時被觸發(fā)。

onSubmit（IE3、IE4、NS3、NS4）事件：當(dāng)用戶遞交一份表單時被觸發(fā)。

onUnload（IE3、IE4、NS3、NS4）事件：當(dāng)用戶離開頁面時被觸發(fā)。5.2Dreamweaver8的內(nèi)置行為5.2.1使用行為控制Flash動畫使用“控制Shockwave或Flash”動作可以使網(wǎng)頁中插入的MacromediaShockwave或MacromediaFlashSWF文件能夠根據(jù)設(shè)定的動作進(jìn)行有效的控制。這些影片在插入網(wǎng)頁是必須設(shè)置一個惟一的名稱，才能進(jìn)行有效的控制。使用該動作可以控制影片的播放、停止、倒帶或轉(zhuǎn)到Shockwave或Flash影片中的幀。5.2Dreamweaver8的內(nèi)置行為5.2.2鏈接行為利用“轉(zhuǎn)到URL”動作，可以設(shè)置在當(dāng)前瀏覽器窗口或指定的框架窗口中載入指定的頁面。該動作在同時改變兩個或多個框架內(nèi)容時特別有用。5.2Dreamweaver8的內(nèi)置行為5.2.3導(dǎo)航條導(dǎo)航條由圖像或圖像組組成，這些圖像隨用戶的操作而變化顯示內(nèi)容。導(dǎo)航條通常為在站點上的頁面和文件之間移動提供一條簡捷的途徑。導(dǎo)航條項目有四種狀態(tài)：一般狀態(tài)、鼠標(biāo)經(jīng)過狀態(tài)、按下狀態(tài)和按下時鼠標(biāo)經(jīng)過狀態(tài)。使用“插入導(dǎo)航條”命令可以在網(wǎng)頁中插入導(dǎo)航條。5.2Dreamweaver8的內(nèi)置行為5.2.4調(diào)用插入到網(wǎng)頁中的JavaScript

調(diào)用JavaScript動作允許設(shè)置當(dāng)某些事件被觸發(fā)時，調(diào)用相應(yīng)的JavaScript代碼，以實現(xiàn)相應(yīng)的動作。5.2Dreamweaver8的內(nèi)置行為5.2.5 變換圖像利用“交換圖像”、“恢復(fù)圖像交換”與“預(yù)先載入圖像”動作行為可以產(chǎn)生變換圖像的效果?！敖粨Q圖像”動作通過更改img標(biāo)簽的src屬性將一個圖像和另一個圖像進(jìn)行交換。使用這個動作可以創(chuàng)建鼠標(biāo)經(jīng)過圖像等圖像效果，也可以一次交換多個圖像。5.2Dreamweaver8的內(nèi)置行為5.2.5 在網(wǎng)頁上顯示彈出信息在網(wǎng)頁上彈出信息可以有兩種方式，一種是彈出提示信息框；一種是彈出新窗口。使用“彈出消息”行為可以顯示一個帶有指定的消息文本的提示框，該提示框只有一個“確定”按鈕，所以使用此動作可以給用戶提供信息，而不能為用戶提供選擇。5.2Dreamweaver8的內(nèi)置行為5.2.7顯示－隱藏層利用“顯示－隱藏層”動作，可以在頁面上顯示分層、隱藏分層，或恢復(fù)默認(rèn)的分層可見性狀態(tài)。該動作在創(chuàng)建動感網(wǎng)頁效果時非常有用。5.3時間軸的基本操作5.2.8 時間軸的基本概念時間軸，顧名思義，它是一條貫串時間的軸，用于表示網(wǎng)頁存活時間中發(fā)生的各種狀態(tài)。通過往這條時間軸上不同的時間部位放置不同的內(nèi)容，就可以實現(xiàn)網(wǎng)頁元素的動態(tài)效果。5.3時間軸的基本操作

利用時間軸，可以創(chuàng)建各種類型的動態(tài)效果。時間軸構(gòu)建的動態(tài)效果，主要是通過往文檔中添加JavaScript代碼實現(xiàn)的。5.3時間軸的基本操作5.3.1 創(chuàng)建時間軸動畫時間軸主要是通過時間軸面板構(gòu)建的。5.3時間軸的基本操作1、創(chuàng)建動畫的基本方法2、錄制分層路徑5.3時間軸的基本操作5.3.2修改時間軸及其對象的屬性1、控制時間軸設(shè)計好動畫之后，可以在時間軸面板中對時間軸進(jìn)行各種控制，從而實現(xiàn)對動畫的編輯和修改。⑴選中動畫條⑵改變整個動畫時間⑶改變動畫局部的播放速度5.3時間軸的基本操作⑷改變動畫起始時間⑸改變動畫完整路徑⑹添加和刪除幀、關(guān)鍵幀和對象（動畫條）⑺使用多條時間軸5.3時間軸的基本操作2、利用時間軸改變圖像和分層屬性利用時間軸，不僅可以改變分層的位置，還可以改變分層的某些屬性，例如大小和可見性等。利用時間軸，還可以改變圖像的源文件，實現(xiàn)某些特殊效果。5