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

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

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

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

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

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

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

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

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

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