為頁面元素添加行為課件

網(wǎng)頁設(shè)計與制作實用教程網(wǎng)頁設(shè)計與制作實用教程第10章為頁面元素添加行為22023/1/2學(xué)習(xí)目標(biāo)了解行為的基本概念；熟練掌握行為面板的使用；掌握常見行為的使用方法；了解其他行為的使用方法。第10章為頁面元素添加行為22022/12/18學(xué)習(xí)目標(biāo)了第10章為頁面元素添加行為32023/1/2目錄為頁面元素添加行為實例行為的綜合應(yīng)用實例其他行為實例本章小結(jié)配套實訓(xùn)練習(xí)題第10章為頁面元素添加行為32022/12/18目錄為頁面第10章為頁面元素添加行為42023/1/2為頁面元素添加行為實例設(shè)計目標(biāo)頁面分析實訓(xùn)引導(dǎo)制作步驟第10章為頁面元素添加行為42022/12/18為頁面元素第10章為頁面元素添加行為52023/1/2設(shè)計目標(biāo)為網(wǎng)站首頁設(shè)置各種行為，瀏覽效果如圖所示。返回第10章為頁面元素添加行為52022/12/18設(shè)計目標(biāo)為第10章為頁面元素添加行為62023/1/2頁面分析在上圖所示的網(wǎng)頁中，分別設(shè)置了以下行為：交換圖像彈出消息框打開瀏覽器窗口調(diào)用JavaScript設(shè)置狀態(tài)欄文本播放聲音顯示彈出式菜單參見教程P195返回第10章為頁面元素添加行為62022/12/18頁面分析在第10章為頁面元素添加行為72023/1/2實訓(xùn)引導(dǎo)1．本實例的頁面內(nèi)容取自于第6章制作的主頁index6.html。2．素材網(wǎng)頁“征文啟事”ex10_1.htm、插入Flash動畫的ex10_4.htm文件由配套光盤webcourse\chapter10\materials文件夾提供，請將該文件復(fù)制到本地站點future\webpages文件夾下。3．本頁面用到的2個交換圖像文件：img6_7.gif、img6_9.jpg和激活彈出式菜單所使用的“未來都市”圖像文件img10_1.jpg由配套光盤webcourse\chapter10\images文件夾提供（圖像尺寸必須相同），在制作頁面之前，先將用到的圖像文件復(fù)制到本地站點future\images文件夾中。4．頁面中播放的聲音文件存放在配套光盤的webcourse\chapter10\sound文件夾下，文件名為sud10_1.mid，在制作頁面之前，先將用到的聲音文件復(fù)制到本地站點future\sound文件夾中。5．頁面效果請參見webcourse\chapter10文件夾下的index10.html文件。返回第10章為頁面元素添加行為72022/12/18實訓(xùn)引導(dǎo)1第10章為頁面元素添加行為82023/1/2制作步驟1.“交換圖像”行為。2．“彈出信息”行為。3．“打開瀏覽器窗口”行為。4．“調(diào)用JavaScript”行為。5．“設(shè)置狀態(tài)欄文本”行為。6．“播放聲音”行為。7．“顯示彈出式菜單”行為。返回第10章為頁面元素添加行為82022/12/18制作步驟1第10章為頁面元素添加行為92023/1/2交換圖像創(chuàng)建交換圖像效果。當(dāng)鼠標(biāo)移動到圖像上時，圖像交換為另外一幅，當(dāng)鼠標(biāo)移出時，又恢復(fù)為原始狀態(tài)。操作步驟見教程P196。第10章為頁面元素添加行為92022/12/18交換圖像創(chuàng)第10章為頁面元素添加行為102023/1/2彈出信息在瀏覽器載入頁面后，彈出消息框，操作步驟見教程P199。第10章為頁面元素添加行為102022/12/18彈出信息第10章為頁面元素添加行為112023/1/2打開瀏覽器窗口在打開瀏覽器窗口的同時，彈出一個新窗口，操作步驟見教程P200。第10章為頁面元素添加行為112022/12/18打開瀏覽第10章為頁面元素添加行為122023/1/2調(diào)用JavaScript在彈出的新窗口中，單擊“關(guān)閉窗口”按鈕，將當(dāng)前新窗口關(guān)閉，操作步驟見教程P202。第10章為頁面元素添加行為122022/12/18調(diào)用Ja第10章為頁面元素添加行為132023/1/2設(shè)置狀態(tài)欄文本當(dāng)瀏覽器載入頁面后，在狀態(tài)欄中顯示信息，操作步驟見教程P203。第10章為頁面元素添加行為132022/12/18設(shè)置狀態(tài)第10章為頁面元素添加行為142023/1/2播放聲音當(dāng)鼠標(biāo)單擊“暢想未來”圖像時，播放音樂，操作步驟見教程P204。第10章為頁面元素添加行為142022/12/18播放聲音第10章為頁面元素添加行為152023/1/2顯示彈出式菜單當(dāng)鼠標(biāo)移動到“未來都市”圖像上時，顯示彈出式菜單，選擇菜單中的選項可以鏈接并打開相應(yīng)文件；當(dāng)鼠標(biāo)移出時，彈出式菜單消失。操作步驟見教程P205。第10章為頁面元素添加行為152022/12/18顯示彈出第10章為頁面元素添加行為162023/1/2行為的綜合應(yīng)用實例設(shè)計目標(biāo)頁面分析實訓(xùn)引導(dǎo)制作步驟第10章為頁面元素添加行為162022/12/18行為的綜第10章為頁面元素添加行為172023/1/2設(shè)計目標(biāo)為網(wǎng)頁文件設(shè)置行為，使得當(dāng)鼠標(biāo)移動到某幅圖像上時，顯示該圖像對應(yīng)的主題文字，當(dāng)鼠標(biāo)離開圖像上時主題文字消失。瀏覽效果如圖所示。返回第10章為頁面元素添加行為172022/12/18設(shè)計目標(biāo)第10章為頁面元素添加行為182023/1/2頁面分析在上圖所示的網(wǎng)頁中，分別設(shè)置了以下行為：顯示-隱藏層設(shè)置層文本改變對象屬性參見教程P208返回第10章為頁面元素添加行為182022/12/18頁面分析第10章為頁面元素添加行為192023/1/2實訓(xùn)引導(dǎo)本頁面將在第8章制作的ex8_1.htm文件的基礎(chǔ)上進行修改。返回第10章為頁面元素添加行為192022/12/18實訓(xùn)引導(dǎo)第10章為頁面元素添加行為202023/1/2制作步驟“顯示-隱藏層”行為?！霸O(shè)置層文本”行為?！案淖儗傩浴毙袨椤７祷氐?0章為頁面元素添加行為202022/12/18制作步驟第10章為頁面元素添加行為212023/1/2顯示-隱藏層創(chuàng)建如下效果，當(dāng)鼠標(biāo)移動到某圖像上時，顯示（黃色）圖層“text”

；當(dāng)鼠標(biāo)移出某圖像時，隱藏“text”圖層，操作步驟見教程P209。第10章為頁面元素添加行為212022/12/18顯示-隱第10章為頁面元素添加行為222023/1/2設(shè)置層文本制作一個動態(tài)圖像說明。要求為一組圖像集的每張圖像配以文字說明，使所有圖像說明在一個圖層中顯示，隨著鼠標(biāo)在圖像間移動，說明文字也動態(tài)地隨之更換，操作步驟見教程P210。第10章為頁面元素添加行為222022/12/18設(shè)置層文第10章為頁面元素添加行為232023/1/2改變屬性在設(shè)計目標(biāo)的基礎(chǔ)上進行如下擴充：當(dāng)鼠標(biāo)移動到某張圖像上時，動態(tài)地改變文字說明圖層的顏色、文字的大小、字體、顏色、傾斜、陰影效果，并為選中圖像設(shè)置邊框線。當(dāng)鼠標(biāo)離開該圖像時，圖像邊框線、文字說明圖層消失，操作步驟見教程P211。第10章為頁面元素添加行為232022/12/18改變屬性第10章為頁面元素添加行為242023/1/2其他行為實例跳轉(zhuǎn)到URL控制Shockwave或Flash用行為控制時間軸第10章為頁面元素添加行為242022/12/18其他行為第10章為頁面元素添加行為252023/1/2跳轉(zhuǎn)到URL在分割了3個框架的網(wǎng)頁中，當(dāng)鼠標(biāo)單擊框架左下部的“未來都市”超級鏈接時，使框架的頂部及右下部的內(nèi)容同時發(fā)生變化，當(dāng)鼠標(biāo)單擊框架左下部的“本站首頁”超級鏈接時，恢復(fù)原狀，操作步驟見教程P216。第10章為頁面元素添加行為252022/12/18跳轉(zhuǎn)到U第10章為頁面元素添加行為262023/1/2控制Shockwave或Flash在網(wǎng)頁中插入一個Flash動畫，載入頁面后，單擊“播放”按鈕，動畫開始播放；單擊“停止”按鈕，動畫停止播放。操作步驟見教程P218。第10章為頁面元素添加行為262022/12/18控制Sh第10章為頁面元素添加行為272023/1/2用行為控制時間軸利用行為控制時間軸實現(xiàn)如下效果：當(dāng)鼠標(biāo)移到運動的圖像上時，該圖像就停止運動；當(dāng)鼠標(biāo)離開圖像時，圖像又繼續(xù)運動。操作步驟見教程P219。第10章為頁面元素添加行為272022/12/18用行為控第10章為頁面元素添加行為282023/1/2本章小結(jié)本章主要介紹了行為的基本概念，行為、事件、動作及三者之間的聯(lián)系及行為的使用方法。在學(xué)習(xí)本章時，要熟練掌握行為、事件、動作三個基本概念，同時認真理解各種行為的具體用法。第10章為頁面元素添加行為282022/12/18本章小結(jié)第10章為頁面元素添加行為292023/1/2配套實訓(xùn)

參見教材第221～223頁，利用提供的素材文件，按要求制作一個游戲網(wǎng)站。第10章為頁面元素添加行為292022/12/18配套實訓(xùn)第10章為頁面元素添加行為302023/1/2練習(xí)題參見教材第224頁，完成相應(yīng)的練習(xí)題：

填空題單選題思考題第10章為頁面元素添加行為302022/12/18練習(xí)題參網(wǎng)頁設(shè)計與制作實用教程網(wǎng)頁設(shè)計與制作實用教程第10章為頁面元素添加行為322023/1/2學(xué)習(xí)目標(biāo)了解行為的基本概念；熟練掌握行為面板的使用；掌握常見行為的使用方法；了解其他行為的使用方法。第10章為頁面元素添加行為22022/12/18學(xué)習(xí)目標(biāo)了第10章為頁面元素添加行為332023/1/2目錄為頁面元素添加行為實例行為的綜合應(yīng)用實例其他行為實例本章小結(jié)配套實訓(xùn)練習(xí)題第10章為頁面元素添加行為32022/12/18目錄為頁面第10章為頁面元素添加行為342023/1/2為頁面元素添加行為實例設(shè)計目標(biāo)頁面分析實訓(xùn)引導(dǎo)制作步驟第10章為頁面元素添加行為42022/12/18為頁面元素第10章為頁面元素添加行為352023/1/2設(shè)計目標(biāo)為網(wǎng)站首頁設(shè)置各種行為，瀏覽效果如圖所示。返回第10章為頁面元素添加行為52022/12/18設(shè)計目標(biāo)為第10章為頁面元素添加行為362023/1/2頁面分析在上圖所示的網(wǎng)頁中，分別設(shè)置了以下行為：交換圖像彈出消息框打開瀏覽器窗口調(diào)用JavaScript設(shè)置狀態(tài)欄文本播放聲音顯示彈出式菜單參見教程P195返回第10章為頁面元素添加行為62022/12/18頁面分析在第10章為頁面元素添加行為372023/1/2實訓(xùn)引導(dǎo)1．本實例的頁面內(nèi)容取自于第6章制作的主頁index6.html。2．素材網(wǎng)頁“征文啟事”ex10_1.htm、插入Flash動畫的ex10_4.htm文件由配套光盤webcourse\chapter10\materials文件夾提供，請將該文件復(fù)制到本地站點future\webpages文件夾下。3．本頁面用到的2個交換圖像文件：img6_7.gif、img6_9.jpg和激活彈出式菜單所使用的“未來都市”圖像文件img10_1.jpg由配套光盤webcourse\chapter10\images文件夾提供（圖像尺寸必須相同），在制作頁面之前，先將用到的圖像文件復(fù)制到本地站點future\images文件夾中。4．頁面中播放的聲音文件存放在配套光盤的webcourse\chapter10\sound文件夾下，文件名為sud10_1.mid，在制作頁面之前，先將用到的聲音文件復(fù)制到本地站點future\sound文件夾中。5．頁面效果請參見webcourse\chapter10文件夾下的index10.html文件。返回第10章為頁面元素添加行為72022/12/18實訓(xùn)引導(dǎo)1第10章為頁面元素添加行為382023/1/2制作步驟1.“交換圖像”行為。2．“彈出信息”行為。3．“打開瀏覽器窗口”行為。4．“調(diào)用JavaScript”行為。5．“設(shè)置狀態(tài)欄文本”行為。6．“播放聲音”行為。7．“顯示彈出式菜單”行為。返回第10章為頁面元素添加行為82022/12/18制作步驟1第10章為頁面元素添加行為392023/1/2交換圖像創(chuàng)建交換圖像效果。當(dāng)鼠標(biāo)移動到圖像上時，圖像交換為另外一幅，當(dāng)鼠標(biāo)移出時，又恢復(fù)為原始狀態(tài)。操作步驟見教程P196。第10章為頁面元素添加行為92022/12/18交換圖像創(chuàng)第10章為頁面元素添加行為402023/1/2彈出信息在瀏覽器載入頁面后，彈出消息框，操作步驟見教程P199。第10章為頁面元素添加行為102022/12/18彈出信息第10章為頁面元素添加行為412023/1/2打開瀏覽器窗口在打開瀏覽器窗口的同時，彈出一個新窗口，操作步驟見教程P200。第10章為頁面元素添加行為112022/12/18打開瀏覽第10章為頁面元素添加行為422023/1/2調(diào)用JavaScript在彈出的新窗口中，單擊“關(guān)閉窗口”按鈕，將當(dāng)前新窗口關(guān)閉，操作步驟見教程P202。第10章為頁面元素添加行為122022/12/18調(diào)用Ja第10章為頁面元素添加行為432023/1/2設(shè)置狀態(tài)欄文本當(dāng)瀏覽器載入頁面后，在狀態(tài)欄中顯示信息，操作步驟見教程P203。第10章為頁面元素添加行為132022/12/18設(shè)置狀態(tài)第10章為頁面元素添加行為442023/1/2播放聲音當(dāng)鼠標(biāo)單擊“暢想未來”圖像時，播放音樂，操作步驟見教程P204。第10章為頁面元素添加行為142022/12/18播放聲音第10章為頁面元素添加行為452023/1/2顯示彈出式菜單當(dāng)鼠標(biāo)移動到“未來都市”圖像上時，顯示彈出式菜單，選擇菜單中的選項可以鏈接并打開相應(yīng)文件；當(dāng)鼠標(biāo)移出時，彈出式菜單消失。操作步驟見教程P205。第10章為頁面元素添加行為152022/12/18顯示彈出第10章為頁面元素添加行為462023/1/2行為的綜合應(yīng)用實例設(shè)計目標(biāo)頁面分析實訓(xùn)引導(dǎo)制作步驟第10章為頁面元素添加行為162022/12/18行為的綜第10章為頁面元素添加行為472023/1/2設(shè)計目標(biāo)為網(wǎng)頁文件設(shè)置行為，使得當(dāng)鼠標(biāo)移動到某幅圖像上時，顯示該圖像對應(yīng)的主題文字，當(dāng)鼠標(biāo)離開圖像上時主題文字消失。瀏覽效果如圖所示。返回第10章為頁面元素添加行為172022/12/18設(shè)計目標(biāo)第10章為頁面元素添加行為482023/1/2頁面分析在上圖所示的網(wǎng)頁中，分別設(shè)置了以下行為：顯示-隱藏層設(shè)置層文本改變對象屬性參見教程P208返回第10章為頁面元素添加行為182022/12/18頁面分析第10章為頁面元素添加行為492023/1/2實訓(xùn)引導(dǎo)本頁面將在第8章制作的ex8_1.htm文件的基礎(chǔ)上進行修改。返回第10章為頁面元素添加行為192022/12/18實訓(xùn)引導(dǎo)第10章為頁面元素添加行為502023/1/2制作步驟“顯示-隱藏層”行為?！霸O(shè)置層文本”行為。“改變屬性”行為。返回第10章為頁面元素添加行為202022/12/18制作步驟第10章為頁面元素添加行為512023/1/2顯示-隱藏層創(chuàng)建如下效果，當(dāng)鼠標(biāo)移動到某圖像上時，顯示（黃色）圖層“text”

；當(dāng)鼠標(biāo)移出某圖像時，隱藏“text”圖層，操作步驟見教程P209。第10章為頁面元素添加行為212022/12/18顯示-隱第10章為頁面元素添加行為522023/1/2設(shè)置層文本制作一個動態(tài)圖像說明。要求為一組圖像集的每張圖像配以文字說明，使所有圖像說明在一個圖層中顯示，隨著鼠標(biāo)在圖像間移動，說明文字也動態(tài)地隨之更換，操作步驟見教程P210。第10章為頁面元素添加行為222022/12/18設(shè)置層文第10章為頁面元素添加行為532023/1/2改變屬性在設(shè)計目標(biāo)的基礎(chǔ)上進行如下擴充：當(dāng)鼠標(biāo)移動到某張圖像上時，動態(tài)地改變文字說明圖層的顏色、文字的大小、字體、顏色、傾斜、陰影效果，并為選中圖像設(shè)置邊框線。當(dāng)鼠標(biāo)離開該圖像時，圖像邊框線、文字說明圖層消失，操作步驟見教程P211。第10章為頁面元素添加行為232022/12/18改變屬性第10章為頁面元素添加行為542023/1/2其他行為實例跳轉(zhuǎn)到URL控制Shockwave或Flash用行為控制時間軸第10章為頁面元素添加行為242022/12/18其他行為第10章為頁面元素添加行為