網(wǎng)頁(yè)設(shè)計(jì)與制作教程制作動(dòng)感網(wǎng)頁(yè)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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