第四章 网页图象的处理.ppt

6．插入图像占位符 7．插入鼠标经过图像 8. 插入导航条 * * 主要内容： 第4章 网页图像的处理 能够选择合适的网页颜色 了解网页图像的基本格式 在网页中插入图像的方法 图像属性的设置 4.1 利用Dreamweaver8编辑图像 4.1.1 网页中的颜色 在网页中是以RGB方式来表示颜色的，RGB其实就是Red、Green、Blue的缩写。 这三种基色中每一种颜色的饱和度和透明度都是可以变化的，用0（表示最弱）~255（表示最强）的数值来表示。 例如：纯红色表示为（255，0，0），用十六进制数来表示的话就变成了“FF0000”。 在网页中运用色彩一般应遵循下列几个原则: 一个页面中切忌采用过多的颜色，否则会给人一种繁杂的感觉，也烘托不了网页的主题，因此一种风格的网页选用颜色一般不要超过三、四种。 背景的颜色不要太深，显得于厚重，因为这样会影响整个页面的显示效果。但也有例外，黑色的背景衬托出亮丽的文本和图像，会给人一种另类的感觉。 要保持整个网页的色调统一。 要围绕网页的主题选择颜色，色彩要能烘托出主题。 4.1.2 图像格式 1．GIF格式 GIF格式（Graphics Interchange Format 图像交换格式）采用无损压缩（所谓无损压缩是指在压缩过程中图像的质量不会丢失）算法进行图像的压缩处理，是目前在网页设计中使用最普遍、最广泛的一种图像格式。 GIF格式可以高度压缩图像; GIF格式支持图像游离在背景之上的视觉效果; GIF格式的图像可以被交错下载;可以将很多幅图像结合在一个GIF文件中。 2．JPEG格式 JPEG格式（Joint Photo Expert Graphics，联合图像专家组标准）是另一种在Web上应用广泛的图像格式。 具有很高的压缩比，同时它支持的颜色数几乎没有限制。 1. 支持24位图像，能够很好地表现照片等全彩色的图像； 2. 可以生成类似GIF格式的交错关联图像——渐变JPEG； 3. 可以制作透明JPEG图像。 JPEG格式图像的优点： 有损压缩使之不适合表达高清晰度的图像： 最高只能以256色显示的用户，可能无法观看JPEG图像； 当图像中包含fine字体时应避免用JPEG格式，在该字体与纯颜色重叠的地方，JPEG压缩作品看上去只是一种外观近似。 采用JPEG格式对图像进行压缩后，不能再重新打开图像。 JPEG格式不支持透明色，也没有动画的概念。 JPEG格式图像的缺点： PNG格式（Portable Networks Graphics，可移植网络图形）是近年来新出现的一种图像格式。 它适于任何类型、任何颜色深度的图片。该格式用无损压缩来减小图片文件的大小，同时保留图片中的透明区域。 3．PNG格式 GIF、JPEG、PNG这几种格式都是标准的位图格式，但现在Web上还可以使用新的矢量格式。所谓位图格式就是指用图片上每一点的信息来描述图像，而矢量格式则是用线条和填充色等数学信息来描述图像。相比而言，矢量格式的文件要比位图格式的文件小得多，但表现力丝毫不逊色。 除了表现一般的静态画面以外，动画是矢量格式具有巨大优势的另一个领域。 4．矢量格式 在Web页上显示图片之前，通常需要考虑下列两个问题： 确保文件较小 使图像具有所需的像素大小 采用正确的格式进行优化处理 控制图像的数量和质量 4.1.3 使用网页图像的要点 在插入“常用”面板中，单击插入图像按钮。 直接拖曳“常用”面板中的插入图像按钮至页面的光标处。 选择Dreamweaver8主菜单中的“插入”|“图像”命令。 将“文件”面板中的图像文件直接拖到目标位置。 4.1.4 在网页中插入图像 1．插入图像 2. 图像属性参数 可以通过图象属性面板对所选图像进行各种属性的设置。 改变图像的尺寸大小，可以通过在属性面板中的“宽”和“高”文本框中直接输入数值来改变图像的尺寸大小，当在网页中需要精确地定位元素时，这种方法可以帮助设计者达到预想的效果。不过这种方法有一个弊端，如果数值输入不当，可能造成图像在浏览器中无法正常显示。此外，还可以通过拖放图像四周的缩放边框来改变图像的尺寸。 3．改变图像的尺寸 Dreamweaver8中调整图像位置的方法很简单，简述如下： （1）选中页面中要编辑的图像； （2）打开图像