第6章++图像元素.ppt

1、第6章 图像元素,在浏览网页的时候，可以在网页上看到大量精美的图片，那么这些图片是如何放入页面的？在放入页面中时，应该如何处理？常见的图片有哪些类型，各有什么特点，将在本章中一一解答。希望通过本章的学习，能够掌握图像元素各种属性的使用方法和表现效果。,6.1 图像元素 ,图像元素用来在页面中定义一个图片。由于元素中引用的图片路径不同，可以使用各种格式的图片文件。,6.1.1 图像元素的路径属性 src,图像元素的路径属性src，用来定义一个调用图片的路径。src属性是元素中必须含有的属性，其中使用的图片格式没有限制，但是某些格式的图片可能无法正常显示。,6.1.2 代替图片的文本属性 alt,

2、代替图片的文本属性alt用来定义当图片路径错误（或者其他原因无法显示时），替代图片的文本。由于当鼠标悬停在图片内容上时，会显示alt属性中定义的文本，所以alt属性也可以用来定义图片的注释内容。,6.1.3 图像元素的宽度属性 width,在网页中直接插入图片的时候，图像的大小和原图是相同的，而在实际应用的时候需要通过各种图像属性的设置调整图像的大小、分辨率等内容。,6.1.4 图像元素的高度属性 height,图像高度的属性与图像宽度属性类似，同样是用来调整图像的大小的。我们用height来定义图片元素的高度。,6.1.5 图像元素的边框属性 border,在制作图像的时候，一般用图像元素的

3、边框属性border来定义图片的边框。普通的图片元素在显示时，是没有边框的，可以通过border属性为图像添加边框。,6.1.6 代替图片的长文本属性 longdesc,有时候要用文本来代替图片，用代替图片的长文本属性longdesc用来定义代替图片的文本。langdesc属性和alt属性的功能基本相同，也可以用来定义图片的注释。语法结构如下所示。 当代替文本长度超过1024字符时，可以使用longdesc属性，定义一个链接文件来显示替代文本。目前常用的浏览器还不支持该属性。因为浏览器还不支持该属性，所以就不做实例讲解了。,6.1.7 上下边距属性 vspace,我们用图像元素的上下边距属性v

4、space来使图片元素与相临的内容，在垂直方向上分开一段距离。,6.1.8 图像元素的左右边距属性 hspace,图像元素的左右边距属性hspace用来使图片元素与相临的内容，在水平方向上分开一段距离。,6.1.9 图像元素的对齐属性 align,图像和文字之间的排列方式可以通过图像元素的对齐属性align来调整。图像的绝对对齐方式与相对文字的对齐方式不同，绝对对齐方式包括左对齐、右对齐和居中对齐3种，而相对文字对齐方式则是指图像与一行文字的相对位置。,6.1.10 图像服务器端映射属性 ismap,用图像服务器端映射属性ismap来将图像的坐标传递给相应的服务器端处理程序。但是注意ismap

5、只可以用在 标签标识的超链接里面。,6.1.11 图像服务器端映射属性 usemap,图像服务器端映射属性usemap，usemap用来通过相应的和元素，在图片的相应区域定义一个超链接（关于和元素以及usemap属性的详细应用，请参照第8章）。,6.2 图像的格式,我们在网页中能看到大量的精美图片，随着现在数码技术的发展，我们也经常用数码相机拍照，我们把数码相片移动到电脑中时，用右击属性，就会看到图片.格式的说明，我们常见的图片格式有JPEG格式、GIF格式和PNG格式。我在制作网页的时候用到图片格式主要就是这几类，下面我们一起了解它们的各自特点。,6.2.1 JPEG格式,JPEG格式的图片

6、是最常见也是使用最多的图片，我们数码相机照出来的图片一般就是这种格式。这种格式的图片的好处在于各种浏览器都能很好的支持，同时可以方便的压缩图片的大小，还可以很好的显示颜色复杂，质量精细度要求很高的图片内容。但是在处理大面积的颜色块时，这种图片可能会出现明显的压缩痕迹。,6.2.2 GIF格式,GIF格式即图形交换格式（Graphics Interchange Format的简写）。这种格式的图片在任何浏览器中均能正常显示，所以在网页设计中使用的最多。不过GIF格式的图片只能够使用256种色彩，所以不适合显示色彩比较丰富的图像内容（比如照片等）。GIF格式的图片具有三个比较突出的特性。1可以设置背景透明2可以制作简单的动画3采用隔行扫描的显示方式,6.2.3 PNG格式,PNG格式的图