DW网页设计—第5章 让网页变得更炫.ppt

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