第五章节 图像跟其它媒体资料.pptVIP

第5章 图像和其它媒体 第5章 图像和其它媒体 一个优秀的网站应该不仅仅是由文字组成的，事实上，在网页中还大量地使用图像、声音、动画和视频等多媒体元素，并且这些元素在网页设计中的地位日益重要。本章将介绍如何在网页中插入图像、声音、动画、视频等多媒体元素。 5.1 插入图像 图像本身是一种重要的信息载体。在文档中适当放入一些图像，不仅可以使文档清晰直观，而且使得文档更具吸引力，更好地表现主题。当然，图像的增加也会使网页的下载时间大大增加，所以设计网页时要整体考虑要使用的图像数目和大小。 5.1 插入图像 5.1.1 在Web中使用的图像格式 在Web中，通常使用的有GIF、JPEG/JPG、PNG三种图像文件格式。 1.GIF格式 GIF是Internet上应用最广泛的图像文件格式之一。它的特点是体积小，支持小型翻页型动画，GIF图像最多可以使用256种颜色，最适合制作徽标、图标、按钮和其他颜色、风格比较单一的图片。 5.1 插入图像 2.JPEG/JPG格式 JPEG/JPG也是Internet上应用最广泛的图像文件格式之一，它可以保存上百万种颜色，采用有损压缩方式，压缩比高，最适合用来保存照片。 3.PNG格式 PNG是一种新兴的网络图像格式，兼有GIF和JPG的优点。它的显示速度很快，只需下载1/64的图像信息就可以显示出低分辨率的预览图像。 5.1 插入图像 5.1.2 图像的插入 在制作网页时，为了保证图像文件所在目录的正确性，插入的图像应该和网页位于同一个站点内，如果图像不在当前站点，Dreamweaver会提示用户将文件复制到当前站点的文件夹中。 插入图像时，将光标放置在文档窗口需要插入图像的位置，然后单击插入工具栏“常用”类别中的“插入图像”按钮 (如图5.1所示)，或者选择主菜单【插入】|【图像】命令。 5.1 插入图像 在弹出的“选择图像源文件”对话框中，选择需要的图像文件(如图5.2所示)。 单击“确定”按钮，弹出图5.3所示“图像标签辅助功能属性”对话框，该对话框允许为此图片定义“替换文本”和“详细说明”，替换文本用于提供对该图像的文字描述。当图像不能正常显示时，该替换文本将显示在图像应该显示的位置。对于较长的描述，可以在“详细说明”文本框中提供链接，指向提供该图像更多信息的文件。设置完成后单击“确定”按钮，图片就会插入到文档中。 5.1 插入图像 注意：如果在插入图片的时候，没有将图片保存在站点根目录下，会弹出对话框，提醒用户要把图片保存在站点内部，这时单击“是”按钮，然后选择本地站点的路径将图片保存。 5.1 插入图像 5.1.3 图像的属性面板 在文档中，单击一个图像即可将其选中，被选中的图像周围会出现选择框和三个控制点。通过拖动三个控制点可以改变图像的大小。按着shift键，再拖动角上的控制点，可以使图像在拉伸过程中保持宽高比例不变。一般来说，在插入图像之前，应该利用其它图像处理软件对图像进行效果处理，并根据其在网页中所占位置的宽度和高度进行裁切或压缩，不推荐在Dreamweaver中缩放图像。 5.1 插入图像 选中图像后，在属性面板中显示出图像的属性，如图5.4所示。 在属性面板的左上角，显示当前图像的缩略图，同时显示图像文件的大小。在缩略图右侧有一个文本框，在其中可以输入图像的标记名称(id)，在使用Dreamweaver的行为(例如交换图像)或编写脚本代码时可以通过id引用该图像。属性面板中有图像宽度和高度，如果图像大小与原图不一致的话，这里的数字会用粗体显示；当然也可以通过修改这里的数值对图片进行缩放。 5.1 插入图像 点击高度和宽度后面 的按钮可以恢复图像的原始大小。 【源文件】用于显示当前图像源文件的路径。单击其后的浏览文件按钮 可以更改源文件。 【链接】用于指定图像的链接，有关链接的设置参见第6章。 【替换】用于显示和修改替换文本。 【编辑】之后有六个按钮，其中 (编辑)按钮用来启动在主菜单【编辑】|【首选参数】中指定的外部编辑器，并打开选定的图像进行编辑 (使用Fireworks最 5.1 插入图像 优化)按钮能够从Dreamweaver中启动Fireworks对放置的Fireworks图像和动画进行快速的导出更改。 (裁切)按钮用来修剪图像的大小，从所选图像中删除不需要的区域。 (重新取样)按钮用来对已经调整大小的图像进行重新取样，提高图片在新的大小和形状下的品质。 (亮度和对比度)按钮用来修改图像中像素的亮度和对比度。 (锐化)按钮用来调整图像的清晰度。 5.1 插入图像 【地图】项可以利用其下面热点工具在图像中绘制热点，在文本框中为热点区域命名。有关“图像地图”的使用参见第6章。 【垂直边距】和【水平边距