网页设计中的图像的使用及设置[完整篇]
万维网（World Wide Web）与其他网络类型（如FTP）最大的不同就在于它在网页上可呈现丰富的色彩及图像。用户可以在网页中放入自己的照片；可以放入公司的商标；还可以把图像作为一个按钮来链接到另一个网页，这就让网页变得丰富多彩了。
一、图像格式介绍
每天在网络上交流的计算机多不胜数，因此使用的图像格式一定能够被每一个操作平台所接受。当前万维网上流行的图像格式以GIF 及JPEG 为主，另外还有一种名为PNG 的文件格式，也被越来越多地应用在网络中。以下分别对这3 种图像格式的特点进行介绍。
1．GIF 格式
GIF 格式采用LZW 压缩，是以压缩相同颜色的色块来减少图像大小的。由于LZW 压缩不会造成任何品质上的损失，而且压缩效率高，再加上GIF 在各种平台上都可使用，所以很适合在互联网上使用，但GIF 只能处理256 色。
GIF 格式适合于商标、新闻式的标题或其他小于256 色的图像。要想将图像以GIF 的格式存储。
LZW 压缩是一种能将数据中重复的字符串加以编码制作成一数据流的一种压缩法，通常应用于GIF 图像文件的格式。
2．JPEG 格式
对于照片之类全彩的图像，通常都以JPEG 格式来进行压缩，也可以说，JPEG 格式通常用来保存超过256 色的图像格式。JPEG 的压缩过程会造成一些图像数据的损失，所造成的“损失”是剔除一些视觉上不容易察觉的部分。如果剔除适当，视觉上不但能够接受，而且图像的压缩效率也会提高，使图像文件变小；反之，剔除太多图像数据，则会造成图像过度失真。
3．PNG 格式
PNG（Portable Network Graphics）图像格式是一种非破坏性的网页图像文件格式，它提供了将图像文件以最小的方式压缩却又不造成图像失真的技术。它不仅具备了GIF 图像格式的大部分优点，而且还支持48-bit 的色彩，更快的交错显示，跨平台的图像亮度控制，更多层的透明度设置。
有了图像文件之后，就可以使用img标记将图像插入到网页中，从而达到美化页面的效果。
语法：<img src="图像文件的地址">
说明：在该语法中，src 参数用来设置图像文件所在的路径，这一路径可以是相对路径，也可以是绝对路径。
二、设置图像属性
在网页中直接插入图片时，图像的大小和原图是相同的，而在实际应用时可以通过各种图像属性的设置调整图像的大小、分辨率等内容。
1 图像高度——height
通过height 属性可以设置图片显示的高度，默认情况下，改变高度的同时，其宽度也会等比例进行调整。
语法：<img src="图像文件的地址" height=图像的高度>
说明：在该语法中，图像的高度单位是像素。
2 图像宽度——width
图像宽度的属性与图像高度类似，同样是用来调整图像大小的。
语法：<img src="图像文件的地址" width=图像的宽度>
说明：在该语法中，图像的宽度单位是像素。如果在使用属性的过程中，只设置了高度或宽度，则另外一个参数会等比例变化。如果同时设置两个属性，且缩放比例不同的情况下，图像很可能会变形。
3 图像边框——border【可以参考：网页中添加图像边框代码】
在默认情况下，页面中插入的图像是没有边框的，可以通过border 属性为图像添加边框。
语法：<img src="图像文件的地址" border="图像边框的宽度">
说明：在该语法中，src 是图像文件的地址，是不可缺少的。border 的单位是像素。
4 图像水平间距——hspace
如果不使用<br>标记或者<p>标记进行换行显示，那么添加的图像会紧跟在文字之后。而图像与文字之间的水平距离是可以通过hspace 参数进行调整的。通过调整间距，可以使文字和图像的排版不那么拥挤，看上去更加协调。
语法：<img src="图像文件的地址" hspace="水平间距">
说明：在该语法中，src 是图像文件的地址，是不可缺少的。水平间距hspace 属性的单位是像素。
5 图像垂直间距——vspace
垂直间距参数vspace 用来调整图像与文字的垂直距离。
语法：<img src="图像文件的地址" vspace="垂直间距">
说明：在该语法中，vspace 属性的单位是像素。
6 图像相对于文字基准线的对齐方式——align
图像和文字之间的排列方式可以通过align 参数来调整。图像的绝对对齐方式与相对文字的对齐方式不同，绝对对齐方式包括左对齐、右对齐和居中对齐3 种，而相对文字对齐方式则是指图像与一行文字的相对位置。
语法：<img src="图像文件的地址" align="相对文字的对齐方式">
说明：在该语法中，align 的取值见下表。
表 图像相对文字的对齐方式
align取值 所表示的含义
top 把图像的顶部和同行的最高部分对齐（可能是文本的顶部，也可能是图像的顶部）
middle 把图像的中部和行的中部对齐（通常是文本行的基线，并不是实际的行的中部）
bottom 把图像的底部和同行文本的底部对齐
texttop 把图像的顶部和同行中最高的文本的顶部对齐，常用于Netscape中
absmiddle 把图像的中部和同行中最大项的中部对齐，常用于Netscape中
baseline 把图像的底部和文本的基线对齐，常用于Netscape中
absbottom 把图像的底部和同行中的最低项对齐，常用于Netscape中
left 使图像和左边界对齐（文本环绕图像）
right 使图像和右边界对齐（文本环绕图像）
在上表中，Netscape 支持texttop、baseline、absmiddle 和absbottom 的取值。
7 图像的提示文字——alt
如果网络上观看Web 站点的人使用了一个非图像化的浏览器，或者为了加快浏览器速度关掉了图像显示，这时候提示文字就可以起作用了。当图像没有装载到浏览器上时，就会显示添加的提示文字，而下载图像之后，当鼠标停留在图像上方时也会显示出提示文字，这一功能通过alt 属性来实现。
语法：<img src="图像文字的地址" alt="提示文字的内容">
说明：在该语法中，提示文字的内容可以是中文，也可以是英文。
三、图像的超链接
除了文字可以添加超链接之外，图像也可以设置超链接属性。而一幅图像可以切分成不同的区域设置链接，而这些区域被称为热区。因此一幅图像也就可以设置多个链接地址。
1 设置图像的超链接【可以参考：几个常见超级链接的设置的代码写法】
对于给整个一幅图像文件设置超链接来说，方法比较简单，与文本链接类似。
语法：<A href="链接地址" target="目标窗口的打开方式"><img src="图像文件的地址"></A>
说明：在该语法中，href 参数用来设置图像的链接地址，而在图像属性中可以添加图像的其他参数，如height、border、hspace 等。
2 设置图像热区链接【可以参考：借助Dreamweaver软件来制作热点图像链接http://www.liangtzi.net/post/rediantuxianglianjie.html】
除了对整个图像进行超链接的设置外，还可以将图像划分成不同的区域进行链接设置。而包含热区的图像也可以称为映射图像。
语法：首先需要在图像文件中设置映射图像名，在图像的属性中使用<usemap>标记添加图像要引用的映射图像的名称如下：
<img src="图像地址" usemap="映射图像名称">
然后需要定义热区图像以及热区的链接属性如下：
<map name="映射图像名称">
<area shape="热区形状" coords="热区坐标" href="链接地址">
</map>
说明：在该语法中要先定义映射图像的名称，然后再引用这个映射图像。在<area>标记中定义了热区的位置和链接，其中shape 用来定义热区形状，可以取值为rect（矩形区域）、circle（圆形区域）以及poly（多边形区域）；coords 参数则用来设置区域坐标，对于不同形状来说，coords 设置的方式也不同。
对于矩形区域 rect 来说，coords 包含4 个参数，分别为left、top、right 和bottom，也可以将这4个参数看作矩形两个对角的点坐标；对于圆形区域circle 来说，coords 包含3 个参数，分别为center-x、center-y 和tadius，也可以看作是圆形的圆心坐标（x，y）与半径的值；对于多边形区域poly 设置坐标参数比较复杂，跟多边形的形状息息相关。coords 参数需要按照顺序（可以是逆时针，也可以是顺时针）取各个点的x、y 坐标值。
由于定义坐标比较复杂而且难以控制，一般情况下都使用可视化软件进行这种参数的设置。