确定网站的整体风格和创意设计(修改)

确定网站的整体风格和创意设计

网站的整体风格及其创意设计是站长们最希望掌握，也是最难以学习的。难就难在没有一个固定的程式可以参照和模仿。给你一个主题，任何两人都不可能设计出完全一样的网站。当我们说："这个站点很，很有个性！"那么，是什么让你觉得很呢？它到底和一般的网站有什么区别呢？本文试图用最简明的语言来说明：

1.风格是什么，如何树立网站风格？

2.创意是什么，如何产生创意？

●风格()是抽象的。是指站点的整体形象给浏览者的综合感受。

这个“整体形象”包括站点的（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等等诸多因素。举个例子：我们觉得网易是平易近人的，迪斯尼是生动活泼的，是专业严肃的。这些都是网站给人们留下的不同感受。

风格是独特的，是站点不同与其他网站的地方。或者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出这是你的网站独有的。例如新世纪网络(.2000)的黑白色,网易壁纸站的特有框架,即使你只看到其中一页，也可以分辨出是哪个网站的。

风格是有人性的。通过网站的外表，内容，文字，交流可以概括出一个站点的个性，情绪。是温文儒雅，是执著热情，是活泼易变,是放任不羁。象诗词中的“豪放派”和“婉约派”，你可以用人的性格来比喻站点。

有风格的网站与普通网站的区别在于：普通网站你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比如信息量大小，浏览速度快慢。但你浏览过有风格的网站后你能有更深一层的感性认识，比如站点有品位，和蔼可亲，是老师，是朋友。

看了以上描述，你可能对风格是什么可能依然模糊。其实风格就是一句话：与众不同！

如何树立网站风格呢？我们可以分这样几个步骤：

第一，确信风格是建立在有价值内容之上的。一个网站有风格而没有内容，就好比绣花枕头一包草，好比一个性格傲慢但却目不识丁的人。你首先必须保证内容的质量和价值性。这是最基本的，无须置疑。

第二，你需要彻底搞清楚自己希望站点给人的印象是什么。可以从这几方面来理清思路：

1.如果只用一句话来描述你的站点，应该是

参考答案：

有创意，专业，有(技术)实力，有美感，有冲击力

2.想到你的站点，可以联想到的色彩是：

参考答案：

热情的红色，幻想的天兰色，聪明的金黄色

3.想到你的站点，可以联想到的画面是：

参考答案：

一份早报，一辆法拉利跑车，人群拥挤的广场，杂货店

4.如果网站是一个人，他拥有的个性是：

参考答案：

思想成熟的中年人，狂野奔放的牛仔，自信憨厚的创业者

5.作为站长，你希望给人的印象是：

参考答案：

敬业，认真投入，有深度，负责，纯真，直爽，淑女

6.用一种动物来比喻，你的网站最象：

参考答案：

猫(神秘高贵)，鹰(目光锐利)，兔子(聪明敏感)，狮子(自信威信)

7.浏览者觉得你和其他网站的不同是：

参考答案：

可以信赖，信息最快，交流方便，

8.浏览者和你交流合作的感受是：

参考答案：

师生，同事，朋友，长幼。

你可以自己先填写一份答案，然后让其他网友填写。比较后的结果会告诉你：你网站现在的差距，弱点及需要改进的地方。

第三，在明确自己的网站印象后，开始努力建立和加强这种印象。

经过第二步印象的的"量化"后，你需要进一步找出其中最有特色特点的东西，就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化，宣传。例如：再次审查网站名称，域名，栏目名称是否符合这种个性，是否易记。审查网站标准色彩是否容易联想到这种特色，是否能体现网站的性格等等。具体的做法，没有定式。我这里提供一些参考：

1.将你的标志,尽可能的出现在每个页面上。或者页眉，或者页脚，或则背景。

2.突出你的标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。

3.突出你的标准字体。在关键的标题，菜单，图片里使用统一的标准字体。

4.想一条朗朗上口宣传标语。把它做在你的里，或者放在醒目的位置，告诉大家你的网站的特色是...

5.使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。

6.使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。

7.创造一个你的站点特有的符号或图标。比如在一句链接前的一个点，可以使用,.。☆※○◇□△→（区位码里自己参看）等等。虽然很简单的一个变化，却给人与众不同的感觉，(为什么我没有想到呢？)

8.用自己设计的花边，线条，点

9.展示你网站的荣誉和成功作品。

10.告诉网友关于你的真实的故事和想法。

风格的形成不是一次定位的，你可以在实践中不断强化，调整，修饰，直到有一天，网友们写信告诉你："我喜欢你的站点，因为它很有风格！"

● 创意()是网站生存的关键。这一点相信大家都已经认同。然而作为网页设计师，最苦恼的就是没有好的创意来源。

注意，这里说的创意是指站点的整体创意，(因为这个创意而产生这个站点，或者相同的内容，推出的创意不同),网页的平面设计创意我将在后面的版面布局窍门里介绍。

创意到底是什么，如何产生创意呢？

创意是引人入胜，精彩万分，出奇不意的；

创意是捕捉出来的点子，是创作出来的奇招....

这些讲法都说出了创意的一些特点，实质上，

创意是传达信息的一种特别方式。

比如(网页设计师)，我们将其中的E字母大写一下: ，感觉怎么样，这其实就是一种创意！

创意并不是天才者的灵感，而是思考的结果。根据美国广告学教授詹姆斯的研究，创意思考的过程分五阶段:

1.准备期研究所搜集的资料，根据旧经验，启发新创意；

2.孵化期将资料咀嚼消化，使意识自由发展，任意结合；

3.启示期意识发展并结合，产生创意；

4.验证期将产生的创意讨论修正；

5.形成期设计制作网页，将创意具体化。

创意是将现有的要素重新组合。

比如，网络与电话结合，产生电话。从这一点上出发，任何人，包括你和我，都可以创造出不同凡响的创意。而且，资料越丰富，越容易产生创意。就好比万花筒，筒内的玻璃片越多，所呈现的图案越多。你如果有心可以发现，网络上的最多的创意来自与现实生活的结合(或者虚拟现实)，例如在线书店，电子社区，在线拍卖。你是否想到了一种更好的创意呢？

创意思考的途径最常用的是联想，这里提供了网站创意的25种联想线索：

1.把它颠倒

2.把它缩小

3.把颜色换一下

4.使它更长

5.使它闪动

6.把它放进音乐里

7.结合文字音乐图画

8.使它成为年轻的

9.使它重复 10.使它变成立体 11.参加竞赛 12.参加打赌

13.变更一部分 14.分裂它 15.使它罗曼蒂克 16.使它速度加快

17.增加香味 18.使它看起来流行 19.使它对称 20.将它向儿童诉求

21.价格更低 22.给它起个绰号 23.把它打包 24.免费提供

25.以上各项延伸组合

(转载自樊志育《广告制作》)

需要一提的是：创意的目的是更好的宣传推广网站。如果创意很好，却对网站发展毫无意义，好比给奶牛穿高跟鞋，那么，我们宁可放弃这个创意！

关于风格和创意，可以讲得还有许多。感兴趣的网友可以自己找一些广告设计方面的书阅读。希望本文能帮助您对网站的设计有一个更新的认识和提高。谢谢！

网页色彩搭配原理

首先我们先来了解一些色彩的基本知识：

1.颜色是因为光的折射而产生的。

2.红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。

网页语言中的色彩表达即是用这三种颜色的数值表示

例如：红色是(255,0,0)十六进制的表示方法为(0000)

白色为(), 我们经常看到的""就是指背景色为白色。

3.颜色分非彩色和彩色两类。

非彩色是指黑，白，灰系统色。

彩色是指除了非彩色以外的所有色彩。

4.任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。

网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。我们通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。

●非彩色的搭配

黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。

●彩色的搭配

色彩千变万化，彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。

一.色环。

我们将色彩按"红->黄->绿->蓝->红"依次过度渐变，就可以得到一个色彩环。

色环的两端是暖色和寒色，当中是中型色。(如下图)

红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红

| | | |

暖色系中性系寒色系中性系

二.色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。

红色是一种激奋的色

彩。刺激效果，能使人产生

冲动，愤怒，热情，活力的

感觉。

绿色介于冷暖两中色彩

的中间，显得和睦，宁静，

健康，安全的感觉。它和金

黄，淡白搭配，可以产生优

雅，舒适的气氛。

橙色也是一种激奋的色

彩，具有轻快，欢欣，热烈，

温馨，时尚的效果。

黄色具有快乐，希望，智慧和轻快的个性，它的明度最高。

蓝色是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩:)

白色具有洁白，明快，纯真，清洁的感受。

黑色具有深沉，神秘，寂静，悲哀，压抑的感受。

灰色具有中庸，平凡，温和，谦让，中立和高雅的感觉。

每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。

网页色彩搭配的原理

1.色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。

2.色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。(参考设计思考第二篇网站的标准色彩一节)

3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。

4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。

网页色彩搭配的技巧

1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

2.用两种色彩。先选定一种色彩，然后选择它的对比色(在里按)。例如：用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。

3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，方法：如在里按前景色方框，在跳出的拾色器窗中选择"自定义"，然后在"色库"中选就可以了:)

4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。

在网页配色中，忌讳的是：

1.不要将所有颜色都用到，尽量控制在三种色彩以内。

2.背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。

网页色彩搭配的内涵

网页的色彩搭配往往是感到头疼的问题，尤其是那些完全没有美术基础的。到底用什么色彩搭配好看呢？让我们来看看吧！

一、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。

1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。

2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。

3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。

4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。

二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。

1、在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。

2、在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。

3、在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。

4、在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。

三、蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。

1、如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。

2、在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。

四、绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。

1、在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。

2、在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。

3、在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。

五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。

1、在紫色中红的成份较多时，其知觉具有压抑感、威胁感。

2、在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。

3、在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。

六、白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。

1、在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。

2、在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。

3、在白色中混入少量的蓝，给人感觉清冷、洁净。

4、在白色中混入少量的橙，有一种干燥的气氛。

5、在白色中混入少量的绿，给人一种稚嫩、柔和的感觉

6、在白色中混入少量的紫，可诱导人联想到淡淡的芳香

要想做出一幅漂亮的主页可不是一件容易的事，除了熟练运用各种网页制作工具和编程语言之外，美术的知识也不能不懂，下面让我们来学习一点有关主页制作中色彩搭配的知识。

色彩的含义

色彩本身是无任何含义的，有的只是人赋予它的。但色彩确实可以在不知不觉间影响人的心理，左右人的情绪，所以就有人给各种色彩都加上特定的含义：

红色：强有力、喜庆的色彩，很容易使人有兴奋感觉，是一种雄壮的精神体现。

黄色：亮度最高的色，给人感觉就是很有温暖感，灿烂辉煌!试试加入淡红色或淡紫色！

绿色：美丽、优雅，给人感觉大度、宽容。

蓝色：永恒、博大，大家可以看看天空！给人感觉平静、理智。

紫色：小们常用这种色，给人神秘、压迫的感觉。很怪的一种色。

黑、白色：这两种色我有时会觉得很奇怪，它们在不同时候给人的感觉是不同的，黑色有时给人沉默、虚空的感觉，但有时也给人一种庄严肃穆的感觉。白色也是同样，有时给人无尽的希望感觉，但有时也给人一种恐惧和悲哀的感受。具体还是要看与哪种色配在一块。

还有一些纯度不同的色，我自己较为喜欢的，例如含灰色的绿会使人联想到淡雾中的森林，天蓝会令人心境畅快，淡红会给人一种向上的感觉。只是个人理解而已，大伙儿可以自己试试。

●色彩的对比

不同色彩之间的对比会有不同的效果。当两种颜色同时在一起时，这两种颜色各自走向自己的极端。例如：红色与绿色对比，红的更红，绿的更绿；黑色与白色对比，黑的更黑，白的更白。由于人的视觉不同，对比的效果通常也会有不同。当大家长时间看一种纯色，例如红色，然后再看看周围的人，你会发现周围的人脸色会成绿色，正是因为红色与周围颜色的对比，形成了对我们视觉的刺激。色彩的对比会受很多因素影响，例如色彩的面积、时间、亮度等等。

色彩的对比有很多方面，色相的对比就是其中的一种。当我们用湖蓝与深蓝对比时，你会发觉深蓝带点紫味，而湖蓝则有点绿味。各种纯色的对比会产生鲜明的色彩效果，很容易给人带来视觉与心理的满足。

红色与黄色对比：红色会使人想起玫瑰的味道，而黄色则会使人想起柠檬的味道。

绿色与紫色对比：很有鲜明特色,令人感觉到活泼，自然。

而红、黄、蓝三种颜色是最极端的色彩，它们之间对比,哪一种颜色也无法影响对方。

色彩间的对比也有纯度对比，举个例子，黄色是夺目的色，但是加入灰色会失去其夺目的光彩,通常可以用混入黑、白、灰色来对比纯色,这样可以减低其纯度。纯度的对比会使色彩的效果更明确肯定。

●色彩的大小和形状

有很多因素可以影响色彩的对比效果，色彩的大小就是其中最重要的一项，如果两种色彩同样大小，那么这两种颜色之间的对比十分强烈,但是当其中的一种大小变得不一样时，小的一种色就会成为大的色的补充。色彩的大小会令色彩的对比有一种生动效果，尝试在一大片绿色中加入一小点红色，你会注意到红色在绿色的衬托底下很抢眼,这就是色彩的大小对对比效果的影响,在大面积的色彩陪衬下，小面积的纯色会突出特别的效果，但是如果用较淡的色彩,则会让你感觉不到这种色彩的存在。譬如在黄色中加入淡灰色，你根本就不会注意到淡灰色。

不知你是否留意到，在不同的形状上面，同一种色彩也会有不同的效果，试试在一个正方形和一条线上用红色，你会发现，正方形更能表现红色稳重、喜庆的感觉。不同的形状会使同一种色彩产生不同的效果，个人认为，圆形最好用蓝色，这样给人辽阔博大的感觉。三角形用黄色，三角形的尖锐感与黄色的刺目感配合起来。梭形建议用鲜蓝色，平行四边形用绿色……这些只是一家之言,大伙儿可以自己选用,我只是写出不同的形状上面即使用同种色也会有不同的效果。

色彩的位置

色彩所处的位置不同也会造成色彩对比的不同。试把两个同样大小的色彩放在不同的位置，譬如前后，则你会觉得后面的颜色要比前面的颜色暗些。正是由于所处的位置的不同，导致眼睛的视觉的不同。我喜欢在画图中使用渐层工具，无它，则会觉得多种色彩在一起会有一种不同的效果，有如音乐中的1、2、3、4、5、6、7变化，同样的色相但纯度不同的色彩组合在一起会有令人吃惊的效果，不要以为渐层很简单，它内含着色彩运用的一项重要的运用。不知大家有没有唱过歌？我觉得色彩的渐层变化里也有一种调子，如同歌曲里的谱一样，暗色中含高亮度的对比，会给人清晰、激烈的感觉。很强烈的刺激如深黄到鲜黄色，暗色中间含高亮度的对比，会给人沉着、稳重深沉的感觉。如深红中间是鲜红。中性色与低高度的对比，给人模糊、朦胧、深奥的感觉，如草绿中间是浅灰。纯色与高亮度的对比，给人跳跃舞动的感觉，如黄色与白色的对比。纯色与低亮度的对比，给人轻柔、欢快的感觉，如浅蓝色与白色。纯色与暗色的对比，给人强硬、不可改变的感觉。

网页色彩搭配的设计艺术

打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图形、动画效果之外，在平面图上，色彩的冲击力是最强的，它很容易给用户留下深刻的印象。因此，在设计网页时，我们必须要高度重视色彩的搭配。

一、色彩的基础知识

色彩五颜六色、千变万化，我们平时所看到的白色光，经过分析在色带上可以看到，它事实上包括红、橙、黄、绿、青、蓝、紫等七色，各颜色间自然过渡。其中，红、黄、蓝是三原色，三原色通过不同比例的混合可以得到各种颜色。色彩有冷暖色之分，冷色 ( 如蓝色 ) 给人的感觉是安静、冰冷；而暖色 ( 如红色 ) 给人的感觉是热烈、火热。冷暖色的巧妙运用可以让网站产生意想不到的效果。

色彩与人的心理感觉和情绪也有一定的关系，利用这一点可以在设计网页时形成自己独特的色彩效果，给浏览者留下深刻的印象。一般情况下，各种色彩给人的感觉是：

红色代表热情、活泼、热闹、温暖、幸福、吉祥

橙色代表光明、华丽、兴奋、甜蜜、快乐

黄色代表明朗、愉快、高贵、希望

绿色代表新鲜、平静、和平、柔和、安逸、青春

蓝色代表深远、永恒、沉静、理智、诚实、寒冷

紫色代表优雅、高贵、魅力、自傲

白色代表纯洁、纯真、朴素、神圣、明快

灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞

黑色代表崇高、坚实、严肃、刚健、粗莽

二、色彩搭配的原则

色彩搭配既是一项技术性工作，同时它也是一项艺术性很强的工作，因此，设计者在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，从

而设计出色彩鲜明、性格独特的网站。

1. 特色鲜明

一个网站的用色必须要有自己独特的风格，这样才能显得个性鲜明，给浏览者

留下深刻的印象。

2. 搭配合理

网页设计虽然属于平面设计的范畴，但它又与其它平面设计不同，它在遵从

艺术规律的同时，还考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。

3. 讲究艺术性

网站设计也是一种艺术活动，因此它必须遵循艺术规律，在考虑到网站本身

特点的同时，按照内容决定形式的原则，大胆进行艺术创新，设计出既符合网站

要求，又有一定艺术特色的网站。

三、色彩搭配要注意的问题

1. 使用单色

尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩

的饱和度和透明度也可以产生变化，使网站避免单调。

2. 使用邻近色

所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就

互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和

谐统一。

3. 使用对比色

对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够使

网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。

4. 黑色的使用

黑色是一种特殊的颜色，如果使用恰当，设计合理，往往产生很强烈的艺术

效果，黑色一般用来作背景色，与其它纯度色彩搭配使用。

5. 背景色的使用

背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色

彩作为背景色，同时背景色要与文字的色彩对比强烈一些。

6. 色彩的数量

一般初学者在设计网页时往往使用多种颜色，使网页变得很“花”，缺

乏统一和协调，表面上看起来很花哨，但缺乏内在的美感。事实上，网站用色并

不是越多越好，一般控制在三种色彩以内，通过调整色彩的各种属性来产生变化。附：网页配色表：

0 0 00

0 8

68F 5 0F5

5 8B 7

4E1 4C4 4B5 1 9 700 39B 1C1 125 0 90F 6C1 5C5 9 54F 500 07A 8C69 8C00 83 82 8247 7F50 7F24 7F00 7256 64 6A6A 69B4 6347 4500 4040 3E96 34B3 3030 1493 00 0000 5E6 2 0E6 7 8072 8F8 7F7F7 5 5F5F5 5F5 53 4F4F4 4A460 2F2F2 0 00 0F8 0F0F0 0E68C 08080 0 1 00 9E9 9 8 8 685 5 0E5 82 8 5D2 5B7 2 1 900 591 4B4 422 0E 9B8 2 9A49 9A00 9572 82 8262 79 799F 7942 7621 7600 67 6A50 6363

5C42

4000

3B3B

3A8C 30A7 2C2C 1289 00 0000 9967A 8E8E8 6E6 5E5E5 3E3E3 0 0 00 0E0E0 066 887 0 143C 7093 520 70D6 9D9D9 88 6D6D6 4D4D4 3D3D3 2B48C 2691E 1 1D1D1 15 02090 1 4 00 9C9 9A5 8B1 673 5 1C5 0B0 70 96 7B5 79E 5 38B 95 00 7D 9B9B 9B1D 96 950C 919E 8C95 853F 8500 8162 7054 69C9 6889 6839 661D 6600 6090 5C5C 5B45 5555 4F39 3700 3333 3278 2990 2626 1076 00 0000 70 1 9C9C9 7C7C7 71585 6E2 67171 5C1 4C4C4 2C2C2 11 1 11

1C1C1

03E

3 76B 68 2 8F8F 55D3 9D3 8B8B8 8860B 7B7B7 5B5B5 4

4 4 452 33A 3B3B3 2 23 22222 0E2 0E0E6 0C4 0B0B0 03060 2F 8E6 82 9A9A9 8A8A8 6A6A6 52A2A 4D3 3A3A3 25A 2B

5 1A1A1 0522D 020F0 #9

6 #9F79 #9E9E9E #9C9C9C #99B #9B30 #99A #932 #90 #9A32 #999999 #9932 #9898 #98F5 #9

7 #96 #969696 #949494 #9400D3 #9370 #919191 #912 #9090 #88F #8F8F8F #85 #8E8E8E #8E8E3

8 #8E388E #8 #86 #8C8C8C #8B8B83 #8B8B7A #8B8B00 #8B898

9 #8B8970 #8B8878 #8B8682 #8B864E #8B8386 #8B8378 #8B814C #8B7E66 #8B7D7B #8B7D6B #8B7B8B #8B795E #8B7765 #8B7500 #8B7355 #8B6969 #8B6914 #8B668B

#8B6508

#8B636C

#8B5F65

#8B5A2B #8B5A00 #8B5742 #8B4C39 #8B4789 #8B475D #8B4726 #8B4513 #8B4500 #8B3E2F #8B3A62 #8B3A3A #8B3626 #8B2500 #8B2323 #8B2252 #8B1C62 #8B1A1A #8B0A50 #8B008B #8B0000 #8A8A8A #8A22 #8968 #87 #87 #87 #878787 #858585 #848484 #8470 #838B8B #838B83 #836 #828282 #74 #700 #7F7F7F #70 #7D90 #7D7D7D #7D26 #700 #77C #7B68 #75 #7A8B8B #7A7A7A #7A67 #7A378B #79 #787878 #778899 #766 #7600 #757575 #737373 #71C671 #7171C6 #708090 #707070 #6E8B3D #6E7B8B #6E6E6E #66 #6C7B8B #6B8E23 #6B6B6B #6A5 #698B69 #698B22 #696969 #6959 #68838B #68228B #66 #6600 #668B8B #666666 #6495 #63B8 #636363 #616161 #607B8B #5F90 #5E5E5E #5D478B #5 #5C5C5C #5B5B5B #595959 #575757 #556B2F #555555 #551A8B #549F #548B54 #545454 #53868B #528B8B #525252

#515151

#4F94

#4F4F4F

#494 #4D4D4D #4B0082 #4A708B #4A4A4A #48D1 #4876 #483D8B #474747 #473C8B #4682B4 #458B74 #458B00 #454545 #4380 #436 #424242 #4169E1 #40E0D0 #404040 #3D3D3D #3371 #3B3B3B #3A5 #388E8E #383838 #36648B #363636 #333333 #3232 #303030 #2F4F4F #2E8B57 #2E2E2E #2B2B2B #292929 #282828 #27408B #262626 #242424 #228B22 #218868 #212121 #20B2 #1F1F1F #1E90 #1E1E1E #1C86 #1C1C1C #1A1A1A #191970 #1874 #171717 #141414 #121212 #104E8B #0F0F0F #0D0D0D #0A0A0A #080808 #050505 #030303 #00 #007F #0000 #009A #00F5 #00 #0076 #0000 #00E5 #001 #00 #0066 #0000 #00C5 #00 #00B2 #009 #008B8B #008B45 #008B00 #00868B #00688B #006400 #0000 #0000 #0000 #0000

#00008B

#000080

#000000

版面布局的原理

设计首页的第一步是设计版面布局。

就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。

版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个人的显示器分辨率不同，所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不同尺寸。

布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。你可能注意到：“最适合”是一个不确定的形容词，什么才是最适合的呢？抱歉的是阿捷不能也不可能给您一个完整的正确的答案。就好比有人希望知道成功的秘诀是什么，成功者只能建议您用什么方法，什么途径才能最容易获得成功，而不可能有一步成功的"秘诀"告诉您。

我们在设计思考系列文章第四篇讲过站点整体的创意，版面布局也是一个创意的问题，但要比站点整体的创意容易，有规律的多。让我们先来了解一下版面布局的步骤：一.草案

新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，你可以尽可能的发挥你的想象力，将你想到的"景象"画上去(我们建议您用一张白纸和一支铅笔，当然用作图软件等也可以)。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，最后选定一个满意的作为继续创作的脚本。

二.粗略布局

在草案的基础上，将你确定需要放置的功能模块安排到页面上。(注：功能模块我们在"首页设计-引子"中提过，主要包含网站标志,主菜单,新闻,搜索,友情链接,广告条,邮件列表,计数器,版权信息等)。注意，这里我们必须遵循突出重点、平衡谐调的原则，将网站标志，主菜单等最重要的模块放在最显眼，最突出的位置，然后在考虑次要模块的排放。

三.定案

将粗略布局精细化，具体化。（靠你的智慧和经验，旁敲侧击多方联想，才能作出具有创意的布局。）

在布局过程中，我们可以遵循的原则有：

1、正常平衡亦称"匀称"。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。

2、异常平衡即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。

3、对比所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与今、新与旧、贫与富等对比。

4、凝视所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。

5、空白空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体显网页的格调十分有效。

6、尽量用图片解说此法对不能用语言说服、或用语言无法表达的情感，特别有效。图片解说的内容，可以传达给浏览者的更多的心理因素。

(转载自广告大师樊志育《广告制作》)

以上的设计原则，虽然枯燥，但是我们如果能领会并活用到页面布局里，效果就大不一样了。比如：

○网页的白色背景太虚，则可以加些色快；

○版面零散，可以用线条和符号串联；

○左面文字过多，右面则可以插一张图片保持平衡；

○表格太规矩，可以改用导角试试。

经过不断的尝试和推敲，你的网页一定会亮丽起来的哦:)

看看我们经常用到的版面布局形式：

1."T"结构布局。所谓"T"结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母"T",所以我们称之为"T"形布局。这是网页设计中用的最广返的一种布局方式。(图略)

这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。

2."口"型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。(图略)

这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。

3."三"型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。

4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。

5布局。引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如。优点显而易见：漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。

以上总结了目前网络上常见的布局，其实还有许许多多别具一格的布局，关键在于你的创意和设计了。对于版面布局的技巧，这里提供四个建议，您可以自己推敲：

1.加强视觉效果

2.加强文案的可视度和可读性

3.统一感的视觉

4.新鲜和个性是布局的最高境界

字体的设定

一般在网页显示中文，推荐使用宋体，倒不是宋体有多好看，是为了显示正常，不管你用什么操作系统，只要能显示中文，那么必定安装有宋体。

目前的主流仍然是使用宋体，并且把最小的字号设定在 12 为好，尤其是正文部分。这样能使你的网页在跨平台和跨浏览器方面取得最好的结果

●字体()的设置是网页制作新手遇到的第一个难点。如何控制字体大小，如何取消超链接字体的下划线是网友来信问得最多的。好，我们来彻底研究一下字体的各个方面：

字符集的设定。

在查看文件原代码时，我们经常可以在文件头<>和<>之间看到这么一句代码：

< "" "; 2312">

这段代码的作用是什么呢？是否可以删除呢？

其实这是标签的设定语句，是给浏览器看的。它的作用就是告诉浏览器：这个文件是采用2312字符集制作的。当浏览器读到这一代码，便以2312字符集来解释和翻译网页原代码，然后我们就可以看到正确的网页。所以这个语句是非常重要的，尽量不要删除。

2312就是我们最熟悉的简体码，英文是8859-1字符集。其它还有588-2等字符集，分别用于不同的字体显示。

字体的使用。

在网页里，字体的定义语句是：< "">显示文字<>

其中就是一种字体的名称。

默认的浏览器定义的标准字体是中文宋体和英文字体。也就是说，如果你没有设置任何字体，网页将以这两种标准字体显示。同时，着两种字体也可以在任何操作系统和浏览器里正确显示。

另外自带了40多种英文字体和5种中文字体。这些字体，你也可以在网页里自由使用和设置。凡是使用操作系统的浏览器都可以正确显示这些字体，但在其它操作系统里，如则不能完全正确显示。

如果你需要用一种特殊的字体来体现你的风格，那么如何让大家可以真正看到你的设计页面呢？解决的办法是：用图片。

将需要用这种字体的地方用图片代替，以保证所有人看到的页面是同一效果。

字体的样式()。

字体的样式有四种：正常体(),斜体(),粗体(),粗斜体( )。设置方法很简单，阿捷就不多罗嗦了。

字体的效果。

这里指通过语言设定可以直接显示的效果，在里的语句设定为：

< ": ">显示文字<>

其中，是指上划线效果。其它常用的效果还有：(下划线)，(大写)等等。

字体大小的控制。

字体大小的控制是本节的重点。

一般字体默认的大小是12(镑).用< "+1">语句可以将文字增大2。这种方法我们都已经掌握了。而现在网络上最流行的小中文字体大小为9，是如何设定的呢？有三种方法：

1.用"< ":9">显示文字<>"语句来设定。

显然这种方法非常麻烦，你必须为每段文字都设定大小。

2.用层叠样式表。是的一个组成部分，它可以定义整个页面的字体显示风格和大小。是较为简便的方法。比如，这里需要设定整个页面文字大小为9,只要将下面这段代码加入代码的<>和<>之间：

< "">

<

{: 9}

{: 9}

>

<>

其中:9指字体的大小为9镑

3.第二种方法已经简化了许多步骤，但是仍然不是最理想的方法，因为你必须在每个页面的区都放置这么一段代码，扩大了文件的字节。另外这样的做法还有一个重大缺点，就是如果我需要修改整个站点的字体大小，就必须一页一页的改！

所以推荐给你最终也是目前最好的方法外部摸板文件调用法。

“外部摸板调用”就是说你将的设定作成一个单独的文件，在每个页面里都调用它。一旦你需要修改字体大小，只要修改一个文件，几百个页面就同时修改了。(这种方法类似子程序调用编写过程序的网友很容易理解:)

调用的具体方法如下：

(1)将上面的代码成一个文件，然后修改后缀名为

(2)在文件的<><>之间插入< "" >，

语句调用(注意有关路径的设置正确)!

字体超链接样式的设定。

通常在网页的<>中设置连接的颜色，如：< "00" "0000" "#008080">

其中：（连接）的颜色

（已访问过的连接）颜色

（当前活动的连接）颜色

颜色用的16进制码表示如红色是0000。

同样用可以更简便的设定网页超连接的样式，看下面这段代码

< "">

{: : #0000}

{: : #000000}

{: : 0000}

{: 0000}

<>

将它插入文件的区就可以了。其中设定的是有超链接的颜色是访问过的超链接颜色；是鼠标移上去的颜色；是鼠标点击时的颜色。而""是指取消超链接的下划线显示。关于的设定还有更多的用法和技巧，比如在同一页中设定不同的字体大小和超链接颜色，请学习有关的专门知识(可以到阿捷的主页查阅)在这里我们不在冗述。

●上面已经介绍了字体在技术上的各个方面。有关字体的设计使用，目前还没有一个成熟的理论，下面是几条网页设计中字体的使用原则，仅供参考：

1.不要使用超过3种以上的字体。字体太多则显得杂乱，没有主题。

2.不要用太大的字。因为版面是宝贵，有限的，粗陋的大字体不能带给访问者更多信息。

3.不要使用不停闪烁的文字。想让浏览者多停留一会儿的话，就不要使用闪烁的文字。

4.原则上标题的字体较正文大，颜色也应有所区别。

●附：英文字体资源