网页设计图片背景和颜色

《网页设计图片背景和颜色》由会员分享，可在线阅读，更多相关《网页设计图片背景和颜色（42页珍藏版）》请在金锄头文库上搜索。

1、Company name 网页设计与开发第5章 图片、背景和颜色清华大学出版社主要内容5.1 图片的使用5.2 背景5.3 HTML颜色5.4 小结5.1图片 5.1.1 插入图片标记IMGl网页中常用的图片格式为GIF、JPEG和PNG。l高质量的图片一般用TIFF格式保存，但其图片体积过大， 不太适合网络传输。l不同的图片格式会表现出不同的颜色分辨率和颜色标准， 当然也会影响其体积的大小。l一般在网页设计中选择的图片不要超过8KB，如必须选用 较大图片时，可先将其分成若干小图片，显示时再通过表 格将这些小图片拼合起来。l如果在同一文件中多次使用相同的图片时，最好使用相对 路径查找该图片。l

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

3、.1.1 插入图片标记IMGl示例代码插入图片示例5.1.1 插入图片标记IMGl程序5-1-1采用标记插入了两幅图片，其执行效 果如图所示。5.1.2 替换文本说明l标记的alt属性分别用来指定图像的替代 文字说明，替代文本说明应该简洁而清晰，能够为 用户提供足够的图片说明信息，使用户在无法看到 图片的情况下也可以了解图片的内容信息。 l基本语法：5.1.2 替换文本说明l 语法说明：- 图片的alt属性用于对图片信息进行描述。在浏览器中 当图片无法正常显示时，在图片位置显示该描述信息。 当图片可以正常显示时，当鼠标放在图片上面时才显示该描述信息；- alt属性可在Web浏览器不支持图像显示

4、或用户关闭图像 下载功能时，告诉用户该处是一幅什么样的图像。5.1.3 添加图片边框l标记的border属性可以用来指定图像的 边框，添加边框后的图片显得更醒目、更美观。 l基本语法：5.1.3 添加图片边框l 语法说明：- border的值用数字表示，默认单位为px；- 默认情况下图片没有边框，即border=0；- 图片边框的颜色不可调整，默认为黑色。当图片作为超 链接使用时，图片边框的颜色和文字超链接的颜色一致，默认为深蓝色；5.1.3 添加图片边框l示例代码5.1.3 添加图片边框l程序5-1-3的执行效果如图所示。5.1.3 添加图片边框l据图所示比较可以发现：第一幅图由于路径错误而

5、未能显示，其alt属性的值就 显示到图像所在的位置，而后三幅图像只有当鼠标放到 图像位置时才显示alt属性的值。前两幅图像的边框属性border没有设定，所以默认边框 宽度为0；后两幅图像的边框为5px。第三幅图像的边框颜色默认为黑色；而第四幅图像被设 为图像超链接，其颜色为蓝色。5.1.4 调整图片大小 l默认情况下，在HTML页面中显示的是图像的原 始大小。l如果要显示指定的图像大小，就需采用img标记 的width和height属性。其目的是通过指定图片 的高度和宽度加快图片的下载速度。如果不设置， 浏览器就要等图片下载完全才能显示网页，因此延 缓了其他页面元素的显示。l基本语法：5.1

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

7、果如图所示。l已知原图大小为600px*404px。第一个图像设置宽为100px， 所以，其为原图的四分之一大小。第二个图设置为50%，可明显 看出其宽度为显示窗口宽度大小的二分之一。 5.1.5 图片的悬浮l标记的align属性用来指定图像与周围元素的对 齐方式。其取值如下所示。 align的取值取值说明left在水平方向上向上左对齐center在水平方向上向上居中对齐right在水平方向上向上右对齐top图片顶部与同行其他元素顶部对齐middle图片中部与同行其他元素中部对齐bottom图片底部与同行其他元素底部对齐absbottom图片的底部与同行最低元素的底部对齐，常用于Netscap

8、e浏览器absmiddle图片的中部与同行最大元素的中部对齐，常用于Netscape浏览器baseline图片的底部与文本基准线对齐，常用于Netscape浏览器texttop图片的顶部与同行最高元素的顶部对齐，常用于Netscape浏览器5.1.5 图片的悬浮l基本语法：l语法说明：- 与其他元素不同的是图像的align属性既包括 水平对齐方式，又包括垂直对齐方式；- align的默认值为bottom。5.1.5 图片的悬浮l示例代码水平对齐方式 水平对齐示例 默认春天来了，我还含苞欲放。春天来了，我要绽放，开出漂亮的朵朵鲜花。左对齐春天来了，我还含苞欲放。春天来了，我要绽放，开出漂亮的朵朵

9、鲜花。5.1.5 图片的悬浮l示例代码居中对齐春天来了，我还含苞欲放。 春天来了，我要绽放，开出漂亮的朵朵鲜花。右对齐春天来了，我还含苞欲放。春天来了，我要绽放，开出漂亮的朵朵鲜花。5.1.5 图片的悬浮l程序5-1-5在一个表格内设置了图像align属性的水平对 齐方式，并与未设置时的默认状态进行了比较。5.1.6 图片周围添加空白区域 l标记的hspace和vspace属性分别用来指定图像的水平间距和垂直间距，为图片周围添加空白区域。 hspace属性能够在图像的左右两侧添加空白区域，vspace属性能够在图像的上下两侧添加空白区域。l其值为数字，单位为px，默认值为0。5.1.6 图片周

10、围添加空白区域l基本语法：l语法说明：- hspace 指的是所设置图片与相邻元素的水平 间距；- vspace指的是所设置图片与相邻元素的垂直间 距。5.1.6 图片周围添加空白区域l示例代码图像间距设置图像间距说明 图像间距示例未指定图像间距5.1.6 图片周围添加空白区域l示例代码指定图像水平间距指定图像垂直间距指定了水平与垂直间距5.1.6 图片周围添加空白区域l程序5-1-6的执行效果如图所示。程序5-1-6通过一个表格把未指定图像间距、只指定图像水平间距 、只指定图像垂直间距、既指定水平间距又指定垂直间距四种情况 清晰地进行比较显示。 5.2 背景 l在网页中可以利用图片作为背景，

11、使页面更加生动活泼。背景图片只是起到渲染网页的作用，不要让背景图片影响网页内容的显示。l背景可以选择背景图片或者背景颜色属性来进行设置。5.2.1 设置背景图片l基本语法：l语法说明：- background的属性值为图片的URL- 如果图片尺寸小于浏览器窗口，图像将在整个 浏览器窗口多次拷贝，逐个水平或垂直双向平 铺在整个屏幕。5.2.2 设置背景颜色l基本语法：l语法说明：- bgcolor的属性值为颜色的英文名、十六进制 数或RGB值。5.3 HTML颜色 RGB色彩模式RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得

12、到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。5.3 HTML颜色 RGB色彩模式RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。5.3 HTML颜色 RGB色彩模式RGB色彩模式使用RGB模型为图像中每一个像素的RGB分量分配一个0255范围内的强度值。RGB图像只使用三种颜色，就可以使它们按照不同的

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

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

15、色。在十六进制的RGB值中，只有有同样的数字重复出现，就可以省略其中一个不写。RGB(0, 255 ， 0）是RGB函数值，表示绿色。常用在一些动态颜色效果的网页中，这里的RGB函数取值范围为0255。5.3 HTML颜色 下面以绿色为例来说明具体的颜色表示：RGB(0%，100%,0%）也是RGB函数值，表示绿色。但这里的RGB函数取值范围为0%100%。RGB函数取值如果超出了指定的范围，浏览器就会自动读取最接近的数值来使用。例如，如果设置了“101%”，则浏览器会自动读取“100%”。如果设置了“-2”，则浏览器会自动读取“0”。5.4 小结 本章主要介绍了如何在网页中添加图片、背景及如何设置颜色。图片作为网页中必需的元素，其灵活的应用会给网页增添不少特效，图片的直观、明了、绚丽和美观都是文字无法替代的。同时图片的选用也是很重要的，选用时除了考虑图片的格式外，还要注意图片的颜色搭配及大小。Company name 网页设计与开发