第5章网页图像的处理 通过本章学习,应该掌握以下内容: 1.能够选择合适的网页颜色 2.解网页图像的基本格式 3.掌握使用网页图像的要点 4.在网页中插入图像的方法 5.图像属性的设置 6.调整图像的大小及位置
通过本章学习，应该掌握以下内容： 第5章 网页图像的处理 1. 能够选择合适的网页颜色 2. 解网页图像的基本格式 3. 掌握使用网页图像的要点 4. 在网页中插入图像的方法 5. 图像属性的设置 6. 调整图像的大小及位置
5.1利用 Dreamweaver mx编辑图像 511网页中的颜色 在网页中是以RGB方式来表示颜色的,RGB颜 色包括几百万种之多,这么多的颜色却有一个共同点, 都是由红、绿、蓝这三种基色调混和而成的,RGB 其实就是Red、 Green、Blue的缩写。 这三种基色中每一种颜色的饱和度和透明度都是 可以变化的,用0(表示最弱)~255(表示最强)的 数值来表示。例如纯红色表示为:Red50%、 Green 0%、Blue0%,简单的表示法为(255,0,0),用 十六进制数来表示的话就变成了“FF0000
5.1 利用Dreamweaver MX编辑图像 5.1.1 网页中的颜色 在网页中是以RGB方式来表示颜色的，RGB颜 色包括几百万种之多，这么多的颜色却有一个共同点， 都是由红、绿、蓝这三种基色调混和而成的，RGB 其实就是Red、Green、Blue的缩写。 这三种基色中每一种颜色的饱和度和透明度都是 可以变化的，用0（表示最弱）~255（表示最强）的 数值来表示。例如纯红色表示为：Red 50%、Green 0%、Blue 0%，简单的表示法为（255，0，0），用 十六进制数来表示的话就变成了“FF0000”
在网页中运用色彩一般应遵循下列几个原则: (1)一个页面中切忌采用过多的颜色,否则会给人 种繁杂的感觉,也烘托不了网页的主题,因此一种风 格的网页选用颜色一般不要超过三四种。 (2)背景的颜色不要太深,显得过于厚重,因为这样 会影响整个页面的显示效果。但也有例外,黑色的背 景衬托出亮丽的文本和图像,会给人一种另类的感觉。 (3)要保持整个网页的色调统一。 (4)要围绕网页的主题选择颜色,色彩要能烘托出主 题
在网页中运用色彩一般应遵循下列几个原则: （1）一个页面中切忌采用过多的颜色，否则会给人一 种繁杂的感觉，也烘托不了网页的主题，因此一种风 格的网页选用颜色一般不要超过三四种。 （2）背景的颜色不要太深，显得过于厚重，因为这样 会影响整个页面的显示效果。但也有例外，黑色的背 景衬托出亮丽的文本和图像，会给人一种另类的感觉。 （3）要保持整个网页的色调统一。 （4）要围绕网页的主题选择颜色，色彩要能烘托出主 题
512图像格式 1.GIF格式 GIF格式( Graphics interchange Format图 像交换格式)采用无损压缩(所谓无损压缩是指 在压缩过程中图像的质量不会丢失)算法进行图 像的压缩处理,是目前在网页设计中使用最普遍 最广泛的一种图像格式 GIF格式可以高度压缩图像;GIF格式支持图像 游离在背景之上的视觉效果;GIF格式的图像可以 被交错下载;可以将很多幅图像结合在一个GF文 件中
5.1.2 图像格式 GIF格式（Graphics Interchange Format 图 像交换格式）采用无损压缩（所谓无损压缩是指 在压缩过程中图像的质量不会丢失）算法进行图 像的压缩处理，是目前在网页设计中使用最普遍、 最广泛的一种图像格式。 GIF格式可以高度压缩图像; GIF格式支持图像 游离在背景之上的视觉效果; GIF格式的图像可以 被交错下载;可以将很多幅图像结合在一个GIF文 件中。 1．GIF格式
2.JPEG格式 JPEG格式( Joint Photo Expert graphics,联合 图形专家组图片格式)是另一种在Web应用广泛的 图像格式。由于它支持的颜色数几乎没有限制,因此 适用于使用真彩色或平滑过渡色的照片和图片。与 GIF格式采用无损压缩不同,JPEG格式使用有损压 缩来减小图片文件的大小,因此用户将看到随着文件 的减小,图片的质量也降低了
2．JPEG格式 JPEG格式（Joint Photo Expert Graphics，联合 图形专家组图片格式）是另一种在Web上应用广泛的 图像格式。由于它支持的颜色数几乎没有限制，因此 适用于使用真彩色或平滑过渡色的照片和图片。与 GIF格式采用无损压缩不同，JPEG格式使用有损压 缩来减小图片文件的大小，因此用户将看到随着文件 的减小，图片的质量也降低了
JPEG格式图像的优点: 1支持24位图像,能够很好地表现照片等全彩色的 图像; 2.可以生成类似G格式的交错关联图像渐变 JPEG: 3可以制作透明JPEG图像
1.支持24位图像，能够很好地表现照片等全彩色的 图像； 2. 可以生成类似GIF格式的交错关联图像——渐变 JPEG； 3.可以制作透明JPEG图像。 JPEG格式图像的优点：
JPEG格式图像的缺点: 1.有损压缩使之不适合表达高清晰度的图像: 2.最高只能以256色显示的用户,可能无法观看 JPEG图像; 3.当图像中包含fne字体时应避免用JPEG格式,在 该字体与纯颜色重叠的地方,JPEG压缩作品看上 去只是一种外观近似。 4.采用JPEG格式对图像进行压缩后,不能再重新打 开图像 5.JPEG格式不支持透明色,也没有动画的概念
1. 有损压缩使之不适合表达高清晰度的图像： 2. 最高只能以256色显示的用户，可能无法观看 JPEG图像； 3. 当图像中包含fine字体时应避免用JPEG格式，在 该字体与纯颜色重叠的地方，JPEG压缩作品看上 去只是一种外观近似。 4. 采用JPEG格式对图像进行压缩后，不能再重新打 开图像。 5. JPEG格式不支持透明色，也没有动画的概念。 JPEG格式图像的缺点：
3.PNG格式 PNG格式( Portable Networks Graphics,可 移植的网络图形格式)是近年来新出现的一种图像 格式,它适于任何类型、任何颜色深度的图片。该 格式用无损压缩来减小图片文件的大小,同时保留 图片中的透明区域。此外,该格式是仅有的几种支 持透明度概念的图片格式之一(透明GIF的透明度 只能是50%,但PNG格式可以是0%~50%)
PNG格式（Portable Networks Graphics，可 移植的网络图形格式）是近年来新出现的一种图像 格式，它适于任何类型、任何颜色深度的图片。该 格式用无损压缩来减小图片文件的大小，同时保留 图片中的透明区域。此外，该格式是仅有的几种支 持透明度概念的图片格式之一（透明GIF的透明度 只能是50%，但PNG格式可以是0% ~50%）。 3．PNG格式
4.矢量格式 GIF、JPEG、PNG这几种格式都是标准的位 图格式,但现在Web上还可以使用新的矢量格式。 所谓位图格式就是指用图片上每一点的信息来描述 图像,而矢量格式则是用线条和填充色等数学信息 来描述图像。相比而言,矢量格式的文件要比位图 格式的文件小得多,但表现力丝毫不逊色。 除了表现一般的静态画面以外,动画是矢量 格式具有巨大优势的另一个领域
GIF、JPEG、PNG这几种格式都是标准的位 图格式，但现在Web上还可以使用新的矢量格式。 所谓位图格式就是指用图片上每一点的信息来描述 图像，而矢量格式则是用线条和填充色等数学信息 来描述图像。相比而言，矢量格式的文件要比位图 格式的文件小得多，但表现力丝毫不逊色。 除了表现一般的静态画面以外，动画是矢量 格式具有巨大优势的另一个领域。 4．矢量格式
51.3使用网页图像的要点 在Web页上显示图片之前,通常需要考虑下列三 个问题: ①确保文件较小; 1)使图像具有所需的像素大小 2)采用正确的格式进行优化处理 ②控制图像的数量和质量; ③合理使用动画
在Web页上显示图片之前，通常需要考虑下列三 个问题： ① 确保文件较小； 1）使图像具有所需的像素大小 2）采用正确的格式进行优化处理 ② 控制图像的数量和质量； ③ 合理使用动画。 5.1.3 使用网页图像的要点
