网页图像的处理.ppt

通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容：第第5章章 网页图像的处理网页图像的处理 1.能够选择合适的网页颜色能够选择合适的网页颜色2.解网页图像的基本格式解网页图像的基本格式3.掌握使用网页图像的要点掌握使用网页图像的要点4.在网页中插入图像的方法在网页中插入图像的方法5.图像属性的设置图像属性的设置6.调整图像的大小及位置调整图像的大小及位置7.图像与超链接图像与超链接8.动态图像效果动态图像效果5.1利用利用DreamweaverMX编辑图像编辑图像5.1.1 网页中的颜色网页中的颜色 在在网网页页中中是是以以RGB方方式式来来表表示示颜颜色色的的，RGB颜颜色色包包括括几几百百万万种种之之多多，这这么么多多的的颜颜色色却却有有一一个个共共同同点点，都都是是由由红红、绿绿、蓝蓝这这三三种种基基色色调调混混和和而而成成的的，RGB其其实就是实就是Red、Green、Blue的缩写。的缩写。这这三三种种基基色色中中每每一一种种颜颜色色的的饱饱和和度度和和透透明明度度都都是是可可以以变变化化的的，用用0（表表示示最最弱弱）255（表表示示最最强强）的的数数值值来来表表示示。例例如如纯纯红红色色表表示示为为：Red50%、Green0%、Blue0%，简简单单的的表表示示法法为为（255，0，0），用用十六进制数来表示的话就变成了十六进制数来表示的话就变成了“FF0000”。在网页中运用色彩一般应遵循下列几个原则在网页中运用色彩一般应遵循下列几个原则:（1 1）一一个个页页面面中中切切忌忌采采用用过过多多的的颜颜色色，否否则则会会给给人人一一种种繁繁杂杂的的感感觉觉，也也烘烘托托不不了了网网页页的的主主题题，因因此此一一种种风风格的网页选用颜色一般不要超过三四种。格的网页选用颜色一般不要超过三四种。（2 2）背背景景的的颜颜色色不不要要太太深深，显显得得过过于于厚厚重重，因因为为这这样样会会影影响响整整个个页页面面的的显显示示效效果果。但但也也有有例例外外，黑黑色色的的背背景衬托出亮丽的文本和图像，会给人一种另类的感觉。景衬托出亮丽的文本和图像，会给人一种另类的感觉。（3 3）要保持整个网页的色调统一。）要保持整个网页的色调统一。（4 4）要要围围绕绕网网页页的的主主题题选选择择颜颜色色，色色彩彩要要能能烘烘托托出出主主题。题。5.1.2 图像格式图像格式 GIFGIF格格式式（Graphics Graphics Interchange Interchange Format Format 图图像像交交换换格格式式）采采用用无无损损压压缩缩（所所谓谓无无损损压压缩缩是是指指在在压压缩缩过过程程中中图图像像的的质质量量不不会会丢丢失失）算算法法进进行行图图像像的的压压缩缩处处理理，是是目目前前在在网网页页设设计计中中使使用用最最普普遍遍、最最广广泛的一种图像格式。泛的一种图像格式。GIF格格式式可可以以高高度度压压缩缩图图像像;GIF格格式式支支持持图图像像游游离离在在背背景景之之上上的的视视觉觉效效果果;GIFGIF格格式式的的图图像像可可以以被被交交错错下下载载;可可以以将将很很多多幅幅图图像像结结合合在在一一个个GIF文文件中。件中。1GIF格式格式2JPEG格式格式 JPEG格格式式（JointPhotoExpertGraphics，联联合合图图形形专专家家组组图图片片格格式式）是是另另一一种种在在Web上上应应用用广广泛泛的的图图像像格格式式。由由于于它它支支持持的的颜颜色色数数几几乎乎没没有有限限制制，因因此此适适用用于于使使用用真真彩彩色色或或平平滑滑过过渡渡色色的的照照片片和和图图片片。与与GIF格格式式采采用用无无损损压压缩缩不不同同，JPEG格格式式使使用用有有损损压压缩缩来来减减小小图图片片文文件件的的大大小小，因因此此用用户户将将看看到到随随着着文文件件的减小，图片的质量也降低了。的减小，图片的质量也降低了。1.支支持持24位位图图像像，能能够够很很好好地地表表现现照照片片等等全全彩彩色色的的图图像；像；2.可可以以生生成成类类似似GIF格格式式的的交交错错关关联联图图像像渐渐变变JPEG；3.可以制作透明可以制作透明JPEG图像。图像。JPEG格式图像的优点：格式图像的优点：1.有损压缩使之不适合表达高清晰度的图像：有损压缩使之不适合表达高清晰度的图像：2.最最高高只只能能以以256色色显显示示的的用用户户，可可能能无无法法观观看看JPEG图像；图像；3.当当图图像像中中包包含含fine字字体体时时应应避避免免用用JPEG格格式式，在在该该字字体体与与纯纯颜颜色色重重叠叠的的地地方方，JPEG压压缩缩作作品品看看上上去只是一种外观近似。去只是一种外观近似。4.采采用用JPEG格格式式对对图图像像进进行行压压缩缩后后，不不能能再再重重新新打打开图像。开图像。5.JPEG格式不支持透明色，也没有动画的概念。格式不支持透明色，也没有动画的概念。JPEG格式图像的缺点：格式图像的缺点：PNG格格式式（PortableNetworksGraphics，可可移移植植的的网网络络图图形形格格式式）是是近近年年来来新新出出现现的的一一种种图图像像格格式式，它它适适于于任任何何类类型型、任任何何颜颜色色深深度度的的图图片片。该该格格式式用用无无损损压压缩缩来来减减小小图图片片文文件件的的大大小小，同同时时保保留留图图片片中中的的透透明明区区域域。此此外外，该该格格式式是是仅仅有有的的几几种种支支持持透透明明度度概概念念的的图图片片格格式式之之一一（透透明明GIF的的透透明明度度只能是只能是50%，但，但PNG格式可以是格式可以是0%50%）。）。3PNG格式格式 GIF、JPEG、PNG这这几几种种格格式式都都是是标标准准的的位位图图格格式式，但但现现在在Web上上还还可可以以使使用用新新的的矢矢量量格格式式。所所谓谓位位图图格格式式就就是是指指用用图图片片上上每每一一点点的的信信息息来来描描述述图图像像，而而矢矢量量格格式式则则是是用用线线条条和和填填充充色色等等数数学学信信息息来来描描述述图图像像。相相比比而而言言，矢矢量量格格式式的的文文件件要要比比位位图图格式的文件小得多，但表现力丝毫不逊色。格式的文件小得多，但表现力丝毫不逊色。除除了了表表现现一一般般的的静静态态画画面面以以外外，动动画画是是矢矢量量格式具有巨大优势的另一个领域。格式具有巨大优势的另一个领域。4矢量格式矢量格式 在在Web页页上上显显示示图图片片之之前前，通通常常需需要要考考虑虑下下列列三三个问题：个问题：确保文件较小；确保文件较小；1）使图像具有所需的像素大小）使图像具有所需的像素大小2）采用正确的格式进行优化处理）采用正确的格式进行优化处理控制图像的数量和质量；控制图像的数量和质量；合理使用动画。合理使用动画。5.1.3 使用网页图像的要点使用网页图像的要点 在在Dreamweaver中中插插入入图图像像非非常常简简单单，具具体体操操作作步骤如下：步骤如下：（1）打开网页，将光标移到将要插入图像的位置。）打开网页，将光标移到将要插入图像的位置。（2）用用下下列列3种种方方法法中中的的任任意意一一种种方方法法，打打开开“选选择择图像源图像源”对话框，对话框，如图所示如图所示。在插入在插入“常用常用”面板中，单击插入图像按钮。面板中，单击插入图像按钮。直直接接拖拖曳曳插插入入“常常用用”面面板板中中的的插插入入图图像像按按钮钮至至页页面的光标处。面的光标处。选选择择DreamweaverMX主主菜菜单单中中的的“插插入入”|“图图像像”命令。命令。5.1.4 在网页中插入图像在网页中插入图像1插入图像插入图像（3）在在对对话话框框中中选选择择查查找找图图像像文文件件的的路路径径，选选中中“预预览览图图像像”复复选选框框，选选定定图图像像的的预预览览图图就就显显示示在在对对话话框的右侧。框的右侧。（4）如如果果文文件件存存放放在在网网站站的的目目录录中中，那那么么将将“相相对对于于”下拉列表调整到下拉列表调整到“文档文档”项。项。（5）然后单击）然后单击“确认确认”按钮，图像就插入到网页中了。按钮，图像就插入到网页中了。在在文文档档中中插插入入图图像像后后，用用鼠鼠标标单单击击图图像像，图图像像四四周周出出现现可可编编辑辑的的缩缩放放手手柄柄，说说明明该该图图像像被被选选定定。这这时时属性面板中显示出关于图像的属性信息，如图所示。属性面板中显示出关于图像的属性信息，如图所示。2图像属性参数图像属性参数图图像像属属性性面面板板的的左左上上方方有有一一个个缩缩略略图图，它它的的右右边边是是“图图像像”字字样样，“图图像像”的的右右边边是是当当前前文文件件大大小小，下下方方的的空空格格可可以以键键入入名名称称，以以便便将将来来使使用用时时好好调调用用该该文件。文件。改改变变图图像像的的尺尺寸寸大大小小，可可以以通通过过在在属属性性面面板板中中的的“宽宽”和和“高高”文文本本框框中中直直接接输输入入数数值值来来改改变变图图像像的的尺尺寸寸大大小小，当当在在网网页页中中需需要要精精确确地地定定位位元元素素时时，这这种种方方法法可可以以帮帮助助设设计计者者达达到到预预想想的的效效果果。不不过过这这种种方方法法有有一一个个弊弊端端，如如果果数数值值输输入入不不当当，可可能能造造成成图图像像在在浏浏览览器器中中无无法法正正常常显显示示。此此外外，还还可可以以通通过过拖拖放放图图像像四四周的缩放边框来改变图像的尺寸。周的缩放边框来改变图像的尺寸。3改变图像的尺寸改变图像的尺寸Dreamweaver中中调调整整图图像像位位置置的的方方法法很很简简单单，简简述如下：述如下：（1）选中页面中要编辑的图像；）选中页面中要编辑的图像；（2）打打开开图图像像属属性性面面板板中中的的“对对齐齐”下下拉拉列列表表，在在列表中选择需要的选项。列表中选择需要的选项。4调整图像在网页中的相对位置调整图像在网页中的相对位置在在页页面面中中合合理理地地使使用用图图形形图图像像已已经经成成为为网网页页制制作作的的一一个个基基本本要要求求。但但是是并并非非所所有有图图形形图图像像都都可可以以直直接接用用在在网网页页中中，大大多多数数情情况况下下，需需要要对对原原始始图图像像素素材材进进行行一一些些处处理理，例例如如图图像像优优化化、添添加加特特效效等等，然然后后再再在在网网页页中中使使用用。要要方方便便地地完完成成相相关关的的处处理理工工作作，则则需需要要图图形形图图像像处处理理软软件件的的协协助助。另另外外，对对于于具具备备创创作作才才能能的的网网页页制制作作者者来来说说，也也可可以以直直接接使使用用图图形形图图像像处处理理软软件创作出适合件创作出适合Web的作品。的作品。5编辑图像编辑图像改改变变网网页页背背景景的的状状态态可可以以通通过过两两种种方方法法来来实实现现，一一种种是是设设置置背背景景颜颜色色，通通常常是是在在网网页页安安全全颜颜色色范范畴畴之之内内选选择择；另另一一种种是是设设置置背背景景图图像像，但但不不是是所所有有的的图图像像都可以做背景。都可以做背景。1设置网页背景颜色设置网页背景颜色设置网页背景色在页面属性对话框里设置设置网页背景色在页面属性对话框里设置。2设置背景图像设置背景图像设设置置网网页页背背景景色色，只只能能得得到到单单一一颜颜色色的的背背景景。如如何何能能使使背背景景发发生生更更多多的的变变化化，这这就就需需要要设设置置网网页页的的背背景景图像。图像。5.1.5 设置网页背景设置网页背景在在浏浏览览网网页页时时，可可能能会会遇遇到到下下列列情情况况。当当图图像像不不能被浏览器正常显示时，图像区变成了空白区域。能被浏览器正常显示时，图像区变成了空白区域。利利用用Dreamweaver中中为为图图像像加加文文字字说说明明的的功功能能，可可使使网网页页中中的的图图像像在在不不能能被被浏浏览览器器正正常常显显示示时时，以以说说明文字代替，以帮助访问者了解图像的信息。明文字代替，以帮助访问者了解图像的信息。5.1.6 在在Dreamweaver MX中巧妙地处理图像中巧妙地处理图像1给图像加文字说明给图像加文字说明2制作低分辨率图像制作低分辨率图像(或改为尺寸小的格式或改为尺寸小的格式)低低分分辨辨率率图图像像是是相相对对于于高高分分辨辨率率图图像像而而言言的的，高高分分辨辨率率图图像像一一般般指指的的是是图图像像的的色色彩彩丰丰富富逼逼真真、压压缩缩比比较较小小的的图图像像，这这种种图图像像文文件件容容量量比比较较大大，浏浏览览器器要要费费很很长长时时间间来来下下载载。而而低低分分辨辨率率图图像像包包含含的的色色彩彩少少、压压缩缩比比较较大大，所所以以这这种种图图像像文文件件容容量量较较小小，能能够够较较快快地地被被浏浏览览器器下下载载。因因此此经经常常要要为为高高质质量量、大大尺尺寸寸的的图图像像制制作作一一个个副副本本，这这个个副副本本图图像像采采用用的的是是较较低低的的分分辨辨率率，从而减小了文件的大小，缩短了图像的下载时间。从而减小了文件的大小，缩短了图像的下载时间。3为图像添加热点为图像添加热点热热点点即即图图像像上上不不可可见见的的区区域域，该该区区域域分分配配了了一一个个超超链链接接。为为图图像像添添加加热热点点就就是是在在图图像像上上划划分分区区域域，从从而设定图像上制作超链接的范围。而设定图像上制作超链接的范围。在在Dreamweaver中为图像添加热点的方法为：中为图像添加热点的方法为：（1）选选定定图图像像，打打开开图图像像属属性性面面板板，选选择择设设置置热热点点按按钮钮，单单击击鼠鼠标标左左键键并并拖拖动动，在在图图像像中中设设置置热热点点形形状。状。（2）在属性面板中设置热点的超链接。）在属性面板中设置热点的超链接。5.2利用利用HTML处理图像处理图像在在HTML中中，使使用用IMG标标记记符符可可以以在在网网页页中中加加入入图图像像。它它具具有有两两个个基基本本属属性性：src和和alt，分分别别用用于设置图像文件的位置和替换文本。于设置图像文件的位置和替换文本。src表表示示要要插插入入图图像像的的文文件件名名，必必须须包包含含绝绝对对路路径径或或相相对对路路径径，图图像像可可以以是是GIF文文件件、JPEG文文件件或或PNG文文件件。alt表表示示图图像像的的简简单单文文本本说说明明，用用于于不不能能显显示示图图像像的的浏浏览览器器或或浏浏览览器器能能显显示示图图像像但但显显示时间过长时先显示。示时间过长时先显示。5.2.1 插入图像插入图像 5.2.2 设置图像属性设置图像属性 在在HTMLHTML中中，使使用用IMGIMG标标记记符符的的widthwidth和和heightheight属属性性可可以以指指定定图图像像的的宽宽度度和和宽宽度度，以以告告诉诉浏浏览览器器WebWeb页页应应分分配配给给图图像像多多少少空空间间（以以像像素素为为单单位位）。当当浏浏览览器器解解释释WebWeb页页时时，在在实实际际下下载载图图像像之之前前会会给给图图像像预预留留出出空空间间，以以避避免免在在每每个个图图像像下下载载时时重重新新绘绘制制网网页页，从从而而加加快快网网页页的的下下载载速速度度。widthwidth和和heightheight属属性的取值既可以是像素数，也可以是百分数。性的取值既可以是像素数，也可以是百分数。1指定图像的宽和高指定图像的宽和高2图像的边框图像的边框使使用用IMG标标记记符符的的border属属性性，可可以以给给图图像像添加边框效果，边框的取值是像素数。添加边框效果，边框的取值是像素数。3设置图像周围的空白设置图像周围的空白可可 以以 在在 IMG标标 记记 符符 内内 使使 用用 属属 性性 hspace和和vspace设设置置图图像像周周围围空空白白，其其中中hspace示示水水平平方方向向的的空空白白，vspace表表示示垂垂直直方方向向的的空空白白，它它们们的的取取值值都都是是像像素素数数。通通过过指指定定图图像像周周围围的的空空白白，可可以使页面的版式更加合理。以使页面的版式更加合理。（1 1）图像在页面中的对齐）图像在页面中的对齐设设置置图图像像在在页页面面中中的的对对齐齐与与设设置置文文本本对对齐齐类类似似，可可以以使使用用DIVDIV或或P P标标记记符符将将IMGIMG标标记记符符括括起起来来，然然后后使用使用alignalign属性。属性。（2 2）图像与周围内容的垂直对齐）图像与周围内容的垂直对齐使使用用IMGIMG标标记记符符的的alignalign属属性性，可可以以控控制制图图像像与与周周围围内内容容的的垂垂直直对对齐齐。此此时时，alignalign属属性性的的值值可可以以是是：toptop、middlemiddle、bottom bottom 分分别别表表示示图图像像与与周周围围内内容容的顶部、中央、底部对齐。的顶部、中央、底部对齐。4图像的对齐图像的对齐 （3 3）图文混排时的图像对齐）图文混排时的图像对齐如如果果要要在在图图像像的的左左、右右环环绕绕文文字字，也也应应该该使使用用IMGIMG标标记记符符的的alignalign属属性性，此此时时，alignalign属属性性的的值值可可以是：以是：left left 表示图像居左，文本在图像右侧；表示图像居左，文本在图像右侧；right right 表示图像居右，文本在图像左侧。表示图像居右，文本在图像左侧。“选择图像源选择图像源”对话框对话框返返回回 5.3图像与超链接图像与超链接1图像超链接图像超链接在在网网页页中中指指定定图图像像作作为为超超链链接接非非常常简简单单，步骤如下。步骤如下。（1）在在文文档档窗窗口口中中，单单击击插插入入的的图图像像，然然后后在在“属属性性检检查查器器”中中的的“链链接接”文文本本框框旁旁单单击击“浏览文件浏览文件”按钮按钮。（2）打打开开“选选择择文文件件”对对话话框框，定定位位到到要要跳跳转转的文件后单击的文件后单击“确认确认”按钮即可。按钮即可。2图像映射图像映射图像映射就是指在一幅图像中定义若干图像映射就是指在一幅图像中定义若干个区域（这些区域被称为热点），每个区域个区域（这些区域被称为热点），每个区域中指定一个不同的超链接，当单击不同区域中指定一个不同的超链接，当单击不同区域时可以跳转到相应的目标页面，图时可以跳转到相应的目标页面，图9.5所示所示就是一个图像映射的效果。就是一个图像映射的效果。图9.5 图像映射效果5.4动态图像效果动态图像效果通通常常网网页页中中的的动动态态图图像像效效果果需需要要编编写写JavaScript 脚脚 本本 程程 序序 才才 能能 获获 得得，不不 过过 Dreamweaver能能够够使使用用户户不不用用编编写写一一行行代代码码，就就能能生生成成某某些些很很好好的的图图像像效效果果，例例如如鼠鼠标标经经过过图像、网站相册等。图像、网站相册等。1制作鼠标经过图像制作鼠标经过图像鼠标经过图像就是指当访问者的鼠标经鼠标经过图像就是指当访问者的鼠标经过图像时，图像变为另一幅图像；而鼠标离开过图像时，图像变为另一幅图像；而鼠标离开时，图像又恢复为原始图像。它由两幅图像组时，图像又恢复为原始图像。它由两幅图像组成，即首次载入时显示的图像即原始图像和鼠成，即首次载入时显示的图像即原始图像和鼠标经过后翻转的图像即鼠标经过图像。在创建标经过后翻转的图像即鼠标经过图像。在创建鼠标经过图像时应使用相同大小的两幅图像，鼠标经过图像时应使用相同大小的两幅图像，可以使用可以使用Fireworks或或Photoshop等图像处理等图像处理软件制作出要用的图像。一般鼠标经过图像通软件制作出要用的图像。一般鼠标经过图像通常用于按钮导航，图常用于按钮导航，图9.6所示就是一个鼠标经所示就是一个鼠标经过图像在按钮导航中的应用效果。过图像在按钮导航中的应用效果。图9.6 鼠标经过图像效果制作鼠标经过图像的步骤如下。制作鼠标经过图像的步骤如下。（1）将将插插入入点点定定位位到到要要插插入入鼠鼠标标经经过过图图像像的的区区域域，然然后后在在“插插入入”栏栏的的“常常用用”选选项项卡卡中中单单击击“鼠鼠标标经过图像经过图像”按钮按钮。（2）打打开开“插插入入鼠鼠标标经经过过图图像像”对对话话框框，如如图图9.7所示。所示。图9.7 “插入鼠标经过图像”对话框在在“图像名称图像名称”文字框内输入翻转图像的文字框内输入翻转图像的名称；单击名称；单击“原始图像原始图像”文本框后的文本框后的“浏览浏览”按按钮，然后在钮，然后在“原始图像原始图像”对话框中，选取作为初对话框中，选取作为初始图像的图片文件后按始图像的图片文件后按“确认确认”按钮；单击按钮；单击“鼠鼠标经过图像标经过图像”文本框后的文本框后的“浏览浏览”按钮，然后在按钮，然后在“鼠标经过图像鼠标经过图像”对话框中，选取作为鼠标经过对话框中，选取作为鼠标经过图像的图片文件后按图像的图片文件后按“确认确认”按钮；确保选中按钮；确保选中“预载鼠标经过图像预载鼠标经过图像”复选框；在复选框；在“替换文本替换文本”文文本框内输入替换文字；在本框内输入替换文字；在“按下时，前往的按下时，前往的URL”文本框中指定目标文件的地址，最后单击文本框中指定目标文件的地址，最后单击“确定确定”按钮。按钮。（3）按【）按【F12】键在浏览器窗口中查看鼠标经】键在浏览器窗口中查看鼠标经过图像效果。过图像效果。END