北京顺鑫农业股份有限公司拟对.pptVIP

图像通常用来添加图形界面（例如导航按钮）、具有视觉感染力的内容（例如Logo）或交互式设计元素（例如鼠标经过图像或图像地图），是网页中必不可少的元素之一。本章节将和大家一起探讨常用的Web图像的种类、基本概念及在Dreamweaver中的具体操作方法。 计算机对图像的处理也是以文件的形式进行的，由于图像编码的方法很多，因而形成了许多图像文件格式。 Web页中通常使用的只有三种格式，即GIF、JPEG和PNG。 本节将重点介绍三种图像格式的特点及其适用的范围。 扩展名为“.gif”。GIF文件是经过压缩的，最多只支持256种色彩的图像，容量较小，解码与下载速度快。 可以创建简单的动画，并支持透明背景。 最适合显示色调不连续或具有大面积单一颜色的图像，例如网页中的导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。 扩展名为“.jpg”或“.jpeg”。JPEG是一种有损压缩，可支持1670万种颜色。 随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。所以在网页中使用JPEG图像时，不妨多试几次不同的压缩率，以找到压缩率与失真度之间的最佳结合点。 扩展名是“.PNG”。PNG是Fireworks的默认格式，可保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在任何时候所有元素都是完全可编辑的。目前，不同浏览器对PNG的支持是不一致的，因而不建议在网页中使用PNG文件，还应该将它们导出为GIF或JPEG格式。 下面来学习如何在网页中插入图像，使网页更加美观，效果如图7.1所示。 （1）将光标放在“编辑区”中要插入图像的位置，如图7.2所示。然后在“插入”工具栏的“常用”类别中，单击“图像”按钮。 （2）在弹出的“选择图像源文件”对话框中，浏览并选中要插入的图像“banner.gif”，单击“确定”按钮，如图7.3所示。文档中即会出现插入的图像。 注意：如果当前工作的文档未保存，则Dreamweaver会弹出提示窗口，生成一个对图像文件的file://引用，如图7.4所示。将文档保存到站点中的任何位置后，Dreamweaver将该引用转换为文档相对路径。 （3）在将图像插入Dreamweaver文档后，Dreamweaver会自动在HTML源代码中生成对该图像文件的引用。生成代码如下： img src=images/banner.gif width=760 height=112 / 本小节来学习在网页中插入图像占位符。图像占位符是Dreamweaver对图像功能的补充，指在将最终图像添加到Web页之前使用的替代图形。在对网页进行布局时经常用到这一功能，可以设置不同的颜色和文字来替代图像。如图7.6所示。 在网页中插入的图像大小、位置通常需要调整才能与网页相配，可以通过Dreamweaver的“属性检查器”来设置图像的基本属性，包括调整图像的大小，对齐图像等。 本小节将介绍两种调整图像大小的方法：以可视化的形式调整及在属性检查器中调整。 插入图像默认的对齐方式是“左对齐”，可以通过对齐图像操作调整图像的位置，使图像与同一行中的文本、另一个图像、插件或其它元素对齐。具体操作步骤如下： （1）在“编辑区”中单击选中要调整的图像，可以看出图像当前默认的对齐方式为“左对齐”，如图7.12所示。 （2）在“属性检查器”中单击“对齐”下拉列表框选择“右对齐”选项，也可以使用“对齐”按钮（左对齐、右对齐、居中对齐）设置图像的水平对齐方式，如图7.13所示。调整后的Logo位于表格的右侧，如图7.14所示。 Dreamweaver具有强大的图像编辑功能，读者无需借助外部图像编辑软件，就可以轻松实现对图像的重新取样、裁剪、调整亮度和对比度、锐化等操作，获得网页图像显示的最佳效果。 当对网页中图像大小进行调整后，图像显示效果会发生改变，如图7.15所示。左边为原始图像，右边为缩小后图像，很明显调整后图像的效果不如原图。此时，可以通过“重新取样”增加或减少图像的像素数量，使其与原始图像的外观尽可能匹配。对图像进行重新取样可以减少图像文件大小，提高下载速度，同时会降低图像品质。 在Dreamweaver CS4中，读者不再需要借助外部图像编辑软件，利用Dreamweaver的“裁剪”功能，就可以轻松地将图像中多余的部分删除，突出图像的主题。比如，在制作网页的“友情链接”栏目时，发现插入的Logo大小不一，很不美观，需要将Logo中多余部分删除。具体操作步骤如下： （1）在“编辑区”中单击选中要裁剪的原图像，如图7.17所示。 （2）在“属性检查器”中单击“裁剪”按钮，此时图像上会出现8个调整大小手柄，阴影区域为要删除的部分。拖动调整大小手柄，将图像的保留区域调整到合适大小，如图7.18所示。 （3）单击“裁剪”按钮或双击图像保留区