网页图像的处理ppt课件.ppt

《网页图像的处理ppt课件.ppt》由会员分享，可在线阅读，更多相关《网页图像的处理ppt课件.ppt（35页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容： 1. 能够选择合适的网页颜色能够选择合适的网页颜色 2. 解网页图像的基本格式解网页图像的基本格式 3. 掌握使用网页图像的要点掌握使用网页图像的要点 4. 在网页中插入图像的方法在网页中插入图像的方法 5. 图像属性的设置图像属性的设置 6. 调整图像的大小及位置调整图像的大小及位置 7. 图像与超链接图像与超链接 8. 动态图像效果动态图像效果5.1 利用利用Dreamweaver MX编辑图像编辑图像 5.1.1 网页中的颜色网页中的颜色 在网页中是以在网页中是以RGB方式来表示颜色的，方式来表示颜色的，RGB颜颜色包括

2、几百万种之多，这么多的颜色却有一个共同点，色包括几百万种之多，这么多的颜色却有一个共同点，都是由红、绿、蓝这三种基色调混和而成的，都是由红、绿、蓝这三种基色调混和而成的，RGB其实就是其实就是Red、Green、Blue的缩写。的缩写。 这三种基色中每一种颜色的饱和度和透明度都是这三种基色中每一种颜色的饱和度和透明度都是可以变化的，用可以变化的，用0（表示最弱）（表示最弱）255（表示最强）的（表示最强）的数值来表示。例如纯红色表示为：数值来表示。例如纯红色表示为：Red 50%、Green 0%、Blue 0%，简单的表示法为（，简单的表示法为（255，0，0），用），用十六进制数来表示的话

3、就变成了十六进制数来表示的话就变成了“FF0000”。 在网页中运用色彩一般应遵循下列几个原则在网页中运用色彩一般应遵循下列几个原则:（1 1）一个页面中切忌采用过多的颜色，否则会给人一）一个页面中切忌采用过多的颜色，否则会给人一种繁杂的感觉，也烘托不了网页的主题，因此一种风种繁杂的感觉，也烘托不了网页的主题，因此一种风格的网页选用颜色一般不要超过三四种。格的网页选用颜色一般不要超过三四种。（2 2）背景的颜色不要太深，显得过于厚重，因为这样）背景的颜色不要太深，显得过于厚重，因为这样会影响整个页面的显示效果。但也有例外，黑色的背会影响整个页面的显示效果。但也有例外，黑色的背景衬托出亮丽的文本

4、和图像，会给人一种另类的感觉。景衬托出亮丽的文本和图像，会给人一种另类的感觉。（3 3）要保持整个网页的色调统一。）要保持整个网页的色调统一。（4 4）要围绕网页的主题选择颜色，色彩要能烘托出主）要围绕网页的主题选择颜色，色彩要能烘托出主题。题。5.1.2 图像格式图像格式 GIFGIF格式（格式（Graphics Interchange Format Graphics Interchange Format 图图像交换格式）采用无损压缩（所谓无损压缩是指像交换格式）采用无损压缩（所谓无损压缩是指在压缩过程中图像的质量不会丢失）算法进行图在压缩过程中图像的质量不会丢失）算法进行图像的压缩处理，是

5、目前在网页设计中使用最普遍、像的压缩处理，是目前在网页设计中使用最普遍、最广泛的一种图像格式。最广泛的一种图像格式。 GIF格式可以高度压缩图像格式可以高度压缩图像; GIF格式支持图像格式支持图像游离在背景之上的视觉效果游离在背景之上的视觉效果; GIFGIF格式的图像可以格式的图像可以被交错下载被交错下载;可以将很多幅图像结合在一个可以将很多幅图像结合在一个GIF文文件中。件中。 1GIF格式格式 2JPEG格式格式 JPEG格式（格式（Joint Photo Expert Graphics，联合，联合图形专家组图片格式）是另一种在图形专家组图片格式）是另一种在Web上应用广泛的上应用广泛

6、的图像格式。由于它支持的颜色数几乎没有限制，因此图像格式。由于它支持的颜色数几乎没有限制，因此适用于使用真彩色或平滑过渡色的照片和图片。与适用于使用真彩色或平滑过渡色的照片和图片。与GIF格式采用无损压缩不同，格式采用无损压缩不同，JPEG格式使用有损压格式使用有损压缩来减小图片文件的大小，因此用户将看到随着文件缩来减小图片文件的大小，因此用户将看到随着文件的减小，图片的质量也降低了。的减小，图片的质量也降低了。 1.支持支持24位图像，能够很好地表现照片等全彩色的位图像，能够很好地表现照片等全彩色的图像；图像； 2. 可以生成类似可以生成类似GIF格式的交错关联图像格式的交错关联图像渐变渐变

7、JPEG； 3.可以制作透明可以制作透明JPEG图像。图像。 JPEG格式图像的优点：格式图像的优点： 1. 有损压缩使之不适合表达高清晰度的图像：有损压缩使之不适合表达高清晰度的图像： 2. 最高只能以最高只能以256色显示的用户，可能无法观看色显示的用户，可能无法观看JPEG图像；图像； 3. 当图像中包含当图像中包含fine字体时应避免用字体时应避免用JPEG格式，在格式，在该字体与纯颜色重叠的地方，该字体与纯颜色重叠的地方，JPEG压缩作品看上压缩作品看上去只是一种外观近似。去只是一种外观近似。 4. 采用采用JPEG格式对图像进行压缩后，不能再重新打格式对图像进行压缩后，不能再重新打

8、开图像。开图像。 5. JPEG格式不支持透明色，也没有动画的概念。格式不支持透明色，也没有动画的概念。 JPEG格式图像的缺点：格式图像的缺点： PNG格式（格式（Portable Networks Graphics，可，可移植的网络图形格式）是近年来新出现的一种图像移植的网络图形格式）是近年来新出现的一种图像格式，它适于任何类型、任何颜色深度的图片。该格式，它适于任何类型、任何颜色深度的图片。该格式用无损压缩来减小图片文件的大小，同时保留格式用无损压缩来减小图片文件的大小，同时保留图片中的透明区域。此外，该格式是仅有的几种支图片中的透明区域。此外，该格式是仅有的几种支持透明度概念的图片格式

9、之一（透明持透明度概念的图片格式之一（透明GIF的透明度的透明度只能是只能是50%，但，但PNG格式可以是格式可以是0% 50%）。）。 3PNG格式格式 GIF、JPEG、PNG这几种格式都是标准的位这几种格式都是标准的位图格式，但现在图格式，但现在Web上还可以使用新的矢量格式。上还可以使用新的矢量格式。所谓位图格式就是指用图片上每一点的信息来描述所谓位图格式就是指用图片上每一点的信息来描述图像，而矢量格式则是用线条和填充色等数学信息图像，而矢量格式则是用线条和填充色等数学信息来描述图像。相比而言，矢量格式的文件要比位图来描述图像。相比而言，矢量格式的文件要比位图格式的文件小得多，但表现力

10、丝毫不逊色。格式的文件小得多，但表现力丝毫不逊色。 除了表现一般的静态画面以外，动画是矢量除了表现一般的静态画面以外，动画是矢量格式具有巨大优势的另一个领域。格式具有巨大优势的另一个领域。 4矢量格式矢量格式 在在Web页上显示图片之前，通常需要考虑下列三页上显示图片之前，通常需要考虑下列三个问题：个问题： 确保文件较小；确保文件较小； 1）使图像具有所需的像素大小）使图像具有所需的像素大小 2）采用正确的格式进行优化处理）采用正确的格式进行优化处理 控制图像的数量和质量；控制图像的数量和质量； 合理使用动画。合理使用动画。 5.1.3 使用网页图像的要点使用网页图像的要点 在在Dreamwe

11、aver中插入图像非常简单，具体操作中插入图像非常简单，具体操作步骤如下：步骤如下： （1）打开网页，将光标移到将要插入图像的位置。）打开网页，将光标移到将要插入图像的位置。 （2）用下列）用下列3种方法中的任意一种方法，打开种方法中的任意一种方法，打开“选择选择图像源图像源”对话框，对话框，如图所示如图所示。在插入在插入“常用常用”面板中，单击插入图像按钮。面板中，单击插入图像按钮。直接拖曳插入直接拖曳插入“常用常用”面板中的插入图像按钮至页面板中的插入图像按钮至页面的光标处。面的光标处。 选择选择Dreamweaver MX主菜单中的主菜单中的“插入插入”|“图像图像”命令。命令。 5.1

12、.4 在网页中插入图像在网页中插入图像 1插入图像插入图像 （3）在对话框中选择查找图像文件的路径，选中）在对话框中选择查找图像文件的路径，选中“预预览图像览图像”复选框，选定图像的预览图就显示在对话复选框，选定图像的预览图就显示在对话框的右侧。框的右侧。（4）如果文件存放在网站的目录中，那么将）如果文件存放在网站的目录中，那么将“相对于相对于”下拉列表调整到下拉列表调整到“文档文档”项。项。（5）然后单击）然后单击“确认确认”按钮，图像就插入到网页中了。按钮，图像就插入到网页中了。 在文档中插入图像后，用鼠标单击图像，图像四在文档中插入图像后，用鼠标单击图像，图像四周出现可编辑的缩放手柄，说

13、明该图像被选定。这时周出现可编辑的缩放手柄，说明该图像被选定。这时属性面板中显示出关于图像的属性信息，如图所示。属性面板中显示出关于图像的属性信息，如图所示。 2图像属性参数图像属性参数 图像属性面板的左上方有一个缩略图，它的右边图像属性面板的左上方有一个缩略图，它的右边是是“图像图像”字样，字样，“图像图像”的右边是当前文件大小，的右边是当前文件大小，下方的空格可以键入名称，以便将来使用时好调用该下方的空格可以键入名称，以便将来使用时好调用该文件。文件。 改变图像的尺寸大小，可以通过在属性面板中的改变图像的尺寸大小，可以通过在属性面板中的“宽宽”和和“高高”文本框中直接输入数值来改变图像的文

14、本框中直接输入数值来改变图像的尺寸大小，当在网页中需要精确地定位元素时，这种尺寸大小，当在网页中需要精确地定位元素时，这种方法可以帮助设计者达到预想的效果。不过这种方法方法可以帮助设计者达到预想的效果。不过这种方法有一个弊端，如果数值输入不当，可能造成图像在浏有一个弊端，如果数值输入不当，可能造成图像在浏览器中无法正常显示。此外，还可以通过拖放图像四览器中无法正常显示。此外，还可以通过拖放图像四周的缩放边框来改变图像的尺寸。周的缩放边框来改变图像的尺寸。 3改变图像的尺寸改变图像的尺寸 Dreamweaver中调整图像位置的方法很简单，简中调整图像位置的方法很简单，简述如下：述如下： （1）选

15、中页面中要编辑的图像；）选中页面中要编辑的图像； （2）打开图像属性面板中的）打开图像属性面板中的“对齐对齐”下拉列表，在下拉列表，在列表中选择需要的选项。列表中选择需要的选项。 4调整图像在网页中的相对位置调整图像在网页中的相对位置 在页面中合理地使用图形图像已经成为网页制作在页面中合理地使用图形图像已经成为网页制作的一个基本要求。但是并非所有图形图像都可以直接的一个基本要求。但是并非所有图形图像都可以直接用在网页中，大多数情况下，需要对原始图像素材进用在网页中，大多数情况下，需要对原始图像素材进行一些处理，例如图像优化、添加特效等，然后再在行一些处理，例如图像优化、添加特效等，然后再在网页

16、中使用。要方便地完成相关的处理工作，则需要网页中使用。要方便地完成相关的处理工作，则需要图形图像处理软件的协助。另外，对于具备创作才能图形图像处理软件的协助。另外，对于具备创作才能的网页制作者来说，也可以直接使用图形图像处理软的网页制作者来说，也可以直接使用图形图像处理软件创作出适合件创作出适合Web的作品。的作品。 5编辑图像编辑图像 改变网页背景的状态可以通过两种方法来实现，改变网页背景的状态可以通过两种方法来实现，一种是设置背景颜色，通常是在网页安全颜色范畴之一种是设置背景颜色，通常是在网页安全颜色范畴之内选择；另一种是设置背景图像，但不是所有的图像内选择；另一种是设置背景图像，但不是所

17、有的图像都可以做背景。都可以做背景。 1设置网页背景颜色设置网页背景颜色 设置网页背景色在页面属性对话框里设置设置网页背景色在页面属性对话框里设置 。 2设置背景图像设置背景图像 设置网页背景色，只能得到单一颜色的背景。如何设置网页背景色，只能得到单一颜色的背景。如何能使背景发生更多的变化，这就需要设置网页的背景能使背景发生更多的变化，这就需要设置网页的背景图像。图像。 5.1.5 设置网页背景设置网页背景 在浏览网页时，可能会遇到下列情况。当图像不在浏览网页时，可能会遇到下列情况。当图像不能被浏览器正常显示时，图像区变成了空白区域。能被浏览器正常显示时，图像区变成了空白区域。 利用利用Dre

18、amweaver中为图像加文字说明的功能，中为图像加文字说明的功能，可使网页中的图像在不能被浏览器正常显示时，以说可使网页中的图像在不能被浏览器正常显示时，以说明文字代替，以帮助访问者了解图像的信息。明文字代替，以帮助访问者了解图像的信息。 5.1.6 在在Dreamweaver MX中巧妙地处理图像中巧妙地处理图像 1给图像加文字说明给图像加文字说明2制作低分辨率图像制作低分辨率图像(或改为尺寸小的格式或改为尺寸小的格式) 低分辨率图像是相对于高分辨率图像而言的，高低分辨率图像是相对于高分辨率图像而言的，高分辨率图像一般指的是图像的色彩丰富逼真、压缩比分辨率图像一般指的是图像的色彩丰富逼真、

19、压缩比较小的图像，这种图像文件容量比较大，浏览器要费较小的图像，这种图像文件容量比较大，浏览器要费很长时间来下载。而低分辨率图像包含的色彩少、压很长时间来下载。而低分辨率图像包含的色彩少、压缩比较大，所以这种图像文件容量较小，能够较快地缩比较大，所以这种图像文件容量较小，能够较快地被浏览器下载。因此经常要为高质量、大尺寸的图像被浏览器下载。因此经常要为高质量、大尺寸的图像制作一个副本，这个副本图像采用的是较低的分辨率，制作一个副本，这个副本图像采用的是较低的分辨率，从而减小了文件的大小，缩短了图像的下载时间。从而减小了文件的大小，缩短了图像的下载时间。 3为图像添加热点为图像添加热点 热点即图

20、像上不可见的区域，该区域分配了一个热点即图像上不可见的区域，该区域分配了一个超链接。为图像添加热点就是在图像上划分区域，从超链接。为图像添加热点就是在图像上划分区域，从而设定图像上制作超链接的范围。而设定图像上制作超链接的范围。 在在Dreamweaver中为图像添加热点的方法为：中为图像添加热点的方法为： （1）选定图像，打开图像属性面板，选择设置热）选定图像，打开图像属性面板，选择设置热点按钮，单击鼠标左键并拖动，在图像中设置热点形点按钮，单击鼠标左键并拖动，在图像中设置热点形状。状。 （2）在属性面板中设置热点的超链接。）在属性面板中设置热点的超链接。 5.2 利用利用HTML处理图像处

21、理图像 在在HTML中，使用中，使用IMG标记符可以在网页中加标记符可以在网页中加入图像。它具有两个基本属性：入图像。它具有两个基本属性：src和和alt，分别用，分别用于设置图像文件的位置和替换文本。于设置图像文件的位置和替换文本。 src表示要插入图像的文件名，必须包含绝对表示要插入图像的文件名，必须包含绝对路径或相对路径，图像可以是路径或相对路径，图像可以是GIF文件文件、JPEG文文件或件或PNG文件文件。alt表示图像的简单文本说明，用表示图像的简单文本说明，用于不能显示图像的浏览器或浏览器能显示图像但于不能显示图像的浏览器或浏览器能显示图像但显示时间过长时先显示。显示时间过长时先显

22、示。 5.2.1 插入图像插入图像 5.2.2 设置图像属性设置图像属性 在在HTMLHTML中，使用中，使用IMGIMG标记符的标记符的widthwidth和和heightheight属性可以指定图像的宽度和宽度，以告诉浏览器属性可以指定图像的宽度和宽度，以告诉浏览器WebWeb页应分配给图像多少空间（以像素为单位）。页应分配给图像多少空间（以像素为单位）。当浏览器解释当浏览器解释WebWeb页时，在实际下载图像之前会给页时，在实际下载图像之前会给图像预留出空间，以避免在每个图像下载时重新图像预留出空间，以避免在每个图像下载时重新绘制网页，从而加快网页的下载速度。绘制网页，从而加快网页的下载

23、速度。widthwidth和和heightheight属性的取值既可以是像素数，也可以是百属性的取值既可以是像素数，也可以是百分数。分数。 1指定图像的宽和高指定图像的宽和高 2图像的边框图像的边框 使用使用IMG标记符的标记符的border属性，可以给图像属性，可以给图像添加边框效果，边框的取值是像素数。添加边框效果，边框的取值是像素数。 3设置图像周围的空白设置图像周围的空白 可以在可以在IMG标记符内使用属性标记符内使用属性hspace和和vspace设置图像周围空白，其中设置图像周围空白，其中hspace示水平方示水平方向的空白，向的空白，vspace表示垂直方向的空白，它们的表示垂直

24、方向的空白，它们的取值都是像素数。通过指定图像周围的空白，可取值都是像素数。通过指定图像周围的空白，可以使页面的版式更加合理。以使页面的版式更加合理。 （1 1）图像在页面中的对齐）图像在页面中的对齐 设置图像在页面中的对齐与设置文本对齐类似，设置图像在页面中的对齐与设置文本对齐类似，可以使用可以使用DIVDIV或或P P标记符将标记符将IMGIMG标记符括起来，然后标记符括起来，然后使用使用alignalign属性。属性。 （2 2）图像与周围内容的垂直对齐）图像与周围内容的垂直对齐 使用使用IMGIMG标记符的标记符的alignalign属性，可以控制图像与属性，可以控制图像与周围内容的垂

25、直对齐。此时，周围内容的垂直对齐。此时，alignalign属性的值可以属性的值可以是：是： toptop 、 middlemiddle、bottom bottom 分别分别表示图像与周围表示图像与周围内容的顶部、中央、底部对齐。内容的顶部、中央、底部对齐。4图像的对齐图像的对齐 （3 3）图文混排时的图像对齐）图文混排时的图像对齐 如果要在图像的左、右环绕文字，也应该使用如果要在图像的左、右环绕文字，也应该使用IMGIMG标记符的标记符的alignalign属性，此时，属性，此时，alignalign属性的值可属性的值可以是：以是： leftleft 表示图像居左，文本在图像右侧；表示图像居

26、左，文本在图像右侧； right right 表示图像居右，文本在图像左侧。表示图像居右，文本在图像左侧。“选择图像源选择图像源”对话框对话框 返返 回回 5.3 图像与超链接图像与超链接1图像超链接图像超链接 在网页中指定图像作为超链接非常简单，在网页中指定图像作为超链接非常简单，步骤如下。步骤如下。（1）在文档窗口中，单击插入的图像，然后在）在文档窗口中，单击插入的图像，然后在“属性检查器属性检查器”中的中的“链接链接”文本框旁单击文本框旁单击“浏览文件浏览文件”按钮按钮 。（2）打开）打开“选择文件选择文件”对话框，定位到要跳转对话框，定位到要跳转的文件后单击的文件后单击“确认确认”按钮

27、即可。按钮即可。2图像映射图像映射 图像映射就是指在一幅图像中定义若干图像映射就是指在一幅图像中定义若干个区域（这些区域被称为热点），每个区域个区域（这些区域被称为热点），每个区域中指定一个不同的超链接，当单击不同区域中指定一个不同的超链接，当单击不同区域时可以跳转到相应的目标页面，图时可以跳转到相应的目标页面，图9.5 所示所示就是一个图像映射的效果。就是一个图像映射的效果。 单击此矩形区域可以跳转到右边所示的页面 图9.5 图像映射效果5.4 动态图像效果动态图像效果 通常网页中的动态图像效果需要编写通常网页中的动态图像效果需要编写 J a v a S c r i p t 脚 本 程 序

28、才 能 获 得 ， 不 过脚 本 程 序 才 能 获 得 ， 不 过 Dreamweaver 能够使用户不用编写一行代码，能够使用户不用编写一行代码，就能生成某些很好的图像效果，例如鼠标经过就能生成某些很好的图像效果，例如鼠标经过图像、网站相册等。图像、网站相册等。1制作鼠标经过图像制作鼠标经过图像 鼠标经过图像就是指当访问者的鼠标经鼠标经过图像就是指当访问者的鼠标经过图像时，图像变为另一幅图像；而鼠标离开过图像时，图像变为另一幅图像；而鼠标离开时，图像又恢复为原始图像。它由两幅图像组时，图像又恢复为原始图像。它由两幅图像组成，即首次载入时显示的图像即原始图像和鼠成，即首次载入时显示的图像即原

29、始图像和鼠标经过后翻转的图像即鼠标经过图像。在创建标经过后翻转的图像即鼠标经过图像。在创建鼠标经过图像时应使用相同大小的两幅图像，鼠标经过图像时应使用相同大小的两幅图像，可以使用可以使用 Fireworks 或或 Photoshop 等图像处理等图像处理软件制作出要用的图像。一般鼠标经过图像通软件制作出要用的图像。一般鼠标经过图像通常用于按钮导航，图常用于按钮导航，图9.6 所示就是一个鼠标经所示就是一个鼠标经过图像在按钮导航中的应用效果。过图像在按钮导航中的应用效果。图9.6 鼠标经过图像效果 制作鼠标经过图像的步骤如下。制作鼠标经过图像的步骤如下。（1）将插入点定位到要插入鼠标经过图像的区

30、）将插入点定位到要插入鼠标经过图像的区域，然后在域，然后在“插入插入”栏的栏的“常用常用”选项卡中单击选项卡中单击“鼠标经过图像鼠标经过图像”按钮按钮 。（2）打开）打开“插入鼠标经过图像插入鼠标经过图像”对话框，如图对话框，如图9.7 所示。所示。图9.7 “插入鼠标经过图像”对话框 在在“图像名称图像名称”文字框内输入翻转图像的文字框内输入翻转图像的名称；单击名称；单击“原始图像原始图像”文本框后的文本框后的“浏览浏览”按按钮，然后在钮，然后在“原始图像原始图像”对话框中，选取作为初对话框中，选取作为初始图像的图片文件后按始图像的图片文件后按“确认确认”按钮；单击按钮；单击“鼠鼠标经过图像

31、标经过图像”文本框后的文本框后的“浏览浏览”按钮，然后在按钮，然后在“鼠标经过图像鼠标经过图像”对话框中，选取作为鼠标经过对话框中，选取作为鼠标经过图像的图片文件后按图像的图片文件后按“确认确认”按钮；确保选中按钮；确保选中“预载鼠标经过图像预载鼠标经过图像”复选框；在复选框；在“替换文本替换文本”文文本框内输入替换文字；在本框内输入替换文字；在“按下时，前往的按下时，前往的 URL”文本框中指定目标文件的地址，最后单击文本框中指定目标文件的地址，最后单击“确定确定”按钮。按钮。 （3）按【）按【F12】键在浏览器窗口中查看鼠标经】键在浏览器窗口中查看鼠标经过图像效果。过图像效果。E N D