2022年為網(wǎng)頁添加聲音-教案

1、名師精編 優(yōu)秀教案為網(wǎng)頁添加聲音 教案宜昌市水利電力學(xué)校 陳波【教學(xué)內(nèi)容】為網(wǎng)頁添加聲音（高等訓(xùn)練出版社網(wǎng)頁制作教程郭振欣史紅星編第六章第一節(jié)）【教學(xué)目標(biāo)】1 認知目標(biāo)：明白常用聲音文件的格式和特點；2 才能目標(biāo)：把握為網(wǎng)頁添加聲音的多種方法；3 情感目標(biāo)：利用上機分組研討,獨立操作,培育同學(xué)的協(xié)作精神；【重點】聲音文件鏈接和嵌入至網(wǎng)頁中的方法【難點】嵌入音頻文件并設(shè)置參數(shù)、“ 播放聲音” 動作的應(yīng)用【教學(xué)方法】1采納案例演示、啟示式教學(xué)法；“ 實例講解” “ 引導(dǎo)摸索” “ 綜合練習(xí)”；2實行由淺入深、循序漸進的教學(xué)策略：【教學(xué)資源】自制課件、多媒體機房、互聯(lián)網(wǎng)【教學(xué)時間】1 課時（ 45

2、分鐘）【教學(xué)過程】一、導(dǎo)入新課及實踐預(yù)備（約 4 分鐘）1網(wǎng)頁展現(xiàn)：用個互聯(lián)網(wǎng)中的包含音樂的網(wǎng)頁,直觀的向同學(xué)展現(xiàn),使同學(xué)感受音樂添加到網(wǎng)頁中的特點；課件預(yù)備： 三個 Internet 快捷方式, 指向互聯(lián)網(wǎng)中包含音樂的網(wǎng)頁；展現(xiàn)的網(wǎng)頁中有兩個是嵌入音頻文件,顯示控件面板,一個是背景音樂；音樂的格式包括 2明白本節(jié)將學(xué)習(xí)的內(nèi)容：.wma、.mid、.mp3；一、常見音頻文件的格式 二、鏈接到音頻文件 三、嵌入音頻文件 四、 “播放聲音 ”動作運用 五、添加網(wǎng)頁背景音樂名師精編 優(yōu)秀教案3實踐操作預(yù)備：指導(dǎo)同學(xué)下載本節(jié)練習(xí)素材,解壓縮,運行Dreamweaver,新建站點（以供應(yīng)的素材文件夾為站

3、點根目錄,便利制作） ,為后面將進行的實踐操作做好預(yù)備；二、講授新課與課堂練習(xí)（共約 30 分鐘）1關(guān)于音頻文件的格式（約 4 分鐘）老師：同學(xué)們知道的音頻格式有哪些？使用課件,試聽不同格式的音頻文件,辨論聲音的差異；老師：因設(shè)計公司和標(biāo)準(zhǔn)的不同,音頻文件格式多種多樣；簡潔介紹各自特點（更具體的說明可從互聯(lián)網(wǎng)查閱資料） ；音質(zhì)最好的是 CD（即通常所說的激光唱片）,但容量太大；最流行的是 MP3,壓縮程度高、音質(zhì)好；網(wǎng)絡(luò)流行的主流音頻媒體格式有 .wma、.rm 等；MIDI 使得人們可以利用多媒體運算機和電子樂器去創(chuàng)作、觀賞和討論音樂；WAV 是微軟 Windows 本身供應(yīng)的音頻格式,由于

4、 實上的通用音頻格式；2添加聲音至網(wǎng)頁的兩種方法：（ 1）鏈接到音頻文件： （約 5 分鐘）老師：Windows 的影響力,這個格式已經(jīng)成為了事鏈接到音頻文件是將聲音添加到 Web 頁面的一種簡潔而有效的方法；這種集成聲音文件的方 法可以使拜訪者能夠挑選他們是否要收聽該文件,并且使文件可用于最廣范疇的觀眾；操作方法：與添加一般超級鏈接方法相同,只不過鏈接的是音頻文件；演示課件中相關(guān)鏈接,簡潔描述操作步驟；同學(xué)實踐一： 新建 html 文檔, 儲存, 插入圖片, 輸入文字, 為圖片和文字分別添加超級鏈接,鏈接目標(biāo)為“sound” 文件夾中的不同格式的音頻文件（任意選?。?儲存,預(yù)覽,測試鏈接；留

5、意：鏈接到音頻文件將受客戶端軟件的影響,顯現(xiàn)媒體播放器播放或下載提示；（ 2）嵌入音頻文件（約 6 分鐘）老師：嵌入音頻文件是將聲音直接并入頁面中,可掌握音量、播放器在頁面上的外觀或者聲音文件的開頭點和終止點等；操作演示：名師精編 優(yōu)秀教案1）新建 html 頁,在“ 插入” 欄的“ 常用” 類別中,單擊“ 媒體” 按鈕,然后挑選“ 插件” 圖 標(biāo),在“ 挑選文件” 對話框中挑選站點文件夾內(nèi)的某個音頻文件,調(diào)整插件寬、高,儲存,預(yù)覽；2）選中插件,添加參數(shù)“autostart” ,值為“false” ,儲存,預(yù)覽；true” ,儲存,預(yù)3）選中插件,修改參數(shù)“autostart” 值為“tru

6、e” ,添加參數(shù)“hidden” ,值為“覽；同學(xué)實踐二：同老師操作演示；并簡潔瀏覽課件附錄,大致明白embed 標(biāo)簽的屬性參數(shù)；留意：客戶機應(yīng)具有所選聲音文件的適當(dāng)插件后,聲音才可以播放；視頻文件也可采納此方法嵌入至網(wǎng)頁中；備注：老師邊講解邊操作,讓同學(xué)觀看成效,把握網(wǎng)頁中嵌入音頻文件的方法,再加上同學(xué)的親身體驗,突破難點；并且在老師的引導(dǎo)下,同學(xué)通過觀看,明白插件參數(shù)設(shè)置后產(chǎn)生的變化；3使用“ 播放聲音” 動作為網(wǎng)頁添加聲音：（約 10 分鐘）老師：在 Dreamweaver 的“ 動作” 中,有一項為“ 播放聲音”,結(jié)合“ 第三章Dreamweaver 行為” 知識,能否為一張圖片添加如

7、下成效：當(dāng)鼠標(biāo)指針指上圖片時播放音效,當(dāng)點擊圖片后播放一段聲音剪輯？答案是確定的（演示課件成效）；同學(xué)實踐三：依據(jù)課件描述,新建html 頁,使用練習(xí)素材進行制作；說明：此方法實際仍使用 embed 標(biāo)簽,結(jié)合 javascript 腳本程序掌握播放,embed 標(biāo)簽中使用了“ hidden”屬性,其值為 “true ”,因此控件面板未顯示；備注：同學(xué)依據(jù)課件操作步驟描述自主操作,相互溝通,提高同學(xué)自學(xué)才能和意識；老師巡視輔導(dǎo),指導(dǎo)操作關(guān)鍵點,修正錯誤；老師總結(jié)操作關(guān)鍵點并演示操作；關(guān)鍵步驟：1）選取將添加行為的對象；2）添加“ 播放聲音” 動作；3）轉(zhuǎn)變動作的觸發(fā)大事；4添加網(wǎng)頁背景音樂：

8、（約 5 分鐘）老師：經(jīng)過以上三個實踐操作后,同學(xué)們摸索一下,能否敏捷運用以上方法為網(wǎng)頁添加背景音樂？提示：所謂背景音樂,即表示音頻文件自動播放并且不會在頁面中顯示；操作演示：名師精編 優(yōu)秀教案方法一：使用插件,轉(zhuǎn)變插件“ 寬”、“ 高” 屬性值均為“0” ,增加參數(shù)“hidden” ,值為“true” ,以隱匿控件面板；增加參數(shù)“l(fā)oop” ,值為“true” ,以循環(huán)播放；增加參數(shù)“autostart” ,值為“true” ,以自動播放（不加改參數(shù)默認也為自動播放）；方法二：在代碼視圖中,添加 html 代碼“” ；其中, src 屬性表示音樂文件的路徑,loop=表示音樂循環(huán)播放次數(shù),值

9、為“-1” 表示無限循環(huán),假如要設(shè)置播放次數(shù),就改為相應(yīng)的數(shù)字即可；同學(xué)實踐四：依據(jù)老師演示和課件描述,新建 數(shù)作用及代碼視圖中對代碼的編輯方法；html 頁,使用練習(xí)素材進行制作；重點懂得參留意： Dreamweaver 中對代碼的編輯也很便利,有代碼提示功能,簡潔明白并把握基本的代碼 編輯方法；備注：方法一為引導(dǎo)同學(xué)查閱embed 標(biāo)簽的屬性參數(shù)作用后,得出操作思路,以提高同學(xué)運用學(xué)問的才能,再由同學(xué)描述、老師操作進行驗證；方法二由老師演示操作,同學(xué)依據(jù)課件操作提示進行操作；三、摸索與練習(xí)（約 8 分鐘）1使用“ 播放聲音” 動作,為網(wǎng)頁添加背景音樂；提示：選取對象為“body” （網(wǎng)頁）,動作為“ 播放聲音”,大事為“onLoad” （加載）；備注：利用以前所學(xué)的學(xué)問,結(jié)合本次課程內(nèi)容,利用多種方法實現(xiàn)同一目標(biāo),促使同學(xué)對學(xué)問融會貫穿,敏捷運用,充分發(fā)揮同學(xué)的主動性,培育同學(xué)的創(chuàng)新精神；2假如我喜愛一首歌曲,它已經(jīng)存在于另一個網(wǎng)站的某張網(wǎng)頁的鏈接之中,我能否僅鏈接到它而不用供應(yīng)我自己的文件？課件顯示