第五章:为你的页面增加图像——认识媒体
章节总结:
- 使用
<img>
元素在Web页面中放置图像。 - 浏览器对
<img>
元素的处理与其他HTML元素稍有不同。读取HTML页面之后,浏览器会从Web服务器获取各个图像并显示。 - 如果Web页面上有多个大图像,则可以通过创建图像的缩略图使你的Web页面更可用,下载也更快,缩略图是一些小图像(大图像的缩小版本),用户单击这些缩略图时可以看到原来的大图像。
<img>
元素是一个内联元素,这说明浏览器不会在图像前后插入一个换行。- 要利用
src
属性指定图像文件的位置。可以在src
属性中使用相对路径包含你自己的网站中的图像,或者可以使用URL包含其他网站的图像。 <img>
元素的alt
属性是对图像的一个有意义的描述。在一些浏览器中,如果无法找到图像,就会显示这个描述,另外屏幕阅读器会使用这个属性为有视力障碍的人描述图像。- 图像宽度要小于800像素,这是Web页面中关于照片大小的一个好经验。数码相机拍摄的大多数照片都太大,不能很好地放在Web页面中,所以需要调整它们的大小。
- 有很多照片编辑应用,Photoshop Elementsis就是其中之一,可以用来调整图像的大小。还可以使用很多免费的联机工具调整图像大小。可以在网上搜索“free online image editor”(免费联机图像编辑器)。
- 对于浏览器来说太大的图像会使Web页面很难使用,而且下载和显示都很慢。
- JPBG、PNG和GIF是Web浏览器广泛支持的3种图像格式。
- JPBG格式最适合保存照片和其他复杂图像。
- GIF或PNG格式最适合保存logo和其他包含单色、线条或文本的简单图形。
- JPEG图像可以按不同质量压缩,所以可以很好地权衡图像质量和文件大小,来满足你的需要。
- GIF和PNG图像格式允许建立一个有透明背景的图像。如果把一个有透明背景的图像放在一个Web页面中,图像后面的东西(如页面的背景色)就会透过图像的透明部分显示出来。
- GIF和PNG是无损格式,这说明相比于JPEG文件,这些格式的文件往往更大。
- PNG可以提供比GIF更好的透明度控制,而且不像GIF只支持256种颜色
- PNG可以支持更多颜色。
- PNG有3种不同的大小选择:PNG-24 (支持数百万种(2^24)颜色)、PNG-16(支持数千种颜色)、以及PNG-8(支持256种颜色),可以根据需要来选择。
- 在Photoshop Elements中,使用“Save forWeb”(保存为Web格式)对话框中的Matte(蒙版)颜色菜单来选择合适的颜色,柔化PNG或GIF图像的边缘。
- 图像可以用作指向其他Web页面的链接。要由图像创建一个链接,可以使用
<img>
元素作为<a>
元素的内容,将链接放在<a>
元素的href
属性中。
我的体会:
一、Web常用照片格式:
- JPEG —— 适用于照片和复杂图像:
· 可以表示包括包含多达1600万种不同颜色的图像。
· “有损”格式,在缩小文件大小是会丢失掉图片的一些信息。
· 不支持透明度。
· 文件通常较小,以便Web更高效地显示。
· 不支持动画。 - PNG —— 单色图像、logo和几何图形:
· 可以表示上百万种不同颜色的图像。
· PNG有三种:PNG-8、PNG-24 和 PNG-32,取决于你要表示多少种颜色。
· “无损”格式,PNG压缩文件大小不会丢失信息。
· 允许将颜色设置为“透明”。
· 与JPEG相比,PNG要大一些,不过取决于使用的颜色数。 - GIF —— 单色图像、logo和几何图形:
· 可以表示最多256中不同颜色的图像。
· “无损”格式。
· 支持透明度,但只允许一种颜色设置为“透明”。
· GIF往往比相应的JPEG文件大。
· 支持动画。
· 是Web最早的图像格式。
二、< img >元素:
<img>
是一个内联元素,是一个 void 元素。<img>
中的src
属性制定了在Web页面上显示的图像文件的位置,与<a>
元素中的href
类似。- 使用不同网站上的图像,使用这个图像的URL;
使用相同网站上的图像,最好使用相对路径。
(这一点和href
的用法相似,类比即可) - 没有默认图像之说,所以URL最后的文件名总是一个图像文件名。
(这一点则与href
不同) <img>
元素中的alt
属性能告诉图像里有什么信息。如果图像未能显示时,会使用alt
里面的文本代替它。
(这一点类似于<a>
元素中的title
)<img>
元素中还有一对属性:weight
与height
,它们可以提前告诉浏览器一个图像的大小。(方便浏览器对HTML进行结构排版)
其中,长度和宽度都用像素数指定。- 如果没有指定,则浏览器在知道了图像大小后,通常需要重新调整页面布局。
- 最好不要使用
weight
与height
来修改图像的大小。因为浏览器仍然会下载一个完整的大图像,再来完成调整图像大小的工作。 - CSS像素是一英寸的1/96(96ppi)。所以对于一个 3 × 3 的图像,需要96*3=288 × 288 像素。
- 1KB = 1024字节。
- 如果需要链接缩略图到大图的网址,可以在
<a>
元素里面嵌套<img>
元素。单击这个图像时,浏览器会获取href
里面的页面。(当然,如果需要新窗口打开可以添加target
属性等等)例如:
<a href="含有大图的网址,或是大图的URL/相对路径等" title="这是大图(网址)">
<img src="缩略图" alt="这是缩略图">
</a>
- 可以直接链接到图像,但因为通常需要对所显示的图像提供一些上下文,所以最好还是新建一个页面来存放这个图像及其介绍。
三、其他
- Photoshop里面的 蒙版(杂边)选项允许为文本周围的蒙版选择颜色,这可以使得你透明的图案更加贴合你的页面(尤其是当你使用CSS的时候)。
LIke this:(大小写无影响)
- 如果把一个透明的图像放在Web页面中,则要确保这个图像的蒙版颜色与Web的背景色一致。