HTML+CSS第5章.pptVIP

第5章 让网页变得更炫丽一些 页面设计中，所有字体都该是黑色的吗？所有背景都该是白色的吗？所有图片都该是方方正正的吗？当然不是。虽然代码的语言规则是固定的，标签是永远不变的，但是在此基础上，设计者们却可以巧用心思，开发出炫丽的页面来。 本章的主要知识点有： 计算机的颜色原理。 使用颜色修饰页面。 图像的通道。 图像的简单应用。 5.1 计算机的颜色模式 在计算机世界里，每种颜色都有自己的一串数字，比如白色是#FFFFFF，黑色是#000000，红色是#FF0000，巧克力色是#D2691E等。这串数字就表示颜色的颜色值。 在理解颜色值前，首先要明白计算机的颜色模式。 人眼能看到的颜色有2种，一种是发光体发出的颜色，如电视机或计算机的荧屏，另一种则是反射光。电脑屏幕上的每个点都有红、黄、蓝三色的荧光粉，在电子枪的照射下，发出不同比率的三原色光，相加混合形成用户所看到的图像。 红、黄、蓝这3种基本颜色，被称为“三原色”。发光体的颜色模式便是RGB色彩模型。因此，网页的颜色模式也由RGB模式来确定。 R、G、B三个颜色通道每个都使用8位存储器，这样每个颜色可以有2的8次方，也就是256个层次。所以很多软件中单个颜色通道都是用0-255表示范围，也就是用256个数来表示。 3个颜色通道加在一起，这个色彩模型一共能表现1670万种颜色。 如果用16进制来表示，255相对于16进制下的FF，然后把三个颜色值依次并列表示出来，并以#开头。 如图5.1所示为颜色器。 5.2 让页面绚丽多彩 在第4章中，介绍了如何使用图像作为页面背景。但如果只需要改变页面背景颜色，那是不是需要放入整整一大张单色的背景图片呢？当然不是。 HTML标签提供了可以直接修改页面背景色的方法，设计者还可以使用标签修改文本字体的颜色，让页面更丰富。 5.2.1 改变页面背景颜色 如果要改变页面背景颜色，可以在body标签中添加“style”属性。代码如下： body style=”background-color:…” 在这句代码中，属性可以用颜色值表示，还可以使用标准的Windows颜色名词，包括Black、White、Red、Green、Blue、Yellow、Magenta、Cyan、Purple、Gray、Lime、Maroon、Navy、Olive、Silver和Teal。当然，对于了解调色的设计者来说，完全可以尝试使用自己定义的颜色。如#FF0000是红色，如果设计者希望得到一种紫红色，便要在红色里加上蓝色，所以数值就成了#FF00FF。 5.2.2 改变页面文本字体颜色 如果需要修改页面文本的颜色，可以在结构性标签中直接添加颜色属性。其写法如下： body style=color:… 或 p style=color:… 如图5.3所示，就是不同文本颜色的一个实例。 【本节示例参考：资料光盘\第5章\5-2 改变文本的颜色.html】 5.3 不寻常的图像应用 网页中常见的图像格式包括JPEG、GIF和PNG。 JPEG图像就像生活中的照片一样，没有什么特别之处。而 GIF 图像和 PNG 图像则有一些特殊的效果。GIF图像可以制作成简单的动画，PNG图像则带有透明通道，可以制作出透明图像。 5.3.1 会动的GIF图像 GIF图像可以用来制做逐帧动画。逐帧动画就是在时间帧上依次绘制图像，如早年的动画片制作一样。动画和图像相比，其最大优势就是能够表现一个具体动作，传递给浏览者不一样的讯息。GIF动画也是占用空间最小的一种动画，因此被广泛应用于页面中。图5.4所示就是一个GIF动画。 5.3.2 图像的透明通道 在学习图像的透明通道之前，先要理解图层的概念。 计算机中的图像并不像生活中的照片一样，拿在手中就是薄薄的一层纸。如果把两张照片叠在一起，当然只能看到上面那张。但如果上面那张照片是透明的，人们就能完全看到下层照片的内容。如果上面那张照片是半透明的，那么下层的照片就会若隐若现。 很多格式的图像都具有透明通道，如PNG、BMP、TGA等。 5.3.3 带有通明通道图像的应用 正因为PNG图像具有通明通道，图像放在页面中不会出现白色边缘，所以如果在已有背景颜色的页面上再添加背景图像时，就可以和背景色很好的融合。这样对于设计者来说，可以作为可背景素材的选择就大大增加了。 此外，由于通明通道可以控制图像的透明度，当图像设置一定数值的透明度时，可以使背景图像若隐若现，类似于阴影效果。图5.8是一张圣诞树图像，图5.9是PNG和JPEG格式的圣诞树分别添加绿色背景后的效果。 5.4 案例：修饰普通页面 在4.5节中，制作了一个普通的描述宠物的页面，在本节中，将继续修饰这个页面，使其更加漂亮。首先要改变页面背景，然后要将文本标题“Jenn