chapter5 :图像元素及其属性

[zilongxuan001]

主要内容

• <img>元素及属性介绍
• 图像格式选择
• 图像大小设置
• web图片编辑（包括照片和logo）
• 缩略图设置

图像格式

图像格式主要有三种：jpg，png和gif。

jpg

• 适用于照片
• 图片变小会受损
• 内存较小
• 颜色比较多

png和gif

• 适用于logo和线条图片
• 图片变小不会受损
• 内存较大。

gif

• gif只有256种色彩
• gif可以设置透明色
• gif可以保存动态图片

png

• png可以设置部分透明色，露出下面的图片。
• png的色彩比gif多
• png有png-2，png-8，png-32等三种格式。
• png是一种兼有jpg和gif优点的格式。

来源：《Head First HTML与CSS》（中文第二版）P167

[zilongxuan001]

<img>元素

<img>是内联元素，例证就是设置多张图片时，横排图片之间有空隙，而竖排图片之间没有空隙。如果是<img>是块元素，则上下会有空隙。

<img>是void元素，因为他只有开始标签，没有闭合标签，标签之后也没有文本内容。

<img>有链接属性src，图片大小属性height和width，提示属性alt。

链接属性

可以放置URL或相对链接。一般网站内部网页用相对链接，其他网站使用URL。

图片大小属性

height和width只是告诉浏览器图片的空间有多大，具体设置大小一般用专门的图片编辑软件，比如photoshop。

height和width可以不带单位，默认单位为像素，比如height=400, width=600，就是高400像素，宽600像素。

提示属性

提示属性alt，是指在图片无法显示时，浏览器可直接显示文本内容。目的一是万一浏览器不显示图片，读者也可以知道文本内容，二是照顾视力障碍的读者。

[zilongxuan001]

图像大小的设置

因为一般的浏览器宽度都小于等于800像素，所以照片一般也要小于800像素，logo的宽度设置在100到200像素之间。

[zilongxuan001]

编辑web照片

图片需要经过photoshop处理后，才能发布到网上。

1. 通过photoshop打开图片
2. 点击文件——存储为Web所用格式
3. 选择“双联”，可以是显示修改前后的图片
4. 设置图片大小 ，一般宽度小于800像素，可以设置为600像素。
5. 点击‘应用’
6. 选择“图像格式”，为JPEG.
7. 设置质量为'中'
8. 点击存储，保存到文件夹，新命名。

注意右侧修改后图片的下方，标注着图片大小，图片格式，传输所需时间，以及图片质量

[zilongxuan001]

缩略图

什么是缩略图？ 缩略图有什么用？ 如何创建缩略图？

缩略图定义

缩略图就是web网页上的小图片，如果想看大图，可以点击缩略图，就会弹出新网页，显示大图片。

缩略图作用

缩略图的内存更小，可以提高浏览器打开的速度，看网页更加流畅。

创建缩略图的过程

1. 建立thumbnail文件夹。

2. 在photoshop中处理图片，一般图片大小为100-150像素，保存到thumbnail文件夹中。注意，缩略图和原图的文件名要一致，这样方便下面网页的修改。

3. 在首页网页中编辑链接，将相对链接的文件夹名称换成thumbnail文件夹即可。

4. 建立新网页。为每一张原图都建立一个网页。虽然可以直接将缩略图链接到原图，但建立新网页可以添加文字说明。

5.添加图像链接。将缩略图的<img>内嵌至<a></a>元素中，为<a>添加href属性和相对链接。

6.测试网页。打开网页，点击首页的各个缩略图，看能否链接到其他网页图片，以及是否链接正确。

[zilongxuan001]

编辑web的logo

logo要选择什么样的图像格式?

在photoshop中处理图片，需要注意什么？

如何创建一个透明的logo？

如何避免光晕？