《网页设计与制作（第2版）》第5章 图像与多媒体

第

五

章图像与多媒体网页设计与制作（第2版）2023/1/3第5章图像与多媒体1第

5

章图像与多媒体5.1网页中常用的图像格式6.2关于链接路径6.3创建超链接的方法6.4各种类型超链接的创建6.5管理超链接6.6综合案例：创建“我爱摄影网”2023/1/3第5章图像与多媒体25.1网页中常用的图像格式5.1.1GIF格式图像GIF（GraphicsInterchangeFormat）格式图像，可译为“图像交换格式”，文件扩展名为“.gif”。是一种无损压缩格式的图像。只要图像不多于256色，GIF格式既可减少文件的大小，GIF格式具有图像文件体积小、成像相对清晰、下载速度快，又能保持成像的质量。它可支持图像文件大小的最小化，支持动画模式GIF，又分为静态GIF和动画GIF两种，能在一个图像文件中包含多帧图像页，在浏览器浏览时可看到动感图像效果。网上小一点的动画一般都是GIF格式的图像。大一些的图像多为JPEG格式的。

2023/1/3第5章图像与多媒体35.1.2JPEG格式图像JPG/JPEG（JointPhotographicExpertsGroup）可译为“联合图像专家组”，是24位的图像文件格式，也是一种与平台无关压缩格式的图像。而这种压缩方式的最大特点是，通过压缩可使其在图像品质和文件大小两者之间达到较好的平衡，在压缩中损失掉的是图像中不易被人察觉到的内容，JPEG获得较小的文件尺寸，使得图像在浏览和下载时的速度加快。

2023/1/3第5章图像与多媒体45.1.3PNG格式图像PNG（PortableNetworkGraphic）可译为“便携网络图像”，是一种格式极为灵活的图像，用网页上无损压缩和显示图像。在使用网页制作“三剑客”之一的Fireworks制作的图像的默认格式就是PNG，这种文件格式比较小，现在网页上用得非常普遍。PNG图像还支持多种颜色数目，可从8位、16位、24位到32位。具有对引色、灰度、真色彩图像及透明背景的支持效果。

2023/1/3第5章图像与多媒体55.2插入与设置图像5.2.1网页中插入图像（1）在站点中打开一个已经创建的网页或创建一个新的网页。

2023/1/3第5章图像与多媒体6（2）将光标置于网页中要插入图像的位置，光标闪动。在菜单栏中选择“插入”→“图像”命令，出现如图5-2所示的对话框。

2023/1/3第5章图像与多媒体7在插入图像前，最好将准备好的图像素材放在站点相应的文件夹（如images）中，这将有利于网站的整体管理。对于动画、视频等素材也放在网站中对应所建立的文件夹中。

2023/1/3第5章图像与多媒体8（3）单击图

“图像标签辅助功能属性”对话框的“替换文本”文本框中输入“华山”文字，然后按“确定”按钮后，将出现图所示的结果。

2023/1/3第5章图像与多媒体9（4）对所建立的网页进行浏览。如果已经关闭网站，可在网站文件夹中找到该网页，双击就可打开浏览。也可在网页编辑页面工具栏中单击“在浏览器中预览”按钮，并在其下选择相应的浏览器，可看到图5-6所示的浏览效果。

2023/1/3第5章图像与多媒体105.2.2设置图像属性“属性”面板转化为设置图像的属性的内容。

●“图像”：在该文本框中可以输入图像的名称，以便在以后可以调用该图像文件。●“宽”和“高”：在“宽”和“高”文本框中可以输入数值，以设置文件的宽度和高度。●“源文件”：显示当前图像文件的地址，单击文本框后面的文件夹按钮，可以重新设置当前图像文件的地址。

2023/1/3第5章图像与多媒体115.2.2设置图像属性

●“链接”：在该文本框中可以设置当前图像的链接地址。●“替换”：在该文本框中可以输入文本，用于设置当前图像文件的描述。在浏览网页文件时，将鼠标指针移动到当前图像上时，就可显示图像的描述信息。●“编辑”区域：在该区域中列出了编辑当前图像文件可以使用的工具。●“边框”：在该文本框中可以设置图像的边框宽度，相当于给图像加一个边框，其宽度以像素为单位。●“对齐”：在下拉列表框中选择图像对齐的方式。当网页中包括图像和文本时，需要对图像进行对齐设置。●“地图”区域：在该文本框中可以设定图像地图的名称；使用热点工具“矩形、圆形、多边形”在图像中插入热点区域。●边距区域：有“垂直边距”和“水平边距”，其文本框用于设置图像周围的边距，调整它与周围元素间的距离，其单位为像素。

2023/1/3第5章图像与多媒体125.3插入其他图像元素5.3.1插入图像占位符（1）启动DreamweaverCS6，打开或新建一个网页，并将光标定位于网页的文档中。（2）插入占位符可用菜单方式和“插入”面板组两种方式操作实现。●菜单操作法：选择菜单“插入”→“图像对象”→“图像占位符”命令，如图5-8所示。●“插入”面板组操作法：在菜单“窗口”下选择“插入”命令，在页面窗口左侧出现“插入”面板组。由此可以看出，面板组可通过在“窗口”下级菜单中根据需要进行相应的选择，从而实现面板组的显示或隐藏。具体如图5-9所示。

2023/1/3第5章图像与多媒体135.3插入其他图像元素2023/1/3第5章图像与多媒体145.3插入其他图像元素2023/1/3第5章图像与多媒体155.3插入其他图像元素2023/1/3第5章图像与多媒体16在网页中插入图像占位符后，在网页中选中占位符，可在其属性面板中对占位符进行一些设置。属性中设置项含义与操作和对网页中图像属性的设置基本相似，这里不再作过多陈述。

2023/1/3第5章图像与多媒体175.3.2插入鼠标经过图像（1）打开或新建一个网页，用插入占位符的操作方式打开图5-8或图5-9，并在菜单中选择“鼠标经过图像”命令，出现图5-12所示的对话框。

2023/1/3第5章图像与多媒体18（2）在“图像名称”文本框中可以输入名称。单击“原始图像”右边的“浏览”按钮，打开“原始图像”对话框，向其中添加图像。单击“鼠标经过图像”右侧的“浏览”按钮，以如上方式添加另一幅图像。单击“确定”按钮，将出现图5-13所示的设置效果。（3）保存文档。也可按F12键，在浏览图5-13所示的网页时，当鼠标移入图（a）所示的原始图像时，就会出现图（b）所示的图像效果。

2023/1/3第5章图像与多媒体192023/1/3第5章图像与多媒体202023/1/3第5章图像与多媒体215.4多媒体在网页中的应用5.4.1添加Flash动画对象（1）在把Flash动画（.swf）插入网页之前，需要把准备好的Flash动画素材保存到站点相应的文件夹下，如本站点中的“flash”文件夹，以便管理和操作使用。（2）打开或新建一个网页，并将光标定位在页面中要插入的位置。（3）在菜单栏中选择“插入”→“媒体”→“SWF”命令，如图5-14所示。2023/1/3第5章图像与多媒体225.4多媒体在网页中的应用5.4.1添加Flash动画对象2023/1/3第5章图像与多媒体235.4多媒体在网页中的应用在弹出的图5-15所示的“选择SWF”对话框中选择Flash文件，如行“驶的小车.swf”文件。单击“确定”按钮后，将出现图5-16所示的“对象标签辅助功能属性”对话框，并在“标题”文本框中输入“生长的树木动画演示”，然后单击“确定”按钮2023/1/3第5章图像与多媒体245.4多媒体在网页中的应用2023/1/3第5章图像与多媒体255.4多媒体在网页中的应用●“循环”与“自动播放”：当选中这两项时，在浏览窗口中就会自动循环播放。●“背景颜色”：选择一种背景颜色，则可改变Flash在浏览窗口播放时的背景颜色。●“播放”按钮：可以在当前的编辑页面中看到Flash动画的播放效果，在播放状态时，“播放”按钮变成“停止”按钮形式，此时按“停止”按钮可中断播放。●“Wmode”：为SWF文件设置Wmode参数，以避免与DHTML元素（如Spry构件）相冲突。●“编辑”：启动Flash以更新.fla文件（即使用Flash创作工具创建的文件）。2023/1/3第5章图像与多媒体265.4.2插入FLV视频Dreamweaver提供以下两种类型的FLV视频。● Flash视频文件（扩展名为.flv）：是一种视频文件，通过FlashPlayer传送。● 累进式下载视频：将FLV文件下载到站点访问者的硬盘上，然后进行播放。但与传统的“下载并播放”视频传送方式不同，其允许在下载完成之前就开始播放视频文件。● 流视频：对视频内容进行流式处理，缓冲很短的一段时间，而这段时间可确保视频在网页上流畅播放。下面介绍插入FLV视频在网页中的具体实现方法：（1）打开已有或创建一个新的网页。并将光标定位在要插入FLV文件的网页位置。（2）选择“插入”→“媒体”→“FLV”命令，如图5-19所示。

2023/1/3第5章图像与多媒体275.4.2插入FLV视频

2023/1/3第5章图像与多媒体28（3）在弹出的如图5-20所示的“插入FLV”对话框中，在“视频类型”选项下可选择“累进式下载视频”或“流视频”方式。

2023/1/3第5章图像与多媒体29（4）单击“确定”按钮，在页面中出现如图5-21所示的FLV占位符，说明所选择的FLV文件已经添加到页面中了。如果要删除FLV组件，可选择占位符按“Delete”键。占位符的大小不能用鼠标进行调整。可通过在“属性”面板中的“高”和“宽”文本框中输入相应值进行大小调整。

2023/1/3第5章图像与多媒体305.4.3网络中的音频文件类型● .mid（MusicalInstrumentDigitalInterface，数字音乐）格式：是网页设计中最常用的文件格式。不需要特定的插件支持播放，一般的浏览器都可以支持。● .wav（Wave）格式：这种格式声音品质也比较好，不需要提供额外插件作为运行条件。缺点是这种格式的文件比较大，占用空间大，可能会影响网页的运行速度。● .mp3（MotionPictureExpertsGroupAudioLayer-3）格式：在3种音频类型中，它的声音品质最好。缺点是文件容量比较大，再就是.mp3需要插件的支持，例如WindowsMediaPlayer以及RealPlayer等播放软件的支持。● .wma（WindowsMediaAudio）是微软公司推出的与MP3格式齐名的一种新的音频格式（文件扩展名为“.wma”）。● .ra（RealAudio）是RealNetworks公司所开发的一种流式音频文件格式（文件扩展名为“.ra”）。

2023/1/3第5章图像与多媒体315.4.4网络中的视频文件类型● .wmv（WindowsMediaVideo）是微软推出的一种流媒体格式（文件扩展名为“.wmv”），它是由ASF（AdvancedStreamFormat）格式升级延伸而来。● .MP4（MPEG-4Part14）是一种使用MPEG-4对音频、视频信息进行压缩的编码格式（文件扩展名为“.mp4”），以储存数码音讯及数码视讯为主。● .RM格式是RealNetworks公司开发的一种流媒体视频文件格式（文件扩展名为“.rm”）。RM可以根据网络数据传输的不同速率制定不同的压缩比率，从而实现低速率的网络进行视频文件的实时传送和播放。● .RMVB是在流媒体的RM影片格式上升级延伸而来的一种视频文件格式，RMVB中的VB指VBR（VariableBitRate），可改变之比特率。● Shockwave是Macromedia公司（后被Adobe公司收购）制定的用于在Web中插放丰富的交互式多媒体内容的业界标准（文件扩展名为“.dcr”、“.dir”、“.dxr”）。可以通过Director来创建Shockwave影片，它生成的压缩格式可以被浏览器快速下载，并且可被目前的主流浏览器所支持。

2023/1/3第5章图像与多媒体325.4.5在网页中插入Shockwave影片（1）打开或新建一个网页，并将光标定位到网页中的某一个位置。（2）选择“插入”→“媒体”→“Shockwave”菜单命令，如图5-19所示。打开如图5-23对话框。选择wave.dcr文件，按“确定”。

2023/1/3第5章图像与多媒体335.4.5在网页中插入Shockwave影片（3）选择wave.dcr文件，按“确定”。如图5-24所示。

2023/1/3第5章图像与多媒体345.4.6在网页中插入ActiveX控件（1）打开或新建一个网页，并将光标定位到网页中的某一个位置。（2）选择“插入”→“媒体”→“ActiveX”菜单命令，如图5-19所示。得到如图5-26的ActiveX占位图。

2023/1/3第5章图像与多媒体355.4.6在网页中插入ActiveX控件（3）在图5-26的属性面板中的“源文件”选择相应文件夹中的.wmv文件。在“ClassID”的下列表中选择“RealPlayer/clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA”。如图5-27所示。而图5-27中的ShockwaveforDirector6支持Shockwave格式文件；ShockwaveforFlash支持SWF格式文件。

2023/1/3第5章图像与多媒体365.4.7在网页中插入插件（1）打开或新建一个网页，并将光标定位到网页中的某一个位置。（2）选择“插入”→“媒体”→“插件”菜单命令，如图5-28所示。

2023/1/3第5章图像与多媒体375.4.7在网页中插入插件（3）在单击“插件”命令后出现的对话框中选择要添加的音视频文件，在可能根据页面显示播放窗口的大小在“属性”面板中可设置占位符“高”和“宽”，例如本例设宽为400，高为285，执行后会出现图5-29所示的情况。

2023/1/3第5章图像与多媒体385.4.7在网页中插入插件（4）如果插入得的是音乐，在“属性”面板中可设置占位符“高”和“宽”，例如设宽为700，高为60，则可看到占位符在页面中变成图5-30所示的大小。其作用是显现在浏览页面中播放音乐移动块距离大小为长方形。

2023/1/3第5章图像与多媒体395.4.7在网页中插入插件如果希望打开页面时音、视频文件能够自动播放，可以单击“属性”面板中的“参数”按钮，在弹出的“参数”对话框中，分别在“参数”项和“值”项文本框中输入“autostart”（定义音频在浏览时是否开始自动播放）和“true”（是）值，如图5-31所示。然后单击“确定”按钮

2023/1/3第5章图像与多媒体405.4.7在网页中插入插件

2023/1/3第5章图像与多媒体415.4.8在网页中插入背景音乐（1）打开一个网页，如PHjiaoti.html。（2）单击工具栏的“代码”按钮，则将窗口转换成“代码”视图，在图5-33中<body>右侧输