项目四
图像和多媒体的应用
181
学习任务 1 图像在网页中的应用
学习任务 2 多媒体在网页中的应用
ONTENTSC 目录
182
图像在网页中的应用01
183
知识目标
1. 了解网页中常见的图像文件格式。
2. 掌握图像标签的用法。
技能目标
1. 能够编辑图像和设置图像属性。
2. 能够制作交互式图像。
3. 能够正确创建图像映射。
184
图像在吸引网页浏览者方面远比文本有效，精心选择的图像能够紧紧
抓住浏览者的注意力。为提供更优质的产品信息和展示效果，某公司决定对
其网站的产品展示页进行全面升级。通过融入丰富多彩的图文内容，公司期
望能够吸引更多潜在客户，从而提升市场竞争力。网页的设计定版如图所示。
185
186
任务效果图
一、网页中常见的图像文件格式
图像不仅要美观，还需要在保持高质量画面的基础上，尽可能地压缩
其体积。目前，网页设计中广泛采用的图像文件格式主要有三种：JPEG、
GIF 和 PNG。它们的具体特点如下。
187
1. JPEG 格式
JPEG 是一种采用有损压缩算法的图像文件格式，非常适合展现色彩层
次丰富、具有渐变效果的图像，例如各类照片。其显著优点是图像质量较高。
然而，它的文件相对较大（与其他格式相比），并且不支持透明区域。在网
页设计过程中，像横幅广告、商品展示图以及大尺寸插图等，通常都会选择
保存为 JPEG 格式。
188
2. GIF 格式
GIF 格式的文件通常较小，可以包含透明区域，还能制作包含多个画
面的简单动画。不过，其颜色表现能力有限，图像质量可能略逊一筹。因此，
它非常适合用于表现色彩简洁或有大面积单色的图像，例如卡通画、按钮、
图标和徽标等。
189
3. PNG 格式
PNG 格式支持无损压缩，可以包含透明区域，包括 PNG-8 以及真色
彩 PNG（PNG-24 和 PNG-32）。与 GIF 格式相比，PNG 格式的主要优势
在于文件更小，支持alpha 透明度调节（包括全透明、半透明、全不透明），
并且色彩过渡更为自然流畅。但 PNG 格式不支持动画效果。它非常适合用
于保存网页图标、线条图案以及带有透明背景的图像。
190
二、图像标签
在 HTML 中，使用 <img> 标签可以插入图像文件，并允许我们设置图
像的大小、对齐方式等属性。该标签是一个自闭合标签，即它只包含属性，
而没有配对的结束标签。
图像标签的基本语法格式如下：
<img src=" 图像文件名 " alt=" 简单说明 " width=" 图像宽度 " height="
图像高度 " />
标签中的属性含义如下：
191
src：指定要插入的图像的文件名，包括图像文件的路径和文件名。
alt：在图像未能正常显示时，将在图像位置显示的替代文字。
width：设置图像的宽度，可以使用像素值或百分比来表示。为了避免
图像失真，通常建议设置为图像的实际大小。如果需要调整图像尺寸，最好
先使用图像编辑软件进行预处理。
height：设置图像的高度，可以使用像素或百分比来表示。
192
图像的属性不仅可以在代码视图中进行设置，还可以通过属性面板进
行便捷修改，如图所示，用户可以轻松地调整图像的各项属性。
193
属性面板
参数介绍：
★ ID：此参数用于设置图像的唯一名称，它在通过脚本控制图像时非
常有用，便于精确地定位和操作特定的图像元素。
★源文件：这里显示的是图像文件的存储路径，它指向图像在计算机
或服务器上的具体位置。
★链接：此参数可以为图像指定一个超链接，当用户点击该图像时，
将会跳转到指定的网页或资源。
★宽和高：这两个参数分别代表图像的宽度和高度，单位通常为像素。
若图像的尺寸被修改过，这两个数值将会以粗体显示，以便于识别。
194
★替换：当浏览器由于某种原因无法显示图像文件时，此参数中填写的说明
性文字将会在图像的位置显示出来，提供替代的信息。
★地图和热点工具：这些选项用于标注和创建客户端图像地图，使得用户可
以在图像的特定区域设置超链接，增强网页的交互性。
★ 目标： 此参数用于设置点击图像链接后，链接文档在何处打开。
★编辑：点击此选项将启动在“外部编辑器”首选参数中指定的图像编辑器，
并打开当前选定的图像，便于用户进行进一步编辑和修改。
195
三、交互式图像
交互式图像展现出一种特殊效果：当用户的鼠标悬停在图像上方时，
会显示一幅预先设定好的图像；而当鼠标移开时，图像则会恢复为最初的那
一幅，如图所示。这种图像交替显示的效果，实际上是通过自动添加一段
JavaScript 代码实现的。
196
交互式图像效果
四、图像映射
图像映射是通过在图像中绘制一个或多个特定形状的区域（如矩形、
圆形或其他形状）来创建链接的一种技术。这些被绘制出来的特定区域被称
作热点区域，如下图所示。当用户点击热点区域时，将会被导向到预设的链
接地址。
197
198
热点区域
当访问者点击图像上的热点区域时，页面会自动跳转到热点区域所关
联的网页上。在图像上创建了热点区域之后，这些热点区域就与图像融为一
体。因此，一旦调整图像的大小，图像内所有的热点区域也会随之发生相应
变化。当鼠标悬停在热点区域上方时，鼠标指针会变成手形，如下图所示。
此时，单击鼠标即可迅速跳转到预设的页面。
199
200
鼠标悬停在热点区域上方时的效果
多媒体在网页中的应用02
201
知识目标
1. 了解网页支持的音频和视频格式。
2. 掌握音频的相关属性。
3. 掌握视频的相关属性。
技能目标
1. 能够在网页中添加音频文件。
2. 能够在网页中添加视频文件。
202
某公司计划利用广告视频和音频剪辑，在网页上有效地传达促销信息、
展示特别优惠以及推荐新品，以此增强网站的吸引力。为此，公司决定更新
产品详情页，确保视频内容能够在网页上正确嵌入并流畅播放，为用户提供
更加生动且详尽的产品展示和演示。网页的设计定版如下图所示。
203
204
任务效果图
二、网络营销市
在 HTML5 中，<audio> 标签被用于定义音频文件。它支持 3 种音频格
式，分别是 OGG、MP3 和 WAV。使用 <audio> 标签嵌入音频的基本语法
格式如下：
<audio src=" 音频文件路径 " controls="controls"></audio>
205
在上述语法中，src 属性用于指定音频文件的路径，而 controls 属性则
为用户提供音频播放控件。这两个属性是 <audio> 标签的基本属性。在
<audio> 和 </audio>之间，可以插入一段文字。当浏览器不支持 <audio> 标
签时，这段文字将会显示出来。
此外，<audio> 标签还允许添加其他属性，以进一步优化音频的播放效
果。这些属性的详细信息可参考下表。
206
<audio> 标签的相关属性
HTML5 还提供了 <source> 标签，这个标签允许指定多个备用文件路
径，这些文件可以是不同的格式。浏览器会自动选择并使用第一种它能够识
别的文件格式进行加载和播放。
运用 <source> 标签添加音频的基本格式如下：
<audio controls="controls">
<source src=" 音频文件地址 " type=" 媒体文件类型 / 格式 ">
……
</audio>
207
二、视频
在 HTML5 中，<video> 标签被用来定义视频文件。它支持 3 种视频格
式，分别是 OGG、WEBM 和 MPEG4。使用 <video> 标签嵌入视频的基本
语法格式如下：
<video src=" 视频文件路径 " controls="controls"></video>
在上述语法格式中，src 属性被用来指定视频文件的路径，而 controls
属性则用于控制视频播放控件的显示。同样，在 <video> 和 </video> 标签之
间可以插入文本内容，这段文本会在浏览器不支持 <video> 标签的情况下显
示出来。此外，我们还可以为 <video> 标签设置其他属性，以便进一步优化
视频的播放效果。有关 <video> 标签的其他属性参见下表。
208
209
<video> 标签的相关属性
在网页中插入视频文件后，在浏览器中预览，视频播放效果如图所示。
210
视频播放效果
