网页设计规范标准.pdfVIP

网页设计规范标准

网页设计规范标准：

作为一名网页设计师，在平时的工作中，会找到设计网页过程中一些共性的东西，也就是所

谓的一种标准。在了解这些标准之后，可以可好的提高我们的工作效率！

现将我平时了解到的网页规范标准整理如下：

一．导航

导航在一个网页中所处的位置是很醒目的，它在整个页面中起到一种导航，引导的作用。清

晰明了的导航可以更好的引导浏览者查找到他们所想要的内容信息！

导航的排列方式有以下几种常用形式：

1》横列。大部分的网站都是采用这种导航形式。这种形式也是很符合人的浏览顺序的，从

上到下的浏览顺序。这种导航的放置位置特别显眼。

2》竖列。这种导航目前在我们国内运用的还不是太多，好多英文网站上运用的会比中文网

站要多。

导航的表现形式有以下几种常用形式：

1》背景上打字。这种导航在设计的过程当中，上面的文字形式最好是浏览器可以识别的字

体，比如说：宋体，微软雅黑，黑体。最常用的是宋体。这种导航在交互的时候，只要上面

的文字样式发生变化，就可以让用户体现到交互的感受。它的好处是，辨识度较高，可以让

搜索引擎正确搜索到网站的导航信息。但难过缺点是：由于没有采用特殊字体，也是纯粹是

静态的，让人浏览起来，感觉不是那么的炫！因此，在实际应用中，我们应该根据网站的不

同特点，合理运用！

2》全部是图片的。这种导航可以采用特殊字体，比如说：方正大黑，华文行楷等。这种导

航应用不同的字体，可以达到不同的视觉效果。为了实现交互，每个导航发生变化时的图片

也要设计出来。因此在切图排版时，由于运用的特殊字体，就要切成图片的格式，缺点是，

不容易让搜索引擎搜索到导航上的文字信息。因此，在实际应用中，我们应该根据网站的不

同特点，合理运用！

3》纯flash的形式。这种导航在视觉上很有冲击力，很炫。在设计页面时，我们首先要把

flash导航的形式设计出来，默认的状态是什么样的，鼠标滑动刀到上面是什么样的，鼠标

按下去是什么样的，鼠标离开是什么样的，这些都要事先设计好，然后再做动画。这种导航

的缺点是字节大小会比前面两种导航形式要大，会影响页面加载的速度。不过在动画制作过

程中，如果可以尽量减小它的字节大小，也是可以运用的。因此，在实际应用中，我们应该

根据网站的不同特点，合理运用！

导航的下拉形式有以下几种常用形式：

1》JS表现形式。有些导航在设计时，要出现二级下来。这里所说的JS，一种是专门的JS

程序员写出来的代码形式，还有一种是直接运用Dreamweaver里自带的下拉形式。

2》DIV表现形式。运用div这种新技术也可实现导航的二级甚至是三级下来形式，是目前

比较常用的技术。

二．KV的形式

KV在网页中能起到一种画龙点睛，突出主题思想，体现行业特性的作用。可见，在网页设

计过程当中，KV的制作是多么的重要！一个网站的成功与否，可以毫不夸张的说，绝大部

分是取决于KV设计的成功与否！

KV的表现方式有以下几种常用形式：

1》单纯是一张静态图片。有的网页在设计过程中，只运用一张静态的图片来体现网站的主

题思想！这样做的好处是，可以加快网站加载的速度，对于一些喜欢简洁网页的客户来说，

由于他不喜欢页面太过于热闹，动来动去让人看的眼睛都花了，那么可以运用这种形式，但

前提是，这张图片可以准确的向浏览者传达他们公司的行业特性！

2》Flash的表现方式。对于一些互动性较强的网站来说，页面不能太过于安静，因此通过

flash来诠释KV的主题思想，也就变得顺理成章了。这种KV除了很炫，它也可以实现动

态添加，这就需要和程序数据库有效结合，它是目前比较流行的。但是要注意的是，在不影

响加载速度的情况下，采用这样的表现方式是可以的。

3》JS的表现方式。这种KV的表现形式，可以实现动态添加。它虽然达不到Flash那种炫

酷的效果，但它有一个优点，那就是它所占的字节数据没有Flash大。

在KV的制作过程当中，我们所要主要的是：图片的宽高尺寸要取整数；

三、配色问题

一个网页的色彩最好不要超过3种，一面视觉效果混乱，用色柔和，对比度强的色彩

不能应用于一般网站，时尚网站使用还可以。一般不好搭配的颜色，用灰度搭配。

几种配色方案

1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些

就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层

次感。

2.用两种色彩。先选定一种色彩，然后选择它的对比色(在pho