《網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） 》教案 第18課 網(wǎng)頁(yè)交互與特效（一）

18第18第課網(wǎng)頁(yè)交互與特效（一）（一）網(wǎng)頁(yè)（一）網(wǎng)頁(yè)交互與特效第課18PAGE4PAGE4PAGE3PAGE318第18第課網(wǎng)頁(yè)交互與特效（一） 課題網(wǎng)頁(yè)交互與特效（一）課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）熟悉行為、動(dòng)作與事件的基礎(chǔ)知識(shí)（2）能夠使用DreamweaverCC添加行為思政育人目標(biāo)：（1）了解我國(guó)古代優(yōu)秀畫(huà)作，體會(huì)畫(huà)家的匠心精神，培養(yǎng)鉆研精神。（2）了解我國(guó)古代計(jì)算方法，增強(qiáng)民族自豪感。教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：行為、動(dòng)作與事件的基礎(chǔ)知識(shí)教學(xué)難點(diǎn)：使用DreamweaverCC添加行為教學(xué)方法情景模擬法、問(wèn)答法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：傳授新知（33min）第2節(jié)課：任務(wù)實(shí)施（25min）→實(shí)踐探索（15min）

課堂小結(jié)（3min）

作業(yè)布置（2min）教學(xué)過(guò)程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過(guò)文旌課堂APP，查閱資料，了解網(wǎng)頁(yè)的事件和行為【學(xué)生】按照教師要求完成課前任務(wù)通過(guò)課前的預(yù)熱，讓學(xué)生了解所學(xué)軟件，激發(fā)學(xué)生的學(xué)習(xí)欲望考勤

（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問(wèn)題導(dǎo)入

（10min）【教師】提出以下問(wèn)題：閱讀教材，說(shuō)一說(shuō)網(wǎng)頁(yè)中的行為是什么？【學(xué)生】思考、舉手發(fā)言行為是網(wǎng)頁(yè)設(shè)計(jì)與制作中不可缺少的重要組成部分，通過(guò)為網(wǎng)頁(yè)添加行為可以實(shí)現(xiàn)用戶與網(wǎng)頁(yè)間的動(dòng)態(tài)交互。通過(guò)問(wèn)題導(dǎo)入，引導(dǎo)學(xué)生思考，調(diào)動(dòng)學(xué)生的主觀能動(dòng)性，了解本節(jié)課要學(xué)習(xí)的內(nèi)容傳授新知

（33min）【教師】通過(guò)學(xué)生的發(fā)言，引入新的知識(shí)點(diǎn)，介紹行為、事件和動(dòng)作一、行為，事件與動(dòng)作【教師】提出以下問(wèn)題：什么是行為、事件與動(dòng)作？【學(xué)生】閱讀、思考、舉手發(fā)言行為是DreamweaverCC內(nèi)置的JavaScript程序庫(kù)，由事件和動(dòng)作組成。行為是指某個(gè)事件被觸發(fā)時(shí)瀏覽器執(zhí)行的相應(yīng)動(dòng)作。事件是觸發(fā)交互效果的條件，可以附加在網(wǎng)頁(yè)元素上，如鼠標(biāo)指針移到網(wǎng)頁(yè)元素上、單擊網(wǎng)頁(yè)元素等。動(dòng)作是一段預(yù)先編寫(xiě)好的JavaScript代碼，可用于完成最終的交互效果，如打開(kāi)瀏覽器窗口、交換圖像、彈出信息、恢復(fù)交換圖像等。（詳見(jiàn)教材）二、添加行為【教師】根據(jù)教材步驟演示使用DreamweaverCC如何添加行為DreamweaverCC中含有一些內(nèi)置行為，通過(guò)“行為”面板進(jìn)行可視化操作，可以幫助網(wǎng)頁(yè)制作人員快速地為網(wǎng)頁(yè)添加行為。將鼠標(biāo)指針置于想要添加行為的目標(biāo)元素中，打開(kāi)“行為”面板，單擊“添加行為”按鈕，在展開(kāi)的列表中選擇“打開(kāi)瀏覽器窗口”選項(xiàng)。然后打開(kāi)“打開(kāi)瀏覽器窗口”對(duì)話框，在“要顯示的URL”文本框中輸入地址或單擊“瀏覽”按鈕直接選擇資源文件；接著在“窗口寬度”與“窗口高度”文本框中輸入瀏覽器窗口的寬度與高度（不輸入時(shí)默認(rèn)為原窗口）；最后單擊“確定”按鈕。（詳見(jiàn)教材）【學(xué)生】觀察、記錄、理解【教師】展示事件的下拉列表，幫助學(xué)習(xí)理解onClick是打開(kāi)瀏覽器窗口行為默認(rèn)的觸發(fā)事件，如果想要重新設(shè)置觸發(fā)事件，可單擊行為中事件右側(cè)的下拉按鈕，在展開(kāi)的下拉列表中選擇新的事件選項(xiàng)。（詳見(jiàn)教材）【教師】展示行為的下拉列表，幫助學(xué)習(xí)理解（1）交換圖像。交換圖像動(dòng)作觸發(fā)后，鼠標(biāo)指針經(jīng)過(guò)圖像時(shí)，原圖像會(huì)變成另一張圖像。（2）彈出信息。彈出信息動(dòng)作觸發(fā)后，將在頁(yè)面中顯示一個(gè)帶有確定按鈕的信息對(duì)話框，起到顯示指定信息的作用。（3）恢復(fù)交換圖像?；謴?fù)交換圖像動(dòng)作觸發(fā)后，鼠標(biāo)指針離開(kāi)圖像時(shí)，另一張圖像會(huì)恢復(fù)為原圖像。（詳見(jiàn)教材）【課堂互動(dòng)】教師提出以下問(wèn)題：【學(xué)生】聆聽(tīng)、思考、舉手回答【教師】對(duì)學(xué)生的回答進(jìn)行總結(jié)【教師】演示使用DreamweaverCC在網(wǎng)頁(yè)中添加“交換圖像”行為（1）在DreamweaverCC中打開(kāi)本書(shū)配套素材“項(xiàng)目八”→“ex1.html”網(wǎng)頁(yè)文檔，按“F12”鍵進(jìn)行預(yù)覽，可見(jiàn)頁(yè)面中只有一個(gè)正常顯示的圖像元素。（2）將鼠標(biāo)指針置于網(wǎng)頁(yè)代碼的圖像元素中，打開(kāi)“行為”面板，單擊“添加行為”按鈕，在展開(kāi)的列表中選擇“交換圖像”選項(xiàng)。（3）打開(kāi)“交換圖像”對(duì)話框，單擊“瀏覽”按鈕；打開(kāi)“選擇圖像源文件”對(duì)話框，在其中選擇本書(shū)配套素材“項(xiàng)目八”→“img”→“p2.jpg”文件；最后單擊“確定”按鈕。（4）此時(shí)“行為”面板中自動(dòng)添加兩條行為，如圖8-9所示。同時(shí)，網(wǎng)頁(yè)代碼也會(huì)自動(dòng)更新。（詳見(jiàn)教材）【學(xué)生】觀察、記錄、理解【課堂互動(dòng)】教師提出以下問(wèn)題：【學(xué)生】聆聽(tīng)、思考、舉手回答【教師】對(duì)學(xué)生的回答進(jìn)行總結(jié)【學(xué)生】聆聽(tīng)、思考、記憶通過(guò)講解、提問(wèn)、演示等教學(xué)方式，讓學(xué)生了解行為、事件和動(dòng)作第二節(jié)課任務(wù)實(shí)施

（25min）【教師】演示使用DreamweaverCC制作“傳承經(jīng)典網(wǎng)”主頁(yè)公告的操作，并對(duì)其進(jìn)行分析（1）繼續(xù)在項(xiàng)目七任務(wù)一任務(wù)實(shí)施中創(chuàng)建的文檔中操作，或用本書(shū)配套素材“項(xiàng)目八”→“任務(wù)一”→“Sculture”文件夾中的文件替換本地磁盤(pán)中站點(diǎn)文件夾中的文件，并打開(kāi)“index.html”網(wǎng)頁(yè)文檔。（2）將鼠標(biāo)指針置于<main>→<divclass="sheet_1">→<divclass="news">→<divclass="news_con">標(biāo)簽所在行，打開(kāi)“行為”面板，單擊“添加行為”按鈕，在展開(kāi)的列表中選擇“彈出信息”選項(xiàng)；打開(kāi)“彈出信息”對(duì)話框，在“消息”文本框中輸入“網(wǎng)站維護(hù)中，請(qǐng)稍后再試。”；最后單擊“確定”按鈕。（3）“行為”面板新增一條行為，單擊該行為中事件右側(cè)的下拉按鈕，在展開(kāi)的下拉列表中選擇“onClick”選項(xiàng)，重新設(shè)置該行為的事件，如圖8-12所示。此時(shí)，網(wǎng)頁(yè)代碼會(huì)自動(dòng)更新。（詳見(jiàn)教材）【學(xué)生】觀察、記錄、理解，上機(jī)操作【教師】巡堂指導(dǎo)，及時(shí)解決學(xué)生的問(wèn)題通過(guò)任務(wù)實(shí)施，讓學(xué)生們主動(dòng)參與學(xué)習(xí)，熟悉使用DreamweaverCC添加行為和動(dòng)作的步驟實(shí)踐探索

（15min）【教師】組織學(xué)生搜集資料，保存網(wǎng)頁(yè)，通過(guò)練習(xí)熟悉使用DreamweaverCC為網(wǎng)頁(yè)添加事件和行為【學(xué)生】自主學(xué)習(xí)、理解、上機(jī)操作【教師】巡堂指導(dǎo)，及時(shí)解決學(xué)生的問(wèn)題通過(guò)實(shí)踐探索，使學(xué)生進(jìn)一步鞏固所學(xué)知識(shí)，了解更多關(guān)于事件、行為的知識(shí)課堂小結(jié)

（3min）【教師】簡(jiǎn)要總結(jié)本節(jié)課的要點(diǎn)本節(jié)課學(xué)習(xí)了事件、行為和動(dòng)作的相關(guān)知識(shí)，并通過(guò)實(shí)踐練習(xí)了使用DreamweaverCC為網(wǎng)頁(yè)添加事件和行為的方法。希望大家在課下多加練習(xí)，熟練掌握利用DreamweaverCC為網(wǎng)頁(yè)添加事件和行為的操作?！緦W(xué)生】總結(jié)回顧知識(shí)點(diǎn)總結(jié)知識(shí)點(diǎn)，鞏固印象作業(yè)布置

（2min）【教師】布置課后作業(yè)（1）完成相關(guān)課后習(xí)題。（2）查閱資料，保存網(wǎng)頁(yè)，分析其中存在的事件和行為。【學(xué)生】完成課后任務(wù)延展知識(shí)面，鞏