1、（中職）Web前端設計基礎 項目四-1電子教案（中職）Web前端設計基礎 項目四-1電子教案（中職）Web前端設計基礎 項目四-1電子教案教學課題項目4 網頁中的多媒體4.1項目描述、4.2知識準備授課班級授課時間教學目標知識目標1.掌握在網頁中插入超鏈接的方法；2.掌握在網頁中制作音頻和視頻播放器的方法；3.掌握CSS屬性的設置。能力目標1.培養學生自主學習、分析問題和解決問題的能力；2.培養學生熟練運用所學知識的能力。德育目標1.鼓勵學生主動學習，提高學習興趣，提升學生的專業素質；2.培養學生的團隊合作精神。學情分析通過前面知識的學習，已經掌握了代碼編輯工具的使用，掌握了HTML的基本結構

2、、圖文混排的方法以及網頁中表格的制作方法。HTML 5中新增加了音頻和視頻標簽，在本項目中學習創建超鏈接和制作音頻、視頻播放器。教學重點1.創建超鏈接、錨點鏈接和熱點鏈接；2.插入音視頻文件的方法；3.制作音樂和視頻播放器；4.CSS屬性設置。教學難點1.創建熱點鏈接；2.制作音樂和視頻播放器；3.CSS屬性設置。教學方法項目教學法、多媒體輔助教學法、講練結合法教學過程教學環節教學內容師生活動新課導入給學生展示一個網頁頁面，通過頁面中的超鏈接、音視頻等多媒體，導入本節課的內容。教師提出問題，學生可分組討論，協作探究。技能學習單元格列行單元格列行單元格列行一、建立超鏈接單元格列行單元格列行單元格

3、列行1.URL概念URL為Uniform Resource Locator的縮寫，翻譯為“統一資源定位器”，它是從互聯網上得到資源位置和訪問方法的一種表示，互聯網上的每個文件都有一個唯一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎么處理它。2.超鏈接標簽在HTML 5中建立超鏈接使用的標簽為。超鏈接的基本結構如下：超鏈接文字【例4-1】target屬性值_blank實例，代碼如下所示。target屬性_blank實例新窗口打開百度在瀏覽器中預覽效果如圖所示。單擊超鏈接后如圖4-2所示。3.創建錨點鏈接所謂錨點鏈接，就是點擊某一個超鏈接，它就會跳到當前頁面的某一部分。【例4-2】錨點鏈接

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

5、在瀏覽網頁時，當單擊某圖片的不同區域就會鏈接到不同的目標頁面，這就是圖片的熱點區域。在HTML 5中可以為圖片創建三種類型的熱點區域：矩形、圓形和多邊形。創建熱點區域使用和標簽，其結構如下：【例4-3】創建熱點區域實例，代碼如下所示。1 2 3 4 5 熱點區域實例6 7 8 9 10 11 12 13 14 15 在瀏覽器中預覽效果如圖所示。二、添加音頻文件1. 概述audio標簽主要是定義播放聲音文件和音頻流的標準。它支持Ogg、MP3和WAV三種音頻格式。在HTML 5中播放音頻，結構如下：2.在網頁中添加音頻文件在網頁中添加音頻文件時，根據自己的需求可以添加不同類型的音頻文件，如添加自

6、動播放的音頻文件、添加帶有控件的音頻文件、添加循環播放的音頻文件和添加預播放的音頻文件。【例4-4】在網頁中添加音頻文件實例，代碼如下所示。1 2 3 4 5 網頁中添加音頻文件6 7 8 自動播放的音頻文件9 10 帶有控件的音頻文件11 12 循環播放的音頻文件13 14 15 上面第8-13行代碼可以根據HTML 5允許部分屬性值的屬性省略的新規定，可以簡寫為如下代碼：8 自動播放的音頻文件9 10 帶有控件的音頻文件11 12 循環播放的音頻文件13 在瀏覽器中預覽效果如圖所示。【例4-5】在網頁中添加預播放的音頻文件實例，代碼如下所示。1 2 3 4 5 添加預播放的音頻文件6 7

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

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

9、的學生與老師互動，共同完成操作任務，借此查看教學效果。教師操作演示，學生觀看、實訓。必要時要求一個具有典型特質的學生與老師互動，共同完成操作任務，借此查看教學效果。教師操作演示，學生觀看、實訓。必要時要求一個具有典型特質的學生與老師互動，共同完成操作任務，借此查看教學效果。知識歸納本節課學習了在網頁中添加超鏈接、音頻、視頻和控制音視頻對象的屬性和方法，掌握了、等標簽的使用方法。標簽或屬性格式或用法說明標簽超鏈接文字超鏈接標簽href屬性表示鏈接地址，鏈接地址所指向的鏈接類型包括圖片文件、網站地址、FTP地址、電子郵件等標簽屬性target屬性控制瀏覽器窗口的打開方式，target屬性值有四個：

10、_self、_blank、_top、_parent標簽和標簽創建熱點區域標簽name屬性為區域命名，設置值必須與標簽的usemap屬性值相同創建熱點區域屬性usemap屬性建立圖片熱點區域時，必須插入圖片且為圖片增加usemap屬性，屬性值必須以“#”開頭，加上名稱shape屬性rect（矩形）circle（圓形）poly（多邊形）coords屬性coords=x1,y1,x2,y2coords=x,y,rcoords=x1,y1,x2,y2,x3,y3標簽添加音頻標簽src屬性定義要播放的音頻地址標簽的常見屬性controls屬性提供添加播放、暫停和音量控件的屬性autoplay屬性出現該屬

11、性，音頻在就緒后馬上播放loop屬性出現該屬性，每當音頻結束時重新開始播放preload屬性出現該屬性，音頻在頁面加載時進行加載，并預備播放。如果使用autoplay，則忽略該屬性。preload屬性值有三種：auto、meta、none標簽添加視頻標簽src屬性定義要播放的視頻地址標簽的常見屬性controls屬性提供添加播放、暫停和音量控件的屬性autoplay屬性出現該屬性，視頻在就緒后馬上播放height屬性設置視頻播放器的高度width屬性設置視頻播放器的寬度loop屬性出現該屬性，媒介文件完成播放后再次開始播放preload屬性出現該屬性，視頻在頁面加載時進行加載，并預備播放。如果使用autoplay，則忽略該屬性。preload屬性值有三種：auto、meta、nonemuted屬性設置視頻的音頻輸出應該被靜音poster屬性設置視頻下載時顯示的圖像，或在用戶點擊播放按鈕前顯示的圖像教師講授，學生歸納總結，并作適當的筆記。課后作業一、選擇題1.下列_標簽與超鏈接相關。A ref B link C a D top2.下列_為正確的超鏈接標簽。A B C D 3.如果想在單擊超鏈接后將目標網頁在新窗口打開，_是正確的。A targe