（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目四-2電子教案

1、（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目四-2電子教案（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目四-2電子教案（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目四-2電子教案教學(xué)課題項(xiàng)目4 網(wǎng)頁(yè)中的多媒體4.3項(xiàng)目實(shí)施、4.4項(xiàng)目拓展授課班級(jí)授課時(shí)間教學(xué)目標(biāo)知識(shí)目標(biāo)1.掌握在網(wǎng)頁(yè)中插入超鏈接的方法；2.掌握在網(wǎng)頁(yè)中制作音頻和視頻播放器的方法；3.掌握CSS屬性的設(shè)置。能力目標(biāo)1.培養(yǎng)學(xué)生自主學(xué)習(xí)、分析問(wèn)題和解決問(wèn)題的能力；2.培養(yǎng)學(xué)生熟練運(yùn)用所學(xué)知識(shí)的能力。德育目標(biāo)1.鼓勵(lì)學(xué)生主動(dòng)學(xué)習(xí)，提高學(xué)習(xí)興趣，提升學(xué)生的專(zhuān)業(yè)素質(zhì)；2.培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。學(xué)情分析通過(guò)前面知識(shí)的學(xué)習(xí)，掌握了創(chuàng)建超鏈接、錨點(diǎn)鏈接和熱點(diǎn)鏈接，才及制作音頻、視

2、頻播放器的方法。本節(jié)課通過(guò)制作HTML 5音樂(lè)播放器和視頻播放器來(lái)應(yīng)用超鏈接、音視頻等標(biāo)簽元素。教學(xué)重點(diǎn)1.創(chuàng)建超鏈接；2.插入音視頻文件的方法；3.制作音樂(lè)和視頻播放器；4.CSS屬性設(shè)置。教學(xué)難點(diǎn)1.制作音樂(lè)和視頻播放器；2.CSS屬性設(shè)置。教學(xué)方法項(xiàng)目教學(xué)法、多媒體輔助教學(xué)法、講練結(jié)合法教學(xué)過(guò)程教學(xué)環(huán)節(jié)教學(xué)內(nèi)容師生活動(dòng)新課導(dǎo)入給學(xué)生展示網(wǎng)頁(yè)頁(yè)面，通過(guò)頁(yè)面中的HTML 5音樂(lè)播放器和視頻播放器，導(dǎo)入本節(jié)課的內(nèi)容。教師提出問(wèn)題，學(xué)生可分組討論，協(xié)作探究。技能學(xué)習(xí)單元格列行單元格列行單元格列行一、項(xiàng)目實(shí)施單元格列行單元格列行單元格列行通過(guò)前面知識(shí)的學(xué)習(xí)，掌握了HTML 5網(wǎng)頁(yè)中超鏈接、音頻、視

3、頻等標(biāo)簽元素，下面通過(guò)制作HTML 5音樂(lè)播放器來(lái)應(yīng)用這些網(wǎng)頁(yè)元素，效果如圖所示。Step01 啟動(dòng)Sublime程序，新建并保存文件名稱(chēng)為4-9.html。Step02 輸入代碼如下：1 2 3 4 5 HTML5音樂(lè)播放器6 7 a:hovertext-decoration: none;font-size: 14px;color: red;8 9 10 11 歌曲欣賞12 13 14 15 祖國(guó)萬(wàn)歲16 我愛(ài)你中國(guó)17 感恩祖國(guó)18 共和國(guó)的日子19 20 21 var audio = document.getElementById(audio);22 function one()23 a

4、udio.src = media/01.mp3;24 audio.play(); 25 26 function two()27 audio.src=media/02.mp3;28 audio.play(); 29 30 function three()31 audio.src=media/03.mp3;32 audio.play(); 33 34 function four()35 audio.src=media/04.mp3;36 audio.play(); 37 38 39 40 二、項(xiàng)目拓展此項(xiàng)目拓展創(chuàng)建視頻播放器，效果所示。Step01 用Sublime編輯器新建并保存文件4-10.h

5、tml。Step02 輸入代碼如下：1 2 3 4 HTML5視頻播放器5 6 7 pwidth:680px;8 9 10 11 HTML5視頻播放器 12 13 親，您的瀏覽器不支持html5的video標(biāo)簽！14 15 16 播放17 暫停18 快進(jìn)10秒19 快退10秒20 無(wú)聲21 加速播放22 減速播放23 正常播放24 調(diào)高嗓門(mén)25 調(diào)低嗓門(mén)26 27 28 var video = document.getElementById(video);29 /播放30 function bofang()31 video.play();32 33 /暫停34 function zanting

6、()35 video.pause();36 37 /快進(jìn)10秒38 function kuaijin()39 video.currentTime += 10;40 41 /快退10秒42 function kuaitui()43 video.currentTime -= 10;44 45 /有聲和無(wú)聲 即靜音和不靜音46 function shutup(obj)47 if(video.muted)48 obj.innerHTML = 無(wú)聲;49 video.muted = false;50 else51 obj.innerHTML = 有聲;52 video.muted = true;53 5

7、4 55 function speedup()56 video.playbackRate = 3;57 58 function speeddown()59 video.playbackRate = 1/3;60 61 function normal()62 video.playbackRate = 1;63 64 function upper()65 video.volume +=0.1;/聲音值得范圍是0-166 67 function lower()68 video.volume -=0.1;69 70 71 72 Step03 再次保存文件后，在頁(yè)面中右擊，從彈出的快捷菜單中選擇“在瀏覽

8、器中打開(kāi)”命令，效果如圖所示。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)的學(xué)生與老師互動(dòng)，共同完成操作任務(wù)，借此查看教學(xué)效果。知識(shí)歸納通過(guò)項(xiàng)目實(shí)施和項(xiàng)目拓展制作了HTML 5音頻和視頻播放器兩個(gè)案例，學(xué)習(xí)了在網(wǎng)頁(yè)中添加超鏈接、音頻、視頻和控制音視頻對(duì)象的屬性和方法，掌握了、等標(biāo)簽的使用方法。標(biāo)簽或?qū)傩愿袷交蛴梅ㄕf(shuō)明標(biāo)簽超鏈接文字超鏈接標(biāo)簽href屬性表示鏈接地址，

9、鏈接地址所指向的鏈接類(lèi)型包括圖片文件、網(wǎng)站地址、FTP地址、電子郵件等標(biāo)簽屬性target屬性控制瀏覽器窗口的打開(kāi)方式，target屬性值有四個(gè)：_self、_blank、_top、_parent標(biāo)簽和標(biāo)簽創(chuàng)建熱點(diǎn)區(qū)域標(biāo)簽name屬性為區(qū)域命名，設(shè)置值必須與標(biāo)簽的usemap屬性值相同創(chuàng)建熱點(diǎn)區(qū)域?qū)傩評(píng)semap屬性建立圖片熱點(diǎn)區(qū)域時(shí)，必須插入圖片且為圖片增加usemap屬性，屬性值必須以“#”開(kāi)頭，加上名稱(chēng)shape屬性rect（矩形）circle（圓形）poly（多邊形）coords屬性coords=x1,y1,x2,y2coords=x,y,rcoords=x1,y1,x2,y2,x3,

10、y3標(biāo)簽添加音頻標(biāo)簽src屬性定義要播放的音頻地址標(biāo)簽的常見(jiàn)屬性controls屬性提供添加播放、暫停和音量控件的屬性autoplay屬性出現(xiàn)該屬性，音頻在就緒后馬上播放loop屬性出現(xiàn)該屬性，每當(dāng)音頻結(jié)束時(shí)重新開(kāi)始播放preload屬性出現(xiàn)該屬性，音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用autoplay，則忽略該屬性。preload屬性值有三種：auto、meta、none標(biāo)簽添加視頻標(biāo)簽src屬性定義要播放的視頻地址標(biāo)簽的常見(jiàn)屬性controls屬性提供添加播放、暫停和音量控件的屬性autoplay屬性出現(xiàn)該屬性，視頻在就緒后馬上播放height屬性設(shè)置視頻播放器的高度width屬性設(shè)置視頻播放器的寬度loop屬性出現(xiàn)該屬性，媒介文件完成播放后再次開(kāi)始播放preload屬性出現(xiàn)該屬性，視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用autoplay，則忽略該屬性。preload屬性值有三種：auto、meta、nonemuted屬性設(shè)置視頻的音頻輸出應(yīng)該被靜音poster屬性設(shè)置視頻下載時(shí)顯示的圖像，或在用戶(hù)點(diǎn)擊播放按鈕前顯示的圖像教師講授，學(xué)生歸納總結(jié)，并作適