第4章 使用图像课件

1、 图像与文本一样，是网页制作中不可图像与文本一样，是网页制作中不可缺少的重要元素。使用图像不仅可以美化缺少的重要元素。使用图像不仅可以美化网页，还可以帮助表述网页主题。绚丽的网页，还可以帮助表述网页主题。绚丽的图像，强大的视觉冲击力往往可以更好地图像，强大的视觉冲击力往往可以更好地表述文字所无法描述的信息。本章将介绍表述文字所无法描述的信息。本章将介绍有关图像的基本知识及其在网页中的应用。有关图像的基本知识及其在网页中的应用。第4章使用图像学习目标了解图像的基本格式。了解图像的基本格式。掌握设置网页背景的方法。掌握设置网页背景的方法。掌握插入图像的方法。掌握插入图像的方法。掌握设置图像属性的方

2、法。掌握设置图像属性的方法。掌握创建网站相册的方法。掌握创建网站相册的方法。4.1网页图像格式一、一、GIF格式格式GIF格式（格式（Graphics Interchange Format，图像交换格式，图像交换格式，文件扩展名为文件扩展名为“.gif”）是由）是由Compuserve公司提出的与设备无关公司提出的与设备无关的图像存储标准，也是在的图像存储标准，也是在Web上使用最早、应用最广泛的图像格上使用最早、应用最广泛的图像格式。式。GIF图像格式的优点主要有以下几点。图像格式的优点主要有以下几点。最大支持最大支持256色，图像在大多数浏览器中都能正常显示。色，图像在大多数浏览器中都能正

3、常显示。图像使用颜色少，压缩效率高，文件的尺寸较小。图像使用颜色少，压缩效率高，文件的尺寸较小。GIF格式的图像支持格式的图像支持1bit透明度，可以制作背景透明的文透明度，可以制作背景透明的文字或图像。字或图像。可以将可以将GIF格式的图像制作成动画格式的图像制作成动画GIF。可以对可以对GIF文件交错下载，在下载过程中即可呈现图像内文件交错下载，在下载过程中即可呈现图像内容。容。4.1网页图像格式GIF图像格式的缺点主要有以下几点。图像格式的缺点主要有以下几点。最大支持最大支持256色，不适合于有晕光、渐变色彩等颜色，不适合于有晕光、渐变色彩等颜色细腻的图像和照片。色细腻的图像和照片。保存

4、为保存为GIF格式后，不能通过直接打开来编辑图像。格式后，不能通过直接打开来编辑图像。如果确实需要编辑如果确实需要编辑4.1网页图像格式二、二、JPEG格式格式JPEG格式（格式（Joint Photographic Experts Group，联合，联合图像专家组文件格式，文件扩展名为图像专家组文件格式，文件扩展名为“.jpg”）是目前互联）是目前互联网中最受欢迎的图像格式。网中最受欢迎的图像格式。JPEG图像格式的优点主要有图像格式的优点主要有以下几点。以下几点。支持支持24位图像，能够很好地表现照片等全彩色的图位图像，能够很好地表现照片等全彩色的图像。像。可以生成类似可以生成类似GIF的

5、交错关联图像的交错关联图像渐变渐变JPEG。4.1网页图像格式JPEG图像格式的缺点主要有以下几点。图像格式的缺点主要有以下几点。有损压缩使之不适合表达高清晰度的图像。有损压缩使之不适合表达高清晰度的图像。最高只能以最高只能以256色显示的用户可能无法观看色显示的用户可能无法观看JPEG图像。图像。当图像中包含当图像中包含“fine”字体时，应避免使用字体时，应避免使用JPEG格格式，在该字体与纯颜色重叠的轮廓区域会出现模糊的痕迹。式，在该字体与纯颜色重叠的轮廓区域会出现模糊的痕迹。采用采用JPEG格式对图像进行压缩后，不能直接打开格式对图像进行压缩后，不能直接打开图像对它重新编辑、压缩。如果

6、确实需要重新编辑，应打图像对它重新编辑、压缩。如果确实需要重新编辑，应打开最初的开最初的24位图像文件，编辑后再保存为位图像文件，编辑后再保存为JPEG格式。格式。4.1网页图像格式三、三、PNG图像图像PNG格式（格式（Portable Network Graphics，便携式网络，便携式网络图像，文件扩展名为图像，文件扩展名为“.png”）是最近使用量逐渐增多的）是最近使用量逐渐增多的图像格式，该格式图像的优点是，在压缩方面能够像图像格式，该格式图像的优点是，在压缩方面能够像GIF格式的图像一样没有压缩上的损失，并能像格式的图像一样没有压缩上的损失，并能像JPEG那样呈那样呈现更多的颜色。

7、而且现更多的颜色。而且PNG格式也提供了一种隔行显示方案，格式也提供了一种隔行显示方案，在显示速度上比在显示速度上比GIF和和JPEG更快一些。同时更快一些。同时PNG格式图格式图像又具有像又具有JPEG格式图像没有的透明度支持能力。不过格式图像没有的透明度支持能力。不过PNG格式图像还没有普及到所有的浏览器，但在未来它有格式图像还没有普及到所有的浏览器，但在未来它有可能是一种非常受欢迎的图像格式。可能是一种非常受欢迎的图像格式。4.1网页图像格式四、四、GIF和和JPEG两种格式图像的区别两种格式图像的区别虽然虽然GIF和和JPEG两种格式的图像在网页中可以同时使用，但两种格式的图像在网页中

8、可以同时使用，但还是有区别的。还是有区别的。GIF适用于纯颜色、向量式、少于适用于纯颜色、向量式、少于256色的图像，而色的图像，而JPEG在应用于纯色的插图时逊色于在应用于纯色的插图时逊色于GIF。GIF是制作透明图像和动画的首选格式。是制作透明图像和动画的首选格式。JPEG适用于有渐变色、颜色细腻的图像，如照片、油画等，适用于有渐变色、颜色细腻的图像，如照片、油画等，而而GIF在这方面逊色于在这方面逊色于JPEG，如图，如图4-2所示。所示。在实际操作过程中不但应遵循以上原则，反复对输出图像的在实际操作过程中不但应遵循以上原则，反复对输出图像的格式、大小、压缩比等进行比较，还要把图像的下载

9、速度、显示格式、大小、压缩比等进行比较，还要把图像的下载速度、显示器的分辨率等各种因素考虑进去，选择最佳方案。器的分辨率等各种因素考虑进去，选择最佳方案。4.2设置网页背景在制作网页的时候，页面要经常使用一些图像来装饰，使其在制作网页的时候，页面要经常使用一些图像来装饰，使其更美观。其中方法之一就是设置网页背景，包括背景颜色和背景更美观。其中方法之一就是设置网页背景，包括背景颜色和背景图像。选择【修改】【页面属性】命令，打开【页面属性】对图像。选择【修改】【页面属性】命令，打开【页面属性】对话框，设置【背景图像】和【背景颜色】。话框，设置【背景图像】和【背景颜色】。4.3 插入图像插入插入GI

10、F图像图像插入插入PSD图像图像 插入图像占位符插入图像占位符4.3.1 插入GIF图像在在Dreamweaver CS3Dreamweaver CS3中插入图像，通常可以使用以下方法。中插入图像，通常可以使用以下方法。 选择【插入记录】选择【插入记录】/ /【图像】命令。【图像】命令。 在【插入】在【插入】/ /【常用】工具栏中单击（图像）按钮或将其拖动到【常用】工具栏中单击（图像）按钮或将其拖动到文档中。文档中。 在【文件】面板中选中图像并拖动到文档中。在【文件】面板中选中图像并拖动到文档中。 在【资源】面板中选中图像并单击【插入】按钮或直接拖动到文在【资源】面板中选中图像并单击【插入】按

11、钮或直接拖动到文档中。档中。4.3.2 插入PSD图像作为作为AdobeAdobe家族的新成员，家族的新成员，Dreamweaver CS3Dreamweaver CS3可以无缝地与其他可以无缝地与其他程序进行组合，这其中包括程序进行组合，这其中包括PhotoshopPhotoshop。将图像从一个程序移到另。将图像从一个程序移到另一个程序的方法有很多，最直接的方法就是在一个程序的方法有很多，最直接的方法就是在Dreamweaver CS3Dreamweaver CS3中中打开一个原始的打开一个原始的Photoshop PSDPhotoshop PSD文件。作为源文件，文件。作为源文件，Pho

12、toshop PSDPhotoshop PSD文件不能用于网页。但是，当选择文件不能用于网页。但是，当选择PSDPSD文件时，文件时，Dreamweaver CS3Dreamweaver CS3会会自动呈现出【图像预览】对话框，以创建一个准备用于自动呈现出【图像预览】对话框，以创建一个准备用于WebWeb的图像。的图像。4.3.2 插入PSD图像4.3.3 插入图像占位符在网页中插入图像，这些图像通常是事先准备好的。如果在网在网页中插入图像，这些图像通常是事先准备好的。如果在网页制作过程中，需要插入的图像当时又没有，怎么办呢？此时，可页制作过程中，需要插入的图像当时又没有，怎么办呢？此时，可以

13、临时插入一个图像占位符，把这块空间临时占着，等到有了合适以临时插入一个图像占位符，把这块空间临时占着，等到有了合适的图像后再进行更换。的图像后再进行更换。选择【插入记录】【图像对象】【图像占位符】命令，或选择【插入记录】【图像对象】【图像占位符】命令，或在【插入】【常用】面板的【图像】下拉按钮组中单击在【插入】【常用】面板的【图像】下拉按钮组中单击 （图像（图像占位符）按钮，打开【图像占位符】对话框。占位符）按钮，打开【图像占位符】对话框。4.4 设置图像属性认识图像【属性】面板认识图像【属性】面板设置替换文本设置替换文本设置图像大小设置图像大小 设置对齐方式设置对齐方式边距和边框边距和边框

14、低解析度源低解析度源 4.4.1 认识图像【属性】面板选中图像，将显示图像【属性】面板。在【属性】面板中，可以设置选中图像，将显示图像【属性】面板。在【属性】面板中，可以设置图像名称、大小、替换文本、边距、边框、图文混排方式等。图像名称、大小、替换文本、边距、边框、图文混排方式等。4.4.2 设置替换文本在浏览网页时，将鼠标指针放在图像上，有时会出现一些提示文本，在浏览网页时，将鼠标指针放在图像上，有时会出现一些提示文本，这些文本就是替换文本。当图像不能正常显示或没有下载完时，这些替这些文本就是替换文本。当图像不能正常显示或没有下载完时，这些替换文本也会出现在图像的位置，浏览者可以通过替换文本

15、了解图像的信换文本也会出现在图像的位置，浏览者可以通过替换文本了解图像的信息。可以通过【图像标签辅助功能属性】对话框添加替换文本，也可以息。可以通过【图像标签辅助功能属性】对话框添加替换文本，也可以选中图像，在【属性】面板的【替换】文本框内添加替换文本。当图像选中图像，在【属性】面板的【替换】文本框内添加替换文本。当图像在网页中不能正常显示时，在图像位置上会显示出替换文本，而且当鼠在网页中不能正常显示时，在图像位置上会显示出替换文本，而且当鼠标经过图像时，会浮现包含替换文本的信息框标经过图像时，会浮现包含替换文本的信息框4.4.3 设置图像大小设置图像的大小通常有两种方法。设置图像的大小通常有

16、两种方法。 选中图像，在【属性】面板的【宽】和【高】文本框中输入数选中图像，在【属性】面板的【宽】和【高】文本框中输入数值。值。 使用鼠标选中图像，然后通过拖动图像上的控制句柄来调整图使用鼠标选中图像，然后通过拖动图像上的控制句柄来调整图像的大小。拖动右侧的句柄可以改变图像的宽度，拖动下方的句柄可以像的大小。拖动右侧的句柄可以改变图像的宽度，拖动下方的句柄可以改变图像的高度，拖动右下角的句柄可以同时改变图像的宽度和高度。改变图像的高度，拖动右下角的句柄可以同时改变图像的宽度和高度。一旦图像的宽度和高度发生变化，【属性】面板的【宽】和【高】文本一旦图像的宽度和高度发生变化，【属性】面板的【宽】和

17、【高】文本框中的数字也会立即发生变化，并且以粗体显示。而且在【宽】和【高】框中的数字也会立即发生变化，并且以粗体显示。而且在【宽】和【高】文本框的后面出现了文本框的后面出现了 按钮，单击之将恢复图像原来的大小。按钮，单击之将恢复图像原来的大小。4.4.4 设置对齐方式在图文混排的文档中，如何正确处理图像与相邻元素的相对位置显在图文混排的文档中，如何正确处理图像与相邻元素的相对位置显得非常重要，如果处理不好，将直接影响页面的美观。得非常重要，如果处理不好，将直接影响页面的美观。由于插入的图像占用了由于插入的图像占用了1 1行，使第行，使第1 1行的行高增大，因此文本不能顶行的行高增大，因此文本不

18、能顶头排列，变得很不整齐。那么如何能改变一下文本的排列方式，使其和头排列，变得很不整齐。那么如何能改变一下文本的排列方式，使其和图像紧凑地排列呢？其实方法很简单，选中图像，然后在【属性】面板图像紧凑地排列呢？其实方法很简单，选中图像，然后在【属性】面板的【对齐】下拉列表中选择【左对齐】选项即可。此时所选择的图像靠的【对齐】下拉列表中选择【左对齐】选项即可。此时所选择的图像靠左边界对齐，文本在右边向左围绕着图像排列。左边界对齐，文本在右边向左围绕着图像排列。4.4.5 边距和边框可以通过设置图像边距的方法，控制图像与其他文本或对象的距离，可以通过设置图像边距的方法，控制图像与其他文本或对象的距离

19、，还可以给图像添加边框，设置边框的粗细。方法是，首先选中图像，然还可以给图像添加边框，设置边框的粗细。方法是，首先选中图像，然后在【属性】面板的【垂直边距】、【水平边距】和【边框】文本框中后在【属性】面板的【垂直边距】、【水平边距】和【边框】文本框中输入具体数值即可。输入具体数值即可。4.4.6 低解析度源低解析度源可以用来指定在载入主图像之前应该载入的图像，这个低解析度源可以用来指定在载入主图像之前应该载入的图像，这个图像文件很小，一般只包括黑白两色，因为它可以迅速载入，让访问者图像文件很小，一般只包括黑白两色，因为它可以迅速载入，让访问者对等待的内容事先的所了解，以决定是否再继续等待。在使

20、用该选项前，对等待的内容事先的所了解，以决定是否再继续等待。在使用该选项前，需要通过图像处理软件事先将低解析度图像做好，然后再通过图像【属需要通过图像处理软件事先将低解析度图像做好，然后再通过图像【属性】面板的【低解析度源】选项进行设置。不过，如果确实没有必要，性】面板的【低解析度源】选项进行设置。不过，如果确实没有必要，一般不推荐使用这种方式，因为又需要多下载一张图像，实际上增加了一般不推荐使用这种方式，因为又需要多下载一张图像，实际上增加了网络负担。网络负担。4.5 创建网站相册创建网站相册的过程就是批处理大量图像的过程，是通过创建网站相册的过程就是批处理大量图像的过程，是通过JavaScriptJavaScript调用调用FireworksFireworks来完成的。前提是要确定待处理的图像是否来完成的。前提是要确定待处理的图像是否统 一 放 在 一 个 文 件 夹 里 面 ，