第課應用HTML5第課應用HTML5中的圖像及多媒體的基基本本PAGE853153215321應用HTML5中的圖像及多媒體第課PAGE75453212應用HTML55453212應用HTML5中的圖像及多媒體第課PAGE1

課題應用HTML5中的圖像及多媒體課時2課時（90min）教學目標知識技能目標：（1）學習在網頁中應用圖像的方法（2）了解HTML5中流的使用（3）掌握在網頁中使用音頻、視頻的方法思政育人目標：提高學生在邏輯思維和辯證思維方面的認識，培養出學生細心謹慎的學習態度以及處理事情大局觀的處理方法，分清主要矛盾和次要矛盾教學重難點教學重點：學習網頁中應用圖像、音頻、視頻的方法和操作流程教學難點：在網頁中插入圖像、音頻、視頻教學方法講授法、啟發法、問答法、演示法、討論法、練習法教學用具電腦、投影儀、多媒體課件、教材教學設計第1節課：知識講解（20min）第2節課：問題導入（4min）知識講解（24min）

課堂練習（10min）

課堂小結（5min）

作業布置（2min）教學過程主要教學內容及步驟設計意圖第一節課考勤

（2min）【教師】清點上課人數，記錄好考勤【學生】班干部報請假人員及原因培養學生的組織紀律性，掌握學生的出勤情況導入新知

（4min）【教師】提出問題，引出新知識點前面介紹的都是對文本進行操作，那如何在HTML5中插入圖像、圖標？如何使得HTML5網頁內容更加的豐富、美觀，圖像和圖標的布局又應該如何使用【學生】思考、發言【教師】總結發言這個時候就可以利用HTML5中提供的圖像等標簽來對對象進行處理，簡化操作用問題導入，通過問答的方式，讓學生主動思考如何在HTML5中插入圖像、圖標知識講解

（20min）【教師】介紹添加圖像與圖標<imgsrc="url"alt="代替文本"/>【教師】演示【例3-1】操作流程，實現圖3-1效果<imgsrc="images/p1.jpg"alt="清明上河圖(局部)"/>【教師】演示【例3-2】操作流程，實現圖3-2效果<title>名畫賞析——清明上河圖（局部）</title><linkrel="shortcuticon"href="images/favicon.ico"/><linkrel="shortcuticon"href="圖標地址"/>【學生】聆聽、記錄、思考通過講解知識點，讓學生初步了解HTML5中對于圖像與圖標的操作課堂練習

（19min）【教師】布置課堂練習【學生】聆聽、思考、提問【教師】回答學生提問，給出提示【學生】完成課堂練習【教師】給出參考答案，講解課堂練習【學生】聆聽老師講解，修改練習內容利用練習法，加強學生對HTML5中圖像、圖標標簽的理解第二節課問題導入

（4min）【教師】提出問題，讓學生思考上一節課，我們所學習的都是對圖像、圖標等對象的處理，但是在通常的HTML5的網頁中，可以經常看到多媒體等對象，比如視屏、音頻等，這些對象的出現讓HTML5網頁中的內容充滿了動態美學，那么，對于此類對象，在HTML5語言中應該如何處理呢【學生】聆聽、思考、討論通過循循善誘的指導方式，告訴學生，現有解決方案存在的的不足，引導學生對解決方案的思考知識講解

（24min）【教師】講述HTML5中的添加流在HTML5中，新增了流標簽<figure>，它表示頁面中一塊獨立的內容，如圖像、圖表、代碼片段等。其中的內容應與網頁主體內容相關但又獨立于上下文，在頁面中顯示為具有左右縮進的內容塊。<figure>標簽中有一個表示流標題的<figcaption>標簽，它位于<figure>標簽的首行或尾行。一個<figure>標簽中只允許有一個<figcaption>標簽，不必要時可以省略【教師】演示【例3-3】操作流程，實現圖3-4效果在例3-2的頁面中應用流（部分代碼），頁面效果如圖3-4所示。<figure> <figcaption>清明上河園——張擇端雕像</figcaption> <imgsrc="images/p2.jpg"alt="張擇端"height="250px"/> <p>張擇端，字正道，漢族，北宋繪畫大師。宣和年間任翰林待詔，擅畫樓觀、屋宇、林木、人物。所作風俗畫中市肆、橋梁、街道、城郭刻畫細致，界畫精確，豆人寸馬，形象如生。他自幼好學，早年游學汴京(今河南開封)，后習繪畫。</p></figure>圖3-4應用流的頁面效果【學生】聆聽、思考、理解【教師】講解HTML5中的嵌入多媒體文件1．嵌入音頻在HTML5中，使用<audio>標簽嵌入音頻文件，具體格式為：<audiosrc="音頻地址"controls="controls">說明文字</audio>其中，src屬性表示音頻文件的地址；controls屬性表示顯示音頻的播放控件，其值為controls；說明文字會在不支持<audio>標簽的瀏覽器中顯示。【教師】演示【例3-5】操作流程，實現圖3-5效果在網頁中嵌入音頻（部分代碼），頁面效果如圖3-5所示。<audiosrc="media/a1.mp3"controls="controls">打字音效</audio>圖3-5在網頁中嵌入音頻的頁面效果2．嵌入視頻在HTML5中，使用<video>標簽嵌入視頻文件，具體格式為：<videosrc="視頻地址"controls="controls">說明文字</video>其中各屬性的含義與<audio>標簽相同。【教師】演示【例3-6】操作流程，實現圖3-6效果在網頁中嵌入視頻（部分代碼），頁面效果如圖3-6所示。<videosrc="media/v1.mp4"controls="controls">風景視頻</video>圖3-6在網頁中嵌入視頻的頁面效果【學生】聆聽、思考、理解通過講解知識點，讓學生進一步了解HTML5中流和多媒體文件的使用課堂練習

（10min）【教師】設置課堂練習內容教師講述游戲內容并且給出一部分代碼，以小組為單位，看哪一組優先完成游戲為“圖書簡介”頁面添加圖像及視頻本作業布置通過為項目2中創建的“圖書簡介”頁面添加圖像及視頻內容，練習在網頁中插入圖像、視頻的方法【學生】思考、完成課堂練習內容【教師】統計小組成績，讓優秀小組上臺講述學習心得【學生】講述學習心得通過課堂練習，鞏固所學知識，并將所學知識與實際相結合課堂小結

（5min）【教師】總結本節課的知識點本節課學習了在網頁中應用圖像的方法、HTML5中流的使用，以及在網頁中使用音頻、視頻的方法。希望大家在課后多加練習，鞏固所學知識。【學生】聆聽、思考、記錄通過復習總結，讓學生清楚的梳理這節課學習的內容作業布置（2min）【教師】布置課后作業完成H