通过本章学习，应该掌握以下内容：
1,能够选择合适的网页颜色
2,了解网页图像的基本格式
3,掌握使用网页图像的要点
4,在网页中插入图像的方法
5,图像属性的设置
6,调整图像的大小及位置
第 6章 网页图像处理
6.1 利用 Dreamweaver 4.0编辑图像
6.1.1 网页中的颜色
图像与颜色是分不开的 。 在网页中是以 RGB方式来表示颜色的,
RGB颜色包括几百万种之多, 这么多的颜色却有一个共同点, 都是
由红, 绿, 蓝这三种基色调混和而成的, RGB其实就是 Red,Green、
Blue的缩写 。
在网页中运用色彩一般应遵循下列几个原则 。
（ 1） 一个页面中切忌采用过多的颜色, 否则会给人一种繁杂的感觉,
也烘托不了网页的主题, 因此一种风格的网页选用颜色一般不要超
过三四种 。
（ 2） 背景的颜色不要太深, 显得过于厚重, 因为这样会影响整个页面
的显示效果 。 但也有例外, 黑色的背景衬托出亮丽的文本和图像,
会给人一种另类的感觉 。
（ 3） 要保持整个网页的色调统一 。
（ 4） 要围绕网页的主题选择颜色, 色彩要能烘托出主题 。
6.1.2 图像格式
由于受网络带宽的限制, 在 Web页上使用的图像都是一些压
缩格式, 最常用的包括,GIF格式, JPEG格式, PNG格式和矢量
格式 。
1,GIF格式
GIF格式采用无损压缩算法进行图像的压缩处理, 是目前在
网页设计中使用最普遍, 最广泛的一种图像格式 。
2,JPEG格式
JPEG格式是另一种在 Web上应用广泛的图像格式 。 由于它支持
的颜色数几乎没有限制, 因此适用于使用真彩色或平滑过渡色的
照片和图片 。 与 GIF格式采用无损压缩不同, JPEG格式使用有损
压缩来减小图片文件的大小, 因此用户将看到随着文件的减小,
图片的质量也降低了 。
3,PNG格式
PNG格式是近年来新出现的一种图像格式, 它适于任何类型,
任何颜色深度的图片 。
4,矢量格式
6.1.3 使用网页图像的要点
在 Web页上显示图片之前, 通常需要考虑下列三个问题：
① 确保文件较小；
② 控制图像的数量和质量；
③ 合理使用动画 。
6.1.4 在网页中插入图像
1,插入图像
在 Dreamweaver中插入图像非常简单, 具体操作步骤见课本 。
2,图像属性参数
在文档中插入图像后, 用鼠标单击图像, 图像四周出现可编辑
的缩放手柄, 说明该图像被选定 。 这时属性面板中显示出关于图
像的属性信息 。
3,改变图像的尺寸
改变图像的尺寸大小可以通过在属性面板中的, Ｗ, 和, Ｈ,
直接输入数值来改变图像的尺寸大小 。 此外, 还可以通过拖放图
像边框来改变图像的尺寸 。
4,调整图像在网页中的相对位置
6.1.5 设置网页背景
改变网页背景的状态可以通过两种方法来实现, 一种是设置背
景颜色；另一种是设置背景图像 。
1,设置网页背景颜色
设置网页背景色在页面属性对话框里设置 。
2,设置背景图像
设置网页背景色, 只能得到单一颜色的背景 。 如何能使背景发
生更多的变化, 这就需要设置网页的背景图像 。
6.1.6 在 Dreamweaver 4.0中巧妙地处理图像
1,给图像加文字说明
利用 Dreamweaver 中为图像加文字说明的功能, 可使网页中的
图像在不能被浏览器正常显示时, 以说明文字代替, 以帮助访问
者了解图像的信息 。
2,制作低分辨率图像
3,为图像添加热点
热点即图像上不可见的区域, 该区域分配了一个超链接 。 为图
像添加热点就是在图像上划分区域, 从而设定图像上制作超链接
的范围 。
6.2 网页图像的其他处理方法
6.2.1 利用 FrontPage 2002处理图像
用 FrontPage 2002同样可以处理网页图像, 不过在 FrontPage中习
惯称图像为图片 。
1,插入图片
（ 1） 插入来自文件的图片
（ 2） 插入来自剪贴画的图片
2,修改图片属性
（ 1） 调整图片的大小
（ 2） 移动图片位置
在 FrontPage 2002中移动图片位置很容易, 只要在图片上单击鼠
标左键, 然后按住鼠标左键, 拖动图片之所需的位置即可 。
（ 3） 更改图片属性
更改图片属性指的是更改图片的格式属性 。
（ 4） 替换图片或文字
当图片太大, 下载速度很慢, 可使用一个分辨率较低的图片代替；
而当图片不能被浏览器正常显示时, 可以使用一些说明性文字 。
3,图片与文字
（ 1） 图片与文字的对齐方式
（ 2） 图片的环绕样式
图片的环绕样式决定了文字在图片周围的排列方式 。 设置图片
的环绕样式可以在, 图片属性, 对话框中通过, 环绕样式, 命令
完成, 也可在, 定位, 对话框中设置 。
6.2.2 利用 HTML处理图像
1,插入图像
在 HTML中, 使用 IMG标记符可以在网页中加入图像 。 它具有
两个基本属性,src和 alt,分别用于设置图像文件的位置和替换文
本 。
2,设置图像属性
（ 1） 指定图像的宽和高
在 HTML中, 使用 IMG标记符的 width和 height属性可以指定图
像的宽度和宽度, 以告诉浏览器 Web页应分配给图像多少空间
（ 以像素为单位 ） 。
（ 2） 图像的边框
使用 IMG标记符的 border属性, 可以给图像添加边框效果, 边
框的取值是像素数 。
（ 3） 设置图像周围的空白
可以在 IMG标记符内使用属性 hspace和 vspace设置图像周围
空白, 其中 hspace示水平方向的空白, vspace表示垂直方向的空
白, 它们的取值都是像素数 。
（ 4） 图像的对齐
① 图像在页面中的对齐
设置图像在页面中的对齐与设置文本对齐类似, 可以使用 DIV或
P标记符将 IMG标记符括起来, 然后使用 align属性 。
② 图像与周围内容的垂直对齐
使用 IMG标记符的 align属性, 可以控制图像与周围内容的垂
直对齐 。
③ 图文混排时的图像对齐
如果要在图像的左, 右环绕文字, 也应该使用 IMG标记符的
align属性 。
1,能够选择合适的网页颜色
2,了解网页图像的基本格式
3,掌握使用网页图像的要点
4,在网页中插入图像的方法
5,图像属性的设置
6,调整图像的大小及位置
第 6章 网页图像处理
6.1 利用 Dreamweaver 4.0编辑图像
6.1.1 网页中的颜色
图像与颜色是分不开的 。 在网页中是以 RGB方式来表示颜色的,
RGB颜色包括几百万种之多, 这么多的颜色却有一个共同点, 都是
由红, 绿, 蓝这三种基色调混和而成的, RGB其实就是 Red,Green、
Blue的缩写 。
在网页中运用色彩一般应遵循下列几个原则 。
（ 1） 一个页面中切忌采用过多的颜色, 否则会给人一种繁杂的感觉,
也烘托不了网页的主题, 因此一种风格的网页选用颜色一般不要超
过三四种 。
（ 2） 背景的颜色不要太深, 显得过于厚重, 因为这样会影响整个页面
的显示效果 。 但也有例外, 黑色的背景衬托出亮丽的文本和图像,
会给人一种另类的感觉 。
（ 3） 要保持整个网页的色调统一 。
（ 4） 要围绕网页的主题选择颜色, 色彩要能烘托出主题 。
6.1.2 图像格式
由于受网络带宽的限制, 在 Web页上使用的图像都是一些压
缩格式, 最常用的包括,GIF格式, JPEG格式, PNG格式和矢量
格式 。
1,GIF格式
GIF格式采用无损压缩算法进行图像的压缩处理, 是目前在
网页设计中使用最普遍, 最广泛的一种图像格式 。
2,JPEG格式
JPEG格式是另一种在 Web上应用广泛的图像格式 。 由于它支持
的颜色数几乎没有限制, 因此适用于使用真彩色或平滑过渡色的
照片和图片 。 与 GIF格式采用无损压缩不同, JPEG格式使用有损
压缩来减小图片文件的大小, 因此用户将看到随着文件的减小,
图片的质量也降低了 。
3,PNG格式
PNG格式是近年来新出现的一种图像格式, 它适于任何类型,
任何颜色深度的图片 。
4,矢量格式
6.1.3 使用网页图像的要点
在 Web页上显示图片之前, 通常需要考虑下列三个问题：
① 确保文件较小；
② 控制图像的数量和质量；
③ 合理使用动画 。
6.1.4 在网页中插入图像
1,插入图像
在 Dreamweaver中插入图像非常简单, 具体操作步骤见课本 。
2,图像属性参数
在文档中插入图像后, 用鼠标单击图像, 图像四周出现可编辑
的缩放手柄, 说明该图像被选定 。 这时属性面板中显示出关于图
像的属性信息 。
3,改变图像的尺寸
改变图像的尺寸大小可以通过在属性面板中的, Ｗ, 和, Ｈ,
直接输入数值来改变图像的尺寸大小 。 此外, 还可以通过拖放图
像边框来改变图像的尺寸 。
4,调整图像在网页中的相对位置
6.1.5 设置网页背景
改变网页背景的状态可以通过两种方法来实现, 一种是设置背
景颜色；另一种是设置背景图像 。
1,设置网页背景颜色
设置网页背景色在页面属性对话框里设置 。
2,设置背景图像
设置网页背景色, 只能得到单一颜色的背景 。 如何能使背景发
生更多的变化, 这就需要设置网页的背景图像 。
6.1.6 在 Dreamweaver 4.0中巧妙地处理图像
1,给图像加文字说明
利用 Dreamweaver 中为图像加文字说明的功能, 可使网页中的
图像在不能被浏览器正常显示时, 以说明文字代替, 以帮助访问
者了解图像的信息 。
2,制作低分辨率图像
3,为图像添加热点
热点即图像上不可见的区域, 该区域分配了一个超链接 。 为图
像添加热点就是在图像上划分区域, 从而设定图像上制作超链接
的范围 。
6.2 网页图像的其他处理方法
6.2.1 利用 FrontPage 2002处理图像
用 FrontPage 2002同样可以处理网页图像, 不过在 FrontPage中习
惯称图像为图片 。
1,插入图片
（ 1） 插入来自文件的图片
（ 2） 插入来自剪贴画的图片
2,修改图片属性
（ 1） 调整图片的大小
（ 2） 移动图片位置
在 FrontPage 2002中移动图片位置很容易, 只要在图片上单击鼠
标左键, 然后按住鼠标左键, 拖动图片之所需的位置即可 。
（ 3） 更改图片属性
更改图片属性指的是更改图片的格式属性 。
（ 4） 替换图片或文字
当图片太大, 下载速度很慢, 可使用一个分辨率较低的图片代替；
而当图片不能被浏览器正常显示时, 可以使用一些说明性文字 。
3,图片与文字
（ 1） 图片与文字的对齐方式
（ 2） 图片的环绕样式
图片的环绕样式决定了文字在图片周围的排列方式 。 设置图片
的环绕样式可以在, 图片属性, 对话框中通过, 环绕样式, 命令
完成, 也可在, 定位, 对话框中设置 。
6.2.2 利用 HTML处理图像
1,插入图像
在 HTML中, 使用 IMG标记符可以在网页中加入图像 。 它具有
两个基本属性,src和 alt,分别用于设置图像文件的位置和替换文
本 。
2,设置图像属性
（ 1） 指定图像的宽和高
在 HTML中, 使用 IMG标记符的 width和 height属性可以指定图
像的宽度和宽度, 以告诉浏览器 Web页应分配给图像多少空间
（ 以像素为单位 ） 。
（ 2） 图像的边框
使用 IMG标记符的 border属性, 可以给图像添加边框效果, 边
框的取值是像素数 。
（ 3） 设置图像周围的空白
可以在 IMG标记符内使用属性 hspace和 vspace设置图像周围
空白, 其中 hspace示水平方向的空白, vspace表示垂直方向的空
白, 它们的取值都是像素数 。
（ 4） 图像的对齐
① 图像在页面中的对齐
设置图像在页面中的对齐与设置文本对齐类似, 可以使用 DIV或
P标记符将 IMG标记符括起来, 然后使用 align属性 。
② 图像与周围内容的垂直对齐
使用 IMG标记符的 align属性, 可以控制图像与周围内容的垂
直对齐 。
③ 图文混排时的图像对齐
如果要在图像的左, 右环绕文字, 也应该使用 IMG标记符的
align属性 。
