模块7 图像与音视频

《HTML5+CSS3网页设计技术》授课教案授课教案学校******大学（学院）任课教师***授课题目模块七图像与音视频授课时间长度6学时所用教材HTM5+CSS3网页设计技术，黄玉春主编；中国科学技术出版社教学目标｜知识目标｜（1）掌握插入图像的方式，并能正确应用图像。（2）掌握使用picture标签解决响应式图片的问题。（3）掌握HTML5中音视频的插入方式。（4）理解图像与音视频也是网页元素，也能用CSS来定义它们的样式。｜能力目标｜（1）能够运用图像标签正确插入图像。（2）能够熟练运用HTML5中的音频与视频标签，正确运用音视频丰富网页。（3）明确图像与音视频作为网页元素可以用CSS样式控制其外观、位置等。｜素质目标｜（1）通过优秀书画作品与网站设计作品的赏析，提升自身的艺术表达与审美能力。（2）培养自身的辨别能力。图像可以让用户的注意力更集中，选图一定要恰当，才能达到增强顾客体验感的目的。教学重点（1）网页中插入图像并用CSS设置图像格式。（2）网页中插入视频，并于设置其属性。教学难点列表和超链接样式的设置。教学方法任务引入法、课堂讨论、理论讲解、实操训练教学用具多媒体教学设备、教材、课件、实训素材教学过程主要教学内容及步骤考勤教师使用App或者点名等方式进行签到；学生按照老师要求签到任务导入打开一个有图像或音视频的网页，查看音视频的控制属性，引出本任务教学内容。教学内容任务一网页中插入图像并定义样式图像可以作为网页的背景使用，也可以作为内容插入。作为背景图像的使用，前面的盒子模型中已讲解。一、常见图像格式这里只介绍网页中常用的图像格式，其它格式可自行查阅研究。1.jpg格式扩展名为.jpg或.jpeg，是一种有损的压缩格式（把肉眼不容易观察出来的细节丢弃了）。主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。使用场景：对图片细节没有极高要求的场景，例如：网站的新闻图像、产品宣传图、大篇幅的背景图等。2.png格式扩展名为.png，是一种无损的压缩格式，能够更高质量的保存图片。主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。使用场景：①想让图片能透视背景；②想更高质量的呈现图片。例如：公司logo图、重要配图等。3.gif格式扩展名为.gif，仅支持256种颜色，色彩呈现不是很完整。主要特点：支持的颜色较少、支持简单透明背景（不支持半透明）、支持动态图。使用场景：网页中的动态图片。4.webp格式扩展名为.webp，谷歌推出的一种格式，专门用来在网页中呈现图片。主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。使用场景：网页中的各种图片。5.base64格式本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开。原理：把图片进行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-循环播放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由微软开发的一种音频格式，对比mp3，比特率相同时，wma音质更好些，可以达到无损压缩的效果Wavaudio/wavogg相比MP3它可以在相对较低的数据速率下实现比MP3更