《电子商务网页设计》课件-项目四 图像和多媒体的应用

项目四图像和多媒体的应用181学习任务1 图像在网页中的应用学习任务2 多媒体在网页中的应用ONTENTSC目录182图像在网页中的应用01183知识目标1. 了解网页中常见的图像文件格式。2. 掌握图像标签的用法。技能目标1. 能够编辑图像和设置图像属性。2. 能够制作交互式图像。3. 能够正确创建图像映射。184图像在吸引网页浏览者方面远比文本有效，精心选择的图像能够紧紧抓住浏览者的注意力。为提供更优质的产品信息和展示效果，某公司决定对其网站的产品展示页进行全面升级。通过融入丰富多彩的图文内容，公司期望能够吸引更多潜在客户，从而提升市场竞争力。网页的设计定版如图所示。185186

任务效果图一、网页中常见的图像文件格式图像不仅要美观，还需要在保持高质量画面的基础上，尽可能地压缩其体积。目前，网页设计中广泛采用的图像文件格式主要有三种：JPEG、GIF和PNG。它们的具体特点如下。1871. JPEG格式JPEG是一种采用有损压缩算法的图像文件格式，非常适合展现色彩层次丰富、具有渐变效果的图像，例如各类照片。其显著优点是图像质量较高。然而，它的文件相对较大（与其他格式相比），并且不支持透明区域。在网页设计过程中，像横幅广告、商品展示图以及大尺寸插图等，通常都会选择保存为JPEG格式。1882. GIF格式GIF格式的文件通常较小，可以包含透明区域，还能制作包含多个画面的简单动画。不过，其颜色表现能力有限，图像质量可能略逊一筹。因此，它非常适合用于表现色彩简洁或有大面积单色的图像，例如卡通画、按钮、图标和徽标等。1893. PNG格式PNG格式支持无损压缩，可以包含透明区域，包括PNG-8以及真色彩PNG（PNG-24和PNG-32）。与GIF格式相比，PNG格式的主要优势在于文件更小，支持alpha透明度调节（包括全透明、半透明、全不透明），并且色彩过渡更为自然流畅。但PNG格式不支持动画效果。它非常适合用于保存网页图标、线条图案以及带有透明背景的图像。190二、图像标签在HTML中，使用<img>标签可以插入图像文件，并允许我们设置图像的大小、对齐方式等属性。该标签是一个自闭合标签，即它只包含属性，而没有配对的结束标签。图像标签的基本语法格式如下：<img src="图像文件名" alt="简单说明" width="图像宽度" height="图像高度" />标签中的属性含义如下：191src：指定要插入的图像的文件名，包括图像文件的路径和文件名。alt：在图像未能正常显示时，将在图像位置显示的替代文字。width：设置图像的宽度，可以使用像素值或百分比来表示。为了避免图像失真，通常建议设置为图像的实际大小。如果需要调整图像尺寸，最好先使用图像编辑软件进行预处理。height：设置图像的高度，可以使用像素或百分比来表示。192图像的属性不仅可以在代码视图中进行设置，还可以通过属性面板进行便捷修改，如图所示，用户可以轻松地调整图像的各项属性。193属性面板参数介绍：★ID：此参数用于设置图像的唯一名称，它在通过脚本控制图像时非常有用，便于精确地定位和操作特定的图像元素。★源文件：这里显示的是图像文件的存储路径，它指向图像在计算机或服务器上的具体位置。★链接：此参数可以为图像指定一个超链接，当用户点击该图像时，将会跳转到指定的网页或资源。★宽和高：这两个参数分别代表图像的宽度和高度，单位通常为像素。若图像的尺寸被修改过，这两个数值将会以粗体显示，以便于识别。194★替换：当浏览器由于某种原因无法显示图像文件时，此参数中填写的说明性文字将会在图像的位置显示出来，提供替代的信息。★地图和热点工具：这些选项用于标注和创建客户端图像地图，使得用户可以在图像的特定区域设置超链接，增强网页的交互性。★

目标：

此参数用于设置点击图像链接后，链接文档在何处打开。★编辑：点击此选项将启动在“外部编辑器”首选参数中指定的图像编辑器，并打开当前选定的图像，便于用户进行进一步编辑和修改。195三、交互式图像交互式图像展现出一种特殊效果：当用户的鼠标悬停在图像上方时，会显示一幅预先设定好的图像；而当鼠标移开时，图像则会恢复为最初的那一幅，如图所示。这种图像交替显示的效果，实际上是通过自动添加一段JavaScript代码实现的。196交互式图像效果四、图像映射图像映射是通过在图像中绘制一个或多个特定形状的区域（如矩形、圆形或其他形状）来创建链接的一种技术。这些被绘制出来的特定区域被称作热点区域，如下图所示。当用户点击热点区域时，将会被导向到预设的链接地址。197198

热点区域当访问者点击图像上的热点区域时，页面会自动跳转到热点区域所关联的网页上。在图像上创建了热点区域之后，这些热点区域就与图像融为一体。因此，一旦调整图像的大小，图像内所有的热点区域也会随之发生相应变化。当鼠标悬停在热点区域上方时，鼠标指针会变成手形，如下图所示。此时，单击鼠标即可迅速跳转到预设的页面。199200鼠标悬停在热点区域上方时的效果多媒体在网页中的应用02201知识目标1. 了解网页支持的音频和视频格式。2. 掌握音频的相关属性。3. 掌握视频的相关属性。技能目标1. 能够在网页中添加音频文件。2. 能够在网页中添加视频文件。202某公司计划利用广告视频和音频剪辑，在网页上有效地传达促销信息、展示特别优惠以及推荐新品，以此增强网站的吸引力。为此，公司决定更新产品详情页，确保视频内容能够在网页上正确嵌入并流畅播放，为用户提供更加生动且详尽的产品展示和演示。网页的设计定版如下图所示。203204任务效果图二、网络营销市在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>标签之间可以插入