《網頁設計與制作案例教程（第2版） 》教案 第18課 網頁交互與特效（一）

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

課堂小結（3min）

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

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

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

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

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

（15min）【教師】組織學生搜集資料，保存網頁，通過練習熟悉使用DreamweaverCC為網頁添加事件和行為【學生】自主學習、理解、上機操作【教師】巡堂指導，及時解決學生的問題通過實踐探索，使學生進一步鞏固所學知識，了解更多關于事件、行為的知識課堂小結

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

（2min）【教師】布置課后作業(yè)（1）完成相關課后習題。（2）查閱資料，保存網頁，分析其中存在的事件和行為?！緦W生】完成課后任務延展知識面，鞏