《HTML5 CSS3項(xiàng)目開發(fā)案例教程》（袁明蘭）770-5教案 第5課 應(yīng)用HTML5中的圖像及多媒體

第課應(yīng)用HTML5第課應(yīng)用HTML5中的圖像及多媒體的基基本本PAGE853153215321應(yīng)用HTML5中的圖像及多媒體第課PAGE75453212應(yīng)用HTML55453212應(yīng)用HTML5中的圖像及多媒體第課PAGE1

課題應(yīng)用HTML5中的圖像及多媒體課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：（1）學(xué)習(xí)在網(wǎng)頁中應(yīng)用圖像的方法（2）了解HTML5中流的使用（3）掌握在網(wǎng)頁中使用音頻、視頻的方法思政育人目標(biāo)：提高學(xué)生在邏輯思維和辯證思維方面的認(rèn)識(shí)，培養(yǎng)出學(xué)生細(xì)心謹(jǐn)慎的學(xué)習(xí)態(tài)度以及處理事情大局觀的處理方法，分清主要矛盾和次要矛盾教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：學(xué)習(xí)網(wǎng)頁中應(yīng)用圖像、音頻、視頻的方法和操作流程教學(xué)難點(diǎn)：在網(wǎng)頁中插入圖像、音頻、視頻教學(xué)方法講授法、啟發(fā)法、問答法、演示法、討論法、練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材教學(xué)設(shè)計(jì)第1節(jié)課：知識(shí)講解（20min）第2節(jié)課：?jiǎn)栴}導(dǎo)入（4min）知識(shí)講解（24min）

課堂練習(xí)（10min）

課堂小結(jié)（5min）

作業(yè)布置（2min）教學(xué)過程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課考勤

（2min）【教師】清點(diǎn)上課人數(shù)，記錄好考勤【學(xué)生】班干部報(bào)請(qǐng)假人員及原因培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況導(dǎo)入新知

（4min）【教師】提出問題，引出新知識(shí)點(diǎn)前面介紹的都是對(duì)文本進(jìn)行操作，那如何在HTML5中插入圖像、圖標(biāo)？如何使得HTML5網(wǎng)頁內(nèi)容更加的豐富、美觀，圖像和圖標(biāo)的布局又應(yīng)該如何使用【學(xué)生】思考、發(fā)言【教師】總結(jié)發(fā)言這個(gè)時(shí)候就可以利用HTML5中提供的圖像等標(biāo)簽來對(duì)對(duì)象進(jìn)行處理，簡(jiǎn)化操作用問題導(dǎo)入，通過問答的方式，讓學(xué)生主動(dòng)思考如何在HTML5中插入圖像、圖標(biāo)知識(shí)講解

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

（19min）【教師】布置課堂練習(xí)【學(xué)生】聆聽、思考、提問【教師】回答學(xué)生提問，給出提示【學(xué)生】完成課堂練習(xí)【教師】給出參考答案，講解課堂練習(xí)【學(xué)生】聆聽老師講解，修改練習(xí)內(nèi)容利用練習(xí)法，加強(qiáng)學(xué)生對(duì)HTML5中圖像、圖標(biāo)標(biāo)簽的理解第二節(jié)課問題導(dǎo)入

（4min）【教師】提出問題，讓學(xué)生思考上一節(jié)課，我們所學(xué)習(xí)的都是對(duì)圖像、圖標(biāo)等對(duì)象的處理，但是在通常的HTML5的網(wǎng)頁中，可以經(jīng)?？吹蕉嗝襟w等對(duì)象，比如視屏、音頻等，這些對(duì)象的出現(xiàn)讓HTML5網(wǎng)頁中的內(nèi)容充滿了動(dòng)態(tài)美學(xué)，那么，對(duì)于此類對(duì)象，在HTML5語言中應(yīng)該如何處理呢【學(xué)生】聆聽、思考、討論通過循循善誘的指導(dǎo)方式，告訴學(xué)生，現(xiàn)有解決方案存在的的不足，引導(dǎo)學(xué)生對(duì)解決方案的思考知識(shí)講解

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

（10min）【教師】設(shè)置課堂練習(xí)內(nèi)容教師講述游戲內(nèi)容并且給出一部分代碼，以小組為單位，看哪一組優(yōu)先完成游戲?yàn)椤皥D書簡(jiǎn)介”頁面添加圖像及視頻本作業(yè)布置通過為項(xiàng)目2中創(chuàng)建的“圖書簡(jiǎn)介”頁面添加圖像及視頻內(nèi)容，練習(xí)在網(wǎng)頁中插入圖像、視頻的方法【學(xué)生】思考、完成課堂練習(xí)內(nèi)容【教師】統(tǒng)計(jì)小組成績(jī)，讓優(yōu)秀小組上臺(tái)講述學(xué)習(xí)心得【學(xué)生】講述學(xué)習(xí)心得通過課堂練習(xí)，鞏固所學(xué)知識(shí)，并將所學(xué)知識(shí)與實(shí)際相結(jié)合課堂小結(jié)

（5min）【教師】總結(jié)本節(jié)課的知識(shí)點(diǎn)本節(jié)課學(xué)習(xí)了在網(wǎng)頁中應(yīng)用圖像的方法、HTML5中流的使用，以及在網(wǎng)頁中使用音頻、視頻的方法。希望大家在課后多加練習(xí)，鞏固所學(xué)知識(shí)?！緦W(xué)生】聆聽、思考、記錄通過復(fù)習(xí)總結(jié)，讓學(xué)生清楚的梳理這節(jié)課學(xué)習(xí)的內(nèi)容作業(yè)布置（2min）【教師】布置課后作業(yè)完成H