通过本章学习，应该掌握以下内容：第6章 网页图像的处理 1. 能够选择合适的网页颜色2. 解网页图像的基本格式3. 掌握使用网页图像的要点4. 在网页中插入图像的方法6. 图像属性的设置6. 调整图像的大小及位置6.1 利用Dreamweaver 8编辑图像 6.1.1 网页中的颜色 在网页中是以RGB方式来表示颜色的，RGB颜色包括几百万种之多，这么多的颜色却有一个共同点 ，都是由红、绿、蓝这三种基色调混和而成的， RGB其实就是Red、Green、Blue的缩写。这三种基色中每一种颜色的饱和度和透明度都是 可以变化的，用0（表示最弱）255（表示最强）的 数值来表示。例如纯红色表示为：Red 50%、Green 0%、Blue 0%，简单的表示法为（255，0，0），用 十六进制数来表示的话就变成了“FF0000”。 在网页中运用色彩一般应遵循下列几个原则:（1）一个页面中切忌采用过多的颜色，否则会给人一 种繁杂的感觉，也烘托不了网页的主题，因此一种风 格的网页选用颜色一般不要超过三四种。 （2）背景的颜色不要太深，显得过于厚重，因为这样 会影响整个页面的显示效果。但也有例外，黑色的背 景衬托出亮丽的文本和图像，会给人一种另类的感觉 。 （3）要保持整个网页的色调统一。 （4）要围绕网页的主题选择颜色，色彩要能烘托出主 题。6.1.2 图像格式 GIF格式（Graphics Interchange Format 图像交换格式）采用无损压缩（所谓无损压缩是指在压缩过程中图像的质量不会丢失）算法进行图像的压缩处理，是目前在网页设计中使用最普遍、最广泛的一种图像格式。GIF格式可以高度压缩图像; GIF格式支持图像游离在背景之上的视觉效果; GIF格式的图像可以被交错下载;可以将很多幅图像结合在一个GIF文件中。 1GIF格式 2JPEG格式 JPEG格式（Joint Photo Expert Graphics，联合图形专家组图片格式）是另一种在Web上应用广泛的图像格式。由于它支持的颜色数几乎没有限制，因此适用于使用真彩色或平滑过渡色的照片和图片。与GIF格式采用无损压缩不同，JPEG格式使用有损压缩来减小图片文件的大小，因此用户将看到随着文件的减小，图片的质量也降低了。 1.支持24位图像，能够很好地表现照片等全彩色的图像；2. 可以生成类似GIF格式的交错关联图像渐变JPEG；3.可以制作透明JPEG图像。 JPEG格式图像的优点： 1. 有损压缩使之不适合表达高清晰度的图像：2. 最高只能以256色显示的用户，可能无法观看JPEG图像；3. 当图像中包含fine字体时应避免用JPEG格式，在该字体与纯颜色重叠的地方，JPEG压缩作品看上去只是一种外观近似。4. 采用JPEG格式对图像进行压缩后，不能再重新打开图像。6. JPEG格式不支持透明色，也没有动画的概念。 JPEG格式图像的缺点： PNG格式（Portable Networks Graphics，可移植的网络图形格式）是近年来新出现的一种图像格式，它适于任何类型、任何颜色深度的图片。该格式用无损压缩来减小图片文件的大小，同时保留图片中的透明区域。此外，该格式是仅有的几种支持透明度概念的图片格式之一（透明GIF的透明度只能是50%，但PNG格式可以是0% 50%）。 3PNG格式 GIF、JPEG、PNG这几种格式都是标准的位图格式，但现在Web上还可以使用新的矢量格式。所谓位图格式就是指用图片上每一点的信息来描述图像，而矢量格式则是用线条和填充色等数学信息来描述图像。相比而言，矢量格式的文件要比位图格式的文件小得多，但表现力丝毫不逊色。 除了表现一般的静态画面以外，动画是矢量格式具有巨大优势的另一个领域。 4矢量格式 在Web页上显示图片之前，通常需要考虑下列三个问题： 确保文件较小；1）使图像具有所需的像素大小 2）采用正确的格式进行优化处理 控制图像的数量和质量； 合理使用动画。 6.1.3 使用网页图像的要点 在Dreamweaver中插入图像非常简单，具体操作 步骤如下：（1）打开网页，将光标移到将要插入图像的位置。（2）用下列3种方法中的任意一种方法，打开“选择 图像源”对话框，如图所示。 在插入“常用”面板中，单击插入图像按钮。 直接拖曳插入“常用”面板中的插入图像按钮至页面 的光标处。 选择Dreamweaver 8主菜单中的“插入”|“图像”命令 。 6.1.4 在网页中插入图像 1插入图像 返 回 图6-2 “选择图像源文件”对话框（3）在对话框中选择查找图像文件的路径，选中“预览图像”复选框，选定图像的预览图就显示在对话框的右侧。（4）如果文件存放在网站的目录中，那么将“相对于”下拉列表调整到“文档”项。（5）然后单击“确认”按钮，图像就插入到网页中了。 在文档中插入图像后，用鼠标单击图像，图像四周出现可编辑的缩放手柄，说明该图像被选定。这时 属性面板中显示出关于图像的属性信息，如图所示。 2图像属性参数 图像属性面板的左上方有一个缩略图，它的右边是“图像”字样，“图像”的右边是当前文件大小，下方的空格可以键入名称，以便将来使用时好调用该文件。 改变图像的尺寸大小，可以通过在属性面板中的“宽”和“高”文本框中直接输入数值来改变图像的尺寸大小，当在网页中需要精确地定位元素时，这种方法可以帮助设计者达到预想的效果。不过这种方法有一个弊端，如果数值输入不当，可能造成图像在浏览器中无法正常显示。此外，还可以通过拖放图像四周的缩放边框来改变图像的尺寸。 3改变图像的尺寸 Dreamweaver中调整图像位置的方法很简单，简述如下：（1）选中页面中要编辑的图像；（2）打开图像属性面板中的“对齐”下拉列表，在列表中选择需要的选项。 4调整图像在网页中的相对位置 在页面中合理地使用图形图像已经成为网页制作的一个基本要求。但是并非所有图形图像都可以直接用在网页中，大多数情况下，需要对原始图像素材进行一些处理，例如图像优化、添加特效等，然后再在网页中使用。要方便地完成相关的处理工作，则需要图形图像处理软件的协助。另外，对于具备创作才能的网页制作者来说，也可以直接使用图形图像处理软 件创作出适合Web的作品。 5. 编辑图像 改变网页背景的状态可以通过两种方法来实现，一种是设置背景颜色，通常是在网页安全颜色范畴之 内选择；另一种是设置背景图像，但不是所有的图像 都可以做背景。1设置网页背景颜色 设置网页背景色在页面属性对话框里设置 。2设置背景图像 设置网页背景色，只能得到单一颜色的背景。如何能使背景发生更多的变化，这就需要设置网页的背景 图像。 6.1.5 设置网页背景 在浏览网页时，可能会遇到下列情况。当图像不能被浏览器正常显示时，图像区变成了空白区域。 利用Dreamweaver中为图像加文字说明的功能，可使网页中的图像在不能被浏览器正常显示时，以说明文字代替，以帮助访问者了解图像的信息。 6.1.6 在Dreamweaver 8中巧妙地处理图像1给图像加文字说明2制作低分辨率图像 低分辨率图像是相对于高分辨率图像而言的，高分辨率图像一般指的是图像的色彩丰富逼真、压缩比较小的图像，这种图像文件容量比较大，浏览器要费很长时间来下载。而低分辨率图像包含的色彩少、压缩比较大，所以这种图像文件容量较小，能够较快地被浏览器下载。因此经常要为高质量、大尺寸的图像制作一个副本，这个副本图像采用的是较低的分辨率，从而减小了文件的大小，缩短了图像的下载时间。 3为图像添加热点 热点即图像上不可见的区域，该区域分配了一个超链接。为图像添加热点就是在图像上划分区域，从而设定图像上制作超链接的范围。 在Dreamweaver中为图像添加热点的方法为：（1）选定图像，打开图像属性面板，选择设置热点按钮，单击鼠标左键并拖动，在图像中设置热点形 状。（2）在属性面板中设置热点的超链接。 6.2 网页图像的其他处理方法 6.2.1 利用FrontPage 2003处理图像 （1）插入来自文件的图片在页面中插入来自文件的图片，可以执行以下操作： 将光标放在要插入图片的位置，单击插入文 件中的图片按钮，或选择“插入”|“图片”|“来自文 件”命令，打开“图片”对话框。 选择要插入到网页的文件，单击“插入”按钮，就可将图片插入到页面中。1插入图片（2）插入来自剪贴画的图片在页面中插入来自剪贴画的图片的方法如下： 先将光标放在要插入图片的位置。 选择“插入”|“图片”|“剪贴画”命令，打开“剪贴 画”窗格。 在“搜索文字”文本框中输入要插入剪贴画的关 键词，单击“搜索”按钮。 将光标放在想要插入的剪贴画上，会显示出与此剪贴画相关的信息，然后单击此剪贴画，就可将其 插入到网页中。（1）调整图片的大小调整图片的大小分为直接调整和精确调整两种，直接调整方法如下：在文档窗口选定相应的图片，图片四周出现图像编辑边框，同时在右下角出现图片操作按钮。通过水平、垂直拖动边框可以调整图像宽度和高度。2修改图片属性 选中要插入的图片，单击鼠标右键，从弹出的快捷菜单中选择“图片属性”命令，打开“图片属性”对话框。 在“大小”选项组中启用“指定大小”和“保持纵横比”复选框，选择图片的单位为像素，设定图片的宽度和高度值，单击“确定”按钮。（2）调整图片位置在FrontPage 2003中移动图片位置很容易，只要在图片上单击鼠标左键，然后按住鼠标左键，拖动图片 至所需的位置即可。（3）更改图片属性如果要修改已经保存到网页中的JPEG、GIF和 PNG格式的图片属性，首先在网页中选中图片，然后 选择“视图”|“工具栏”|“图片”命令，打开“图片”工具 栏，单击图片工具栏中的图形按钮，FrontPage会自动显示该按钮的作用，根据提示设计者可以进行相应 的操作。（4）替换图片或文字当图片太大，下载速度很慢，可使用一个分辨率 较低的图片代替；而当图片不能被浏览器正常显示 时，可以使用一些说明性文字。设置替换图片或文字可以执行以下操作： 在网页中选中图片，单击鼠标右键，从弹出的 快捷菜单中选择“图片属性”命令，打开“图片属性” 对话框。 选择对话框的“常规”标签，单击“低分辨率”后 面的“浏览”按钮，在打开的“选择替代图片”对话框 中可以选择替换图片；在“文本”框中输入说明图片 的文字。 单击“确定”按钮，替换图片或文字设置完毕。（1）图片与文字的对齐方式设置图片与文字的对齐方式，可以执行以下操作： 在网页中选中图片，单击鼠标右键，从弹出的快 捷菜单中选择“图片属性”命令，打开“图片属性”对话框。 选择“对齐方式”后面的小三角按钮，从中选择图 片与文字的对齐方式，如图6-25所示。3图片与文字返 回 图6-25 设置图片与文字的对齐方式 （2）图片的环绕样式图片的环绕样式决定了文字在图片周围的排列方 式。设置图片的环绕样式可以在“图片属性”对话框 中通过“环绕样式”来完成，也可在“定位”对话框中设置。在“定位”对话框中设置图片环绕样式的方法如下： 在网页中选中图片，选择“格式”|“定位”命令 ，弹出“定位”对话框（图6-26）。 在对话框中选择需要的环绕样式，单击“确定”按钮。返 回 图6-26 “定位”对话框 6.2.2 利用HTML处理图像 在HTML中，使用IMG标记符可以在网页中加入图像。它具有两个基本属性：src和alt，分别用于设置图像文件的位置和替换文本。src表示要插入图像的文件名，必须包含绝对路径或相对路径，图像可以是GIF文件、JPEG文件或PNG文件。alt表示图像的简单文本说明，用于不能显示图像的浏览器或浏览器能显示图像但显示时间过长时先显示。 1. 插入图像 2. 设置图像属性 在HTML中，使用IMG标记符的width和height属性可以指定图像的宽度和宽度，以告诉浏览器Web页应分配给图像多少空间（以像素为单位）。当浏览器解释Web页时