第五章 图像和其它媒体

第5章图像和其它媒体1第5章图像和其它媒体第5章图像和其它媒体2一个优秀的网站应该不仅仅是由文字组成的，事实上，在网页中还大量地使用图像、声音、动画和视频等多媒体元素，并且这些元素在网页设计中的地位日益重要。本章将介绍如何在网页中插入图像、声音、动画、视频等多媒体元素。第5章图像和其它媒体35.1插入图像图像本身是一种重要的信息载体。在文档中适当放入一些图像，不仅可以使文档清晰直观，而且使得文档更具吸引力，更好地表现主题。当然，图像的增加也会使网页的下载时间大大增加，所以设计网页时要整体考虑要使用的图像数目和大小。第5章图像和其它媒体45.1插入图像5.1.1在Web中使用的图像格式在Web中，通常使用的有GIF、JPEG/JPG、PNG三种图像文件格式。1.GIF格式GIF是Internet上应用最广泛的图像文件格式之一。它的特点是体积小，支持小型翻页型动画，GIF图像最多可以使用256种颜色，最适合制作徽标、图标、按钮和其他颜色、风格比较单一的图片。第5章图像和其它媒体55.1插入图像2.JPEG/JPG格式JPEG/JPG也是Internet上应用最广泛的图像文件格式之一，它可以保存上百万种颜色，采用有损压缩方式，压缩比高，最适合用来保存照片。3.PNG格式PNG是一种新兴的网络图像格式，兼有GIF和JPG的优点。它的显示速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像。第5章图像和其它媒体65.1插入图像5.1.2图像的插入在制作网页时，为了保证图像文件所在目录的正确性，插入的图像应该和网页位于同一个站点内，如果图像不在当前站点，Dreamweaver会提示用户将文件复制到当前站点的文件夹中。插入图像时，将光标放置在文档窗口需要插入图像的位置，然后单击插入工具栏“常用”类别中的“插入图像”按钮(如图5.1所示)，或者选择主菜单【插入】|【图像】命令。第5章图像和其它媒体75.1插入图像在弹出的“选择图像源文件”对话框中，选择需要的图像文件(如图5.2所示)。单击“确定”按钮，弹出图5.3所示“图像标签辅助功能属性”对话框，该对话框允许为此图片定义“替换文本”和“详细说明”，替换文本用于提供对该图像的文字描述。当图像不能正常显示时，该替换文本将显示在图像应该显示的位置。对于较长的描述，可以在“详细说明”文本框中提供链接，指向提供该图像更多信息的文件。设置完成后单击“确定”按钮，图片就会插入到文档中。第5章图像和其它媒体85.1插入图像注意：如果在插入图片的时候，没有将图片保存在站点根目录下，会弹出对话框，提醒用户要把图片保存在站点内部，这时单击“是”按钮，然后选择本地站点的路径将图片保存。第5章图像和其它媒体95.1插入图像5.1.3图像的属性面板在文档中，单击一个图像即可将其选中，被选中的图像周围会出现选择框和三个控制点。通过拖动三个控制点可以改变图像的大小。按着shift键，再拖动角上的控制点，可以使图像在拉伸过程中保持宽高比例不变。一般来说，在插入图像之前，应该利用其它图像处理软件对图像进行效果处理，并根据其在网页中所占位置的宽度和高度进行裁切或压缩，不推荐在Dreamweaver中缩放图像。第5章图像和其它媒体105.1插入图像选中图像后，在属性面板中显示出图像的属性，如图5.4所示。在属性面板的左上角，显示当前图像的缩略图，同时显示图像文件的大小。在缩略图右侧有一个文本框，在其中可以输入图像的标记名称(id)，在使用Dreamweaver的行为(例如交换图像)或编写脚本代码时可以通过id引用该图像。属性面板中有图像宽度和高度，如果图像大小与原图不一致的话，这里的数字会用粗体显示；当然也可以通过修改这里的数值对图片进行缩放。第5章图像和其它媒体115.1插入图像点击高度和宽度后面的按钮可以恢复图像的原始大小。【源文件】用于显示当前图像源文件的路径。单击其后的浏览文件按钮可以更改源文件。【链接】用于指定图像的链接，有关链接的设置参见第6章。【替换】用于显示和修改替换文本。【编辑】之后有六个按钮，其中(编辑)按钮用来启动在主菜单【编辑】|【首选参数】中指定的外部编辑器，并打开选定的图像进行编辑(使用Fireworks最第5章图像和其它媒体125.1插入图像优化)按钮能够从Dreamweaver中启动Fireworks对放置的Fireworks图像和动画进行快速的导出更改。(裁切)按钮用来修剪图像的大小，从所选图像中删除不需要的区域。(重新取样)按钮用来对已经调整大小的图像进行重新取样，提高图片在新的大小和形状下的品质。(亮度和对比度)按钮用来修改图像中像素的亮度和对比度。(锐化)按钮用来调整图像的清晰度。第5章图像和其它媒体135.1插入图像【地图】项可以利用其下面热点工具在图像中绘制热点，在文本框中为热点区域命名。有关“图像地图”的使用参见第6章。【垂直边距】和【水平边距】项可以为图像的四周添加边距，以像素为单位。【目标】项与【链接】项相关，为链接目标选择打开方式。【边框】用于为图片设置边框宽度，以像素为单位。第5章图像和其它媒体145.1插入图像5.1.4图像的对齐方式单击属性面板中的按钮，可以分别将图像设置为在浏览器窗口或其所处容器中居左、居中或居右。在属性面板中，“对齐”下拉列表用来设置图像与文本的相互对齐方式，共有10个选项。通过它可以将文字对齐到图像的上端、下端、左边和右边等，从而可以灵活的实现文字与图片的混排效果。第5章图像和其它媒体155.1插入图像【默认值】通常指定基线对齐。【基线】和【底部】将文本(或同一段落中的其它元素)的基线与选定对象的底部对齐。【顶端】将图像的顶端与当前行中最高项(图像或文本)的顶端对齐。【居中】将图像的中部与当前行的基线对齐。【文本上方】将图像的顶端与文本行中最高字符的顶端对齐。【绝对居中】将图像的中部与当前行中文本的中部对齐。第5章图像和其它媒体165.1插入图像【绝对底部】将图像的底部与文本行的底部对齐。【左对齐】将所选图像放置在左边，文本在图像的右侧换行。如果左对齐文本在行上处于对象之前，它通常强制左对齐对象换到一个新行。【右对齐】将图像放置在右边，文本在对象的左侧换行。如果右对齐文本在行上处于对象之前，它通常强制右对齐对象换到一个新行。图5.5、图5.6和图5.7分别显示了其中三种比较常用的对齐方式。第5章图像和其它媒体175.1插入图像5.1.5将图像设置为背景图片设置为背景包括两种情况，一种是将图片设置为页面背景，另一种是将图片设置为具有容器特性的元素的背景，如表格、单元格等。1．将图片设置为网页的背景图像按照3.1.4节所述方法进入页面属性的设置对话框，在“外观”选项有“背景图像”项，如图5.8所示.第5章图像和其它媒体185.1插入图像直接在“背景图像”文本框中输入图像文件名称及路径，或者单击“浏览”按钮，弹出如图5.9所示的对话框进行背景图片的选择。在图5.8的“背景图像”下面有“重复”项，可以选择图像在网页中的平铺方式。注意：挑选的背景图像要能体现网站的整体风格和特色，与网页内容要和谐统一。第5章图像和其它媒体195.1插入图像2．将图片设置为表格的背景图像在表格的属性面板(图5.10)和单元格的属性面板(图5.11)中均有“背景图像”项，通过此项可以为表格或者单元格设置背景图像。第5章图像和其它媒体205.1插入图像5.1.6创建鼠标经过图像可以在页面中插入鼠标经过图像。在浏览器中浏览，鼠标经过这种图像时，图像会发生变化。鼠标经过图像实际上由两个图像组成，原始图像(当首次载入页时显示的图像)和鼠标经过图像(当鼠标指针移到原始图像时显示的图像)。这两张图像一般要大小一致，如果不一致，Dreamweaver会自动调整鼠标经过图像的大小使其与原始图像一致。第5章图像和其它媒体215.1插入图像若要创建鼠标经过图像，在文档窗口中，将插入点放置在要显示鼠标经过图像的位置。选择主菜单【插入】|【图像对象】|【鼠标经过图像】。弹出“插入鼠标经过图像”对话框，如图5.12所示。在对话框中分别输入两个图像文件的路径，即完成鼠标经过图像的创建。鼠标经过图像的浏览效果如图5.13所示。当鼠标指针移到图像上时，图像变成另外一幅。第5章图像和其它媒体225.2插入声音5.2.1网页中的声音声音能极好的烘托网页页面的氛围，网页中常见的声音格式有MIDI、WAV、AIF、MP3、RA等格式。.midi或.mid(乐器数字接口)格式用于器乐。许多浏览器都支持MIDI文件，并且不需要插件。很小的MIDI文件就可以提供较长时间的声音剪辑。MIDI文件不能被录制并且必须使用特殊的硬件和软件在计算机上合成。第5章图像和其它媒体235.2插入声音.wav(Waveform)格式文件具有较好的声音品质，许多浏览器都支持此类格式文件并且不要求插件。可以从CD、磁带、麦克风等录制自己的WAV文件。但是，其较大的文件大小严格限制了可以在Web页面上使用的声音剪辑的长度。.aif(音频交换文件格式，或AIFF)格式与WAV格式类似，也具有较好的声音品质，大多数浏览器都可以播放它并且不要求插件；同样其较大的文件大小严格限制了可以在Web页面上使用的声音剪辑的长度。第5章图像和其它媒体245.2插入声音.mp3(运动图像专家组音频，即MPEG-音频层-3)格式是一种压缩格式，它可使声音文件明显缩小。其声音品质非常好，如果正确录制和压缩MP3文件，其质量甚至可以和CD质量相媲美。MP3技术可以对文件进行“流式处理”，以便访问者不必等待整个文件下载完成即可收听该文件。若要播放MP3文件，访问者必须下载并安装辅助应用程序或插件，例如QuickTime、WindowsMediaPlayer或RealPlayer。第5章图像和其它媒体255.2插入声音.ra、.ram、.rpm或RealAudio格式具有非常高的压缩比，文件大小要小于MP3。全部歌曲文件可以在合理的时间范围内下载。因为可以在普通的Web服务器上对这些文件进行“流式处理”，所以访问者在文件完全下载完之前就可听到声音。访问者必须下载并安装RealPlayer辅助应用程序或插件才可以播放这些文件。第5章图像和其它媒体265.2插入声音.qt、.qtm、.mov和QuickTime是由AppleComputer开发的音频和视频格式。AppleMacintosh操作系统中包含了QuickTime，并且大多数使用音频、视频或动画的Macintosh应用程序都使用QuickTime。PC也可播放QuickTime格式的文件，但是要求特殊的QuickTime驱动程序。第5章图像和其它媒体275.2插入声音5.2.2声音的插入1．添加背景音乐在页面中可以嵌入背景音乐。这种音乐多以MP3，MIDI文件为主，在Dreamweaver中，添加背景音乐有两种方法，一种是通过手写代码实现，还有一种是通过行为实现。第5章图像和其它媒体285.2插入声音在HTML语言中，通过bgsound这个标记可以嵌入多种格式的音乐文件，具体步骤是：图5.15媒体菜单切换到Dreamweaver的代码视图，将插入点定位到/body之前的位置，写下这段代码：bgsoundsrc＝med/01.mid，如图5.14所示。第5章图像和其它媒体295.2插入声音在浏览器中预览效果，就可以听见背景音乐声。这里假设已经将01.mid音乐文件存放在站点中的med文件夹里。如果希望循环播放音乐，源代码修改为：bgsoundsrc=med/01.midloop=true即可。第5章图像和其它媒体305.2插入声音2.嵌入音乐可以采用嵌入播放器的方式将声音直接插入页面中，但只有浏览者在浏览网页时具有所选声音文件的适当插件，声音才可以播放。如果希望在页面显示播放器的外观，可以使用以下方法。第5章图像和其它媒体315.2插入声音