网页设计必备知识

网页设计必备知识认识网页页面元素网页的页面元素主要包括浏览者所能看到的文字、图像、动画、影片，以及不可见的表格、图层等内容。网页页面元素种类以网页具体内容的类型来分，页面元素主要由文本、图像、表格、图层、音效、动画、影片、特效等。以网页元素的功能和作用分，页面元素则可分为网站logo、按钮、搜索元件、联系信息、版权信息、信息栏横幅、广告等。

网页图像元素的格式图像是构成页面最基本的元素之一，即提供了文本不可替代的信息传播作用，同时也是装饰页面外观不可缺少的。在网页设计中，一般使用的图像格式主要为JPEG、PNG和GIF，它们具有不同的特性。GIF格式

GIF(Graphics

Interchange

Format图形互换格式)。它是Internet上使用最早、应用最广泛的图像格式。GIF图片的扩展名是gif。现在所有的图形浏览器都支持GIF格式，而且有的图形浏览器只认识GIF格式。GIF是一种索引颜色格式，在颜色数很少的情况下，产生的文件极小。GIF格式支持背景透明。GIF图片如果背景色设置为透明，它将与浏览器背景相结合，生成非矩形的图片。GIF图像最多只能存储256种颜色，因此在显示上不具优势。JPEG格式是在Internet上被广泛支持的图像格式，一般也简称JPG。JPG支持16M色彩也就是通常所说的24位颜色或真彩色，其典型的压缩比为4:1。由于人类眼睛并不能看出存储在一个图像文件中的全部信息，可以去掉图像中的某些细节，并对图像中某些相同的色彩进行压缩。JPG是一种以损失质量为代价的压缩方式，压缩比越高，图像质量损失越大，适用于一些色彩比较丰富的照片以及24位图像。PNG格式

PNG（PortableNetworkGraphic）流式网络图形格式。PNG格式相对较新，也是W3C推荐的格式。此格式图像具有高压缩率和透明色彩背景两大优点，不但使图像所占空间较少，而且支持24bit图像色彩，可产生无锯齿边缘的背景透明效果，增强了该类图像的用途。随着PNG图像的普及，越来越多的图像编辑程序支持该格式。网页多媒体元素的分类网页中多媒体元素可分为音频和视频两种，下面分别介绍这两种多媒体元素在网页设计中的常用格式。常用的网页音频格式主要包括WAV、MIDI、MP3、WMA四种，其特性分别如下：WAV格式：格式后缀名为.wav，是微软公司早期开发的数字音频格式，也称为波形音频文件，被Windows平台及其他应用程序广泛支持。WAV的音质与CD相差无几，但WAV格式对存储空间需求太大不便于交流和传播。MIDI格式：格式后缀名为.midi，是数字音乐/电子合成乐器的统一国际标准。它定义了计算机音乐程序、数字合成器及其他电子设备交换音乐信号的方式，规定了不同厂家的电子乐器与计算机连接的电缆和硬件及设备间数据传输的协议，可以模拟多种乐器的声音。MP3格式：格式后缀名为.mp3，是目前最流行的一种数字音乐格式，以低采样率对数字音频文件进行压缩，将人耳根本无法察觉的音质去除，从而把文件容量压缩到更小同时保持较高的音质。WMA格式：格式后缀名为.wma，是微软公司开发的另一种互联网传播音频格式。WMA格式是以减少数据流量但保持音质的方法来达到更高压缩率的，其压缩率一般可达到1:18。此外，WMA音频文件可通过DRM方案加入防止复制，或者加入限制播放时间和播放次数，甚至是播放机器的限制，可有力地防止盗版。常用的网络视频格式包括ASF、RM、RMVB、MOV等，此外MPEG、AVI犹豫具备较高画质，常常作为资源下载传播，下面分别介绍这些视频格式的特性：ASF格式：格式后缀名为.asf，最为Microsoft公司WindowsMedia的核心技术之一，具有体积小的优点，同时也是一种综合了音频、视频、图像以及控制命令脚本等多媒体信息的视频格式，能以网络数据包的形式传输，无需等候下载完毕便可以即时同步播放影片，因此非常适合在网络中传输。RM格式：格式后缀为.rm，是RealNetworks公司开发的一种流媒体视频文件格式，主要包含RealAudio、RealVideo和RealFlash三部分。RM可以根据网络数据传输的不同速率制定不同的压缩比率，在56KModem拨号上网的条件下，依然能够在线实时传送和播放。RMVB格式：格式后缀是.rmvb，这是RealNetworks公司为了弥补RM不适合高画质视频存储的缺陷而推出的新格式。其中的VB全称VariableBitRate，意思是可改变比特率。RMVB打破了RM格式那种自始至终保持固定压缩比的方式，引入了动态压缩比率，将较高的比特率用于复杂的动态画面，而在静态画面时则灵活地转为较低的编码率，合理地利用了比特率资源。MOV格式：格式后缀是.mov。MOV格式的视频文件采用不压缩或压缩的方式，其压缩算法包括Cinepak、IntelIndeoVideoR3.2和Video编码。MPEG格式：格式后缀是.mpeg。其压缩标准是针对运动图像而设计的，其基本原理是在单位时间内采集并保存第一帧信息，然后只存储其余帧相对第一帧所发生变化的部分，从而达到最大压缩比。此外，MPEG压缩标准可实现帧之间的压缩，平均压缩比可达50:1，在较高的压缩率下用统一格式实现最佳兼容性。目前支持MPEG视频压缩标准的主要有MPEG-1、MPEG-2、MPEG-4三种。AVI格式：格式后缀是.avi。在AVI文件中，视频信息和伴音信息是分别存储的，因此可以把一段AVI文件中的视频与另一段AVI文件中的伴音合成在一起。网页动画元素在网页设计中只有两种多媒体动画素材，一种是作为图像衍生格式的GIF文件，另一种则是具备影音效果的Flash动画。GIF动画图像

GIF格式图像具有无损高压缩性和支持透明背景，而除了这些优点，GIF图像还有一个突出的特点就是具备动画效果。由GIF图像衍生的一种名为GIF89α的格式类型，其最大特点是可保存多幅图像，并借由多幅图像逐幅读取而产生动画效果。Flash动画

Flash动画具有体积小、兼容性强，同时支持互动和影音效果等诸多优点，因此自面世以来就成为一种流行的网络动画格式。

Flash动画最明显的特点就是矢量性的画面效果，以及集声音、视频和用户的参与于一体，极富表现能力。由Flash动画制作软件所完成的动画文件原始格式为.fla，用户可将其输出为.swf文件，也就是可直接添加到网页设计中的Flash动画成品，由于输出过程已经过大幅度压缩并包装成一个独立的可播放文件，因此网页浏览器已支持该格式文件的情况下供人浏览。网页配色网页设计的过程就是将不同的内容完整地集合在一个页面上，为了产生精美的页面效果，如何规划网页的版型及配色的处理在网页设计工作中就显得非常重要。由于网页设计的特殊性，网页配色又与其他设计配色工作有很大不同，例如会涉及网页安全色的概念。为了能更好地应用色彩来设计网页，我们先来了解一下色彩的一些基础知识。自然界中有多种多样的颜色，如玫瑰是红色的，大海是蓝色的，桔子是橙色的，但这所有的颜色其实都是有3种最基本的颜色（红色、黄色及蓝色）组合而成的，这3种颜色也就是大家常说的“三原色”。现实生活中的色彩可以分为彩色和非彩色，其中黑白灰属于非彩色系列，其他的色彩都属于彩色。任何一种彩色都具备“色相”、“明度”、和“纯度”三个特征，其中非彩色只有明度属性。色相：色彩的色相是色彩的最大特征，是指能够比较确切地表示某种颜色色别的名称。色彩的成分越多，色彩的色相越不鲜明。纯度：色彩的纯度是指色彩的纯净程度。它表示颜色中所含有色成分的比例，比例愈大，色彩愈纯，比例愈小，则色彩的纯度也愈小。明度：色彩的明度是指色彩的明亮纯度。各种有色物体由于它们反射光量的区别就产生颜色的明暗强弱。色彩的明度有两种情况：一是同一色相不同明度；二是各种颜色的不同明度。网页中的色彩通常都用十六进制来表示，如“#FF0000”表示红色，“#00FF00”表示绿色，“#0000FF”表示蓝色，“#FFFF00”表示黄色，“#FFFFF”表示白色，“#000000”表示黑色等。即每两位为一种色彩，从左到右分别为红、绿、蓝三原色，每组色彩取值从00到FF。在网页配色过程中，常使用这几种方法。用一种色彩：指先选定一种色相，然后调整透明度或者饱和度（就是将色彩变淡或者加深），产生新的色彩。这样用色的页面看起来色彩统一、有层次感。用两种色彩：先选定一种色彩，然后选择它的对比色。这样可以使整个页面色彩丰富但不花哨。用一个色系：简单的说就是用同一个感觉的色彩，例如淡蓝、淡黄、淡绿或者土黄、土灰、土蓝。要很好地表现一个网页，给浏览者视觉上的冲击，色彩是最好的表现方式。色彩是人类视觉最敏感的东西，不同色彩之间的对比会有不同的效果。网页页面的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则是“总体协调，局部对比”，也就是说，主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈的色彩对比。那么如何搭配颜色才能让自己的页面根据绚丽多彩呢？下面就对网页制作中色彩的运用技巧进行说明。确定主色：遵循主从关系，这是最普遍的色彩处理原则。在网页制作过程中，首先就应该确定整个网站的主色调，如果同一个页面中运用的太多的颜色就会使整个页面极不协调。最好从网站的服务对象出发，根据服务对象及网站的内容来确定主色。如果想创建一个儿童网站，那么就可以以红色或者黄色为基调。如果要创建一个关于茶叶的网站，则可以使用绿色为基调。利用相近色：在同一个网页里面使用相近的颜色进行搭配，不仅在制作过程中很容易搭配，也使浏览者在感观上有一定的层次感而跳动又不会很大，往往给人一种和谐的感觉。同色彩系、明度不同或纯度不同的几种颜色搭配非常容易，比如挑选几种深浅不同的绿色来搭配，一般页面不会有太大的问题，但同一页面最好不要多于4种颜色。黑白灰运用：其实在网页制作中，黑白灰是惯用的主色调，合理利用它们往往能产生意想不到的效果。如果在用色上不好把握，可以大面积地加白、灰，小面积的加黑来与其他颜色进行搭配。遇到纯度很高的颜色，比如纯蓝、纯黄时，这样的搭配就很鲜艳，使视觉兴奋。另外，把明度太高或降低，搭配上灰、白色，也是一种调节的方法。选择适合内容风格的颜色：根据网页内容的不同，需要赋予相应的颜色。页面的色彩搭配：整个网页中有不同的内容，不同的内容之间需进行不同的搭配。认识网页安全色由于同一个页面可能会在不同的环境中被打开浏览，因此网页所使用的色彩必须在任何环境下都能正常显示。网页安全色就是指在不同硬件环境、不同操作系统、不同浏览器中都能正常显示的颜色集合，而使用网页安全色最为配色方案可以解决网页颜色失真的问题。由于网页上的颜色一般都是在电脑屏幕上显示，作为数字颜色，跟自然色不一样。所以网页中的颜色会受到各种不同环境的影响。即使你的网页使用了非常合理、非常漂亮的配色方案，但也有可能因环境的不同产生不同的效果。例如用户需要通过电脑浏览网页时，必须使用相应的网页浏览工具，而不同的浏览器内置的调色板不一定都相同，所以不同浏览器所浏览网页的颜色效果也不一样。为了避免各种问题的发生，设计网页时最好使用安全色来配色。网页安全色总共包含216种颜色，因此网页安全色也称为216安全色。基本的配色方法色彩具有强烈的视觉冲击力，不同的色彩给让人的感官不同，所产生的意境、象征和情绪也不同，因此色彩的应用要与设计主题相呼应。漂亮的色彩在网页设计中比其他任何设计要素都重要，不但能给人留下深刻的印象，同时可产生很好的视觉效果。因此，网页设计中的配色与其他类型的设计一样，使用太多色彩会使页面看上去杂乱无章；若使用单一的色彩又会令页面产生单调感，缺乏活力。下面简单介绍几种常用的色彩在网页设计中的应用搭配。白色：一种干净的色彩，代表清洁、纯真、和平，可使人联想到雪花、沙滩、婚纱等。它虽然是一种干净的色彩，不少网页设计都应用白色以使网站看起来整洁、明亮、高雅，但有些情况下若使用过多的白色将会令人感觉空洞、空虚、甚至是烦闷。黑色：是否定的、简洁、凝重的色彩。由于其沉重、阴暗的气息，与其他色彩配色时自然而然的强调了否定的意义。在当代设计中，黑色也可以给人现代、简洁的感觉。在网页设计方面，许多时尚的、消费的、高档的主题网站都爱用黑色，营造出高雅的、严肃的气氛。红色：这是一种强烈的、能够吸引人们视线的色彩，常作为有攻击性的、严格的、代表权利的色彩使用。红色同时是充满活力的色彩，可以让人感觉到热情和力量。红色既可以作为网页的主色彩，也可以作为强调色使用，但后者明显会有更好的效果。绿色：是象征自然、安定与和平的色彩，该色彩给