《网页设计与制作（第2版）》第4章 使用图像和媒体

图像和媒体与文本一样，是网页制作中不可缺少的重要元素。图像和媒体不仅可以为网页增色添彩，还可以更好地配合文本传递信息。本章将介绍图像和媒体的基本知识以及在网页中插入图像和媒体的基本方法。第4章使用图像和媒体学习目标了解网页中常用的图像和媒体的基本类型。掌握插入图像和图像占位符的方法。掌握插入SWF动画、FLV视频和ActiveX控件的方法。掌握设置图像属性和不同媒体属性的方法。4.1图像格式4.1.1GIF图像4.1.2JPG/JPEG图像4.1.3PNG图像4.1.1 GIF图像GIF格式（GraphicsInterchangeFormat，图像交换格式，文件扩展名为“.gif”）的数据是一种连续色调的无损压缩格式，采用了可变长度等压缩算法，压缩率一般在50%左右。只要图像不多于256色，GIF格式既可减少文件的大小，又能保持成像的质量。但是GIF格式不多于256色的限制局限了其应用范围，不适合显示有晕光、渐变色彩等颜色细腻的图像和照片等。GIF格式最适合显示色调不连续或具有大面积单一颜色的图像（如图表、按钮、图标、徽标）或其他具有统一色彩和色调或只需少量颜色的图像（如黑白照片等）。GIF分为静态GIF和动画GIF两种，支持透明背景图像，适用于多种操作系统。动画GIF是将多幅图像保存为一个图像文件，从而形成动画。GIF格式因其具有图像文件体积小、成像相对清晰、下载速度快、下载时隔行显示、支持透明色以及多个图像能组成动画的特点，因此大受欢迎，是一种在网络上使用最早、应用非常广泛的图形文件格式。目前几乎所有相关软件都支持GIF格式，公共领域有大量的软件在使用GIF格式图像文件。4.1.2 JPG/JPEG图像JPG/JPEG格式（JointPhotographicExpertsGroup，联合图像专家组文件格式，文件扩展名为“.jpg”或“.jpeg”），是24位的图像文件格式，也是一种与平台无关的高效率压缩格式。JPG/JPEG标准由ISO与CCITT（国际电报电话咨询委员会）共同制定，是面向连续色调静止图像的一种压缩标准。JPG/JPEG格式的文件一般有两种文件扩展名：“.jpg”和“.jpeg”，这两种扩展名的实质是相同的，可以把“.jpg”的文件改名为“.jpeg”，而对文件本身不会有任何影响。严格来讲，JPEG的文件扩展名应该为“.jpeg”，但由于DOS系统的8.3文件名命名规则，PC机使用了“.jpg”的扩展名，而由于Mac系统并不限制扩展名的长度，因此当时苹果机上都使用了“.jpeg”的扩展名。虽然现在Windows系统也可以支持任意长度的扩展名了，但大家已经习惯了“.jpg”的用法。这与HTML网页文档扩展名“.htm”和“.html”的情况是一样的，虽然扩展名不一样，但实际上是一回事。4.1.3 PNG图像PNG格式（PortableNetworkGraphicsFormat，便携式网络图形格式，文件扩展名为“.png”）。PNG格式设计的目的是试图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。网络通讯中因受带宽制约，在保证图像清晰、逼真的前提下，PNG格式图像文件体积小，特别适合网络传输。PNG格式文件具有高压缩比，它利用特殊的编码方法标记重复出现的数据，因而对图像的颜色没有影响，也不可能产生颜色的损失，这样就可以重复保存而不降低图像质量。PNG-8格式与GIF图像类似，同样采用8位调色板将RGB彩色图像转换为索引彩色图像。图像中保存的不再是各个像素的彩色信息，而是从图像中挑选出来的具有代表性的颜色编号，每一编号对应一种颜色，图像的数据量也因此减少，这对彩色图像的传播非常有利。PNG格式图像在浏览器上采用流式浏览，即使经过交错处理的图像会在完全下载之前提供浏览者一个基本的图像内容，然后再逐渐清晰起来。它允许连续读出和写入图像数据，这个特性很适合于在通信过程中显示和生成图像。PNG格式可以为原图像定义256个透明层次，使得彩色图像的边缘能与任何背景平滑地融合，从而彻底地消除锯齿边缘。这种功能是GIF和JPEG没有的。PNG格式还支持真彩和灰度级图像的Alpha通道透明度。PNG格式对于几乎任何类型的网页图像都是非常适合的，是目前使用量逐渐增多的图像格式。4.2.1 教学案例━━五月飞雪将素材文档复制到站点文件夹下，然后根据要求设置网页背景和插入图像，在浏览器中的显示效果如图4-1所示。(1) 设置整个网页的背景图像为“snowbg.jpg”，要求背景图像纵向和横向都重复。(2) 依次插入3个JPG格式的图像“snow01.jpg”、“snow02.jpg”、“snow03.jpg”以及一个PSD格式的图像“snow04.psd”，替换文本依次为“雪中红花”、“雪后森林”、“雪中绿树”、“雪后大地”。4.2.1 教学案例━━五月飞雪4.2.2 设置背景在制作网页时，经常需要设置背景图像或背景颜色。设置整个网页的背景图像或背景颜色，可通过【页面属性】对话框进行。4.2.3 插入图像一、通过【选择图像源文件】对话框插入图像。在插入图像时，有时会弹出【图像标签辅助功能属性】对话框。

二、通过【文件】面板拖曳图像4.2.3 插入图像

三、通过【资源】面板插入图像4.2.3 插入图像

四、插入PSD文件。在DreamweaverCS6中，可以直接在网页文档中插入PSD文件，此时将弹出【图像优化】对话框。4.2.3 插入图像4.2.4 图像属性图像插入到网页后，不一定完全适合需要，有时还需要进行修饰。最好使用Photoshop等图像处理软件对图像提前进行处理，不过在DreamweaverCS6中，可以通过【属性】面板来设置图像大小，也可以适度地进行编辑处理操作，使其更符合实际需要。4.2.5 图像占位符选择菜单命令【插入】/【图像对象】/【图像占位符】，或者在【插入】面板的【常用】类别中单击图像按钮组中的【图像占位符】按钮，打开【图像占位符】对话框，根据需要设置参数即可。4.3 媒体类型4.3.1SWF4.3.2FLV

4.3.3WMV

4.3.4WMA

4.3.5MP4

4.3.6RA

4.3.7RM4.3.8RMVB

4.3.9ASF

4.3.10Shockwave

4.3.1SWF

SWF（ShockWaveFlash）是一种基于矢量的Flash动画文件（文件扩展名为“.swf”），是Macromedia（现已被ADOBE公司收购）公司的动画设计软件Flash的专用格式，被广泛应用于网页设计、动画制作等领域。可以在Flash中创建原始内容或者从其它Adobe应用程序（如Photoshop或Illustrator）导入它们，快速设计简单的动画，以及使用AdobeAcitonScript3.0开发高级的交互式项目。设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何内容。通常，使用Flash创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。也可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的Flash应用程序。4.3.2FLV

FLV（Flash

Video）是随着Flash

MX的推出而发展而来的一种新兴的流媒体格式（文件扩展名为“.flv”）。由于它形成的文件具有体积小、加载速度极快、CPU占有率低、视频质量良好等特点，使得网络观看视频文件成为可能。它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好地使用等问题。而且，FLV利用了网页上广泛使用的FlashPlayer平台，访问者只要能看Flash动画就能看FLV视频，而无需再额外安装视频插件，FLV视频的使用给视频传播带来了极大便利。可以说，FLV视频是目前网络上使用最广泛的视频传播格式。4.3.3WMV

WMV（WindowsMediaVideo）是微软推出的一种流媒体格式（文件扩展名为“.wmv”），它是由ASF（AdvancedStreamFormat）格式升级延伸而来。在同等视频质量下，WMV格式的文件可以边下载边播放，因此很适合在网上传输和播放。WMV文件一般同时包含视频和音频部分，视频部分使用WindowsMediaVideo编码，音频部分使用WindowsMediaAudio编码。WMV-HD，基于WMV9标准，是微软开发的视频压缩技术系列中的其中一个版本。尽管WMV-HD是微软的独有标准，但因其在操作系统中大力支持WMV系列版本，从而在桌面系统得以迅速普及。4.3.4WMA

WMA（WindowsMediaAudio）是微软公司推出的与MP3格式齐名的一种新的音频格式（文件扩展名为“.wma”）。由于WMA在压缩比和音质方面都超过了MP3，更是远胜于RA，即使在较低的采样频率下也能产生较好的音质。WMA还支持音频流技术，适合在网络上在线播放。WMA可以用于多种格式的编码文件中。应用程序可以使用WindowsMediaFormatSDK进行WMA格式的编码和解码。一些常见的支持WMA的应用程序包括WindowsMediaPlayer、WindowsMediaEncoder、RealPlayer、Winamp等。其他一些平台，例如Linux和移动设备中的软硬件也支持此格式。4.3.5MP4

MP4（MPEG-4Part14）是一种使用MPEG-4对音频、视频信息进行压缩的编码格式（文件扩展名为“.mp4”），以储存数码音讯及数码视讯为主。MP4由国际标准化组织（ISO）和国际电工委员会（IEC）下属的“动态图像专家组”（MovingPictureExpertsGroup，即MPEG）制定，第一版在1998年10月通过，第二版在1999年12月通过。MPEG-4格式的主要用途在于网上流、光盘、语音发送（视频电话）以及电视广播。MPEG-4包含了MPEG-1及MPEG-2的绝大部份功能及其他格式的长处，并加入及扩充对虚拟现实模型语言（VRML，VirtualRealityModelingLanguage）的支持，具有面向对象的合成档案（包括音效、视讯和VRML对象）以及数字版权管理（DRM）及其他互动功能。MPEG-4比MPEG-2更先进，其中一点就是不再使用宏区块做影像分析，而是以影像上个体为变化记录，因此尽管影像变化速度很快、码率不足时，也不会出现方块画面。4.3.6RA

RA（RealAudio）是RealNetworks公司所开发的一种流式音频文件格式（文件扩展名为“.ra”）。RA文件压缩比例高，体积小巧，可以随网络带宽的不同而改变声音质量，能够很好地实时传送和播放，非常适合在网络传输速度较低的互联网上使用。RA格式文件需要RealPlayer来播放，其他很多播放器都也可以打开RA格式文件。4.3.7RM

RM格式是Real

Networks公司开发的一种流媒体视频文件格式（文件扩展名为“.rm”）。RM可以根据网络数据传输的不同速率制定不同的压缩比率，从而实现低速率的网络进行视频文件的实时传送和播放。它主要包含Real

Audio、Real

Video和Real

Flash三部分。这种格式的一个特点是用户使用RealPlayer或RealOnePlayer播放器可以在不下载音频/视频内容的条件下实现在线播放。RM格式一开始就定位在视频流应用方面，可以说是视频流技术的始创者。RM格式的诞生，使得流文件为更多人所知。这类文件可以实现即时播放，即先从服务器上下载一部分视频文件，形成视频流缓冲区后实时播放，同时继续下载，为接下来的播放做好准备。这种“边传边播”的方法避免了用户必须等待整个文件从网络上全部下载完毕才能观看的缺点，因而特别适合在线观看影视。RM主要用于在低速率的网上实时传输视频的压缩格式，它同样具有小体积而又比较清晰的特点。RM文件的大小完全取决于制作时选择的压缩率。4.3.8RMVB

RMVB是在流媒体的RM影片格式上升级延伸而来的一种视频文件格式，RMVB中的VB指VBR（VariableBitRate），可改变之比特率。RMVB则打破了原先RM格式那种平均压缩采样的方式，在保证平均压缩比的基础上，设定了一般为平均采样率两倍的最大采样率值。将较高的比特率用于复杂的动态画面，而在静态画面中则灵活地转为较低的采样率，合理地利用了比特率资源，使RMVB最大限度地压缩了影片的大小，最终拥有了近乎完美的的视听效果，因此RMVB较上一代RM格式画面要清晰了很多。RMVB可以用RealPlayer、暴风影音、QQ影音等播放软件来播放。4.3.9ASF

ASF（AdvancedStreamingFormat）是由微软公司开发用于网络传播和播放动态影像的一种流媒体格式（文件扩展名为“.asf”），以网络数据包的形式传输，实现流式多媒体内容发布。它包含音频、视频、图像等多种形式，其最大的特点是体积小，是针对网络传播而开发的通用多媒体文件格式。ASF支持任意的压缩/解压缩编码方式，并可以使用任何一种底层网络传输协议，具有很大的灵活性。MicrosoftMediaplayer是能播放几乎所有多媒体文件的播放器，支持网络上的ASF流文件格式，可以一边下载一边实时播放。4.3.10Shockwave

Shockwave是Macromedia公司（后被Adobe公司收购）制定的用于在Web中插放丰富的交互式多媒体内容的业界标准（文件扩展名为“.dcr”、“.dir”、“.dxr”）。可以通过Director来创建Shockwave影片，它生成的压缩格式可以被浏览器快速下载，并且可被目前的主流浏览器所支持。Director是美国Adobe公司开发的一款软件，主要用于多媒体项目的集成开发。广泛应用于多媒体光盘、课件、触摸屏软件、网络电影、网络交互式多媒体查询系统、企业多媒体形象展示、游戏和屏幕保护等的开发制作。使用

Director能够容易地创建包含高品质图像、数字视频、音频、动画、三维模型、文本、超文本以及Flash文件的多媒体程序。4.4 应用媒体4.4.1

教学案例━━海坨戴雪4.4.2

插入SWF动画4.4.3

插入FLV视频4.4.4

插入Shockwave影片4.4.5

插入Applet4.4.6

插入ActiveX控件4.4.7

插入插件4.4.1 教学案例━━海坨戴雪将素材文档复制到站点文件夹下，然后根据要求设置网页，在浏览器中的显示效果如图4-34所示。(1) 设置整个网页的背景图像为“haituobg.jpg”，要求背景图像不平铺。(2) 插入图像“haituo.jpg”，设置替换文本为“海坨戴雪”。(3) 插入SWF动画“haituodaixue.swf”，要求循环自动播放。(4) 插入FLV视频“haituo.flv”，要求视频类型设置为“累进式下载视频”，外观设置为“HaloSkin3”。(5) 插入ActiveX控件使其能够播放WMV视频文件“daixue.wmv”。4.4.1 教学案例━━海坨戴雪4.4.2 插入SWF动画在DreamweaverCS6中，插入SWF动画的方法是：选择菜单命令【插入】/【媒体】/【SWF】，或在【插入】/【常用】面板的【媒体】按钮组中单击【SWF】按钮，当然也可以在【文件】面板中选中SWF动画文件直接拖动到文档中。4.4.3 插入FLV视频在DreamweaverCS6中插入FLV视频的方法是