网页设计图片、背景和颜色.ppt
第5章 图片、背景和颜色,清华大学出版社,主要内容,5.1 图片的使用,5.2 背景,5.3 HTML颜色,5.4 小结,5.1图片 5.1.1 插入图片标记IMG,网页中常用的图片格式为GIF、JPEG和PNG。高质量的图片一般用TIFF格式保存，但其图片体积过大，不太适合网络传输。不同的图片格式会表现出不同的颜色分辨率和颜色标准，当然也会影响其体积的大小。一般在网页设计中选择的图片不要超过8KB，如必须选用较大图片时，可先将其分成若干小图片，显示时再通过表格将这些小图片拼合起来。如果在同一文件中多次使用相同的图片时，最好使用相对路径查找该图片。在HTML文档中，显示图片所用的标记是。,5.1.1 插入图片标记IMG,基本语法：,插入图片标记IMG,语法说明：-img是插入图片的标记，其常用属性如表9-1。其中src是其必须的属性；-src属性用来指定图像源，即图像的URL路径。该路径可以是相对路径，也可以是绝对路径。,5.1.1 插入图片标记IMG,示例代码,插入图片示例,5.1.1 插入图片标记IMG,程序5-1-1采用标记插入了两幅图片，其执行效果如图所示。,5.1.2 替换文本说明,标记的alt属性分别用来指定图像的替代文字说明，替代文本说明应该简洁而清晰，能够为用户提供足够的图片说明信息，使用户在无法看到图片的情况下也可以了解图片的内容信息。基本语法：,5.1.2 替换文本说明,语法说明：-图片的alt属性用于对图片信息进行描述。在浏览器中 当图片无法正常显示时，在图片位置显示该描述信息。当图片可以正常显示时，当鼠标放在图片上面时才显示 该描述信息；-alt属性可在Web浏览器不支持图像显示或用户关闭图像 下载功能时，告诉用户该处是一幅什么样的图像。,5.1.3 添加图片边框,标记的border属性可以用来指定图像的边框，添加边框后的图片显得更醒目、更美观。基本语法：,5.1.3 添加图片边框,语法说明：-border的值用数字表示，默认单位为px；-默认情况下图片没有边框，即border=0；-图片边框的颜色不可调整，默认为黑色。当图片作为超 链接使用时，图片边框的颜色和文字超链接的颜色一 致，默认为深蓝色；,5.1.3 添加图片边框,示例代码,5.1.3 添加图片边框,程序5-1-3的执行效果如图所示。,5.1.3 添加图片边框,据图所示比较可以发现：第一幅图由于路径错误而未能显示，其alt属性的值就显示到图像所在的位置，而后三幅图像只有当鼠标放到图像位置时才显示alt属性的值。前两幅图像的边框属性border没有设定，所以默认边框宽度为0；后两幅图像的边框为5px。第三幅图像的边框颜色默认为黑色；而第四幅图像被设为图像超链接，其颜色为蓝色。,5.1.4 调整图片大小,默认情况下，在HTML页面中显示的是图像的原始大小。如果要显示指定的图像大小，就需采用img标记的width和height属性。其目的是通过指定图片的高度和宽度加快图片的下载速度。如果不设置，浏览器就要等图片下载完全才能显示网页，因此延缓了其他页面元素的显示。基本语法：,5.1.4 调整图片大小,语法说明：-width和height的单位可以是像素，也可以是百分比。百分比表示显示图像大小为浏览器窗口大小的百分比；-在width和height属性中，如果只设置了其中的一个属性，则另一个属性会根据已设置的属性按原图等比例显示。如果对两个属性都进行了设置，且其比例和原图大小的比例不一致的话，那么显示的图像会相对于原图变形或失真。,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 图片的悬浮,基本语法：语法说明：-与其他元素不同的是图像的align属性既包括水平对齐方式，又包括垂直对齐方式；-align的默认值为bottom。,5.1.5 图片的悬浮,示例代码,水平对齐方式 水平对齐示例 默认 春天来了，我还含苞欲放。春天来了，我要绽放，开出漂亮的朵朵鲜花。左对齐 春天来了，我还含苞欲放。春天来了，我要绽放，开出漂亮的朵朵鲜花。,5.1.5 图片的悬浮,示例代码,居中对齐 春天来了，我还含苞欲放。春天来了，我要绽放，开出漂亮的朵朵鲜花。右对齐 春天来了，我还含苞欲放。春天来了，我要绽放，开出漂亮的朵朵鲜花。,5.1.5 图片的悬浮,程序5-1-5在一个表格内设置了图像align属性的水平对齐方式，并与未设置时的默认状态进行了比较。,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 背景,在网页中可以利用图片作为背景，使页面更加生动活泼。背景图片只是起到渲染网页的作用，不要让背景图片影响网页内容的显示。背景可以选择背景图片或者背景颜色属性来进行设置。,设置背景图片,基本语法：语法说明：-background的属性值为图片的URL-如果图片尺寸小于浏览器窗口，图像将在整个浏览器窗口多次拷贝，逐个水平或垂直双向平铺在整个屏幕。,设置背景颜色,基本语法：语法说明：-bgcolor的属性值为颜色的英文名、十六进制数或RGB值。,5.3 HTML颜色,RGB色彩模式 RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。,5.3 HTML颜色,RGB色彩模式 RGB色彩模式是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是目前运用最广的颜色系统之一。,5.3 HTML颜色,RGB色彩模式 RGB色彩模式使用RGB模型为图像中每一个像素的RGB分量分配一个0255范围内的强度值。RGB图像只使用三种颜色，就可以使它们按照不同的比例混合，在屏幕上重现16777216种颜色。,5.3 HTML颜色,RGB色彩原理 RGB是从颜色发光的原理来设计定的，通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于两者亮度之总和，越混合亮度越高，即加法混合。红、绿、蓝三盏灯的叠加情况，中心三色最亮的叠加区为白色，加法混合的特点：越叠加越明亮。,5.3 HTML颜色,RGB色彩原理 红、绿、蓝三个颜色通道每种色各分为255阶亮度，在0时“灯”最弱是关掉的，而在255时“灯”最亮。当三色数值相同时为无色彩的灰度色，而三色都为255时为最亮的白色，都为0时为黑色。RGB 颜色称为加成色，因为您通过将 R、G 和 B 添加在一起（即所有光线反射回眼睛）可产生白色。绝大多数可视光谱都可表示为红、绿、蓝(RGB)三色光在不同比例和强度上的混合。这些颜色若发生重叠，则产生青、洋红和黄。,5.3 HTML颜色,RGB常用颜色表,5.3 HTML颜色,RGB常用颜色表,5.3 HTML颜色,下面以绿色为例来说明具体的颜色表示：,#00FF00是十六进制的RGB值，表示绿色。这是最常用的一种RGB值表示方式。#0F0是十六进制RGB值的缩写，表示绿色。在十六进制的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 小结,本章主要介绍了如何在网页中添加图片、背景及如何设置颜色。图片作为网页中必需的元素，其灵活的应用会给网页增添不少特效，图片的直观、明了、绚丽和美观都是文字无法替代的。同时图片的选用也是很重要的，选用时除了考虑图片的格式外，还要注意图片的颜色搭配及大小。,Thank You!,
