第三章 为你的页面增加图像
浏览器如何处理图像?
浏览器对<img>元素的处理与其他元素稍有不同。以<h1>和<p>元素为例,浏览器在页面上看到这些标记时,只需要把他们显示出来就可以了,很简单。不过,浏览器看到一个<img>元素时,会做不同的处理:浏览器在页面中显示图像之前,必须先获取这个图像。
简单来说,当浏览器读取带有<img>元素的html文件时,发现其中需要获取图片,它会从Web服务器
逐个请求这些图像。
图像的格式
世界上的图片有很多种,幸运的是,Web上最常用的只是其中三种格式:jpeg、png和gif。唯一比较困难的就是要确定在什么情况下使用哪一种格式。那么,jpeg、png、gif有什么不同呢?
JPEG:最适合连续色调图像,如照片;可以表示包含多达1600万种不同颜色的图像;这是一种“有损”格式,因为缩小文件大小时会丢掉图像的一些信息;不支持透明度;文件比较小,以便Web页面更高效的显示;不支持动画。
PNG:png最适合单色图像和线条构成的图像(如logo);png可以表示包含上百万种不同颜色的图像,png有三种:PNG-8、PNG-24和PNG-32,取决于你需要表示多少种颜色;png会压缩文件来缩小文件大小,不过不会丢掉信息,所以这是一种“无损”格式;允许将颜色设置为“透明”,使图像下面的东西显示出来;与相应的JPEG文件相比,PNG文件更大一些,不过取决于使用的颜色数,可能比相应的GIF文件小,也可能更大。
GIF:类似于PNG,GIF最适合单色图像和线条构成的图像;gif可以表示最多256种不同颜色的图像;gif也是一种“无损”格式;gif也支持透明度,不过只允许一种颜色设置为“透明”;gif文件往往比相应的jpeg文件大;gif支持动画。
介绍img元素
来看一个简单的<img>元素:<img src="images/drinks.gif">
i
mg元素是一个内联元素,它不会在前面或后面插入换行。
img元素是一个void元素。
src属性指定了在Web页面上显示的图像文件的位置。
img元素不只是用于相对链接,还可以在src属性中放入URL。图像与html页面一同存储在Web服务器上,所以Web上的每个图像都有自己的URL,就像Web页面一样。
如果要指向另一个不同网站上的图像,通常要使用这个图像的URL(要记住,对于相同网站上的链接和图像,最好使用相对路径)。要使用URL链接一个图像,如下所示:
<img src=""http://www.starbuzzcoffee.com/images/corporate/ceo.jpg>
给图像提供候选格式
当有些浏览器可能无法显示你的页面上的图像,还有一种候选做法。可以用<img>元素的alt属性为访问者提供一些指示,告诉他们图像里有什么信息,可以这样做
<img src="http://wickedlysmart,com/hfhtmlcss/trivia/pencil.png"
alt="The typical new pencil can draw a line 35 miles long.">
调整图像大小
还需要知道<img>元素的另一个属性。实际上,应该是一对属性:width和height。可以使用这些属性提前告诉浏览器你的页面中一个图像的大小。可以这样使用width和height:
<img src="images/drink.gif" width="48" height="100">
宽度和高度都使用像素数指定。
使用缩略图
缩略图就是在图像较多或较大的情况下,在页面显示缩小版的图片,通过单击缩小版的图片跳转到原图页面。
首先先做以下工作:
1、为缩略图创建一个文件夹。
2、将页面中的图片通过其他软件将大小修改到合适的像素数。保存到刚刚的文件夹中。
3、将缩略图通过<img>元素放入页面中。
4、为原图创建单独的html页面。
5、将缩略图的<img>元素代码放入到包含原图链接的<a>元素中,使点击缩略图可以跳转到原图链接。
下面看一下示例代码:
<a href="html/seattle_down.html">
<img src="thumbnails/seattle_downtown.jpg"
alt="An iPod in downtown Seattle, WA">
</a>
一旦把<img>元素放在一个<a>元素中,浏览器就会把这个图像当做一个可单击的链接,单击这个图像时,浏览器会获取href中的页面。