DreamweaverCS4中文版基礎(chǔ)培訓(xùn)教程主講：XXX老師從零開(kāi)始人民郵電出版社第9講使用行為和媒體教學(xué)目標(biāo)9.1使用行為9.1.1功能講解9.1.2范例解析──使用行為制作“翔翔寫真”網(wǎng)頁(yè)9.1.3課堂實(shí)訓(xùn)——使用行為完善“十大名山”網(wǎng)頁(yè)功能9.2使用媒體9.2.1功能講解9.2.2范例解析——插入WMV視頻9.2.3課堂實(shí)訓(xùn)——插入swf動(dòng)畫9.3綜合案例──完善“西湖十景”網(wǎng)頁(yè)教學(xué)目標(biāo)了解行為的基本概念。掌握常用事件和動(dòng)作。掌握插入常用媒體的方法。返回目錄9.1使用行為9.1.1功能講解9.1.2范例解析──使用行為制作“翔翔寫真”網(wǎng)頁(yè)9.1.3課堂實(shí)訓(xùn)——使用行為完善“十大名山”網(wǎng)頁(yè)功能返回目錄9.1.1功能講解使用行為可以允許瀏覽者與網(wǎng)頁(yè)進(jìn)行簡(jiǎn)單的交互，從而以多種方式修改頁(yè)面或引發(fā)某些任務(wù)的執(zhí)行?；靖拍睢Ｌ砑有袨?。常用事件。常用動(dòng)作。返回目錄一、基本概念認(rèn)識(shí)行為需要掌握以下幾個(gè)基本概念。行為：事件和動(dòng)作的組合，因此行為的基本元素有兩個(gè)：事件和動(dòng)作。事件：觸發(fā)程序運(yùn)行的原因，事件可附加到網(wǎng)頁(yè)中的對(duì)象上，例如，當(dāng)訪問(wèn)者將鼠標(biāo)光標(biāo)移到一個(gè)鏈接上時(shí)，將會(huì)產(chǎn)生一個(gè)“onMouseOver”（鼠標(biāo)經(jīng)過(guò)）事件。動(dòng)作：事件觸發(fā)后要實(shí)現(xiàn)的效果，如打開(kāi)瀏覽器窗口等。對(duì)象：產(chǎn)生行為的主體，如文本、圖像等，不同的事件為不同的對(duì)象所定義，例如，“onMouseOver”（鼠標(biāo)經(jīng)過(guò)）和“onClick”（單擊）是與鏈接相關(guān)的事件，“onLoad”（載入）是與圖像和文檔相關(guān)的事件。返回目錄二、添加行為在添加行為時(shí)，首先應(yīng)選中對(duì)象，然后選擇【窗口】/【行為】命令打開(kāi)【行為】面板，在【行為】面板中單擊按鈕，在彈出的行為菜單中選擇相應(yīng)的動(dòng)作，最后在【行為】面板中單擊事件名右邊的按鈕，在彈出的下拉菜單中選擇相應(yīng)的觸發(fā)動(dòng)作的事件，如圖所示。返回目錄三、常用事件事件決定了動(dòng)作的執(zhí)行時(shí)間，常用事件如表所示。返回目錄返回目錄四、常用動(dòng)作DreamweaverCS4內(nèi)置了許多行為動(dòng)作，這些行為動(dòng)作的功能如表所示。返回目錄返回目錄（1）彈出出信息【彈出信息息】行為將將彈出一個(gè)個(gè)提示對(duì)話話框。在文文檔中選擇擇要觸發(fā)行行為的對(duì)象象，如圖像像，然后從從行為菜單單中選擇【【彈出信息息】命令，，在彈出的的【彈出信信息】對(duì)話話框中進(jìn)行行參數(shù)設(shè)置置即可，如如圖所示。。返回目錄在【行為】】面板中將將事件設(shè)置置為【onMouseDown】，即即鼠標(biāo)按下下時(shí)觸發(fā)該該事件。在在瀏覽網(wǎng)頁(yè)頁(yè)時(shí)，用戶戶可以在圖圖像上單擊擊鼠標(biāo)右鍵鍵，在彈出出的快捷菜菜單中選擇擇【圖片另另存為】命命令，將網(wǎng)網(wǎng)頁(yè)中的圖圖像下載到到自己的計(jì)計(jì)算機(jī)中。。而當(dāng)添加加了這個(gè)行行為動(dòng)作以以后，當(dāng)訪訪問(wèn)者單擊擊鼠標(biāo)右鍵鍵時(shí)，將顯顯示提示框框而不是快快捷菜單，，這樣就限限制了用戶戶使用鼠標(biāo)標(biāo)右鍵來(lái)下下載圖像，，如圖所示示。返回目錄（2）打開(kāi)開(kāi)瀏覽器窗窗口使用【打開(kāi)開(kāi)瀏覽器窗窗口】行為為將打開(kāi)一一個(gè)新瀏覽覽器窗口來(lái)來(lái)顯示指定定的網(wǎng)頁(yè)文文檔。在文檔中選選擇觸發(fā)行行為的對(duì)象象，如圖像像，然后從從行為菜單單中選擇【【打開(kāi)瀏覽覽器窗口】】命令即可可打開(kāi)【打打開(kāi)瀏覽器器窗口】對(duì)對(duì)話框，根根據(jù)需要進(jìn)進(jìn)行設(shè)置即即可。在【【行為】面面板中將事事件設(shè)置為為“onClick”。當(dāng)預(yù)預(yù)覽網(wǎng)頁(yè)時(shí)時(shí)，單擊小小圖將打開(kāi)開(kāi)一個(gè)大圖圖像的新窗窗口，如圖圖所示。返回目錄（3）調(diào)用用JavaScript【調(diào)用JavaScript】行為能能夠讓設(shè)計(jì)計(jì)者使用【【行為】面面板指定一一個(gè)自定義義功能，或或者當(dāng)一個(gè)個(gè)事件發(fā)生生時(shí)執(zhí)行一一段JavaScript代代碼。在文文檔中選擇擇要觸發(fā)行行為的對(duì)象象，如帶有有空鏈接的的“關(guān)閉窗窗口”文本本，然后從從行為菜單單中選擇【【調(diào)用JavaScript】命令，，彈出【調(diào)調(diào)用JavaScript】】對(duì)話框，，在文本框框中輸入要要執(zhí)行的JavaScript代碼或或函數(shù)名，，如“window.close()”，用來(lái)來(lái)關(guān)閉窗口口。在【行行為】面板板中確認(rèn)觸觸發(fā)事件為為【onClick】。預(yù)覽覽網(wǎng)頁(yè)，當(dāng)當(dāng)單擊“關(guān)關(guān)閉窗口””超級(jí)鏈接接文本時(shí)，，就會(huì)彈出出提示對(duì)話話框，詢問(wèn)問(wèn)用戶是否否關(guān)閉窗口口，如圖所所示。返回目錄（4）改變變屬性【改變屬性性】行為用用來(lái)改變網(wǎng)網(wǎng)頁(yè)元素的的屬性值，，如文本的的大小、字字體，層的的可見(jiàn)性，，背景色，，圖片的來(lái)來(lái)源以及表表單的執(zhí)行行等。例如，在文文檔中插入入一個(gè)層，，并在其中中插入一幅幅名稱為““pic””的圖像，，然后選中中層并從【【行為】菜菜單中選擇擇【改變屬屬性】命令令，彈出【【改變屬性性】對(duì)話框框，根據(jù)需需要進(jìn)行參參數(shù)設(shè)置，，在【行為為】面板中中確認(rèn)觸發(fā)發(fā)事件為【【onMouseOver】】，運(yùn)用相相同的方法法再添加一一個(gè)【onMouseOut】事件及及相應(yīng)的動(dòng)動(dòng)作，如圖圖所示。返回目錄（5）交換換圖像【交換圖像像】行為可可以將一個(gè)個(gè)圖像替換換為另一個(gè)個(gè)圖像，這這是通過(guò)改改變圖像的的“src”屬性來(lái)來(lái)實(shí)現(xiàn)的。。雖然也可可以通過(guò)為為圖像添加加【改變屬屬性】行為為來(lái)改變圖圖像的“src”屬屬性，不過(guò)過(guò)【交換圖圖像】行為為更加復(fù)雜雜一些，可可以使用這這個(gè)行為來(lái)來(lái)創(chuàng)建翻轉(zhuǎn)轉(zhuǎn)的按鈕及及其他圖像像效果（包包括同時(shí)替替換多個(gè)圖圖像）。例如，在文文檔中插入入一幅圖像像并命名，，然后在【【行為】面面板中單擊擊按鈕，從從彈出的【【行為】菜菜單中選擇擇【交換圖圖像】命令令，彈出【【交換圖像像】對(duì)話框框。在【圖圖像】列表表框中選擇擇要改變的的圖像，然然后設(shè)置其其【設(shè)定原原始檔為】】選項(xiàng)，并并勾選【預(yù)預(yù)先載入圖圖像】和【【鼠標(biāo)滑開(kāi)開(kāi)時(shí)恢復(fù)圖圖像】復(fù)選選框，如圖圖所示。返回目錄返回目錄單擊按按鈕，，關(guān)閉對(duì)話話框，在【【行為】面面板中自動(dòng)動(dòng)添加了3個(gè)行為：：圖像的【【交換圖像像】和【恢恢復(fù)交換圖圖像】行為為及文檔的的【預(yù)先載載入圖像】】行為。預(yù)預(yù)覽網(wǎng)頁(yè)，，當(dāng)鼠標(biāo)滑滑過(guò)圖像時(shí)時(shí)，圖像會(huì)會(huì)發(fā)生變化化，如圖所所示。返回目錄（6）Spry效果果“Spry效果”是是視覺(jué)增強(qiáng)強(qiáng)功能，幾幾乎可以將將它們應(yīng)用用于使用JavaScript的HTML頁(yè)面面上的所有有元素。要要使某個(gè)元元素應(yīng)用效效果，該元元素必須處處于當(dāng)前選選定狀態(tài)，，或者必須須具有一個(gè)個(gè)Id。例例如，如果果要向當(dāng)前前未選定的的Div標(biāo)標(biāo)簽應(yīng)用高高亮顯示效效果，該Div必須須具有一個(gè)個(gè)有效的Id值。如如果該元素素尚且沒(méi)有有有效的Id值，需需要在HTML代碼碼中添加一一個(gè)。利用該效果果可以修改改元素的不不透明度、、縮放比例例、位置和和樣式屬性性（如背景景顏色），，也可以組組合兩個(gè)或或多個(gè)屬性性來(lái)創(chuàng)建有有趣的視覺(jué)覺(jué)效果。由于這些效效果都基于于Spry，因此，，當(dāng)用戶單單擊應(yīng)用了了效果的對(duì)對(duì)象時(shí)，只只有對(duì)象會(huì)會(huì)進(jìn)行動(dòng)態(tài)態(tài)更新，不不會(huì)刷新整整個(gè)HTML頁(yè)面。。在【行為】】面板的下下拉菜單中中選擇【效效果】命令令，其子命命令如圖所所示。返回目錄下面對(duì)【效效果】命令令的子命令令進(jìn)行簡(jiǎn)要要說(shuō)明?！驹龃?收收縮】：使使元素變大大或變小。?！緮D壓】：：使元素從從頁(yè)面的左左上角消失失?！撅@示/漸漸隱】：使使元素顯示示或漸隱。。【晃動(dòng)】：：模擬從左左向右晃動(dòng)動(dòng)元素?！净瑒?dòng)】：：上下移動(dòng)動(dòng)元素?！菊诤煛浚海耗M百葉葉窗，向上上或向下滾滾動(dòng)百葉窗窗來(lái)隱藏或或顯示元素素?！靖吡令伾浚焊母脑氐谋潮尘邦伾?。。當(dāng)使用效果果時(shí)，系統(tǒng)統(tǒng)會(huì)在【代代碼】視圖圖中將不同同的代碼行行添加到文文件中。其其中的一行行代碼用來(lái)來(lái)標(biāo)識(shí)“SpryEffects.js”文件件，該文件件是包括這這些效果所所必需的。。不能從代代碼中刪除除該行，否否則這些效效果將不起起作用。返回目錄9.1.2范例解解析──使使用行為制制作“翔翔翔寫真”網(wǎng)網(wǎng)頁(yè)首先將“范范例解析素素材\第9講\9-1-2””文件夾下下的內(nèi)容復(fù)復(fù)制到站點(diǎn)點(diǎn)根文件夾夾下，然后后使用行為為制作“翔翔翔寫真””網(wǎng)頁(yè)，要要求圖像不不允許下載載，當(dāng)鼠標(biāo)標(biāo)光標(biāo)指在在圖像上時(shí)時(shí)，圖像立立即變?yōu)榱砹硪环鶊D像像，當(dāng)鼠標(biāo)標(biāo)光標(biāo)指在在圖像下面面的文本上上時(shí)，文本本的顏色及及背景顏色色均發(fā)生變變化，最終終效果如圖圖所示。這是使用行行為制作網(wǎng)網(wǎng)頁(yè)效果的的一個(gè)例子子，涉及到到彈出信息息、交換圖圖像和改變變屬性等行行為，具體體操作步驟驟參考教材材。返回目錄9.1.3課堂實(shí)實(shí)訓(xùn)——使使用行為完完善“十大大名山”網(wǎng)網(wǎng)頁(yè)功能首先將“課課堂實(shí)訓(xùn)\素材\第第9講\9-1-3”文件夾夾下的內(nèi)容容復(fù)制到站站點(diǎn)根文件件夾下，然然后使用行行為完善““十大名山山”網(wǎng)頁(yè)功功能，要求求圖像不允允許下載，，當(dāng)鼠標(biāo)指指在圖像上上時(shí)在狀態(tài)態(tài)欄顯示圖圖像說(shuō)明文文字，最終終效果如圖圖所示。這是使用行行為完善網(wǎng)網(wǎng)頁(yè)功能的的一個(gè)例子子，涉及到到設(shè)置狀態(tài)態(tài)欄文本、、彈出信息息等行為。。返回目錄9.2使使用媒體9.2.1功能講講解9.2.2范例解解析——插入WMV視頻頻9.2.3課堂實(shí)實(shí)訓(xùn)——插入swf動(dòng)畫畫返回目錄9.2.1功能講講解媒體技術(shù)的的發(fā)展使網(wǎng)網(wǎng)頁(yè)設(shè)計(jì)者者能夠輕松松自如地在在頁(yè)面中加加入聲音、、動(dòng)畫、影影片等內(nèi)容容，使制作作的網(wǎng)頁(yè)充充滿了樂(lè)趣趣，更給訪訪問(wèn)者增添添了幾分欣欣喜。在DreamweaverCS4中，，媒體的內(nèi)內(nèi)容包括swf（Flash動(dòng)畫）、、FlashPaper、Flv（Flash視頻）、、Shockwave、Applet、ActiveX、插件等等。插入swf動(dòng)畫。插入ActiveX。返回目錄一、插入swf動(dòng)畫畫Flash技術(shù)是實(shí)實(shí)現(xiàn)和傳遞遞矢量圖像像和動(dòng)畫的的首要解決決方案。其其播放器是是FlashPlayer，在常用用計(jì)算機(jī)上上，它可以以作為IE瀏覽器的的ActiveX控控件，因此此，F(xiàn)lash動(dòng)畫畫可以直接接在瀏覽器器中播放。。Flash通常有有3種文件件格式：Flash文件（.fla格格式）、Flash影片文件件（.swf格式））和Flash視頻頻文件（.flv格格式）。其其中，F(xiàn)lash文文件是在Flash中創(chuàng)建的的文件的源源文件格式式，不能直直接在Dreamweaver中打開(kāi)開(kāi)使用；Flash影片文件件是由Flash文文件輸出的的影片文件件，可在瀏瀏覽器或Dreamweaver中打打開(kāi)使用；；Flash視頻文文件是Flash的的一種視頻頻文件，它它包含經(jīng)過(guò)過(guò)編碼的音音頻和視頻頻數(shù)據(jù)，可可通過(guò)FlashPlayer傳送送。在DreamweaverCS4中中插入swf動(dòng)畫的的方法通常常有以下3種。選擇【插入入】/【媒媒體】/【【swf】】命令。在【插入】】/【常用用】面板的的媒體按鈕鈕組中，單單擊按按鈕鈕。在【文件】】面板中選選中Flash文件件，然后拖拖動(dòng)到文檔檔中。插入Flash動(dòng)畫畫后，其【【屬性】面面板如圖所所示。返回目錄二、插入ActiveXActiveX的主主要作用是是在不發(fā)布布瀏覽器新新版本的情情況下擴(kuò)展展瀏覽器的的能力。如如果瀏覽器器載入了一一個(gè)網(wǎng)頁(yè)，，而這個(gè)網(wǎng)網(wǎng)頁(yè)中有瀏瀏覽器不支支持的ActiveX控件，，瀏覽器會(huì)會(huì)自動(dòng)安裝裝所需控件件。WMV和RM是是網(wǎng)絡(luò)常見(jiàn)見(jiàn)的兩種視視頻格式。。其中，WMV影片片是Windows的視頻格格式，使用用的播放器器是MicrosoftMediaPlayer。。在WMV視視頻的ActiveX【屬性性】面板中中，許多參參數(shù)沒(méi)有設(shè)設(shè)置，便無(wú)無(wú)法正常播播放WMV格式的視視頻。這時(shí)時(shí)需要做兩兩項(xiàng)工作：：一是添加加“ClassID”；二是是添加控制制播放參數(shù)數(shù)。對(duì)于控控制播放參參數(shù)，可以以根據(jù)需要要有選擇地地添加。返回目錄除了當(dāng)前的的WMV視視頻，此種種方式還可可以播放MPG、ASF等格格式的視頻頻，但不能能播放RM、RMVB格式。。播放RM格式的視視頻不能使使用MicrosoftMediaPlayer播播放器，必必須使用RealPlayer播放器器。設(shè)置方方法是：在在【屬性】】面板的【【ClassID】】下拉列表表中選擇““RealPlayer/clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA”，勾勾選【嵌入入】復(fù)選框框，然后在在【屬性】】面板中單單擊按按鈕鈕，打開(kāi)【【參數(shù)】對(duì)對(duì)話框添加加參數(shù)，最最后設(shè)置【【寬】和【【高】為固固定尺寸。。在播放WMV格式的的視頻時(shí)，，可以不設(shè)設(shè)置具體的的尺寸，但但是RM格格式的視頻頻必須要設(shè)設(shè)置一個(gè)具具體的尺寸寸。當(dāng)然，，這個(gè)尺寸寸可能不是是影片的原原始比例尺尺寸，可以以通過(guò)將參參數(shù)“MAINTAINASPECT”設(shè)置為為“true”來(lái)恢恢復(fù)影片的的原始比例例尺寸。返回目錄9.2.2范例解解析——插插入WMV視頻首先將“范范例解析素素材\第9講\9-2-2””文件夾下下的內(nèi)容復(fù)復(fù)制到站點(diǎn)點(diǎn)根文件夾夾下，然后后創(chuàng)建一個(gè)個(gè)網(wǎng)頁(yè)并插插入WMV視頻，播播放效果如如圖所示。。這是使用ActiveX制作作網(wǎng)頁(yè)效果果的一個(gè)例例子，具體體操作步驟驟參考教材材。返回目錄9.2.3課堂實(shí)實(shí)訓(xùn)——插插入swf動(dòng)畫首先將“課課堂實(shí)訓(xùn)\素材\第第9講\9-2-3”文件夾夾下的內(nèi)容容復(fù)制到站站點(diǎn)根文件件夾下，然然后創(chuàng)建一一個(gè)網(wǎng)頁(yè)并并插入swf動(dòng)畫，，播放效果果如圖所示示。這是插入Flash動(dòng)畫的一一個(gè)例子，，可可以使用【【插入】/【媒體】】/【swf】命令令進(jìn)行操作作。返回目錄9.3綜綜合案例───完善““西湖十景景”網(wǎng)頁(yè)首先將“綜綜合案例\素材\第第9講”文文件夾下的的所有內(nèi)容容復(fù)制到站站點(diǎn)根文件件夾下，然然后使用行行為和媒體體完善網(wǎng)頁(yè)頁(yè)，最終效效果如圖所所示。這是使用行行為和媒體體完善網(wǎng)頁(yè)頁(yè)的一個(gè)例例子，可以以先插入swf動(dòng)畫畫，然后插插入圖像，，并使用行行為禁止圖圖像下載，，同時(shí)對(duì)圖圖像應(yīng)用Spry增增大效果。。返回目錄返回目錄9、靜夜夜四無(wú)無(wú)鄰，，荒居居舊業(yè)業(yè)貧。。。12月月-2212月月-22Saturday,December31,202210、雨中中黃葉葉樹(shù)，，燈下下白頭頭人。。。02:48:1902:48:1902:4812/31/20222:48:19AM11、以我獨(dú)沈沈久，愧君君相見(jiàn)頻。。。12月-2202:48:1902:48Dec-2231-Dec-2212、故人江江海別，，幾度隔隔山川。。。02:48:1902:48:1902:48Saturday,December31,202213、乍見(jiàn)翻疑夢(mèng)夢(mèng)，相悲各問(wèn)問(wèn)年。。12月-2212月-2202:48:1902:48:19December31,202214、他他鄉(xiāng)鄉(xiāng)生生白白發(fā)發(fā)，，舊舊國(guó)國(guó)見(jiàn)見(jiàn)青青山山。。。。31十十二二月月20222:48:19上上午午02:48:1912月月-2215、比不了得就就不比，得不不到的就不要要。。。十二月222:48上上午12月-2202:48December31,202216、行動(dòng)出成果果，工作出財(cái)財(cái)富。。2022/12/312:48:1902:48:1931December202217、做前前，能能夠環(huán)環(huán)視四四周；；做時(shí)時(shí)，你你只能能或者者最好好沿著著以腳腳為起起點(diǎn)的的射線線向前前。。。2:48:19上上午2:48上上午午02:48:1912月月-229、沒(méi)有有失敗敗，只只有暫暫時(shí)停停止成成功??！。12月月-2212月月-22Saturday,December31,202210、很多事情情努力了未未必有結(jié)果果，但是不不努力卻什什么改變也也沒(méi)有。。。02:48:1902:48:1902:4812/31/20222:48:19AM11、成功就就是日復(fù)復(fù)一日那那一點(diǎn)點(diǎn)點(diǎn)小小努努力的積積累。。。12月-2202:48:1902:48Dec-2231-Dec-2212、世間成事，，不求其絕對(duì)對(duì)圓滿，留一一份不足，可可得無(wú)限完美美。。02:48:1902:48:1902:48Saturday,December31,202213、不知香積寺寺，數(shù)里入云云峰。。12月-2212月-2202:48:1902:48:19December31,202214、意志堅(jiān)強(qiáng)強(qiáng)的人能把把世界放在在手中像泥泥塊一樣任任意揉捏。。31十二二月20222:48:19上上午02:48:1912月-2215、楚楚塞塞三三湘湘接接，，荊荊門門九九派派通通。。。。。十二二月月222:48上上午午12月月-2202:48December31,202216、少年十十五二十十時(shí)，步步行奪得得胡馬騎騎。。2022/12/312:48:1902:48:1931December202217、空山新新雨后，，天氣晚晚來(lái)秋。。。2:48:19上午午2:48上午午02:48:1912月-229、楊柳柳散和和風(fēng)，，青山山澹吾吾慮。。。12月月-2212月月-22Saturday,Decembe