1.4 网页多媒体设计

多媒体（图像、声音、视频等）可视化效果好，是网页中不可缺少的元素。在HTML文档中巧妙地使用多媒体，可以使网页更具有吸引力。

1.4.1 图像

1.<img>元素

要将JPEG、PNG、GIF图像呈现在网页中，需要在HTML文档中添加图像文件的路径。img元素可实现该功能，并且可以通过设置img元素的属性值定义图像的位置、大小、边框等。

<img>是单标签，没有结束标签，它包含的常用属性如下。

（1）src属性

要在页面上显示图像，需要使用源属性src。src指“source”。使用src属性的语法是：

src属性的值是图像的URL地址。URL地址指存储图像的位置，可以是绝对地址，也可以是相对地址。

（2）height和width属性

height属性表示图片高度的像素值，width表示图片宽度的像素值。设置了这两个属性后，图片将按照设定的尺寸扩大或缩小。如果不设置，图片将以原始大小呈现。例如：

两行代码设置了同一图像的不同高度值和宽度值，在浏览器中的显示效果如图1-22所示。

（3）alt属性

img标签的alt属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，浏览器将显示替代文本而不是图像。例如：

如果设定当前路径中有flower.jpg图像，但不存在ship.jpg图像，那么代码运行页面会显示如图1-23所示效果。

图1-22 改变图像大小

图1-23 图像替换文本

2.图片超链接

可以使用a元素为图片创建超链接，例如：

在浏览器中查看网页，移动鼠标到图片上，鼠标指针会变成超链接的手形形状，单击鼠标左键，将跳转至链接页面，如图1-24所示。

3.热点与图像映射

上面的例子是对整个图片建立链接，有时可能希望在一张图片的某几个区域建立链接，当鼠标单击图片的不同区域时可以进入不同的页面，或者是单击图片的某一块区域进入某一个页面，这就是网页的热点链接。

热点可以是图像中具有某种形状的一块区域，形状可以是长方形、圆形或者多边形。如图1-25所示。

图1-24 图片超链接

图1-25 图像中的热点

图中定义了8个热点，眼睛是圆形，前爪是正方形，鼻子、嘴巴和耳朵都是多边形。

热点在浏览器中并不会显示，但热点会通过图像映射创建链接，所以当鼠标移动到热点所标识的范围时，鼠标会由指针变为链接的手形形状，单击鼠标左键，将跳转至链接目标。

图像中的热点区域用area元素定义，area元素始终包含在map元素中，map元素用于创建客户端的图像映射，将img元素定义的图像与area元素定义的热点区域建立关联。

【例1-6】 热点创建示例。

img元素的usemap属性与map元素的name属性相关联，以创建图像与映射之间的关系。如【例1-6】所示，img元素的usemap属性设为“#Map”，与map元素的name属性“Map”建立了关联。

在map元素中包含了8个area元素，即定义了8个热点，每个area元素都通过href属性设置了链接目标。其中，热点区域的形状由area元素的shape属性设置。shape的属性值可设为rect（矩形）、poly（多边形）或者circ（圆形）。

这些热点区域需要用坐标值来指定。area元素的coords属性可以定义热点区域的坐标值，坐标值的定义与shape属性设置的形状类型相关。如果shape属性设为“default”，即定义图像全部区域为热点时，coords属性设置无效。

1.4.2 声音和视频

1.声音元素

HTML 5新增了支持音频播放的audio元素。Internet Explorer 9及以上的版本、Firefox、Opera、Chrome以及Safari浏览器都支持<audio>标签，但Internet Explorer 8以及更早的版本不支持<audio>标签。audio元素支持3种声音文件格式：MP3、Wav和Ogg，但并非所有的音频格式都能被各种浏览器支持。

audio元素可以使用src属性设置音频文件的URL，例如：

audio元素中允许定义多个音频文件，但需要嵌套使用source元素。source元素本身没有含义，需要在音频元素audio或者视频元素video内使用，用于定义两个及以上的音频文件或者视频文件。例如：

source元素有三个属性。

1）src属性：用于定义音频或视频文件的URL。

2）type属性：用于说明音频或视频文件的类型。音频文件的type属性值有两种：audio/ogg和audio/mpeg。视频文件的type属性值有三种：video/ogg、video/mp4和video/webm。

3）media属性：用于指定媒体资源的类型，使用该属性可以帮助浏览器确定是否可以播放该文件。如果不能，浏览器可以选择不下载文件。

<source>标签为单标签，没有结束标签，而且仅在audio元素或者video元素没有设置src属性时使用。浏览器会按照source定义的媒体文件的顺序依次检测文件能否播放，并播放第一个可被浏览器支持的媒体文件；如果不支持，则顺序检测下一个。

音频播放器在不同浏览器中呈现的外观不同，以Firefox浏览器为例，音频呈现的效果如图1-26所示。

图1-26 音频播放器在Firefox中的呈现效果

2.视频元素

很多Web站点都会用到视频，但直到现在，仍然不存在一项定义在网页上显示视频的标准。大多数视频是通过插件（如Flash Player）来播放的。但并非所有浏览器都有同样的插件，其他可能会用到如Windows Media Player或者QuickTime Player插件。

HTML 5提供了使用video元素来展示视频的标准方法。Internet Explorer 9及以上版本、Firefox 3.5及以上版本、Opera 10.5及以上版本。Chrome 4.0及以上版本和Safari 4.0及以上版本的浏览器都支持<video>标签。video元素支持3种视频文件格式：MP4、WebM和Ogg。

video元素的src属性定义了视频文件的URL地址，controls属性用于设置播放、暂停，width和height属性控制视频的尺寸。如果设置了高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道视频显示的尺寸大小，就不能在加载时保留特定的空间，页面就会根据原始视频的尺寸大小而改变。

video元素中也可以使用source元素定义多个视频文件，例如：

视频播放器在不同浏览器中呈现的外观不同，以Firefox浏览器为例，视频播放呈现的效果如图1-27所示。

1.4.3 内联框架

HTML内联框架是为了在一个网页中显示另一个网页。在当前的HTML文档中使用内联框架，可以设置使用多大的框架来显示另一个网页。从显示效果上来说，使用内联框架可以在同一个浏览器窗口中显示不止一个页面。

图1-27 视频播放器在Firefox中的呈现效果

内联框架由iframe元素定义。iframe元素的src属性可以定义内联框架所指向的另一个文档的URL，可以是网页，也可以是图像。width和height属性可以设置框架的宽度和高度。例如：

如上代码中，第一个内联框架为网页，第二个内联框架为图像，在浏览器中的显示效果如图1-28所示。

iframe元素定义的框架可作为超链接、图像热点或表单的目标（target）。通过在iframe元素中定义name属性为内联框架设定一个名称，以名称作为框架的标识，在其他的元素（如a元素、area元素、form元素）中使用target属性可将该框架设定为关联目标。例如：

在浏览器中初始页面如图1-29所示。

当单击超链接文字“hello world”之后，内联框架的内容将被替换为超链接的页面，如图1-30所示。

图1-28 内联框架显示效果

图1-29 内联框架初始页面

图1-30 内联框架作为目标后

1.4.4 对象

前面介绍的img元素、audio元素、video元素和iframe元素可以在HTML文档中方便地添加图像、音频、视频，或者显示另一个页面。除此之外，HTML还提供了一个用于添加各种多媒体内容的通用对象元素object。object元素包含的对象除了图像、音频、视频，还包含Java applets、ActiveX、PDF以及Flash。

例如，使用object元素添加一个jpg图像、一个视频和一个网页。

IE、火狐、谷歌、Safari、Opera浏览器都支持<object>标签，但<object>定义的文件格式不是所有浏览器都支持。

在<object>标签内可以嵌入<param>标签，用于设置对象的参数。HTML中，<param>为单标签，没有结束标签，其属性有两个。

● name属性：定义参数的名称（用在脚本中）。

● value属性：描述参数值。

例如，设置视频对象的参数“autoplay”值为“true”，当视频加载后会自动播放。

HTML 5新增了一个embed元素，用来嵌入外部应用（比如插件）。<embed>标签为单标签，没有结束标签，例如使用embed元素添加一个jpg图像、一个视频和一个网页。