1、（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目四-1電子教案（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目四-1電子教案（中職）Web前端設(shè)計(jì)基礎(chǔ) 項(xiàng)目四-1電子教案教學(xué)課題項(xiàng)目4 網(wǎng)頁(yè)中的多媒體4.1項(xiàng)目描述、4.2知識(shí)準(zhǔn)備授課班級(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é)生的專業(yè)素質(zhì)；2.培養(yǎng)學(xué)生的團(tuán)隊(duì)合作精神。學(xué)情分析通過(guò)前面知識(shí)的學(xué)習(xí)，已經(jīng)掌握了代碼編輯工具的使用，掌握了HTML的基本結(jié)構(gòu)

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

3、列行1.URL概念URL為Uniform Resource Locator的縮寫(xiě)，翻譯為“統(tǒng)一資源定位器”，它是從互聯(lián)網(wǎng)上得到資源位置和訪問(wèn)方法的一種表示，互聯(lián)網(wǎng)上的每個(gè)文件都有一個(gè)唯一的URL，它包含的信息指出文件的位置以及瀏覽器應(yīng)該怎么處理它。2.超鏈接標(biāo)簽在HTML 5中建立超鏈接使用的標(biāo)簽為。超鏈接的基本結(jié)構(gòu)如下：超鏈接文字【例4-1】target屬性值_blank實(shí)例，代碼如下所示。target屬性_blank實(shí)例新窗口打開(kāi)百度在瀏覽器中預(yù)覽效果如圖所示。單擊超鏈接后如圖4-2所示。3.創(chuàng)建錨點(diǎn)鏈接所謂錨點(diǎn)鏈接，就是點(diǎn)擊某一個(gè)超鏈接，它就會(huì)跳到當(dāng)前頁(yè)面的某一部分?！纠?-2】錨點(diǎn)鏈接

4、實(shí)例，代碼如下所示。1 2 3 4 5 錨點(diǎn)鏈接實(shí)例6 7 8 WEB前端設(shè)計(jì)教程目錄9 10 項(xiàng)目一11 項(xiàng)目二12 項(xiàng)目三13 項(xiàng)目四14 項(xiàng)目五15 項(xiàng)目六16 項(xiàng)目七17 項(xiàng)目八18 19 項(xiàng)目一20 本項(xiàng)目講解的內(nèi)容是 . .21 項(xiàng)目二22 本項(xiàng)目講解的內(nèi)容是 . .23 項(xiàng)目三24 本項(xiàng)目講解的內(nèi)容是 . .25 項(xiàng)目四26 本項(xiàng)目講解的內(nèi)容是 . .27 項(xiàng)目五28 本項(xiàng)目講解的內(nèi)容是 . .29 項(xiàng)目六30 本項(xiàng)目講解的內(nèi)容是 . .31 項(xiàng)目七32 本項(xiàng)目講解的內(nèi)容是 . .33 項(xiàng)目八34 本項(xiàng)目講解的內(nèi)容是 . .35 36 在瀏覽器中預(yù)覽效果如圖所示。4.創(chuàng)建熱點(diǎn)區(qū)域

5、在瀏覽網(wǎng)頁(yè)時(shí)，當(dāng)單擊某圖片的不同區(qū)域就會(huì)鏈接到不同的目標(biāo)頁(yè)面，這就是圖片的熱點(diǎn)區(qū)域。在HTML 5中可以為圖片創(chuàng)建三種類型的熱點(diǎn)區(qū)域：矩形、圓形和多邊形。創(chuàng)建熱點(diǎn)區(qū)域使用和標(biāo)簽，其結(jié)構(gòu)如下：【例4-3】創(chuàng)建熱點(diǎn)區(qū)域?qū)嵗?，代碼如下所示。1 2 3 4 5 熱點(diǎn)區(qū)域?qū)嵗? 7 8 9 10 11 12 13 14 15 在瀏覽器中預(yù)覽效果如圖所示。二、添加音頻文件1. 概述audio標(biāo)簽主要是定義播放聲音文件和音頻流的標(biāo)準(zhǔn)。它支持Ogg、MP3和WAV三種音頻格式。在HTML 5中播放音頻，結(jié)構(gòu)如下：2.在網(wǎng)頁(yè)中添加音頻文件在網(wǎng)頁(yè)中添加音頻文件時(shí)，根據(jù)自己的需求可以添加不同類型的音頻文件，如添加自

6、動(dòng)播放的音頻文件、添加帶有控件的音頻文件、添加循環(huán)播放的音頻文件和添加預(yù)播放的音頻文件。【例4-4】在網(wǎng)頁(yè)中添加音頻文件實(shí)例，代碼如下所示。1 2 3 4 5 網(wǎng)頁(yè)中添加音頻文件6 7 8 自動(dòng)播放的音頻文件9 10 帶有控件的音頻文件11 12 循環(huán)播放的音頻文件13 14 15 上面第8-13行代碼可以根據(jù)HTML 5允許部分屬性值的屬性省略的新規(guī)定，可以簡(jiǎn)寫(xiě)為如下代碼：8 自動(dòng)播放的音頻文件9 10 帶有控件的音頻文件11 12 循環(huán)播放的音頻文件13 在瀏覽器中預(yù)覽效果如圖所示?！纠?-5】在網(wǎng)頁(yè)中添加預(yù)播放的音頻文件實(shí)例，代碼如下所示。1 2 3 4 5 添加預(yù)播放的音頻文件6 7

7、8 添加預(yù)播放的音頻文件9 10 11 在瀏覽器中預(yù)覽效果如圖所示。三、添加視頻文件1.標(biāo)簽概述標(biāo)簽定義了播放視頻文件或視頻流的標(biāo)準(zhǔn)，它支持三種視頻格式，分別為Ogg、MPEG4和WebM。在HTML 5網(wǎng)頁(yè)中播放視頻，結(jié)構(gòu)如下：2.在網(wǎng)頁(yè)中添加視頻文件在網(wǎng)頁(yè)中添加視頻文件時(shí)，根據(jù)自己的需求可以添加不同類型的視頻文件，如添加自動(dòng)播放的視頻文件、添加帶有控件的視頻文件、添加循環(huán)播放的視頻文件和添加預(yù)播放的視頻文件，另外還可以設(shè)置視頻文件的高度和寬度。【例4-6】在網(wǎng)頁(yè)中添加視頻文件實(shí)例，代碼如下所示。1 2 3 4 5 網(wǎng)頁(yè)中添加視頻文件6 7 8 自動(dòng)播放的視頻文件9 10 帶有控件的視頻文件

8、11 12 循環(huán)播放的視頻文件13 14 15 在瀏覽器中預(yù)覽效果如圖所示?！纠?-7】在網(wǎng)頁(yè)中添加預(yù)播放的視頻文件實(shí)例，代碼如下所示。1 2 3 4 5 添加預(yù)播放的視頻文件6 7 8 添加預(yù)播放的視頻文件9 10 11 在瀏覽器中預(yù)覽效果如圖所示。3.設(shè)置視頻文件的高度和寬度使用width和height屬性可以設(shè)置視頻文件的顯示寬度和高度，單位為像素?！纠?-8】設(shè)置視頻文件的高度和寬度實(shí)例，代碼如下所示。1 2 3 4 5 設(shè)置視頻文件的高度和寬度6 7 8 設(shè)置視頻文件的高度和寬度9 10 11 12 在瀏覽器中預(yù)覽效果如圖所示。教師操作演示，學(xué)生觀看、實(shí)訓(xùn)。必要時(shí)要求一個(gè)具有典型特質(zhì)

9、的學(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í)歸納本節(jié)課學(xué)習(xí)了在網(wǎng)頁(yè)中添加超鏈接、音頻、視頻和控制音視頻對(duì)象的屬性和方法，掌握了、等標(biāo)簽的使用方法。標(biāo)簽或?qū)傩愿袷交蛴梅ㄕf(shuō)明標(biāo)簽超鏈接文字超鏈接標(biāo)簽href屬性表示鏈接地址，鏈接地址所指向的鏈接類型包括圖片文件、網(wǎng)站地址、FTP地址、電子郵件等標(biāo)簽屬性target屬性控制瀏覽器窗口的打開(kāi)方式，target屬性值有四個(gè)：

10、_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)頭，加上名稱shape屬性rect（矩形）circle（圓形）poly（多邊形）coords屬性coords=x1,y1,x2,y2coords=x,y,rcoords=x1,y1,x2,y2,x3,y3標(biāo)簽添加音頻標(biāo)簽src屬性定義要播放的音頻地址標(biāo)簽的常見(jiàn)屬性controls屬性提供添加播放、暫停和音量控件的屬性autoplay屬性出現(xiàn)該屬

11、性，音頻在就緒后馬上播放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í)顯示的圖像，或在用戶點(diǎn)擊播放按鈕前顯示的圖像教師講授，學(xué)生歸納總結(jié)，并作適當(dāng)?shù)墓P記。課后作業(yè)一、選擇題1.下列_標(biāo)簽與超鏈接相關(guān)。A ref B link C a D top2.下列_為正確的超鏈接標(biāo)簽。A B C D 3.如果想在單擊超鏈接后將目標(biāo)網(wǎng)頁(yè)在新窗口打開(kāi)，_是正確的。A targe