网页设计中网页图像处理

1、 通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容： 能够选择合适的网页颜色能够选择合适的网页颜色 了解网页图像的基本格式了解网页图像的基本格式 掌握使用网页图像的要点掌握使用网页图像的要点 在网页中插入图像的方法在网页中插入图像的方法 图像属性的设置图像属性的设置 调整图像的大小及位置调整图像的大小及位置 第第6章章 网页图像处理网页图像处理 山东新华电脑学院山东新华电脑学院6.1 利用利用Dreamweaver 4.0编辑图像编辑图像 6.1.1 网页中的颜色网页中的颜色 图像与颜色是分不开的。在网页中是以图像与颜色是分不开的。在网页中是以RGB方式来表示颜色的，方式来表示颜

2、色的，RGB颜色包括几百万种之多，这么多的颜色却有一个共同点，都是颜色包括几百万种之多，这么多的颜色却有一个共同点，都是由红、绿、蓝这三种基色调混和而成的，由红、绿、蓝这三种基色调混和而成的，RGB其实就是其实就是Red、Green、Blue的缩写。的缩写。 在网页中运用色彩一般应遵循下列几个原则。在网页中运用色彩一般应遵循下列几个原则。（1）一个页面中切忌采用过多的颜色，否则会给人一种繁杂的感觉，）一个页面中切忌采用过多的颜色，否则会给人一种繁杂的感觉，也烘托不了网页的主题，因此一种风格的网页选用颜色一般不要超也烘托不了网页的主题，因此一种风格的网页选用颜色一般不要超过三四种。过三四种。（2

3、） 背景的颜色不要太深，显得过于厚重，因为这样会影响整个页面背景的颜色不要太深，显得过于厚重，因为这样会影响整个页面的显示效果。但也有例外，黑色的背景衬托出亮丽的文本和图像，的显示效果。但也有例外，黑色的背景衬托出亮丽的文本和图像，会给人一种另类的感觉。会给人一种另类的感觉。（3）要保持整个网页的色调统一。）要保持整个网页的色调统一。（4）要围绕网页的主题选择颜色，色彩要能烘托出主题。）要围绕网页的主题选择颜色，色彩要能烘托出主题。 6.1.2 图像格式图像格式 由于受网络带宽的限制，在由于受网络带宽的限制，在Web页上使用的图像都是一些压页上使用的图像都是一些压缩格式，最常用的包括：缩格式，

4、最常用的包括：GIF格式、格式、JPEG格式、格式、PNG格式和矢量格式和矢量格式。格式。 1GIF格式格式 GIF格式采用无损压缩算法进行图像的压缩处理，是目前在网格式采用无损压缩算法进行图像的压缩处理，是目前在网页设计中使用最普遍、最广泛的一种图像格式。页设计中使用最普遍、最广泛的一种图像格式。2JPEG格式格式 JPEG格式是另一种在格式是另一种在Web上应用广泛的图像格式。由于它支持上应用广泛的图像格式。由于它支持的颜色数几乎没有限制，因此适用于使用真彩色或平滑过渡色的的颜色数几乎没有限制，因此适用于使用真彩色或平滑过渡色的照片和图片。与照片和图片。与GIF格式采用无损压缩不同，格式采

5、用无损压缩不同，JPEG格式使用有损格式使用有损压缩来减小图片文件的大小，因此用户将看到随着文件的减小，压缩来减小图片文件的大小，因此用户将看到随着文件的减小，图片的质量也降低了。图片的质量也降低了。3PNG格式格式 PNG格式是近年来新出现的一种图像格式，它适于任何类型、格式是近年来新出现的一种图像格式，它适于任何类型、任何颜色深度的图片。任何颜色深度的图片。 4矢量格式矢量格式 6.1.3 使用网页图像的要点使用网页图像的要点在在Web页上显示图片之前，通常需要考虑下列三个问题：页上显示图片之前，通常需要考虑下列三个问题： 确保文件较小；确保文件较小； 控制图像的数量和质量；控制图像的数量

6、和质量； 合理使用动画。合理使用动画。6.1.4 在网页中插入图像在网页中插入图像1插入图像插入图像 在在Dreamweaver中插入图像非常简单，具体操作步骤见课本。中插入图像非常简单，具体操作步骤见课本。2图像属性参数图像属性参数 在文档中插入图像后，用鼠标单击图像，图像四周出现可编辑在文档中插入图像后，用鼠标单击图像，图像四周出现可编辑的缩放手柄，说明该图像被选定。这时属性面板中显示出关于图的缩放手柄，说明该图像被选定。这时属性面板中显示出关于图像的属性信息。像的属性信息。3改变图像的尺寸改变图像的尺寸 改变图像的尺寸大小可以通过在属性面板中的改变图像的尺寸大小可以通过在属性面板中的“”

7、和和“”直接输入数值来改变图像的尺寸大小直接输入数值来改变图像的尺寸大小 。此外，还可以通过拖放图。此外，还可以通过拖放图像边框来改变图像的尺寸。像边框来改变图像的尺寸。4调整图像在网页中的相对位置调整图像在网页中的相对位置 6.1.5 设置网页背景设置网页背景 改变网页背景的状态可以通过两种方法来实现，一种是设置背改变网页背景的状态可以通过两种方法来实现，一种是设置背景颜色；另一种是设置背景图像。景颜色；另一种是设置背景图像。1设置网页背景颜色设置网页背景颜色 设置网页背景色在页面属性对话框里设置设置网页背景色在页面属性对话框里设置 。2设置背景图像设置背景图像 设置网页背景色，只能得到单一

8、颜色的背景。如何能使背景发生设置网页背景色，只能得到单一颜色的背景。如何能使背景发生更多的变化，这就需要设置网页的背景图像。更多的变化，这就需要设置网页的背景图像。6.1.6 在在Dreamweaver 4.0中巧妙地处理图像中巧妙地处理图像 1给图像加文字说明给图像加文字说明 利用利用Dreamweaver 中为图像加文字说明的功能，可使网页中的中为图像加文字说明的功能，可使网页中的图像在不能被浏览器正常显示时，以说明文字代替，以帮助访问图像在不能被浏览器正常显示时，以说明文字代替，以帮助访问者了解图像的信息。者了解图像的信息。2制作低分辨率图像制作低分辨率图像3为图像添加热点为图像添加热点

9、 热点即图像上不可见的区域，该区域分配了一个超链接。为图热点即图像上不可见的区域，该区域分配了一个超链接。为图像添加热点就是在图像上划分区域，从而设定图像上制作超链接像添加热点就是在图像上划分区域，从而设定图像上制作超链接的范围。的范围。 6.2 网页图像的其他处理方法网页图像的其他处理方法6.2.1 利用利用FrontPage 2002处理图像处理图像 用用FrontPage 2002同样可以处理网页图像，不过在同样可以处理网页图像，不过在FrontPage中习中习惯称图像为图片。惯称图像为图片。1插入图片插入图片（1）插入来自文件的图片）插入来自文件的图片（2）插入来自剪贴画的图片）插入来

10、自剪贴画的图片2修改图片属性修改图片属性（1）调整图片的大小）调整图片的大小（2）移动图片位置）移动图片位置 在在FrontPage 2002中移动图片位置很容易，只要在图片上单击鼠中移动图片位置很容易，只要在图片上单击鼠标左键，然后按住鼠标左键，拖动图片之所需的位置即可。标左键，然后按住鼠标左键，拖动图片之所需的位置即可。（3）更改图片属性）更改图片属性 更改图片属性指的是更改图片的格式属性。更改图片属性指的是更改图片的格式属性。（4）替换图片或文字）替换图片或文字 当图片太大，下载速度很慢，可使用一个分辨率较低的图片代替；当图片太大，下载速度很慢，可使用一个分辨率较低的图片代替；而当图片不

11、能被浏览器正常显示时，可以使用一些说明性文字。而当图片不能被浏览器正常显示时，可以使用一些说明性文字。3图片与文字图片与文字（1）图片与文字的对齐方式）图片与文字的对齐方式（2）图片的环绕样式）图片的环绕样式 图片的环绕样式决定了文字在图片周围的排列方式。设置图片图片的环绕样式决定了文字在图片周围的排列方式。设置图片的环绕样式可以在的环绕样式可以在“图片属性图片属性”对话框中通过对话框中通过“环绕样式环绕样式”命令命令完成，也可在完成，也可在“定位定位”对话框中设置。对话框中设置。6.2.2 利用利用HTML处理图像处理图像1. 插入图像插入图像 在在HTML中，使用中，使用IMG标记符可以在

12、网页中加入图像。它具有标记符可以在网页中加入图像。它具有两个基本属性：两个基本属性：src和和alt，分别用于设置图像文件的位置和替换文，分别用于设置图像文件的位置和替换文本。本。2设置图像属性设置图像属性（1）指定图像的宽和高）指定图像的宽和高 在在HTML中，使用中，使用IMG标记符的标记符的width和和height属性可以指定图属性可以指定图像的宽度和宽度，以告诉浏览器像的宽度和宽度，以告诉浏览器Web页应分配给图像多少空间页应分配给图像多少空间（以像素为单位）。（以像素为单位）。 （2）图像的边框）图像的边框 使用使用IMG标记符的标记符的border属性，可以给图像添加边框效果，边

13、属性，可以给图像添加边框效果，边框的取值是像素数。框的取值是像素数。 （3）设置图像周围的空白）设置图像周围的空白 可以在可以在IMG标记符内使用属性标记符内使用属性hspace和和vspace设置图像周围设置图像周围空白，其中空白，其中hspace示水平方向的空白，示水平方向的空白，vspace表示垂直方向的空表示垂直方向的空白，它们的取值都是像素数。白，它们的取值都是像素数。 （4）图像的对齐）图像的对齐 图像在页面中的对齐图像在页面中的对齐 设置图像在页面中的对齐与设置文本对齐类似，可以使用设置图像在页面中的对齐与设置文本对齐类似，可以使用DIV或或P标记符将标记符将IMG标记符括起来，然后使用标记符括起来，然后使用align属性。属性。