《Head First HTML&CSS》第五章笔记

第五章  为你的页面加图像

一、图像格式

　　Web上最常用的的图像格式有三种：JPEG、PNG、GIF。他们的区别：

	JPEG	PNG	GIF
颜色	多达1600万种颜色	可以包含上百万种，有三种PNG-8、PNG-24、PNG-32,取决于需要多少颜色	最多256种颜色
质量	是一种有损的格式，会因为缩小文件大小而丢掉一些信息	不会丢掉信息，是一种无损的格式	无损的格式
文件大小	较小	比JEPG大，根据颜色数的选择，可能比GIF大也可能比GIF小	往往比JEPG大
其他	不支持动画，不允许透明色	允许透明色，适合单色图像和线条构成的图像如Logo、剪贴画以及图像中的小文本	支持动画，允许透明色但只能支持一种颜色为透明，类似PNG，GIF最适合单色图像和线条构成的图像，GIF是唯一支持动画并得到广泛支持的格式

 

 

 

 

 

 

 

 

 

 

二、引用图像

　　<img>的src不只是可以引用相对链接，还可以引用URL，因为图像和HTML一同存储在Web服务器上，所以Web上的每一个图像都有自己的URL，如果我们需要指向另一个不同网站上的图像，就可以使用这个图像的URL。但是，在相对链接和URL中，最好选择相对链接。

　　调整图像的大小，可以在<img>中使用属性width和height。如果没有指定宽度和高度，那么浏览器会自动确定图像的大小（这样显示的图像可能会太大哦）。

　　想要得到点击缩略图然后打开大图这种效果，可以在将<img>放进<a>元素中，创建一个图像链接。比如：<a href="html/datu.html><img src="photos/suoluetu.jpg" alt="点击这个缩略图可看到大图"></a>，但这个缺点是，点开的大图在一个新的页面出现。

三、如何处理一个Logo

　　用photoshop处理，打开需要处理的Logo图片，如果背景是一堆灰白棋盘格子，这是透明色的意思。根据自己的颜色需要来选择使用PNG-8/24/32，点击左上角的File下的Save for Web，保存为Web格式。右边有许多选项，可以改变格式、Transparency(是否要透明)、Matter（蒙版，也跟透明度有关）。 

　　蒙版：在将Logo底部设置为透明色之后，Logo的图案变圆可能会出现锯齿状的边缘，这种现象会影响Logo的美观，这时选用和Logo颜色相似的蒙版就可以柔滑图案的边缘，增加美观度。