《网页设计图片、背景和颜色》由会员分享，可在线阅读，更多相关《网页设计图片、背景和颜色（42页珍藏版）》请在金锄头文库上搜索。
1、第5章 图片、背景和颜色,清华大学出版社,主要内容,5.1 图片的使用,5.2 背景,5.3 HTML颜色,5.4 小结,5.1图片 5.1.1 插入图片标记IMG,网页中常用的图片格式为GIF、JPEG和PNG。高质量的图片一般用TIFF格式保存，但其图片体积过大，不太适合网络传输。不同的图片格式会表现出不同的颜色分辨率和颜色标准，当然也会影响其体积的大小。一般在网页设计中选择的图片不要超过8KB，如必须选用较大图片时，可先将其分成若干小图片，显示时再通过表格将这些小图片拼合起来。如果在同一文件中多次使用相同的图片时，最好使用相对路径查找该图片。在HTML文档中，显示图片所用的标记是。,5.
2、1.1 插入图片标记IMG,基本语法：,5.1.1 插入图片标记IMG,语法说明： - img是插入图片的标记，其常用属性如表9-1。其中src是其必须的属性； - src属性用来指定图像源，即图像的URL路径。该路径可以是相对路径， 也可以是绝对路径。,5.1.1 插入图片标记IMG,示例代码,插入图片示例 ,5.1.1 插入图片标记IMG,程序5-1-1采用标记插入了两幅图片，其执行效果如图所示。,5.1.2 替换文本说明,标记的alt属性分别用来指定图像的替代文字说明，替代文本说明应该简洁而清晰，能够为用户提供足够的图片说明信息，使用户在无法看到图片的情况下也可以了解图片的内容信息。 基
3、本语法：,5.1.2 替换文本说明,语法说明： - 图片的alt属性用于对图片信息进行描述。在浏览器中 当图片无法正常显示时，在图片位置显示该描述信息。 当图片可以正常显示时，当鼠标放在图片上面时才显示 该描述信息； - alt属性可在Web浏览器不支持图像显示或用户关闭图像 下载功能时，告诉用户该处是一幅什么样的图像。,5.1.3 添加图片边框,标记的border属性可以用来指定图像的边框，添加边框后的图片显得更醒目、更美观。 基本语法：,5.1.3 添加图片边框,语法说明： - border的值用数字表示，默认单位为px； - 默认情况下图片没有边框，即border=0； - 图片边框的颜
4、色不可调整，默认为黑色。当图片作为超 链接使用时，图片边框的颜色和文字超链接的颜色一 致，默认为深蓝色；,5.1.3 添加图片边框,示例代码, ,5.1.3 添加图片边框,程序5-1-3的执行效果如图所示。,5.1.3 添加图片边框,据图所示比较可以发现：第一幅图由于路径错误而未能显示，其alt属性的值就显示到图像所在的位置，而后三幅图像只有当鼠标放到图像位置时才显示alt属性的值。前两幅图像的边框属性border没有设定，所以默认边框宽度为0；后两幅图像的边框为5px。第三幅图像的边框颜色默认为黑色；而第四幅图像被设为图像超链接，其颜色为蓝色。,5.1.4 调整图片大小,默认情况下，在HTM
5、L页面中显示的是图像的原始大小。如果要显示指定的图像大小，就需采用img标记的width和height属性。其目的是通过指定图片的高度和宽度加快图片的下载速度。如果不设置，浏览器就要等图片下载完全才能显示网页，因此延缓了其他页面元素的显示。基本语法：,5.1.4 调整图片大小,语法说明： - width和height的单位可以是像素，也可以是百分比。百分比表示显示图像大小为浏览器窗口大小的百分比； - 在width和height属性中，如果只设置了其中的一个属性，则另一个属性会根据已设置的属性按原图等比例显示。如果对两个属性都进行了设置，且其比例和原图大小的比例不一致的话，那么显示的图像会相对
6、于原图变形或失真。,5.1.4 调整图片大小,示例代码：程序5-1-4分别采用绝对大小和相对大小的方式设置了同一幅图片的width属性，其height属性的设置方法和此例类似。,图片高和宽的设置 ,5.1.4 调整图片大小,程序5-1-4的执行效果如图所示。已知原图大小为600px*404px。第一个图像设置宽为100px，所以，其为原图的四分之一大小。第二个图设置为50%，可明显看出其宽度为显示窗口宽度大小的二分之一。,5.1.5 图片的悬浮,标记的align属性用来指定图像与周围元素的对齐方式。其取值如下所示。,5.1.5 图片的悬浮,基本语法： 语法说明： - 与其他元素不同的是图像的a
7、lign属性既包括水平对齐方式，又包括垂直对齐方式； - align的默认值为bottom。,5.1.5 图片的悬浮,示例代码, 水平对齐方式 水平对齐示例 默认 春天来了，我还含苞欲放。 春天来了，我要绽放，开出漂亮的朵朵鲜花。 左对齐 春天来了，我还含苞欲放。 春天来了，我要绽放，开出漂亮的朵朵鲜花。 ,5.1.5 图片的悬浮,示例代码, 居中对齐 春天来了，我还含苞欲放。 春天来了，我要绽放，开出漂亮的朵朵鲜花。 右对齐 春天来了，我还含苞欲放。 春天来了，我要绽放，开出漂亮的朵朵鲜花。 ,5.1.5 图片的悬浮,程序5-1-5在一个表格内设置了图像align属性的水平对齐方式，并与未设
8、置时的默认状态进行了比较。,5.1.6 图片周围添加空白区域,标记的hspace和vspace属性分别用来指定图像的水平间距和垂直间距，为图片周围添加空白区域。 hspace属性能够在图像的左右两侧添加空白区域，vspace属性能够在图像的上下两侧添加空白区域。其值为数字，单位为px，默认值为0。,5.1.6 图片周围添加空白区域,基本语法： 语法说明： - hspace 指的是所设置图片与相邻元素的水平间距； - vspace指的是所设置图片与相邻元素的垂直间距。, ,5.1.6 图片周围添加空白区域,示例代码, 图像间距设置 图像间距说明图像间距示例 未指定图像间距 ,5.1.6 图片周围添加空白区域,示例代码, 指定图像水平间距 指定图像垂直间距 指定了水平与垂直间距 ,5.1.6 图片周围添加空白区域,程序5-1-6的执行效果如图所示。程序5-1-6通过一个表格把未指定图像间距、只指定图像水平间距、只指定图像垂直间距、既指定水平间距又指定垂直间距四种情况清晰地进行比较显示。,5.2 背景,在网页中可以利用图片作为背景，使页面更加生动活泼。背景图片只是起到渲染网页的作用，不要让背景图片影响网页内容的显示。背景可以选择背景图片或者背景颜色属性来进行设置。,
