网页设计图片、背景和颜色

1、网页设计图片、背景和颜色网页设计图片、背景和颜色网页设计图网页设计图片、背景和片、背景和颜颜色色主要内容5.1 图片的使用图片的使用5.2 背景背景5.3 HTML颜色颜色5.4 小结小结网页设计图网页设计图片、背景和片、背景和颜颜色色5.1图片 5.1.1 插入图片标记IMGl网页中常用的图片格式为网页中常用的图片格式为GIF、JPEG和和PNG。l高质量的图片一般用高质量的图片一般用TIFF格式保存，但其图片体积过大，格式保存，但其图片体积过大，不太适合网络传输。不太适合网络传输。l不同的图片格式会表现出不同的颜色分辨率和颜色标准，不同的图片格式会表现出不同的颜色分辨率和颜色标准，当然也会

2、影响其体积的大小。当然也会影响其体积的大小。l一般在网页设计中选择的图片不要超过一般在网页设计中选择的图片不要超过8KB，如必须选用，如必须选用较大图片时，可先将其分成若干小图片，显示时再通过表较大图片时，可先将其分成若干小图片，显示时再通过表格将这些小图片拼合起来。格将这些小图片拼合起来。l如果在同一文件中多次使用相同的图片时，最好使用相对如果在同一文件中多次使用相同的图片时，最好使用相对路径查找该图片。路径查找该图片。l在在HTML文档中，显示图片所用的标记是文档中，显示图片所用的标记是。网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.1 插入图片标记IMGl基本语法：基本语法：

3、网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.1 插入图片标记IMGl 语法说明：语法说明： - - img是插入图片的标记，其常用属性如表9-1。其中src是其必须的属性； - src属性用来指定图像源，即图像的URL路径。该路径可以是相对路径， 也可以是绝对路径。 的属性的属性功能说明功能说明src指定图像源，即图像的URL路径width指定图像的显示宽度height指定图片的显示高度hspace定义图像左侧和右侧的空白。vspace定义图像顶部和底部的空白。align指定图片的对齐方式border指定图片的边框大小alt如果图片无法显示，代替图像的说明文字网页设计图网页设计图片

4、、背景和片、背景和颜颜色色5.1.1 插入图片标记IMGl示例代码示例代码插入图片示例插入图片示例 网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.1 插入图片标记IMGl程序5-1-1采用标记插入了两幅图片，其执行效果如图所示。网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.2 替换文本说明l标记的标记的alt属性分别用来指定图像的替代属性分别用来指定图像的替代文字说明，替代文本说明应该简洁而清晰，能够文字说明，替代文本说明应该简洁而清晰，能够为用户提供足够的图片说明信息，使用户在无法为用户提供足够的图片说明信息，使用户在无法看到图片的情况下也可以了解图片的内容信息。看到图片

5、的情况下也可以了解图片的内容信息。 l基本语法：基本语法：网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.2 替换文本说明l 语法说明：语法说明： - 图片的alt属性用于对图片信息进行描述。在浏览器中 当图片无法正常显示时，在图片位置显示该描述信息。 当图片可以正常显示时，当鼠标放在图片上面时才显示 该描述信息； - alt属性可在Web浏览器不支持图像显示或用户关闭图像 下载功能时，告诉用户该处是一幅什么样的图像。网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.3 添加图片边框l标记的标记的border属性可以用来指定图像的属性可以用来指定图像的边框，添加边框后的图片显得更

6、醒目、更美观。边框，添加边框后的图片显得更醒目、更美观。 l基本语法：基本语法： 网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.3 添加图片边框l 语法说明：语法说明： - border的值用数字表示，默认单位为px； - 默认情况下图片没有边框，即border=0； - 图片边框的颜色不可调整，默认为黑色。当图片作为超 链接使用时，图片边框的颜色和文字超链接的颜色一 致，默认为深蓝色； 网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.3 添加图片边框l示例代码示例代码 网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.3 添加图片边框l程序程序5-1-3的执行效果如图

7、所示。的执行效果如图所示。网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.3 添加图片边框l据图所示比较可以发现：据图所示比较可以发现：第一幅图由于路径错误而未能显示，其alt属性的值就显示到图像所在的位置，而后三幅图像只有当鼠标放到图像位置时才显示alt属性的值。前两幅图像的边框属性border没有设定，所以默认边框宽度为0；后两幅图像的边框为5px。第三幅图像的边框颜色默认为黑色；而第四幅图像被设为图像超链接，其颜色为蓝色。网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.4 调整图片大小 l默认情况下，在默认情况下，在HTML页面中显示的是图像的原页面中显示的是图像的原始大

8、小。始大小。l如果要显示指定的图像大小，就需采用如果要显示指定的图像大小，就需采用img标记标记的的width和和height属性。其目的是通过指定图片属性。其目的是通过指定图片的高度和宽度加快图片的下载速度。如果不设置，的高度和宽度加快图片的下载速度。如果不设置，浏览器就要等图片下载完全才能显示网页，因此浏览器就要等图片下载完全才能显示网页，因此延缓了其他页面元素的显示。延缓了其他页面元素的显示。l基本语法：基本语法： 网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.4 调整图片大小l 语法说明：语法说明： - width和height的单位可以是像素，也可以是百分比。百分比表示显示

9、图像大小为浏览器窗口大小的百分比； - 在width和height属性中，如果只设置了其中的一个属性，则另一个属性会根据已设置的属性按原图等比例显示。如果对两个属性都进行了设置，且其比例和原图大小的比例不一致的话，那么显示的图像会相对于原图变形或失真。 网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.4 调整图片大小l示例代码：程序示例代码：程序5-1-4分别采用绝对大小和相对大小的方分别采用绝对大小和相对大小的方式设置了同一幅图片的式设置了同一幅图片的width属性，其属性，其height属性的设属性的设置方法和此例类似。置方法和此例类似。 图片高和宽的设置图片高和宽的设置 网页设计

10、图网页设计图片、背景和片、背景和颜颜色色5.1.4 调整图片大小l程序程序5-1-4的执行效果如图所示。的执行效果如图所示。l已知原图大小为已知原图大小为600px*404px。第一个图像设置宽为。第一个图像设置宽为100px，所以，其为原图的四分之一大小。第二个图设置为所以，其为原图的四分之一大小。第二个图设置为50%，可明显，可明显看出其宽度为显示窗口宽度大小的二分之一。看出其宽度为显示窗口宽度大小的二分之一。 网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.5 图片的悬浮l标记的标记的align属性用来指定图像与周围元素的对属性用来指定图像与周围元素的对齐方式。其取值如下所示。齐

11、方式。其取值如下所示。 align的取值的取值取值说明取值说明left在水平方向上向上左对齐center在水平方向上向上居中对齐right在水平方向上向上右对齐top图片顶部与同行其他元素顶部对齐middle图片中部与同行其他元素中部对齐bottom图片底部与同行其他元素底部对齐absbottom图片的底部与同行最低元素的底部对齐，常用于Netscape浏览器absmiddle图片的中部与同行最大元素的中部对齐，常用于Netscape浏览器baseline图片的底部与文本基准线对齐，常用于Netscape浏览器texttop图片的顶部与同行最高元素的顶部对齐，常用于Netscape浏览器网页设

12、计图网页设计图片、背景和片、背景和颜颜色色5.1.5 图片的悬浮l基本语法：基本语法： l语法说明：语法说明： - 与其他元素不同的是图像的align属性既包括水平对齐方式，又包括垂直对齐方式； - align的默认值为bottom。 网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.5 图片的悬浮l示例代码示例代码 水平对齐方式水平对齐方式 水平对齐示例水平对齐示例 默认默认 春天来了，我还含苞欲放。春天来了，我还含苞欲放。 春天来了，我要绽放，开出漂亮的朵朵鲜花。春天来了，我要绽放，开出漂亮的朵朵鲜花。 左对齐左对齐 春天来了，我还含苞欲放。春天来了，我还含苞欲放。 春天来了，我要绽

13、放，开出漂亮的朵朵鲜花。春天来了，我要绽放，开出漂亮的朵朵鲜花。 网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.5 图片的悬浮l示例代码示例代码 居中对齐居中对齐 春天来了，我还含苞欲放。春天来了，我还含苞欲放。 春天来了，我要绽放，开出漂亮的朵朵鲜花。春天来了，我要绽放，开出漂亮的朵朵鲜花。 右对齐右对齐 春天来了，我还含苞欲放。春天来了，我还含苞欲放。 春天来了，我要绽放，开出漂亮的朵朵鲜花。春天来了，我要绽放，开出漂亮的朵朵鲜花。 网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.5 图片的悬浮l程序程序5-1-5在一个表格内设置了图像在一个表格内设置了图像align属性

14、的水平对属性的水平对齐方式，并与未设置时的默认状态进行了比较。齐方式，并与未设置时的默认状态进行了比较。网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.6 图片周围添加空白区域 l标记的标记的hspace和和vspace属性分别用属性分别用来指定图像的水平间距和垂直间距，为图片周来指定图像的水平间距和垂直间距，为图片周围添加空白区域。围添加空白区域。 hspace属性能够在图像的属性能够在图像的左右两侧添加空白区域，左右两侧添加空白区域，vspace属性能够在图属性能够在图像的上下两侧添加空白区域。像的上下两侧添加空白区域。l其值为数字，单位为其值为数字，单位为px，默认值为，默认值为

15、0。网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.6 图片周围添加空白区域l基本语法：基本语法： l语法说明：语法说明： - hspace 指的是所设置图片与相邻元素的水平间距； - vspace指的是所设置图片与相邻元素的垂直间距。 网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.6 图片周围添加空白区域l示例代码示例代码 图像间距设置图像间距设置 图像间距说明图像间距说明图像间距示例图像间距示例 未指定图像间距未指定图像间距 网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.6 图片周围添加空白区域l示例代码示例代码 指定图像水平间距指定图像水平间距 指定图像垂直间

16、距指定图像垂直间距 指定了水平与垂直间距指定了水平与垂直间距 网页设计图网页设计图片、背景和片、背景和颜颜色色5.1.6 图片周围添加空白区域l程序程序5-1-6的执行效果如图所示。的执行效果如图所示。程序程序5-1-6通过一个表格把未指定图像间距、只指定图像水平间距、通过一个表格把未指定图像间距、只指定图像水平间距、只指定图像垂直间距、既指定水平间距又指定垂直间距四种情况清只指定图像垂直间距、既指定水平间距又指定垂直间距四种情况清晰地进行比较显示。晰地进行比较显示。 网页设计图网页设计图片、背景和片、背景和颜颜色色5.2 背景 l在网页中可以利用图片作为背景，使页面更加在网页中可以利用图片作

17、为背景，使页面更加生动活泼。背景图片只是起到渲染网页的作用，生动活泼。背景图片只是起到渲染网页的作用，不要让背景图片影响网页内容的显示。不要让背景图片影响网页内容的显示。l背景可以选择背景图片或者背景颜色属性来进背景可以选择背景图片或者背景颜色属性来进行设置。行设置。网页设计图网页设计图片、背景和片、背景和颜颜色色5.2.1 设置背景图片l基本语法：基本语法： l语法说明：语法说明： - background的属性值为图片的URL - 如果图片尺寸小于浏览器窗口，图像将在整个浏览器窗口多次拷贝，逐个水平或垂直双向平铺在整个屏幕。 网页设计图网页设计图片、背景和片、背景和颜颜色色5.2.2 设置

18、背景颜色l基本语法：基本语法： l语法说明：语法说明： - bgcolor的属性值为颜色的英文名、十六进制数或RGB值。 网页设计图网页设计图片、背景和片、背景和颜颜色色5.3 HTML颜色 RGB色彩模式色彩模式 RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。网页设计图网页设计图片、背景和片、背景和颜颜色色5.3 HTML颜色 RGB色彩模式色彩模式 RGB色彩模式是工业界的一种颜色标准

19、，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。网页设计图网页设计图片、背景和片、背景和颜颜色色5.3 HTML颜色 RGB色彩模式色彩模式 RGB色彩模式使用RGB模型为图像中每一个像素的RGB分量分配一个0255范围内的强度值。RGB图像只使用三种颜色，就可以使它们按照不同的比例混合，在屏幕上重现种颜色。 网页设计图网页设计图片、背景和片、背景和颜颜色色5.3 HTML颜色 RGB色彩原理色彩原理 RGB是从颜色发光的原理

20、来设计定的，通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于两者亮度之总和，越混合亮度越高，即加法混合。 有色光可被无色光冲淡并变亮。如蓝色光与白光相遇，结果是产生更加明亮的浅蓝色光。知道它的混合原理后，在软件中设定颜色就容易理解了。 红、绿、蓝三盏灯的叠加情况，中心三色最亮的叠加区为白色，加法混合的特点：越叠加越明亮。 网页设计图网页设计图片、背景和片、背景和颜颜色色5.3 HTML颜色 RGB色彩原理色彩原理 红、绿、蓝三个颜色通道每种色各分为255阶亮度，在0时“灯”最弱是关掉的，而在255时“灯”最亮。当三色数值相同时为无色彩的灰度色，

21、而三色都为255时为最亮的白色，都为0时为黑色。 RGB 颜色称为加成色，因为您通过将 R、G 和 B 添加在一起（即所有光线反射回眼睛）可产生白色。绝大多数可视光谱都可表示为红、绿、蓝 (RGB) 三色光在不同比例和强度上的混合。这些颜色若发生重叠，则产生青、洋红和黄。 网页设计图网页设计图片、背景和片、背景和颜颜色色5.3 HTML颜色 lRGB常用颜色表 网页设计图网页设计图片、背景和片、背景和颜颜色色5.3 HTML颜色 lRGB常用颜色表 网页设计图网页设计图片、背景和片、背景和颜颜色色5.3 HTML颜色 l下面以绿色为例来说明具体的颜色表示：下面以绿色为例来说明具体的颜色表示： #00FF00是十六进制的是十六进制的RGB值，表示绿色。这是值，表示绿色。这是最常用的一种最常用的一种RGB值表示方式。值表示方式。#0F0是十六进制是十六进制RGB值的缩写，表示绿色。在十值的缩写，表示绿色。在十六进制的六进制的RGB值中，只有有同样的数字重复出现，值中，只有有同样的