第五章 图像和其它媒体

1、第第5章章 图像和其它媒体图像和其它媒体1l一个优秀的网站应该不仅仅是由文字组成的，事实上，在网页中还大量地使用图像、声音、动画和视频等多媒体元素，并且这些元素在网页设计中的地位日益重要。本章将介绍如何在网页中插入图像、声音、动画、视频等多媒体元素。 25.1 插入图像插入图像l图像本身是一种重要的信息载体。在文档中适当放入一些图像，不仅可以使文档清晰直观，而且使得文档更具吸引力，更好地表现主题。当然，图像的增加也会使网页的下载时间大大增加，所以设计网页时要整体考虑要使用的图像数目和大小。35.1 插入图像插入图像l5.1.1 在Web中使用的图像格式l在Web中，通常使用的有GIF、JPEG

2、/JPG、PNG三种图像文件格式。l1.GIF格式lGIF是Internet上应用最广泛的图像文件格式之一。它的特点是体积小，支持小型翻页型动画，GIF图像最多可以使用256种颜色，最适合制作徽标、图标、按钮和其他颜色、风格比较单一的图片。45.1 插入图像插入图像l2.JPEG/JPG格式lJPEG/JPG也是Internet上应用最广泛的图像文件格式之一，它可以保存上百万种颜色，采用有损压缩方式，压缩比高，最适合用来保存照片。l3.PNG格式lPNG是一种新兴的网络图像格式，兼有GIF和JPG的优点。它的显示速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像。55.1 插入

3、图像插入图像l5.1.2 图像的插入图像的插入l在制作网页时，为了保证图像文件所在目录的正确性，插入的图像应该和网页位于同一个站点内，如果图像不在当前站点，Dreamweaver会提示用户将文件复制到当前站点的文件夹中。l插入图像时，将光标放置在文档窗口需要插入图像的位置，然后单击插入工具栏“常用”类别中的“插入图像”按钮 (如图5.1所示)，或者选择主菜单【插入】|【图像】命令。65.1 插入图像插入图像l在弹出的“选择图像源文件”对话框中，选择需要的图像文件(如图5.2所示)。l单击“确定”按钮，弹出图5.3所示“图像标签辅助功能属性”对话框，该对话框允许为此图片定义“替换文本”和“详细说

4、明”，替换文本用于提供对该图像的文字描述。当图像不能正常显示时，该替换文本将显示在图像应该显示的位置。对于较长的描述，可以在“详细说明”文本框中提供链接，指向提供该图像更多信息的文件。设置完成后单击“确定”按钮，图片就会插入到文档中。 75.1 插入图像插入图像l注意：如果在插入图片的时候，没有将图片保存在站点根目录下，会弹出对话框，提醒用户要把图片保存在站点内部，这时单击“是”按钮，然后选择本地站点的路径将图片保存。85.1 插入图像插入图像l5.1.3 图像的属性面板图像的属性面板l在文档中，单击一个图像即可将其选中，被选中的图像周围会出现选择框和三个控制点。通过拖动三个控制点可以改变图像

5、的大小。按着shift键，再拖动角上的控制点，可以使图像在拉伸过程中保持宽高比例不变。一般来说，在插入图像之前，应该利用其它图像处理软件对图像进行效果处理，并根据其在网页中所占位置的宽度和高度进行裁切或压缩，不推荐在Dreamweaver中缩放图像。95.1 插入图像插入图像l选中图像后，在属性面板中显示出图像的属性，如图5.4所示。l在属性面板的左上角，显示当前图像的缩略图，同时显示图像文件的大小。在缩略图右侧有一个文本框，在其中可以输入图像的标记名称(id)，在使用Dreamweaver的行为(例如交换图像)或编写脚本代码时可以通过id引用该图像。属性面板中有图像宽度和高度，如果图像大小与

6、原图不一致的话，这里的数字会用粗体显示；当然也可以通过修改这里的数值对图片进行缩放。 105.1 插入图像插入图像l点击高度和宽度后面 的按钮可以恢复图像的原始大小。l【源文件】用于显示当前图像源文件的路径。单击其后的浏览文件按钮 可以更改源文件。l【链接】用于指定图像的链接，有关链接的设置参见第6章。l【替换】用于显示和修改替换文本。l【编辑】之后有六个按钮，其中 (编辑)按钮用来启动在主菜单【编辑】|【首选参数】中指定的外部编辑器，并打开选定的图像进行编辑 (使用Fireworks最 115.1 插入图像插入图像 优化)按钮能够从Dreamweaver中启动Fireworks对放置的Fir

7、eworks图像和动画进行快速的导出更改。 (裁切)按钮用来修剪图像的大小，从所选图像中删除不需要的区域。 (重新取样)按钮用来对已经调整大小的图像进行重新取样，提高图片在新的大小和形状下的品质。 (亮度和对比度)按钮用来修改图像中像素的亮度和对比度。 (锐化)按钮用来调整图像的清晰度。125.1 插入图像插入图像l【地图】项可以利用其下面热点工具在图像中绘制热点，在文本框中为热点区域命名。有关“图像地图”的使用参见第6章。l【垂直边距】和【水平边距】项可以为图像的四周添加边距，以像素为单位。l【目标】项与【链接】项相关，为链接目标选择打开方式。l【边框】用于为图片设置边框宽度，以像素为单位。

8、135.1 插入图像插入图像l5.1.4 图像的对齐方式图像的对齐方式l单击属性面板中的 按钮，可以分别将图像设置为在浏览器窗口或其所处容器中居左、居中或居右。l在属性面板中，“对齐”下拉列表用来设置图像与文本的相互对齐方式，共有10个选项。通过它可以将文字对齐到图像的上端、下端、左边和右边等，从而可以灵活的实现文字与图片的混排效果。145.1 插入图像插入图像l【默认值】通常指定基线对齐。l【基线】和【底部】将文本(或同一段落中的其它元素)的基线与选定对象的底部对齐。l【顶端】将图像的顶端与当前行中最高项(图像或文本)的顶端对齐。l【居中】将图像的中部与当前行的基线对齐。l【文本上方】将图像

9、的顶端与文本行中最高字符的顶端对齐。l【绝对居中】将图像的中部与当前行中文本的中部对齐。155.1 插入图像插入图像l【绝对底部】将图像的底部与文本行的底部对齐。l【左对齐】将所选图像放置在左边，文本在图像的右侧换行。如果左对齐文本在行上处于对象之前，它通常强制左对齐对象换到一个新行。l【右对齐】将图像放置在右边，文本在对象的左侧换行。如果右对齐文本在行上处于对象之前，它通常强制右对齐对象换到一个新行。l图5.5、图5.6和图5.7分别显示了其中三种比较常用的对齐方式。165.1 插入图像插入图像l5.1.5 将图像设置为背景将图像设置为背景l图片设置为背景包括两种情况，一种是将图片设置为页面

10、背景，另一种是将图片设置为具有容器特性的元素的背景，如表格、单元格等。l1将图片设置为网页的背景图像l按照3.1.4节所述方法进入页面属性的设置对话框，在“外观”选项有“背景图像”项，如图5.8所示.175.1 插入图像插入图像l直接在“背景图像”文本框中输入图像文件名称及路径，或者单击“浏览”按钮，弹出如图5.9所示的对话框进行背景图片的选择。在图5.8的“背景图像”下面有“重复”项，可以选择图像在网页中的平铺方式。注意：挑选的背景图像要能体现网站的整体风格和特色，与网页内容要和谐统一。185.1 插入图像插入图像l2将图片设置为表格的背景图像l在表格的属性面板(图5.10)和单元格的属性面

11、板(图5.11)中均有“背景图像”项，通过此项可以为表格或者单元格设置背景图像。195.1 插入图像插入图像l5.1.6 创建鼠标经过图像创建鼠标经过图像l可以在页面中插入鼠标经过图像。在浏览器中浏览，鼠标经过这种图像时，图像会发生变化。鼠标经过图像实际上由两个图像组成，原始图像(当首次载入页时显示的图像)和鼠标经过图像(当鼠标指针移到原始图像时显示的图像)。这两张图像一般要大小一致，如果不一致，Dreamweaver会自动调整鼠标经过图像的大小使其与原始图像一致。205.1 插入图像插入图像l若要创建鼠标经过图像，在文档窗口中，将插入点放置在要显示鼠标经过图像的位置。选择主菜单【插入】|【图

12、像对象】|【鼠标经过图像】。弹出“插入鼠标经过图像”对话框，如图5.12所示。在对话框中分别输入两个图像文件的路径，即完成鼠标经过图像的创建。l鼠标经过图像的浏览效果如图5.13所示。当鼠标指针移到图像上时，图像变成另外一幅。215.2 插入声音插入声音l5.2.1 网页中的声音l声音能极好的烘托网页页面的氛围，网页中常见的声音格式有MIDI、WAV、AIF、MP3、RA等格式。l.midi或.mid(乐器数字接口)格式用于器乐。许多浏览器都支持MIDI文件，并且不需要插件。很小的MIDI文件就可以提供较长时间的声音剪辑。MIDI文件不能被录制并且必须使用特殊的硬件和软件在计算机上合成。225

13、.2 插入声音插入声音l.wav(Waveform)格式文件具有较好的声音品质，许多浏览器都支持此类格式文件并且不要求插件。可以从CD、磁带、麦克风等录制自己的WAV文件。但是，其较大的文件大小严格限制了可以在Web页面上使用的声音剪辑的长度。l.aif(音频交换文件格式，或AIFF)格式与WAV格式类似，也具有较好的声音品质，大多数浏览器都可以播放它并且不要求插件；同样其较大的文件大小严格限制了可以在Web页面上使用的声音剪辑的长度。235.2 插入声音插入声音l.mp3(运动图像专家组音频，即MPEG-音频层-3)格式是一种压缩格式，它可使声音文件明显缩小。其声音品质非常好，如果正确录制和

14、压缩MP3文件，其质量甚至可以和CD质量相媲美。MP3技术可以对文件进行“流式处理”，以便访问者不必等待整个文件下载完成即可收听该文件。若要播放MP3文件，访问者必须下载并安装辅助应用程序或插件，例如QuickTime、Windows Media Player或RealPlayer。 245.2 插入声音插入声音l.ra、.ram、.rpm或Real Audio格式具有非常高的压缩比，文件大小要小于MP3。全部歌曲文件可以在合理的时间范围内下载。因为可以在普通的Web服务器上对这些文件进行“流式处理”，所以访问者在文件完全下载完之前就可听到声音。访问者必须下载并安装RealPlayer辅助应用

15、程序或插件才可以播放这些文件。255.2 插入声音插入声音l.qt、.qtm、.mov和QuickTime是由Apple Computer开发的音频和视频格式。Apple Macintosh操作系统中包含了QuickTime，并且大多数使用音频、视频或动画的Macintosh应用程序都使用QuickTime。PC也可播放QuickTime格式的文件，但是要求特殊的QuickTime驱动程序。265.2 插入声音插入声音l5.2.2 声音的插入l1添加背景音乐l在页面中可以嵌入背景音乐。这种音乐多以MP3，MIDI文件为主，在Dreamweaver中，添加背景音乐有两种方法，一种是通过手写代码实

16、现，还有一种是通过行为实现。275.2 插入声音插入声音l在HTML语言中，通过这个标记可以嵌入多种格式的音乐文件，具体步骤是：图5.15 媒体菜单l切换到Dreamweaver的代码视图，将插入点定位到之前的位置，写下这段代码：，如图5.14所示。285.2 插入声音插入声音l在浏览器中预览效果，就可以听见背景音乐声。l这里假设已经将01.mid音乐文件存放在站点中的med文件夹里。l如果希望循环播放音乐，源代码修改为：即可。295.2 插入声音插入声音l2. 嵌入音乐l可以采用嵌入播放器的方式将声音直接插入页面中，但只有浏览者在浏览网页时具有所选声音文件的适当插件，声音才可以播放。如果希望

17、在页面显示播放器的外观，可以使用以下方法。305.2 插入声音插入声音l打开网页，将插入点放置于准备显示播放器的位置。在插入工具栏选择“常用”类别，单击“媒体”按钮右侧的下拉按钮，从下拉菜单中选择【插件】(如图5.15所示)，或选择主菜单【插入】|【媒体】|【插件】命令，弹出“选择文件”对话框。l在对话框中选择音频文件，单击确定按钮后，插入的插件在文档窗口中显示图标。选中该图标，在属性面板中可以对播放器的属性(图5.16)进行设置：315.2 插入声音插入声音l要实现循环播放音乐的效果，单击属性面板中的“参数”按钮，弹出对话框(如图5.17所示)，在对话框中，单击“”按钮，在“参数”列中输入l

18、oop，并在“值”列中输入true。若要实现自动播放，再单击“”按钮，添加一行“autostart”、“true”，单击“确定”按钮完成添加。l这个页面即实现了嵌入音乐的效果。打开浏览器预览，在浏览器里会显示播放插件(图5.18)。325.3 插入动画和视频插入动画和视频l除了声音和图像以外，在网页中还可以添加动画和视频来增强网页的表现力，丰富文档的显示效果。可以向网页添加Flash动画、Shockwave影片和视频等多媒体内容。335.3 插入动画和视频插入动画和视频l5.3.1 插入插入Flash动画动画l插入Flash动画时，先将插入点置于欲插入动画的位置，打开媒体菜单(参见图5.15)

19、，选择【Flash】，弹出“选择文件”对话框，在对话框中选择Flash动画文件后，紧接着将弹出如图5.19所示的“对象标签辅助功能属性”对话框，在对话框的“标题”文本框中输入媒体对象的标题，单击“确定”，该动画即插入到文档中，插入的Flash动画以一个带有字母F的灰色框来表示。345.3 插入动画和视频插入动画和视频l在文档窗口选中这个Flash动画，就可以在属性面板(图5.20)中设置它的属性了。l在属性面板最左侧的未标记文本框中可以为对象输入ID，以方便进行脚本撰写。l【宽】和【高】以像素为单位指定动画的宽度和高度。l【文件】显示Flash文件的路径。l【源文件】指定Flash源文档(FL

20、A)的路径。l【编辑】允许用户启动Flash以更新FLA文件。如果计算机上没有安装Flash，此按钮将被禁用。355.3 插入动画和视频插入动画和视频l【重设大小】将选定动画返回到其初始大小。l【循环】，选中该选项时动画将连续播放；如果没有选中该选项，则动画在播放一次后即停止播放。l【自动播放】，如果选中该选项，则在加载页面时自动播放动画。l【垂直边距】和【水平边距】指定动画上、下、左、右空白的像素数。365.3 插入动画和视频插入动画和视频l【品质】在动画播放期间控制抗失真。设置越高，影片的观看效果就越好；但这要求更快的处理器以使动画在屏幕上正确显示。“低品质”设置更看重速度而不是效果；而“

21、高品质”设置则更看重效果而非速度；“自动低品质”设置优先看重速度，如有可能则改善效果；“自动高品质”设置优先看重效果，但有可能会因为速度而影响效果。375.3 插入动画和视频插入动画和视频l【比例】确定动画如何匹配在宽度和高度文本框中设置的尺寸。“默认值”设置显示整个动画；“无边框”使动画适合设定的尺寸，因此无边框显示并维持原始的纵横比；“严格匹配”对动画进行缩放以适合设定的尺寸，而不管纵横比如何。l【对齐】确定动画在页面上的对齐方式。l【背景颜色】指定动画区域的背景颜色。在不播放动画时(在加载时和在播放后)也显示此颜色。385.3 插入动画和视频插入动画和视频l【参数】用于打开一个对话框，可

22、在其中输入传递给动画的附加参数。比如为了使页面的背景在Flash下能够衬托出来，可以在对话框中，设置参数为“wmode”，值为“transparent”。这样在任何背景下，Flash动画都能实现透明背景的显示。l设置完成后，可以点击【播放】在Dreamweaver中播放Flash，观看效果。如图5.21所示。395.3 插入动画和视频插入动画和视频l5.3.2 插入插入Shockwave影片影片lShockwave作为Web上用于交互式多媒体的Macromedia标准，是一种经过压缩的格式，可以在大多数浏览器中播放。可以使用Dreamweaver将Shockwave影片插入到文档中。l插入Sh

23、ockwave影片的操作步骤如下：405.3 插入动画和视频插入动画和视频l在文档窗口中，将插入点定位在要插入Shockwave影片的地方，打开媒体菜单(参见图5.15)，选择【Shockwave】，或者选择主菜单【插入】|【媒体】|【Shockwave】。弹出“选择文件”对话框，在对话框中选择Shockwave影片文件后，紧接着将弹出“对象标签辅助功能属性”对话框，在对话框的“标题”文本框中输入媒体对象的标题，单击“确定”，该影片即插入到文档中。l插入影片后，在属性面板中，可以对其宽高、边距、参数、背景颜色等属性进行设置。415.3 插入动画和视频插入动画和视频l5.3.3 视频的添加视频的

24、添加l在Dreamweaver中，可以通过不同方式将不同格式的视频(AVI、MPEG、WMA等)添加到Web页面。视频可被下载给用户，或者可以对视频进行流式处理以便在下载它的同时进行播放。l除了5.3.2中介绍的通过插入Shockwave影片的方法插入视频以外，还可以通过以下方法插入视频。425.3 插入动画和视频插入动画和视频l1.利用ActiveX控件插入视频lActiveX控件是可以充当浏览器插件的可复用组件。在网页中添加一些不同功能的ActiveX控件可以实现播放视频、显示计算表内容等，只要浏览者的浏览器支持ActiveX控件的功能，就会自动执行它。在这里利用ActiveX控件来插入一

25、个视频文件。435.3 插入动画和视频插入动画和视频l打开媒体菜单(参见图5.15)，选择【ActiveX】，或者选择主菜单【插入】|【媒体】|【ActiveX】，弹出“对象标签辅助功能属性”对话框，在对话框的“标题”文本框中输入对象的标题，单击“确定”，就会在文档中插入一个ActiveX图标。选中该图标，在属性面板中，设置宽高尺寸，选中“嵌入”复选框，启用“源文件”，然后单击后面的“浏览”按钮选择视频文件。接着单击该面板中的“参数”按钮，打开“参数”对话框，可以在其中为该ActiveX对象设置一些参数，如图5.22所示。445.3 插入动画和视频插入动画和视频l设置完成后，在浏览器中浏览的效

26、果如图5.23所示。l2.在代码中插入视频l用标签可以在代码中插入视频。通常用来播放Windows Media Player支持的格式。也可以用它播放一些其它格式的视频，只是要注意更多的细节。455.3 插入动画和视频插入动画和视频l不用写。便是embed最简洁写法，只要这样写就可以播放影音文件了，效果如图5.24所示。l写入代码后，在设计视图中选择此插件，即可在属性面板中可以修改其宽高等参数。 465.4 其它多媒体元素的插入其它多媒体元素的插入l在Dreamweaver中，为了使网页更富有动感，可以插入Flash文本、Flash按钮、FlashPaper、Flash video等多媒体元素

27、。475.4 其它多媒体元素的插入其它多媒体元素的插入l1. 插入Flash按钮lFlash按钮对象可以定制和插入一个已经设计好的Flash按钮。即使不会使用Flash软件也可以在Dreamweaver中直接插入Flash动画格式的按钮。注意，插入Flash按钮的操作只能在已经保存过的网页中进行。485.4 其它多媒体元素的插入其它多媒体元素的插入l若要插入Flash按钮对象，将插入点放置在要插入按钮的位置。打开媒体菜单(参见图5.15)，选择【Flash按钮】，或者选择主菜单【插入】|【媒体】|【Flash按钮】命令，会出现“插入Flash按钮”对话框，如图5.25所示。l在对话框中选择一种

28、“样式”，在“按钮文本”文本框中输入要显示的文本内容，设置文本的字体和大小、Flash按钮的链接目标、背景色等项目后，点击“确定”，就将Flash按钮插入到了文档窗口中，效果如图5.26所示。495.4 其它多媒体元素的插入其它多媒体元素的插入l插入Flash按钮后，还可以对其进行修改，选择Flash按钮后，在属性面板中可以修改“宽”、“高”等参数(图5.27)，也可以双击Flash按钮，再次弹出图5.25所示的对话框，对Flash按钮进行重新编辑。505.4 其它多媒体元素的插入其它多媒体元素的插入l2. 插入Flash文本图5.28 插入Flash文本对话框l利用添加Flash文本功能可以

29、使用自选的字体、字型和字号来制作一个仅仅包含文本对象的Flash动画。将插入点放置在要插入Flash文本的位置。打开媒体菜单(参见图5.15)，选择【Flash文本】，或者选择主菜单【插入】|【媒体】|【Flash文本】命令，会出现“插入Flash文本”对话框。如图5.28所示。515.4 其它多媒体元素的插入其它多媒体元素的插入l在该对话框中设置文本的“字体”、“大小”、“颜色”、“转滚颜色”，在“文本”文本框中输入想要的文字(比如“Flash文本”这几个字)，添加链接、背景色等。完成“插入Flash文本”对话框后，单击“应用”或“确定”，将Flash文本插入文档窗口中。插入的Flash文本

30、效果预览如图5.29所示。525.4 其它多媒体元素的插入其它多媒体元素的插入l3. 插入FlashPaperlFlashPaper是Macromedia推出的一款电子文档类工具，通过程序将需要的文档进行简单的设置转换为SWF格式的Flash动画，原文档的排版样式和字体显示不会受到影响，这样做的好处是不论对方的平台和语言版本是什么，都能够观看所制作的电子文档动画，并可以进行放大、缩小、打印、翻页等操作，有利于文档的传播，而且由于Flash动画的普及性和可调节性，可以制作出非常漂亮的电子文档！535.4 其它多媒体元素的插入其它多媒体元素的插入l将插入点放置在要插入FlashPaper的位置。打

31、开媒体菜单(参见图5.15)，选择【FlashPaper】，或者选择主菜单【插入】|【媒体】|【FlashPaper】命令。会出现“插入FlashPaper”对话框。在对话框中，浏览到一个FlashPaper文档并将其选定。如果需要，通过输入宽度和高度(以像素为单位)指定FlashPaper对象在Web页上的尺寸。FlashPaper将缩放文档以适合宽度。单击“确定”在页面中插入文档。545.4 其它多媒体元素的插入其它多媒体元素的插入l由于FlashPaper文档是Flash对象，因此页面上将出现一个Flash占位符。若要预览FlashPaper文档，可以单击该占位符，然后单击属性面板中的“播放”按钮。单击“停止”可以结束预览。也可以在浏览器中预览该文档。FlashPaper工具栏在浏览器中具有全部功能。如果需要，在属性面板中可以设置其他属性。 555.4 其它多媒体元素的插入其