《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块4 网页中的图像与多媒体技术

模块四网页中的图像与多媒体技术目录任务一制作“在线学习网”的平面作品展示页面任务二任务三制作“在线学习网”的广告作品展示页面制作“在线学习网”的多媒体作品展示页面引入知识点4.1认识网页中的图像4.2使用<img>标记插入图像任务1制作“在线学习网”的平面作品展示页面4.1认识网页中的图像在网络带宽的不断提升以及人们的审美情趣越来越高的今天，图像已经成为网页中必不可少的重要元素之一。网页图像运用的好坏，决定了网页设计的成败。任务1制作“在线学习网”的平面作品展示页面4.1认识网页中的图像4.1.1网页常用图像格式了解网页图像的类型和格式是在网页中合理使用图像的基础。图像的文件格式有很多种，但由于受到网络带宽和浏览器的限制，通常在网页中使用的有JPEG、GIF和PNG三种。其中JPEG和GIF图像格式在网页上使用最广，能支持大多数浏览器。任务1制作“在线学习网”的平面作品展示页面4.1认识网页中的图像4.1.2网页图像使用原则目前，虽然宽带在国内普及，但在制作网页时也要在速度和美观之间取得较好地结合点。一般普通的首页应该限制在100KB以内，其他页面最好控制在500KB以内。因为，如果一个网页很大，在浏览器里超过30秒还没有打开，大部分浏览者都会选择放弃。任务1制作“在线学习网”的平面作品展示页面4.2使用<img>标记插入图像在网页中插入图像可以起到美化页面的作用。HTML提供了<img>标记来插入图像。基本语法格式如下：<imgsrc="图像文件路径">任务1制作“在线学习网”的平面作品展示页面4.2使用<img>标记插入图像4.2.1使用标记属性设置图像大小使用<img>标记插入图像，默认情况下将插入原始大小的图像，如果想在插入时修改图像的大小，可以使用height和width属性来实现。基本语法格式如下：<imgsrc="图像文件路径"width="图像的宽度"height="图像的高度">任务1制作“在线学习网”的平面作品展示页面4.2使用<img>标记插入图像4.2.2使用标记属性设置图像描述信息和替换信息设置图像提示信息使用title属性，设置图像的替换信息使用alt属性。基本语法格式如下：<imgsrc="图像文件的路径"title="图像描述信息"alt="图像替换信息">任务1制作“在线学习网”的平面作品展示页面4.2使用<img>标记插入图像4.2.3使用标记属性设置图像的边框默认情况下，插入图像是没有边框的，有时在我们设计网页时为了获得某种效果，需要让图像显示边框。设置图像的边框可以使用图像的border属性。基本语法如下：

<imgsrc="图像文件的路径"border="边框宽度">语法说明："边框宽度"的单位为像素，最小值是1。任务1制作“在线学习网”的平面作品展示页面4.2使用<img>标记插入图像4.2.4使用标记属性设置图像的对齐方式默认情况下，插入图像在水平方向放置在对象的左边，在垂直方向则与baseline（基线）对齐。我们可以使用图像的align属性修改它的对齐方式。基本语法如下：<imgsrc="图像文件的路径"align="对齐方式">任务1制作“在线学习网”的平面作品展示页面4.2使用<img>标记插入图像4.2.5使用标记属性设置图像与周围对象的间距默认情况下，图像与周围对象的水平间距和垂直间距都比较紧凑，显得较为拥挤。这样的间距，很多时候都不符合我们的设计需要。使用图像的hspace属性和vspace属性可以分别设置图像与周围对象的间距。基本语法格式如下：<imgsrc=“图像文件的路径”vspace=“垂直间距数值”hspace=“水平间距数值">任务1制作“在线学习网”的平面作品展示页面任务实现（1）在“在线学习网”平面作品展示页面中插入文字和5张平面作品的图像。（2）设置文字和图像的属性，让网页页面更加美观。任务1制作“在线学习网”的平面作品展示页面引入知识点任务2制作在“在线学习网”的广告作品展示页面4.3使用<object>标记在网页中插入Flash动画4.4使用<embed>标记在网页中插入多媒体内容4.3使用<object>标记在网页中插入Flash动画<object>标记用于包含音频、视频、Javaapplets、ActiveX、PDF以及Flash等对象。<object>标记设计的初衷是取代<img>和<applet>标记。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。<object>标记可用于WindowsIE3.0及以后浏览器或者其他支持ActiveX控件的浏览器。针对不同的浏览器，<object>标记的语法也有所不同，下面分别对它们进行介绍。任务2制作在“在线学习网”的广告作品展示页面1．针对IE9/IE8/IE7/IE6等低版本，基本语法格式如下：<objectclassid="clsid_value"codebase="url"width="value"><paramname="movie"value="media/star.swf"/><paramname="quality"value="high"/><paramname="wmode"value="transparent"/>…</object>任务2制作在“在线学习网”的广告作品展示页面4.3使用<object>标记在网页中插入Flash动画2．针对IE10/IE11和非IE浏览器，基本语法格式如下：<objectclassid="clsid_value"codebase="url"width="value"><paramname="movie"value="media/star.swf"/><paramname="quality"value="high"/><paramname="wmode"value="transparent"/>…<!--[if!IE]>--><objecttype="application/x-shockwave-flash"data="media/star.swf"width="value"height="value"><!--<![endif]--><paramname="quality"value="high"/><paramname="wmode"value="transparent"/>…<!--[if!IE]>--></object><!--<![endif]--></object>任务2制作在“在线学习网”的广告作品展示页面4.3使用<object>标记在网页中插入Flash动画<embed>标记和<object>标记一样，也可以在网页中插入Flash动画、音频、视频等多媒体内容。不同于<object>标记的是，<embed>标记用于NetscapeNavigator2.0及以后的浏览器或者其它支持Netscape插件的浏览器，其中包括IE和Chrome浏览器。Firefox浏览器目前还不支持<embed>标记。基本语法格式如下：<embedsrc="路径"属性1=value1属性2=value2…></embed>任务2制作在“在线学习网”的广告作品展示页面4.4使用<embed>标记在网页中插入多媒体内容任务实现（1）使用<object>在“在线学习网”广告作品展示页面的顶部位置插入Flash动画片头。（2）使用<embed>在“在线学习网”广告作品展示页面中插入“vivo智能手机广告”视频作品。任务2设置“在线学习网”的首页文件头部信息引入知识点任务3制作“在线学习网”的多媒体作品展示页面4.5认识网页中的多媒体内容4.6使用<video>标记在网页中插入多媒体内容4.7使用<audio>标记在网页中插入音频4.5认识网页中的多媒体内容HTML5提供的视频、音频插入方式简单易用，主要通过<video>标记和<audio>标记在页面中插入视频和音频文件，这需要正确选择视频和音频格式。任务3制作“在线学习网”的多媒体作品展示页面4.5.1网页常用视频格式随着网速的大幅提高，越来越多的设计者喜欢在网页中加入视频文件。视频不但使网页越来越精彩及富有动感，同时也越来越受到浏览者的欢迎，像在线影视、视频教程等。在HTML5中插入的视频格式常用的包括MPEG4、Ogg、WebM等。任务3制作“在线学习网”的多媒体作品展示页面4.5认识网页中的多媒体内容4.5.2网页常用音频格式人类获取信息的方式，除了视觉以外就是听觉了。为满足人们听觉的需求，有时需要在网页中插入声音元素，包括插入背景音乐和插入音频文件等。在HTML5中插入的音频格式常用的包括MP3、WAV、OggVorbis等，任务3制作“在线学习网”的多媒体作品展示页面4.5认识网页中的多媒体内容4.6使用<video>标记在网页中插入多媒体内容<video>标记用于在网页中插入视频和音频。基本语法格式如下：<videosrc="视频文件或音频文件的路径"controls="controls">替代内容</video>语法说明：src属性指定多媒体文件，这是一个必设属性。在<video>与</video>之间插入的内容是提供不支持<video>标记的浏览器显示的。任务3制作“在线学习网”的多媒体作品展示页面4.7使用<audio>标记在网页中插入音频<audio>用于在网页中插入音频。基本语法格式如下：<audiosrc="音频的路径"controls="controls">替代内容</audio>语法说明：src属性指定多媒体文件，这是一个必设属性。在<