《HTML5+CSS3網頁設計技術》授課教案授課教案學校******大學（學院）任課教師***授課題目模塊七圖像與音視頻授課時間長度6學時所用教材HTM5+CSS3網頁設計技術，黃玉春主編；中國科學技術出版社教學目標｜知識目標｜（1）掌握插入圖像的方式，并能正確應用圖像。（2）掌握使用picture標簽解決響應式圖片的問題。（3）掌握HTML5中音視頻的插入方式。（4）理解圖像與音視頻也是網頁元素，也能用CSS來定義它們的樣式。｜能力目標｜（1）能夠運用圖像標簽正確插入圖像。（2）能夠熟練運用HTML5中的音頻與視頻標簽，正確運用音視頻豐富網頁。（3）明確圖像與音視頻作為網頁元素可以用CSS樣式控制其外觀、位置等。｜素質目標｜（1）通過優(yōu)秀書畫作品與網站設計作品的賞析，提升自身的藝術表達與審美能力。（2）培養(yǎng)自身的辨別能力。圖像可以讓用戶的注意力更集中，選圖一定要恰當，才能達到增強顧客體驗感的目的。教學重點（1）網頁中插入圖像并用CSS設置圖像格式。（2）網頁中插入視頻，并于設置其屬性。教學難點列表和超鏈接樣式的設置。教學方法任務引入法、課堂討論、理論講解、實操訓練教學用具多媒體教學設備、教材、課件、實訓素材教學過程主要教學內容及步驟考勤教師使用App或者點名等方式進行簽到；學生按照老師要求簽到任務導入打開一個有圖像或音視頻的網頁，查看音視頻的控制屬性，引出本任務教學內容。教學內容任務一網頁中插入圖像并定義樣式圖像可以作為網頁的背景使用，也可以作為內容插入。作為背景圖像的使用，前面的盒子模型中已講解。一、常見圖像格式這里只介紹網頁中常用的圖像格式，其它格式可自行查閱研究。1.jpg格式擴展名為.jpg或.jpeg，是一種有損的壓縮格式（把肉眼不容易觀察出來的細節(jié)丟棄了）。主要特點：支持的顏色豐富、占用空間較小、不支持透明背景、不支持動態(tài)圖。使用場景：對圖片細節(jié)沒有極高要求的場景，例如：網站的新聞圖像、產品宣傳圖、大篇幅的背景圖等。2.png格式擴展名為.png，是一種無損的壓縮格式，能夠更高質量的保存圖片。主要特點：支持的顏色豐富、占用空間略大、支持透明背景、不支持動態(tài)圖。使用場景：①想讓圖片能透視背景；②想更高質量的呈現圖片。例如：公司logo圖、重要配圖等。3.gif格式擴展名為.gif，僅支持256種顏色，色彩呈現不是很完整。主要特點：支持的顏色較少、支持簡單透明背景（不支持半透明）、支持動態(tài)圖。使用場景：網頁中的動態(tài)圖片。4.webp格式擴展名為.webp，谷歌推出的一種格式，專門用來在網頁中呈現圖片。主要特點：具備上述幾種格式的優(yōu)點，但兼容性不太好，一旦使用務必要解決兼容性問題。使用場景：網頁中的各種圖片。5.base64格式本質：一串特殊的文本，要通過瀏覽器打開，傳統(tǒng)看圖應用通常無法打開。原理：把圖片進行base64編碼，形成一串文本。如何生成：靠一些工具或網站。如何使用：直接作為img標簽的src屬性的值即可，并且不受文件位置的影響。使用場景：一些較小的圖片，或者需要和網頁一起加載的圖片。二、<img>標簽HTML使用<img>標簽插入圖片，img是image的簡稱。<img>是自閉合標簽，只包含屬性，沒有結束標簽。<img>標簽的語法格式如下：<imgsrc="url"alt="text"width="150"height="150">常用屬性如下。（1）src：圖片路徑（又稱：圖片地址），指明圖片的具體位置。（2）alt：圖片描述，在瀏覽器無法載入圖像時，替換文本屬性告訴讀者失去的信息。（3）title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)。（4）width：圖片寬度，單位是像素，單位可以省略。例如：200px或200。（5）height：圖片高度，單位是像素，單位可以省略。例如：200px或200。說明：（1）img標簽默認為行內元素。（2）width和height屬性只是圖片的尺寸，不會改變圖片原始文件的大小。（3）盡量不同時修改圖片的寬和高，可能會造成比例失調。（4）寬高等外觀樣式的設置盡量交給CSS完成。三、<picture>標簽picture標簽是HTML5新增的元素，用于提供響應式圖片的解決方案。它允許根據不同的設備和屏幕尺寸，選擇合適的圖片進行展示，從而更好的用戶體驗。picture標簽一般用法如下：<picture><sourcemedia="(min-width:650px)"srcset="demo1.jpg"><sourcemedia="(min-width:465px)"srcset="demo2.jpg"><imgsrc="img_girl.jpg"></picture>上面的代碼根據屏幕匹配的不同尺寸顯示不同圖片，如果沒有匹配到或瀏覽器不支持picture屬性則使用img元素。四、用CSS來修飾圖像1.CSS美化圖像在網頁設計中，經常用CSS的盒模型的寬高、邊框、圓角等屬性來修飾圖像。img{padding:5px;border:2pxsolid#ccc;width:200px;border-radius:50%;}2.CSS3的filter屬性CSS的filter（濾鏡）屬性用來為元素添加可視效果（如模糊與飽和度等），稱為圖像濾鏡。filter(濾鏡)屬性一般格式如下：filter:none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();任務二網頁中插入視頻與音頻HTML5標準的提出，其中有許多的新特性，包括<video>和<audio>標簽，以及一些JavaScript和APIs用于對其進行控制，在Web中使用音頻和視頻提供了便利。一、向網頁中插入視頻<video>標簽可以用于定義視頻，且提供了播放、暫停、音量控件來控制視頻。當前，<video>元素支持三種視頻格式：MP4，WebM和Ogg。主流瀏覽器基本都支持。常用視頻格式如表7-2所示。表7-2常用視頻格式格式MIME-type描述MP4video/mp4帶有H.264視頻編碼和AAC音頻編碼的MPEG4文件WebMvideo/webm帶有VP8視頻編碼和Vorbis音頻編碼的WebM文件Oggvideo/ogg帶有Theora視頻編碼和Vorbis音頻編碼的Ogg文件基本語法：<videosrc="視頻URL地址"></video>默認情況下，它在瀏覽器中顯示為圖像，還需要各種屬性來添加視頻播放控件、視頻的尺寸、自動播放等。視頻的主要屬性如表7-3所示。表7-3視頻主要屬性

屬性值描述srcURL地址視頻地址width像素值設置視頻播放器的寬度height像素值設置視頻播放器的高度controls-向用戶顯示視頻控件（比如播放/暫停按鈕）muted-視頻靜音autoplay-視頻自動播放（現在瀏覽器一般只允許靜音下自動播放）loop-循環(huán)播放posterURL地址視頻封面preloadauto/metadata/none視頻預加載，如果使用autoplay，則忽略該屬性。none:不預加載視頻。metadata:僅預先獲取視頻的元數據（例如長度）。auto:可以下載整個視頻文件，即使用戶不希望使用它二、向網頁中插入音頻<audio>元素用于在文檔中嵌入音頻內容。<audio>元素可以包含一個或多個音頻資源，這些音頻資源可以使用<source>元素來進行描述：瀏覽器將會選擇最合適的一個來使用。屬性與使用方式與<video>標簽相似。目前，<audio>元素支持三種音頻格式文件：MP3，Wav和Ogg。常用音頻格式如表7-4所示。表7-4常用音頻格式FormatMIME-type描述MP3audio/mpeg最常見的一種音頻格式，但是是一種有損格式，高頻部分音質損失較嚴重Oggaudio/ogg由微軟開發(fā)的一種音頻格式，對比mp3，比特率相同時，wma音質更好些，可以達到無損壓縮的效果Wavaudio/wavogg相比MP3它可以在相對較低的數據速率下實現比MP3更