第 4章 图像的处理
学习目标
? 理解矢量图和位图的区别，了解常用的
Web图像格式。
? 理解 Web图像的处理流程，初步掌握基
本的 Web图像处理操作。
? 掌握在网页中插入图像的方法，理解图
像在网页中的作用和 Web图像的基本使
用原则。
矢量图
? 矢量图形是指用线条和填充色等数学信
息来描述图像的一种图像类型。
? 制作矢量格式图像的软件有 Freehand、
Illustrator,CorelDraw、
AutoCAD 。
位图
? 位图是指用像素一点一点地描述图像的
一种图像类型。
? 常用的位图编辑软件有 Fireworks、
Photoshop,ImageReady、
PhotoImpact 等
常用 Web图像格式
? GIF
? JPEG
? PNG
GIF
GIF（ Graphics Interchange
Format，图形交换格式）格式的特点,
? 无损压缩
? 最多 256色
? 能够使用透明色
? 有所占存储空间小、下载速度快、支持动画等特点
JPEG
JPEG（ Joint Photographic Expert
Group，联合图形专家组）格式的特点,
? 有损压缩
? 24位颜色
? 可以控制压缩比
? 图像质量好，对具有连续色调的图像有最佳效果
PNG
PNG（ Portable Network Graphics，
可移植的网络图形）格式的特点,
? 无损压缩
? 24位颜色
? 支持透明度
?BMP图像文件因为存储空间大，传输不够快，所以并不常用,
常用的是 jpg文件和 gif文件。
?对于徽标、公司厂标等在每一主页显示,要求能快速下载并能
在低配置的系统中查询的图像,应采用 GIF格式
?而对于扫描图片、艺术作品这种 对显示质量要求很高的图像则
应采用 JPEG格式 。
图像使用说明
背景图案的设定
在网页中可以用图像平铺的方法制作背景。
定义背景图像的语法格式如下,
<body background="image-URL">
其中,,image-URL”指图像的位置。
示例,ex4-01.html
说明,
?注意平铺的效果,在建立这种形式的背景之前，首
先要确定所选定的图案能否看上去 无痕迹地连接在
一起,或者能否产生一种较好的背景效果。
?尽量不用,用平铺图像作背景，将极明显地降低网
页的显示速度。唯一的解决办法就是尽量使用小的
图像文件，如果可能的话则不用。
?示例,示例一 示例二
?<img>是用于导入图像文件的标签，使用此标签可
将图像文件导入到 HTML文件中显示。
?<img>没有结束标签，因为当浏览器只有读取到
<img>标签时，会直接显示此标签所代表的图像。
1．格式,
<img src="image-URL">
网页中插入图形
示例,ex4-02.html
2．说明,
src属性是用来指出一个图像的文件名，或是指
出 URL的路径名。
如果图像的显示有问题，应该检查以下内容,
① 文件名是否书写正确；
② 图像文件是否是 BMP,GIF或 JPG格式；
③ 是否已经打开了浏览器的图像下载功能。
若上述几项全部正确，图像就能够显示出来。
小技巧,
如果在同一个文件中需要反复使用一个相同的图像文
件时,最好在 <img>标签中使用相对路径名,而不是
使用绝对路径名或 URL。因为 使用相对路径名，浏览
器只须将图像文件下载一次,再次使用这个图像时，
只要重新显示一遍即可。如果 使用的是绝对路径名，
每次显示图像时，都要下载一次图像,这将会大大降
低图像的显示速度。
img标签属性的使用
?图像的取代文字
?设定图像的高度和宽度
?设定图像的边框
?设定图像的对齐方式
?设定图像与文本之间的距离
<img>标签中的 alt属性,当浏览器不能显示图像
或找不到图像时，它可以将 alt引导的文本显示在
屏幕上，从而替代看不到的图像。
图像的取代文字 alt
示例,ex4-03.html
?<img>标签中还提供了两个属性,height和 width，
用来设定图像的高度和宽度，二者可取像素值或百
分比。
?小技巧：小的图像占的磁盘空间较少，在网上传
输的时间比较短。因此，可以先建立一个比较小的
图像，然后再用这两个属性按比例放大，达到所希
望的尺寸。
设定图像的高度和宽度
示例,ex4-04.html
设定图像的边框 border
<img>标签的 border属性可以给图像加一个
边框。若 border项默认或取值为 0时，图像没有边
框。
示例,ex4-05.html
在 <img>标签中使用 align属性，可控制图像
相对于文字基准线（文字中线）的水平对齐方式，
其语法如下,
<img align=top,middle,bottom,left或
right>
各属性的设置值意义如下表所示,
设定图像的对齐方式 align
align属性的设置值
左对齐 right
右对齐 left
下对齐 bottom
居中对齐 middle
上对齐 top
对齐方式 设 置 值
示例,ex4-06.html 示例,ex4-07.html
设定图像与文本之间的距离
?<img>标签中的 vspacr和 hspace属性能够调整图像与
其他文本之间的距离，两者均取像素值。设定语法如
下,
?<img vspace=n hspave=m> n,m为数值，单位为像
素。
vspace 调整图像与上下文本的距离 vertical
hspace 调整图像与左右文本的距离 horizontal
示例,ex4-08.html
把文本排到图像下面
如果文本还没有填满图像周围的空间时，就希望
从图像下面重新开始另一行文本，这时，普通的换行
标签 <br>就不起作用了，它只能在图像旁边另起一行，
而不能把文本排到图像下面去，这就需要在 <br>标签
中使用 clear属性来满足这一要求,
clear=left 文本在图像下面另起一行从此，用
于图像在左边的情况
clear=right 文本在图像下面另一行从此，用于
图像在右边的情况
clear=all 文本在图像下面另起行处一行
示例,ex4-09.html
图像与超链接
? 图像既可以作为超链接的源，也可以作
为超链接的目标。例如,Web相册。
? 图像映射：是指在同一幅图中定义若干
区域，不同区域对应不同的超链接，单
击不同区域可跳转到相应页面。
?图像链接的建立,将 <img>标签放在 <a>和 </a>的
中间，这个图像将成为一个可点击的图像，产生一
个链接。
?图像链接提示,利用 alt属性，加入提示信息，
当浏览者的鼠标移到图像时，显示提示信息。
超链接与图形
示例,ex4-10.html
客户端图像映射
? 什么是客户端图像映射
?在同一幅图中定义若干区域，不同区域对应不同的超
链接，单击不同区域可跳转到相应页面。
? 客户端图像映射的使用
（ 1） 定义映射图
（ 2）使用映射图
? 定义映射图,<map>标记符和 <area>标记符
? 使用映射图,<img usemap=#映射图名称 >
AREA标记符
? Shape属性（ rect,circle,poly）
? Coords属性
? Href属性
示例,
<HTML>
<HEAD><TITLE>图像映射示例 </TITLE></HEAD>
<BODY>
<MAP name="mymap">
<AREA href="file1.htm" shape="rect"
coords="30,152,366,218">
<AREA href="file2.htm" shape="rect"
coords="171,256,228,288">
</MAP>
<P>请单击以下图像中的不同区域，以便跳转到不同的文件
</P>
<P><IMG src="diablo_h.jpg"
usemap="#mymap"></P>
</BODY>
</HTML>
图像使用原则
在使用图像的问题上，网页的制作者可能会与
浏览者产生一些矛盾。比如，制作者往往希望在自
己的网页上有一些漂亮的图像，使网页充满艺术的
魅力；而浏览者常常因为网页下载时间太长而不耐
烦，甚至不愿等着下载全部内容。因此，我们可以
采用以下的方法来缓解这个矛盾,
1．在设计网页时，应该反复斟酌哪些图像必
须要，哪些图像可在可无，对于那些不是必需的图
像，要舍得忍痛割爱；
2．把图像尽量做得小一点，小图像在网上的传
输速度比较 快，这对于网络传输速度较慢的用户
更为重要。较小的图像可以是尺寸比较小，也可以
通过减少图像颜色使图像文件减小；
3．为了使不支持图像的浏览器能看到文本，可
以同时使用图像和 ALT的纯文本格式，这样，能使
更多的用户看全这个网页；
4．设计一般不要宽于 450像素值，因为不少浏
览器宽度大约为 460像素值，许多显示器也不是彩
色的，在设计网页时，这些因素都应该考虑进去。
学习目标
? 理解矢量图和位图的区别，了解常用的
Web图像格式。
? 理解 Web图像的处理流程，初步掌握基
本的 Web图像处理操作。
? 掌握在网页中插入图像的方法，理解图
像在网页中的作用和 Web图像的基本使
用原则。
矢量图
? 矢量图形是指用线条和填充色等数学信
息来描述图像的一种图像类型。
? 制作矢量格式图像的软件有 Freehand、
Illustrator,CorelDraw、
AutoCAD 。
位图
? 位图是指用像素一点一点地描述图像的
一种图像类型。
? 常用的位图编辑软件有 Fireworks、
Photoshop,ImageReady、
PhotoImpact 等
常用 Web图像格式
? GIF
? JPEG
? PNG
GIF
GIF（ Graphics Interchange
Format，图形交换格式）格式的特点,
? 无损压缩
? 最多 256色
? 能够使用透明色
? 有所占存储空间小、下载速度快、支持动画等特点
JPEG
JPEG（ Joint Photographic Expert
Group，联合图形专家组）格式的特点,
? 有损压缩
? 24位颜色
? 可以控制压缩比
? 图像质量好，对具有连续色调的图像有最佳效果
PNG
PNG（ Portable Network Graphics，
可移植的网络图形）格式的特点,
? 无损压缩
? 24位颜色
? 支持透明度
?BMP图像文件因为存储空间大，传输不够快，所以并不常用,
常用的是 jpg文件和 gif文件。
?对于徽标、公司厂标等在每一主页显示,要求能快速下载并能
在低配置的系统中查询的图像,应采用 GIF格式
?而对于扫描图片、艺术作品这种 对显示质量要求很高的图像则
应采用 JPEG格式 。
图像使用说明
背景图案的设定
在网页中可以用图像平铺的方法制作背景。
定义背景图像的语法格式如下,
<body background="image-URL">
其中,,image-URL”指图像的位置。
示例,ex4-01.html
说明,
?注意平铺的效果,在建立这种形式的背景之前，首
先要确定所选定的图案能否看上去 无痕迹地连接在
一起,或者能否产生一种较好的背景效果。
?尽量不用,用平铺图像作背景，将极明显地降低网
页的显示速度。唯一的解决办法就是尽量使用小的
图像文件，如果可能的话则不用。
?示例,示例一 示例二
?<img>是用于导入图像文件的标签，使用此标签可
将图像文件导入到 HTML文件中显示。
?<img>没有结束标签，因为当浏览器只有读取到
<img>标签时，会直接显示此标签所代表的图像。
1．格式,
<img src="image-URL">
网页中插入图形
示例,ex4-02.html
2．说明,
src属性是用来指出一个图像的文件名，或是指
出 URL的路径名。
如果图像的显示有问题，应该检查以下内容,
① 文件名是否书写正确；
② 图像文件是否是 BMP,GIF或 JPG格式；
③ 是否已经打开了浏览器的图像下载功能。
若上述几项全部正确，图像就能够显示出来。
小技巧,
如果在同一个文件中需要反复使用一个相同的图像文
件时,最好在 <img>标签中使用相对路径名,而不是
使用绝对路径名或 URL。因为 使用相对路径名，浏览
器只须将图像文件下载一次,再次使用这个图像时，
只要重新显示一遍即可。如果 使用的是绝对路径名，
每次显示图像时，都要下载一次图像,这将会大大降
低图像的显示速度。
img标签属性的使用
?图像的取代文字
?设定图像的高度和宽度
?设定图像的边框
?设定图像的对齐方式
?设定图像与文本之间的距离
<img>标签中的 alt属性,当浏览器不能显示图像
或找不到图像时，它可以将 alt引导的文本显示在
屏幕上，从而替代看不到的图像。
图像的取代文字 alt
示例,ex4-03.html
?<img>标签中还提供了两个属性,height和 width，
用来设定图像的高度和宽度，二者可取像素值或百
分比。
?小技巧：小的图像占的磁盘空间较少，在网上传
输的时间比较短。因此，可以先建立一个比较小的
图像，然后再用这两个属性按比例放大，达到所希
望的尺寸。
设定图像的高度和宽度
示例,ex4-04.html
设定图像的边框 border
<img>标签的 border属性可以给图像加一个
边框。若 border项默认或取值为 0时，图像没有边
框。
示例,ex4-05.html
在 <img>标签中使用 align属性，可控制图像
相对于文字基准线（文字中线）的水平对齐方式，
其语法如下,
<img align=top,middle,bottom,left或
right>
各属性的设置值意义如下表所示,
设定图像的对齐方式 align
align属性的设置值
左对齐 right
右对齐 left
下对齐 bottom
居中对齐 middle
上对齐 top
对齐方式 设 置 值
示例,ex4-06.html 示例,ex4-07.html
设定图像与文本之间的距离
?<img>标签中的 vspacr和 hspace属性能够调整图像与
其他文本之间的距离，两者均取像素值。设定语法如
下,
?<img vspace=n hspave=m> n,m为数值，单位为像
素。
vspace 调整图像与上下文本的距离 vertical
hspace 调整图像与左右文本的距离 horizontal
示例,ex4-08.html
把文本排到图像下面
如果文本还没有填满图像周围的空间时，就希望
从图像下面重新开始另一行文本，这时，普通的换行
标签 <br>就不起作用了，它只能在图像旁边另起一行，
而不能把文本排到图像下面去，这就需要在 <br>标签
中使用 clear属性来满足这一要求,
clear=left 文本在图像下面另起一行从此，用
于图像在左边的情况
clear=right 文本在图像下面另一行从此，用于
图像在右边的情况
clear=all 文本在图像下面另起行处一行
示例,ex4-09.html
图像与超链接
? 图像既可以作为超链接的源，也可以作
为超链接的目标。例如,Web相册。
? 图像映射：是指在同一幅图中定义若干
区域，不同区域对应不同的超链接，单
击不同区域可跳转到相应页面。
?图像链接的建立,将 <img>标签放在 <a>和 </a>的
中间，这个图像将成为一个可点击的图像，产生一
个链接。
?图像链接提示,利用 alt属性，加入提示信息，
当浏览者的鼠标移到图像时，显示提示信息。
超链接与图形
示例,ex4-10.html
客户端图像映射
? 什么是客户端图像映射
?在同一幅图中定义若干区域，不同区域对应不同的超
链接，单击不同区域可跳转到相应页面。
? 客户端图像映射的使用
（ 1） 定义映射图
（ 2）使用映射图
? 定义映射图,<map>标记符和 <area>标记符
? 使用映射图,<img usemap=#映射图名称 >
AREA标记符
? Shape属性（ rect,circle,poly）
? Coords属性
? Href属性
示例,
<HTML>
<HEAD><TITLE>图像映射示例 </TITLE></HEAD>
<BODY>
<MAP name="mymap">
<AREA href="file1.htm" shape="rect"
coords="30,152,366,218">
<AREA href="file2.htm" shape="rect"
coords="171,256,228,288">
</MAP>
<P>请单击以下图像中的不同区域，以便跳转到不同的文件
</P>
<P><IMG src="diablo_h.jpg"
usemap="#mymap"></P>
</BODY>
</HTML>
图像使用原则
在使用图像的问题上，网页的制作者可能会与
浏览者产生一些矛盾。比如，制作者往往希望在自
己的网页上有一些漂亮的图像，使网页充满艺术的
魅力；而浏览者常常因为网页下载时间太长而不耐
烦，甚至不愿等着下载全部内容。因此，我们可以
采用以下的方法来缓解这个矛盾,
1．在设计网页时，应该反复斟酌哪些图像必
须要，哪些图像可在可无，对于那些不是必需的图
像，要舍得忍痛割爱；
2．把图像尽量做得小一点，小图像在网上的传
输速度比较 快，这对于网络传输速度较慢的用户
更为重要。较小的图像可以是尺寸比较小，也可以
通过减少图像颜色使图像文件减小；
3．为了使不支持图像的浏览器能看到文本，可
以同时使用图像和 ALT的纯文本格式，这样，能使
更多的用户看全这个网页；
4．设计一般不要宽于 450像素值，因为不少浏
览器宽度大约为 460像素值，许多显示器也不是彩
色的，在设计网页时，这些因素都应该考虑进去。
