图像和其它媒体

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

2、GIF是Internet上运用最广泛的图像文件格式之一。它的特点是体积小，支持小型翻页型动画，GIF图像最多可以运用256种颜色，最适宜制造徽标、图标、按钮和其他颜色、风格比较单一的图片。5.1 插入图像2.JPEG/JPG格式JPEG/JPG也是Internet上运用最广泛的图像文件格式之一，它可以保管上百万种颜色，采用有损紧缩方式，紧缩比高，最适宜用来保管照片。3.PNG格式PNG是一种新兴的网络图像格式，兼有GIF和JPG的优点。它的显示速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像。5.1 插入图像5.1.2 图像的插入在制造网页时，为了保证图像文件所在目录的正确性

3、，插入的图像应该和网页位于同一个站点内，假设图像不在当前站点，Dreamweaver会提示用户将文件复制到当前站点的文件夹中。插入图像时，将光标放置在文档窗口需求插入图像的位置，然后单击插入工具栏“常用类别中的“插入图像按钮 (如图5.1所示)，或者选择主菜单【插入】|【图像】命令。5.1 插入图像在弹出的“选择图像源文件对话框中，选择需求的图像文件(如图5.2所示)。单击“确定按钮，弹出图5.3所示“图像标签辅助功能属性对话框，该对话框允许为此图片定义“交换文本和“详细阐明，交换文本用于提供对该图像的文字描画。当图像不能正常显示时，该交换文本将显示在图像应该显示的位置。对于较长的描画，可以在

4、“详细阐明文本框中提供链接，指向提供该图像更多信息的文件。设置完成后单击“确定按钮，图片就会插入到文档中。 5.1 插入图像留意：假设在插入图片的时候，没有将图片保管在站点根目录下，会弹出对话框，提示用户要把图片保管在站点内部，这时单击“是按钮，然后选择本地站点的途径将图片保管。5.1 插入图像5.1.3 图像的属性面板在文档中，单击一个图像即可将其选中，被选中的图像周围会出现选择框和三个控制点。经过拖动三个控制点可以改动图像的大小。按着shift键，再拖动角上的控制点，可以使图像在拉伸过程中坚持宽高比例不变。普通来说，在插入图像之前，应该利用其它图像处置软件对图像进展效果处置，并根据其在网页

5、中所占位置的宽度和高度进展裁切或紧缩，不引荐在Dreamweaver中缩放图像。5.1 插入图像选中图像后，在属性面板中显示出图像的属性，如图5.4所示。在属性面板的左上角，显示当前图像的缩略图，同时显示图像文件的大小。在缩略图右侧有一个文本框，在其中可以输入图像的标志称号(id)，在运用Dreamweaver的行为(例如交换图像)或编写脚本代码时可以经过id援用该图像。属性面板中有图像宽度和高度，假设图像大小与原图不一致的话，这里的数字会用粗体显示；当然也可以经过修正这里的数值对图片进展缩放。 5.1 插入图像点击高度和宽度后面 的按钮可以恢复图像的原始大小。【源文件】用于显示当前图像源文件

6、的途径。单击其后的阅读文件按钮 可以更改源文件。【链接】用于指定图像的链接，有关链接的设置参见第6章。【交换】用于显示和修正交换文本。【编辑】之后有六个按钮，其中 (编辑)按钮用来启动在主菜单【编辑】|【首选参数】中指定的外部编辑器，并翻开选定的图像进展编辑 (运用Fireworks最 5.1 插入图像 优化)按钮可以从Dreamweaver中启动Fireworks对放置的Fireworks图像和动画进展快速的导出更改。 (裁切)按钮用来修剪图像的大小，从所选图像中删除不需求的区域。 (重新取样)按钮用来对曾经调整大小的图像进展重新取样，提高图片在新的大小和外形下的质量。 (亮度和对比度)按钮

7、用来修正图像中像素的亮度和对比度。 (锐化)按钮用来调整图像的明晰度。5.1 插入图像【地图】项可以利用其下面热点工具在图像中绘制热点，在文本框中为热点区域命名。有关“图像地图的运用参见第6章。【垂直边距】和【程度边距】项可以为图像的周围添加边距，以像素为单位。【目的】项与【链接】项相关，为链接目的选择翻开方式。【边框】用于为图片设置边框宽度，以像素为单位。5.1 插入图像5.1.4 图像的对齐方式单击属性面板中的 按钮，可以分别将图像设置为在阅读器窗口或其所处容器中居左、居中或居右。在属性面板中，“对齐下拉列表用来设置图像与文本的相互对齐方式，共有10个选项。经过它可以将文字对齐到图像的上端

8、、下端、左边和右边等，从而可以灵敏的实现文字与图片的混排效果。5.1 插入图像【默许值】通常指定基线对齐。【基线】和【底部】将文本(或同一段落中的其它元素)的基线与选定对象的底部对齐。【顶端】将图像的顶端与当前行中最高项(图像或文本)的顶端对齐。【居中】将图像的中部与当前行的基线对齐。【文本上方】将图像的顶端与文本行中最高字符的顶端对齐。【绝对居中】将图像的中部与当前行中文本的中部对齐。5.1 插入图像【绝对底部】将图像的底部与文本行的底部对齐。【左对齐】将所选图像放置在左边，文本在图像的右侧换行。假设左对齐文本在行上处于对象之前，它通常强迫左对齐对象换到一个新行。【右对齐】将图像放置在右边，

9、文本在对象的左侧换行。假设右对齐文本在行上处于对象之前，它通常强迫右对齐对象换到一个新行。图5.5、图5.6和图5.7分别显示了其中三种比较常用的对齐方式。5.1 插入图像5.1.5 将图像设置为背景图片设置为背景包括两种情况，一种是将图片设置为页面背景，另一种是将图片设置为具有容器特性的元素的背景，如表格、单元格等。1将图片设置为网页的背景图像按照3.1.4节所述方法进入页面属性的设置对话框，在“外观选项有“背景图像项，如图5.8所示.5.1 插入图像直接在“背景图像文本框中输入图像文件称号及途径，或者单击“阅读按钮，弹出如图5.9所示的对话框进展背景图片的选择。在图5.8的“背景图像下面有

10、“反复项，可以选择图像在网页中的平铺方式。留意：挑选的背景图像要能表达网站的整体风格和特征，与网页内容要调和一致。5.1 插入图像2将图片设置为表格的背景图像在表格的属性面板(图5.10)和单元格的属性面板(图5.11)中均有“背景图像项，经过此项可以为表格或者单元格设置背景图像。5.1 插入图像5.1.6 创建鼠标经过图像可以在页面中插入鼠标经过图像。在阅读器中阅读，鼠标经过这种图像时，图像会发生变化。鼠标经过图像实践上由两个图像组成，原始图像(当初次载入页时显示的图像)和鼠标经过图像(当鼠标指针移到原始图像时显示的图像)。这两张图像普通要大小一致，假设不一致，Dreamweaver会自动调

11、整鼠标经过图像的大小使其与原始图像一致。5.1 插入图像假设要创建鼠标经过图像，在文档窗口中，将插入点放置在要显示鼠标经过图像的位置。选择主菜单【插入】|【图像对象】|【鼠标经过图像】。弹出“插入鼠标经过图像对话框，如图5.12所示。在对话框中分别输入两个图像文件的途径，即完成鼠标经过图像的创建。鼠标经过图像的阅读效果如图5.13所示。当鼠标指针移到图像上时，图像变成另外一幅。5.2 插入声音5.2.1 网页中的声音声音能极好的烘托网页页面的气氛，网页中常见的声音格式有MIDI、WAV、AIF、MP3、RA等格式。.midi或.mid(乐器数字接口)格式用于器乐。许多阅读器都支持MIDI文件，

12、并且不需求插件。很小的MIDI文件就可以提供较长时间的声音剪辑。MIDI文件不能被录制并且必需运用特殊的硬件和软件在计算机上合成。5.2 插入声音.wav(Waveform)格式文件具有较好的声音质量，许多阅读器都支持此类格式文件并且不要求插件。可以从CD、磁带、麦克风等录制本人的WAV文件。但是，其较大的文件大小严厉限制了可以在Web页面上运用的声音剪辑的长度。.aif(音频交换文件格式，或AIFF)格式与WAV格式类似，也具有较好的声音质量，大多数阅读器都可以播放它并且不要求插件；同样其较大的文件大小严厉限制了可以在Web页面上运用的声音剪辑的长度。5.2 插入声音.mp3(运动图像专家组

13、音频，即MPEG-音频层-3)格式是一种紧缩格式，它可使声音文件明显减少。其声音质量非常好，假设正确录制和紧缩MP3文件，其质量甚至可以和CD质量相媲美。MP3技术可以对文件进展“流式处置，以便访问者不用等待整个文件下载完成即可收听该文件。假设要播放MP3文件，访问者必需下载并安装辅助运用程序或插件，例如QuickTime、Windows Media Player或RealPlayer。 5.2 插入声音.ra、.ram、.rpm或Real Audio格式具有非常高的紧缩比，文件大小要小于MP3。全部歌曲文件可以在合理的时间范围内下载。由于可以在普通的Web效力器上对这些文件进展“流式处置，所

14、以访问者在文件完全下载完之前就可听到声音。访问者必需下载并安装RealPlayer辅助运用程序或插件才可以播放这些文件。5.2 插入声音.qt、.qtm、.mov和QuickTime是由Apple Computer开发的音频和视频格式。Apple Macintosh操作系统中包含了QuickTime，并且大多数运用音频、视频或动画的Macintosh运用程序都运用QuickTime。PC也可播放QuickTime格式的文件，但是要求特殊的QuickTime驱动程序。5.2 插入声音5.2.2 声音的插入1添加背景音乐在页面中可以嵌入背景音乐。这种音乐多以MP3，MIDI文件为主，在Dreamw

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

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

17、假设要实现自动播放，再单击“按钮，添加一行“autostart、“true，单击“确定按钮完成添加。这个页面即实现了嵌入音乐的效果。翻开阅读器预览，在阅读器里会显示播放插件(图5.18)。5.3 插入动画和视频除了声音和图像以外，在网页中还可以添加动画和视频来加强网页的表现力，丰富文档的显示效果。可以向网页添加Flash动画、Shockwave影片和视频等多媒体内容。5.3 插入动画和视频5.3.1 插入Flash动画插入Flash动画时，先将插入点置于欲插入动画的位置，翻开媒体菜单(参见图5.15)，选择【Flash】，弹出“选择文件对话框，在对话框中选择Flash动画文件后，紧接着将弹出如

18、图5.19所示的“对象标签辅助功能属性对话框，在对话框的“标题文本框中输入媒体对象的标题，单击“确定，该动画即插入到文档中，插入的Flash动画以一个带有字母F的灰色框来表示。5.3 插入动画和视频在文档窗口选中这个Flash动画，就可以在属性面板(图5.20)中设置它的属性了。在属性面板最左侧的未标志文本框中可以为对象输入ID，以方便进展脚本撰写。【宽】和【高】以像素为单位指定动画的宽度和高度。【文件】显示Flash文件的途径。【源文件】指定Flash源文档(FLA)的途径。【编辑】允许用户启动Flash以更新FLA文件。假设计算机上没有安装Flash，此按钮将被禁用。5.3 插入动画和视频

19、【重设大小】将选定动画前往到其初始大小。【循环】，选中该选项时动画将延续播放；假设没有选中该选项，那么动画在播放一次后即停顿播放。【自动播放】，假设选中该选项，那么在加载页面时自动播放动画。【垂直边距】和【程度边距】指定动画上、下、左、右空白的像素数。5.3 插入动画和视频【质量】在动画播放期间控制抗失真。设置越高，影片的观看效果就越好；但这要求更快的处置器以使动画在屏幕上正确显示。“低质量设置更看重速度而不是效果；而“高质量设置那么更看重效果而非速度；“自动低质量设置优先看重速度，如有能够那么改善效果；“自动高质量设置优先看重效果，但有能够会由于速度而影响效果。5.3 插入动画和视频【比例】

20、确定动画如何匹配在宽度和高度文本框中设置的尺寸。“默许值设置显示整个动画；“无边框使动画适宜设定的尺寸，因此无边框显示并维持原始的纵横比；“严厉匹配对动画进展缩放以适宜设定的尺寸，而不论纵横比如何。【对齐】确定动画在页面上的对齐方式。【背景颜色】指定动画区域的背景颜色。在不播放动画时(在加载时和在播放后)也显示此颜色。5.3 插入动画和视频【参数】用于翻开一个对话框，可在其中输入传送给动画的附加参数。比如为了使页面的背景在Flash下可以烘托出来，可以在对话框中，设置参数为“wmode，值为“transparent。这样在任何背景下，Flash动画都能实现透明背景的显示。设置完成后，可以点击【

21、播放】在Dreamweaver中播放Flash，观看效果。如图5.21所示。5.3 插入动画和视频5.3.2 插入Shockwave影片Shockwave作为Web上用于交互式多媒体的Macromedia规范，是一种经过紧缩的格式，可以在大多数阅读器中播放。可以运用Dreamweaver将Shockwave影片插入到文档中。插入Shockwave影片的操作步骤如下：5.3 插入动画和视频在文档窗口中，将插入点定位在要插入Shockwave影片的地方，翻开媒体菜单(参见图5.15)，选择【Shockwave】，或者选择主菜单【插入】|【媒体】|【Shockwave】。弹出“选择文件对话框，在对话

22、框中选择Shockwave影片文件后，紧接着将弹出“对象标签辅助功能属性对话框，在对话框的“标题文本框中输入媒体对象的标题，单击“确定，该影片即插入到文档中。插入影片后，在属性面板中，可以对其宽高、边距、参数、背景颜色等属性进展设置。5.3 插入动画和视频5.3.3 视频的添加在Dreamweaver中，可以经过不同方式将不同格式的视频(AVI、MPEG、WMA等)添加到Web页面。视频可被下载给用户，或者可以对视频进展流式处置以便在下载它的同时进展播放。除了5.3.2中引见的经过插入Shockwave影片的方法插入视频以外，还可以经过以下方法插入视频。5.3 插入动画和视频1.利用Activ

23、eX控件插入视频ActiveX控件是可以充任阅读器插件的可复用组件。在网页中添加一些不同功能的ActiveX控件可以实现播放视频、显示计算表内容等，只需阅读者的阅读器支持ActiveX控件的功能，就会自动执行它。在这里利用ActiveX控件来插入一个视频文件。5.3 插入动画和视频翻开媒体菜单(参见图5.15)，选择【ActiveX】，或者选择主菜单【插入】|【媒体】|【ActiveX】，弹出“对象标签辅助功能属性对话框，在对话框的“标题文本框中输入对象的标题，单击“确定，就会在文档中插入一个ActiveX图标。选中该图标，在属性面板中，设置宽高尺寸，选中“嵌入复选框，启用“源文件，然后单击后

24、面的“阅读按钮选择视频文件。接着单击该面板中的“参数按钮，翻开“参数对话框，可以在其中为该ActiveX对象设置一些参数，如图5.22所示。5.3 插入动画和视频设置完成后，在阅读器中阅读的效果如图5.23所示。2.在代码中插入视频用标签可以在代码中插入视频。通常用来播放Windows Media Player支持的格式。也可以用它播放一些其它格式的视频，只是要留意更多的细节。5.3 插入动画和视频不用写。便是embed最简约写法，只需这样写就可以播放影音文件了，效果如图5.24所示。写入代码后，在设计视图中选择此插件，即可在属性面板中可以修正其宽高等参数。 5.4 其它多媒体元素的插入在Dr

25、eamweaver中，为了使网页更富有动感，可以插入Flash文本、Flash按钮、FlashPaper、Flash video等多媒体元素。5.4 其它多媒体元素的插入1. 插入Flash按钮Flash按钮对象可以定制和插入一个曾经设计好的Flash按钮。即使不会运用Flash软件也可以在Dreamweaver中直接插入Flash动画格式的按钮。留意，插入Flash按钮的操作只能在曾经保管过的网页中进展。5.4 其它多媒体元素的插入假设要插入Flash按钮对象，将插入点放置在要插入按钮的位置。翻开媒体菜单(参见图5.15)，选择【Flash按钮】，或者选择主菜单【插入】|【媒体】|【Flas

26、h按钮】命令，会出现“插入Flash按钮对话框，如图5.25所示。在对话框中选择一种“款式，在“按钮文本文本框中输入要显示的文本内容，设置文本的字体和大小、Flash按钮的链接目的、背风光等工程后，点击“确定，就将Flash按钮插入到了文档窗口中，效果如图5.26所示。5.4 其它多媒体元素的插入插入Flash按钮后，还可以对其进展修正，选择Flash按钮后，在属性面板中可以修正“宽、“高等参数(图5.27)，也可以双击Flash按钮，再次弹出图5.25所示的对话框，对Flash按钮进展重新编辑。5.4 其它多媒体元素的插入2. 插入Flash文本图5.28 插入Flash文本对话框利用添加F

27、lash文本功能可以运用自选的字体、字型和字号来制造一个仅仅包含文本对象的Flash动画。将插入点放置在要插入Flash文本的位置。翻开媒体菜单(参见图5.15)，选择【Flash文本】，或者选择主菜单【插入】|【媒体】|【Flash文本】命令，会出现“插入Flash文本对话框。如图5.28所示。5.4 其它多媒体元素的插入在该对话框中设置文本的“字体、“大小、“颜色、“转滚颜色，在“文本文本框中输入想要的文字(比如“Flash文本这几个字)，添加链接、背风光等。完成“插入Flash文本对话框后，单击“运用或“确定，将Flash文本插入文档窗口中。插入的Flash文本效果预览如图5.29所示。

28、5.4 其它多媒体元素的插入3. 插入FlashPaperFlashPaper是Macromedia推出的一款电子文档类工具，经过程序将需求的文档进展简单的设置转换为SWF格式的Flash动画，原文档的排版款式和字体显示不会遭到影响，这样做的益处是不论对方的平台和言语版本是什么，都可以观看所制造的电子文档动画，并可以进展放大、减少、打印、翻页等操作，有利于文档的传播，而且由于Flash动画的普及性和可调理性，可以制造出非常美丽的电子文档！5.4 其它多媒体元素的插入将插入点放置在要插入FlashPaper的位置。翻开媒体菜单(参见图5.15)，选择【FlashPaper】，或者选择主菜单【插入

29、】|【媒体】|【FlashPaper】命令。会出现“插入FlashPaper对话框。在对话框中，阅读到一个FlashPaper文档并将其选定。假设需求，经过输入宽度和高度(以像素为单位)指定FlashPaper对象在Web页上的尺寸。FlashPaper将缩放文档以适宜宽度。单击“确定在页面中插入文档。5.4 其它多媒体元素的插入由于FlashPaper文档是Flash对象，因此页面上将出现一个Flash占位符。假设要预览FlashPaper文档，可以单击该占位符，然后单击属性面板中的“播放按钮。单击“停顿可以终了预览。也可以在阅读器中预览该文档。FlashPaper工具栏在阅读器中具有全部功能。假设需求，在属性面板中可以设置其他属性。 5.4 其它多媒体元素的插入4.