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

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

2.创意是什么，如何产生创意？●风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等等诸多因素。举个例子：我们觉得网易是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的。这些都是网站给人们留下的不同感受。风格是独特的，是站点不同与其他网站的地方。或者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出这是你的网站独有的。例如新世纪网络()的黑白色,网易壁纸站的特有框架,即使你只看到其中一页，也可以分辨出是哪个网站的。风格是有人性的。通过网站的外表，内容，文字，交流可以概括出一个站点的个性，情绪。是温文儒雅，是执著热情，是活泼易变,是放任不羁。象诗词中的“豪放派”和“婉约派”，你可以用人的性格来比喻站点。有风格的网站与普通网站的区别在于：普通网站你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比如信息量大小，浏览速度快慢。但你浏览过有风格的网站后你能有更深一层的感性认识，比如站点有品位，和蔼可亲，是老师，是朋友。看了以上描述，你可能对风格是什么可能依然模糊。其实风格就是一句话：与众不同！如何树立网站风格呢？我们可以分这样几个步骤：第一，确信风格是建立在有价值内容之上的。一个网站有风格而没有内容，就好比绣花枕头一包草，好比一个性格傲慢但却目不识丁的人。你首先必须保证内容的质量和价值性。这是最基本的，无须置疑。第二，你需要彻底搞清楚自己希望站点给人的印象是什么。可以从这几方面来理清思路：1.如果只用一句话来描述你的站点，应该是:_____________参考答案：

有创意，专业，有(技术)实力，有美感，有冲击力2.想到你的站点，可以联想到的色彩是：________________参考答案：

热情的红色，幻想的天兰色，聪明的金黄色3.想到你的站点，可以联想到的画面是：________________参考答案：

一份早报，一辆法拉利跑车，人群拥挤的广场，杂货店4.如果网站是一个人，他拥有的个性是：________________参考答案：

思想成熟的中年人，狂野奔放的牛仔，自信憨厚的创业者5.作为站长，你希望给人的印象是：____________________参考答案：

敬业，认真投入，有深度，负责，纯真，直爽，淑女6.用一种动物来比喻，你的网站最象：__________________参考答案：

猫(神秘高贵)，鹰(目光锐利)，兔子(聪明敏感)，狮子(自信威信)3.启示期--意识发展并结合，产生创意；

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

5.形成期--设计制作网页，将创意具体化。创意是将现有的要素重新组合。比如，网络与电话结合，产生IP电话。从这一点上出发，任何人，包括你和我，都可以创造出不同凡响的创意。而且，资料越丰富，越容易产生创意。就好比万花筒，筒内的玻璃片越多，所呈现的图案越多。你如果有心可以发现，网络上的最多的创意来自与现实生活的结合(或者虚拟现实)，例如在线书店，电子社区，在线拍卖。你是否想到了一种更好的创意呢？创意思考的途径最常用的是联想，这里提供了网站创意的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.红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如：红色是color(255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF),我们经常看到的"bgColor=#FFFFFF"就是指背景色为白色。3.颜色分非彩色和彩色两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的所有色彩。4.任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩。网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。我们通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。●非彩色的搭配黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。●彩色的搭配色彩千变万化，彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。一.色环。我们将色彩按"红->黄->绿->蓝->红"依次过度渐变，就可以得到一个色彩环。色环的两端是暖色和寒色，当中是中型色。(如下图)红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红

|___________||____||_________||_________|

||||

暖色系中性系寒色系中性系二.色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。红色是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。绿色介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。它和金黄，淡白搭配，可以产生优雅，舒适的气氛。橙色也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。黄色具有快乐，希望，智慧和轻快的个性，它的明度最高。蓝色是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩:)白色具有洁白，明快，纯真，清洁的感受。黑色具有深沉，神秘，寂静，悲哀，压抑的感受。灰色具有中庸，平凡，温和，谦让，中立和高雅的感觉。每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。网页色彩搭配的原理1.色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。2.色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节)3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。网页色彩搭配的技巧1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。2.用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。例如：用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，方法：如在photoshop里按前景色方框，在跳出的拾色器窗中选择"自定义"，然后在"色库"中选就可以了:)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、在白色中混入少量的紫，可诱导人联想到淡淡的芳香要想做出一幅漂亮的主页可不是一件容易的事，除了熟练运用各种网页制作工具和编程语言之外，美术的知识也不能不懂，下面让我们来学习一点有关主页制作中色彩搭配的知识。色彩的含义色彩本身是无任何含义的，有的只是人赋予它的。但色彩确实可以在不知不觉间影响人的心理，左右人的情绪，所以就有人给各种色彩都加上特定的含义：红色：强有力、喜庆的色彩，很容易使人有兴奋感觉，是一种雄壮的精神体现。黄色：亮度最高的色，给人感觉就是很有温暖感，灿烂辉煌!试试加入淡红色或淡紫色！绿色：美丽、优雅，给人感觉大度、宽容。蓝色：永恒、博大，大家可以看看天空！给人感觉平静、理智。紫色：小MM们常用这种色，给人神秘、压迫的感觉。很怪的一种色。黑、白色：这两种色我有时会觉得很奇怪，它们在不同时候给人的感觉是不同的，黑色有时给人沉默、虚空的感觉，但有时也给人一种庄严肃穆的感觉。白色也是同样，有时给人无尽的希望感觉，但有时也给人一种恐惧和悲哀的感受。具体还是要看与哪种色配在一块。还有一些纯度不同的色，我自己较为喜欢的，例如含灰色的绿会使人联想到淡雾中的森林，天蓝会令人心境畅快，淡红会给人一种向上的感觉。只是个人理解而已，大伙儿可以自己试试。色彩的对比不同色彩之间的对比会有不同的效果。当两种颜色同时在一起时，这两种颜色各自走向自己的极端。例如：红色与绿色对比，红的更红，绿的更绿；黑色与白色对比，黑的更黑，白的更白。由于人的视觉不同，对比的效果通常也会有不同。当大家长时间看一种纯色，例如红色，然后再看看周围的人，你会发现周围的人脸色会成绿色，正是因为红色与周围颜色的对比，形成了对我们视觉的刺激。色彩的对比会受很多因素影响，例如色彩的面积、时间、亮度等等。色彩的对比有很多方面，色相的对比就是其中的一种。当我们用湖蓝与深蓝对比时，你会发觉深蓝带点紫味，而湖蓝则有点绿味。各种纯色的对比会产生鲜明的色彩效果，很容易给人带来视觉与心理的满足。红色与黄色对比：红色会使人想起玫瑰的味道，而黄色则会使人想起柠檬的味道。绿色与紫色对比：很有鲜明特色,令人感觉到活泼，自然。而红、黄、蓝三种颜色是最极端的色彩，它们之间对比,哪一种颜色也无法影响对方。色彩间的对比也有纯度对比，举个例子，黄色是夺目的色，但是加入灰色会失去其夺目的光彩,通常可以用混入黑、白、灰色来对比纯色,这样可以减低其纯度。纯度的对比会使色彩的效果更明确肯定。色彩的大小和形状有很多因素可以影响色彩的对比效果，色彩的大小就是其中最重要的一项，如果两种色彩同样大小，那么这两种颜色之间的对比十分强烈,但是当其中的一种大小变得不一样时，小的一种色就会成为大的色的补充。色彩的大小会令色彩的对比有一种生动效果，尝试在一大片绿色中加入一小点红色，你会注意到红色在绿色的衬托底下很抢眼,这就是色彩的大小对对比效果的影响,在大面积的色彩陪衬下，小面积的纯色会突出特别的效果，但是如果用较淡的色彩,则会让你感觉不到这种色彩的存在。譬如在黄色中加入淡灰色，你根本就不会注意到淡灰色。不知你是否留意到，在不同的形状上面，同一种色彩也会有不同的效果，试试在一个正方形和一条线上用红色，你会发现，正方形更能表现红色稳重、喜庆的感觉。不同的形状会使同一种色彩产生不同的效果，个人认为，圆形最好用蓝色，这样给人辽阔博大的感觉。三角形用黄色，三角形的尖锐感与黄色的刺目感配合起来。梭形建议用鲜蓝色，平行四边形用绿色……这些只是一家之言,大伙儿可以自己选用,我只是写出不同的形状上面即使用同种色也会有不同的效果。色彩的位置色彩所处的位置不同也会造成色彩对比的不同。试把两个同样大小的色彩放在不同的位置，譬如前后，则你会觉得后面的颜色要比前面的颜色暗些。正是由于所处的位置的不同，导致眼睛的视觉的不同。我喜欢在画图中使用渐层工具，无它，则会觉得多种色彩在一起会有一种不同的效果，有如音乐中的1、2、3、4、5、6、7变化，同样的色相但纯度不同的色彩组合在一起会有令人吃惊的效果，不要以为渐层很简单，它内含着色彩运用的一项重要的运用。不知大家有没有唱过歌？我觉得色彩的渐层变化里也有一种调子，如同歌曲里的谱一样，暗色中含高亮度的对比，会给人清晰、激烈的感觉。很强烈的刺激如深黄到鲜黄色，暗色中间含高亮度的对比，会给人沉着、稳重深沉的感觉。如深红中间是鲜红。中性色与低高度的对比，给人模糊、朦胧、深奥的感觉，如草绿中间是浅灰。纯色与高亮度的对比，给人跳跃舞动的感觉，如黄色与白色的对比。纯色与低亮度的对比，给人轻柔、欢快的感觉，如浅蓝色与白色。纯色与暗色的对比，给人强硬、不可改变的感觉。网页色彩搭配的设计艺术打开一个网站，给用户留下第一印象的既不是网站丰富的内容，也不是网站合理的版面布局，而是网站的色彩。色彩对人的视觉效果非常明显，一个网站设计成功与否，在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计，在排除立体图形、动画效果之外，在平面图上，色彩的冲击力是最强的，它很容易给用户留下深刻的印象。因此，在设计网页时，我们必须要高度重视色彩的搭配。一、色彩的基础知识色彩五颜六色、千变万化，我们平时所看到的白色光，经过分析在色带上可以看到，它事实上包括红、橙、黄、绿、青、蓝、紫等七色，各颜色间自然过渡。其中，红、黄、蓝是三原色，三原色通过不同比例的混合可以得到各种颜色。色彩有冷暖色之分，冷色(如蓝色)给人的感觉是安静、冰冷；而暖色(如红色)给人的感觉是热烈、火热。冷暖色的巧妙运用可以让网站产生意想不到的效果。色彩与人的心理感觉和情绪也有一定的关系，利用这一点可以在设计网页时形成自己独特的色彩效果，给浏览者留下深刻的印象。一般情况下，各种色彩给人的感觉是：红色代表热情、活泼、热闹、温暖、幸福、吉祥橙色代表光明、华丽、兴奋、甜蜜、快乐黄色代表明朗、愉快、高贵、希望绿色代表新鲜、平静、和平、柔和、安逸、青春蓝色代表深远、永恒、沉静、理智、诚实、寒冷紫色代表优雅、高贵、魅力、自傲白色代表纯洁、纯真、朴素、神圣、明快灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞黑色代表崇高、坚实、严肃、刚健、粗莽二、色彩搭配的原则色彩搭配既是一项技术性工作，同时它也是一项艺术性很强的工作，因此，设计者在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、性格独特的网站。1.特色鲜明一个网站的用色必须要有自己独特的风格，这样才能显得个性鲜明，给浏览者留下深刻的印象。2.搭配合理网页设计虽然属于平面设计的范畴，但它又与其它平面设计不同，它在遵从艺术规律的同时，还考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。3.讲究艺术性网站设计也是一种艺术活动，因此它必须遵循艺术规律，在考虑到网站本身特点的同时，按照内容决定形式的原则，大胆进行艺术创新，设计出既符合网站要求，又有一定艺术特色的网站。三、色彩搭配要注意的问题1.使用单色尽管网站设计要避免采用单一色彩，以免产生单调的感觉，但通过调整色彩的饱和度和透明度也可以产生变化，使网站避免单调。2.使用邻近色所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。3.使用对比色对比色可以突出重点，产生了强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调，对比色作为点缀，可以起到画龙点睛的作用。4.黑色的使用黑色是一种特殊的颜色，如果使用恰当，设计合理，往往产生很强烈的艺术效果，黑色一般用来作背景色，与其它纯度色彩搭配使用。5.背景色的使用背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色彩作为背景色，同时背景色要与文字的色彩对比强烈一些。6.色彩的数量一般初学者在设计网页时往往使用多种颜色，使网页变得很“花”，缺乏统一和协调，表面上看起来很花哨，但缺乏内在的美感。事实上，网站用色并不是越多越好，一般控制在三种色彩以内，通过调整色彩的各种属性来产生变化。附：网页配色表：#FFFFFF

#FFFFF0

#FFFFE0

#FFFF00.#FFFAFA

#FFFAF0

#FFFACD

#FFF8DC

#FFF68F

#FFF5EE

#FFF0F5

#FFEFDB

#FFEFD5

#FFEC8B

#FFEBCD

#FFE7BA

#FFE4E1

#FFE4C4

#FFE4B5

#FFE1FF

#FFDEAD

#FFDAB9

#FFD700

#FFD39B

#FFC1C1#FFC125

#FFC0CB

#FFBBFF

#FFB90F

#FFB6C1

#FFB5C5#FFAEB9

#FFA54F

#FFA500

#FFA07A

#FF8C69

#FF8C00

#FF83FA

#FF82AB

#FF8247

#FF7F50

#FF7F24

#FF7F00

#FF7256

#FF6EB4

#FF6A6A

#FF69B4

#FF6347

#FF4500

#FF4040

#FF3E96

#FF34B3

#FF3030

#FF1493

#FF00FF

#FF0000

#FDF5E6

#FCFCFC

#FAFAFA

#FAFAD2

#FAF0E6

#FAEBD7

#FA8072

#F8F8FF

#F7F7F7

#F5FFFA

#F5F5F5

#F5F5DC

#F5DEB3

#F4F4F4

#F4A460

#F2F2F2

#F0FFFF

#F0FFF0

#F0F8FF

#F0F0F0

#F0E68C

#F08080

#EEEEE0

#EEEED1

#EEEE00

#EEE9E9

#EEE9BF

#EEE8CD

#EEE8AA

#EEE685

#EEE5DE

#EEE0E5

#EEDFCC

#EEDC82

#EED8AE

#EED5D2

#EED5B7

#EED2EE

#EECFA1

#EECBAD

#EEC900

#EEC591

#EEB4B4

#EEB422

#EEAEEE

#EEAD0E

#EEA9B8

#EEA2AD

#EE9A49

#EE9A00

#EE9572

#EE82EE

#EE8262

#EE7AE9

#EE799F

#EE7942

#EE7621

#EE7600

#EE6AA7

#EE6A50

#EE6363

#EE5C42

#EE4000

#EE3B3B

#EE3A8C

#EE30A7

#EE2C2C

#EE1289

#EE00EE

#EE0000

#EDEDED

#EBEBEB

#EAEAEA

#E9967A

#E8E8E8

#E6E6FA

#E5E5E5

#E3E3E3

#E0FFFF

#E0EEEE

#E0EEE0

#E0E0E0

#E066FF

#DEDEDE

#DEB887

#DDA0DD

#DCDCDC

#DC143C

#DBDBDB

#DB7093

#DAA520

#DA70D6

#D9D9D9

#D8BFD8

#D6D6D6

#D4D4D4

#D3D3D3

#D2B48C

#D2691E

#D1EEEE

#D1D1D1

#D15FEE

#D02090

#CFCFCF

#CDCDC1

#CDCDB4

#CDCD00

#CDC9C9

#CDC9A5

#CDC8B1

#CDC673

#CDC5BF

#CDC1C5

#CDC0B0

#CDBE70

#CDBA96

#CDB7B5

#CDB79E

#CDB5CD

#CDB38B

#CDAF95

#CDAD00

#CDAA7D

#CD9B9B

#CD9B1D

#CD96CD

#CD950C

#CD919E

#CD8C95

#CD853F

#CD8500

#CD8162

#CD7054

#CD69C9

#CD6889

#CD6839

#CD661D

#CD6600

#CD6090

#CD5C5C

#CD5B45

#CD5555

#CD4F39

#CD3700

#CD3333

#CD3278

#CD2990

#CD2626

#CD1076

#CD00CD

#CD0000

#CCCCCC

#CAFF70

#CAE1FF

#C9C9C9

#C7C7C7

#C71585

#C6E2FF

#C67171

#C5C1AA

#C4C4C4

#C2C2C2

#C1FFC1

#C1CDCD

#C1CDC1

#C1C1C1

#C0FF3E

#BFEFFF

#BFBFBF

#BF3EFF

#BEBEBE

#BDBDBD

#BDB76B

#BCEE68

#BCD2EE

#BC8F8F

#BBFFFF

#BABABA

#BA55D3

#B9D3EE

#B8B8B8

#B8860B

#B7B7B7

#B5B5B5

#B4EEB4

#B4CDCD

#B452CD

#B3EE3A

#B3B3B3

#B2DFEE

#B23AEE

#B22222

#B0E2FF

#B0E0E6

#B0C4DE

#B0B0B0

#B03060

#AEEEEE

#ADFF2F

#ADD8E6

#ADADAD

#ABABAB

#AB82FF

#AAAAAA

#A9A9A9

#A8A8A8

#A6A6A6

#A52A2A

#A4D3EE

#A3A3A3

#A2CD5A

#A2B5CD

#A1A1A1

#A0522D

#A020F0

#9FB6CD

#9F79EE

#9E9E9E

#9C9C9C

#9BCD9B

#9B30FF

#9AFF9A

#9ACD32

#9AC0CD

#9A32CD

#999999

#9932CC

#98FB98

#98F5FF

#97FFFF

#96CDCD

#969696

#949494

#9400D3

#9370DB

#919191

#912CEE

#90EE90

#8FBC8F

#8F8F8F

#8EE5EE

#8E8E8E

#8E8E38

#8E388E

#8DEEEE

#8DB6CD

#8C8C8C

#8B8B83

#8B8B7A

#8B8B00

#8B8989

#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

#8A2BE2

#8968CD

#87CEFF

#87CEFA

#87CEEB

#878787

#858585

#848484

#8470FF

#838B8B

#838B83

#836FFF

#828282

#7FFFD4

#7FFF00

#7F7F7F

#7EC0EE

#7D9EC0

#7D7D7D

#7D26CD

#7CFC00

#7CCD7C

#7B68EE

#7AC5CD

#7A8B8B

#7A7A7A

#7A67EE

#7A378B

#79CDCD

#787878

#778899

#76EEC6

#76EE00

#757575

#737373

#71C671

#7171C6

#708090

#707070

#6E8B3D

#6E7B8B

#6E6E6E

#6CA6CD

#6C7B8B

#6B8E23

#6B6B6B

#6A5ACD

#698B69

#698B22

#696969

#6959CD

#68838B

#68228B

#66CDAA

#66CD00

#668B8B

#666666

#6495ED

#63B8FF

#636363

#616161

#607B8B

#5F9EA0

#5E5E5E

#5D478B

#5CACEE

#5C5C5C

#5B5B5B

#595959

#575757

#556B2F

#555555

#551A8B

#54FF9F

#548B54

#545454

#53868B

#528B8B

#525252

#515151

#4F94CD

#4F4F4F

#4EEE94

#4D4D4D

#4B0082

#4A708B

#4A4A4A

#48D1CC

#4876FF

#483D8B

#474747

#473C8B

#4682B4

#458B74

#458B00

#454545

#43CD80

#436EEE

#424242

#4169E1

#40E0D0

#404040

#3D3D3D

#3CB371

#3B3B3B

#3A5FCD

#388E8E

#383838

#36648B

#363636

#333333

#32CD32

#303030

#2F4F4F

#2E8B57

#2E2E2E

#2B2B2B

#292929

#282828

#27408B

#262626

#242424

#228B22

#218868

#212121

#20B2AA

#1F1F1F

#1E90FF

#1E1E1E

#1C86EE

#1C1C1C

#1A1A1A

#191970

#1874CD

#171717

#141414

#121212

#104E8B

#0F0F0F

#0D0D0D

#0A0A0A

#080808

#050505

#030303

#00FFFF

#00FF7F

#00FF00

#00FA9A

#00F5FF

#00EEEE

#00EE76

#00EE00

#00E5EE

#00CED1

#00CDCD

#00CD66

#00CD00

#00C5CD

#00BFFF

#00B2EE

#009ACD

#008B8B

#008B45

#008B00

#00868B

#00688B

#006400

#0000FF

#0000EE#0000CD

#0000AA

#00008B

#000080

#000000版面布局的原理设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个人的显示器分辨率不同，所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不同尺寸。布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。你可能注意到：“最适合”是一个不确定的形容词，什么才是最适合的呢？抱歉的是阿捷不能也不可能给您一个完整的正确的答案。就好比有人希望知道成功的秘诀是什么，成功者只能建议您用什么方法，什么途径才能最容易获得成功，而不可能有一步成功的"秘诀"告诉您。我们在设计思考系列文章第四篇讲过站点整体的创意，版面布局也是一个创意的问题，但要比站点整体的创意容易，有规律的多。让我们先来了解一下版面布局的步骤：一.草案新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，你可以尽可能的发挥你的想象力，将你想到的"景象"画上去(我们建议您用一张白纸和一支铅笔，当然用作图软件photoshop等也可以)。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，最后选定一个满意的作为继续创作的脚本。二.粗略布局在草案的基础上，将你确定需要放置的功能模块安排到页面上。(注：功能模块我们在"首页设计-引子"中提过，主要包含网站标志,主菜单,新闻,搜索,友情链接,广告条,邮件列表,计数器,版权信息等)。注意，这里我们必须遵循突出重点、平衡谐调的原则，将网站标志，主菜单等最重要的模块放在最显眼，最突出的位置，然后在考虑次要模块的排放。三.定案将粗略布局精细化，具体化。（靠你的智慧和经验，旁敲侧击多方联想，才能作出具有创意的布局。）在布局过程中，我们可以遵循的原则有：1、正常平衡亦称"匀称"。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。

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

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

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

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

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

(转载自广告大师樊志育《广告制作》)以上的设计原则，虽然枯燥，但是我们如果能领会并活用到页面布局里，效果就大不一样了。比如：○网页的白色背景太虚，则可以加些色快；

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

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

○表格太规矩，可以改用导角试试。经过不断的尝试和推敲，你的网页一定会亮丽起来的哦:)看看我们经常用到的版面布局形式：1."T"结构布局。所谓"T"结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母"T",所以我们称之为"T"形布局。这是网页设计中用的最广返的一种布局方式。(图略)这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。2."口"型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。(图略)这种布局的优点是充分利用版面，信息量大(我的主页首页即属于这种布局)。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。3."三"型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。5.POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见：漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。以上总结了目前网络上常见的布局，其实还有许许多多别具一格的布局，关键在于你的创意和设计了。对于版面布局的技巧，这里提供四个建议，您可以自己推敲：1.加强视觉效果

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

3.统一感的视觉

4.新鲜和个性是布局的最高境界字体的设定一般在网页显示中文，推荐使用宋体，倒不是宋体有多好看，是为了显示正常，不管你用什么操作系统，只要能显示中文，那么必定安装有宋体。目前的主流仍然是使用宋体，并且把最小的字号设定在12px为好，尤其是正文部分。这样能使你的网页在跨平台和跨浏览器方面取得最好的结果●字体(Font)的设置是网页制作新手遇到的第一个难点。如何控制字体大小，如何取消超链接字体的下划线是网友来信问得最多的。好，我们来彻底研究一下字体的各个方面：字符集的设定。在查看html文件原代码时，我们经常可以在文件头<head>和</head>之间看到这么一句代码：

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

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

其实这是meta标签的设定语句，是给浏览器看的。它的作用就是告诉浏览器：这个HTML文件是采用gb2312字符集制作的。当浏览器读到这一代码，便以gb2312字符集来解释和翻译网页原代码，然后我们就可以看到正确的网页。所以这个meta语句是非常重要的，尽量不要删除。gb2312就是我们最熟悉的GB简体码，英文是iso-8859-1字符集。其它还有BIG5,UTF-8,Shift-JIS,EUC,KOI8-2等字符集，分别用于不同的字体显示。字体的使用。在网页里，字体的定义语句是：<fontface="Arial">显示文字</font>

其中Arial就是一种字体的名称。默认的浏览器定义的标准字体是中文宋体和英文timesnewRoma字体。也就是说，如果你没有设置任何字体，网页将以这两种标准字体显示。同时，着两种字体也可以在任何操作系统和浏览器里正确显示。windows另外自带了40多种英文字体和5种中文字体。这些字体，你也可以在网页里自由使用和设置。凡是使用windows操作系统的浏览器都可以正确显示这些字体，但在其它操作系统里，如unix则不能完全正确显示。如果你需要用一种特殊的字体来体现你的风格，那么如何让大家可以真正看到你的设计页面呢？解决的办法是：用图片。将需要用这种字体的地方用图片代替，以保证所有人看到的页面是同一效果。字体的样式(style)。字体的样式有四种：正常体(regular),斜体(Italic),粗体(Bold),粗斜体(BoldItalic)。设置方法很简单，阿捷就不多罗嗦了。字体的效果。这里指通过html语言设定可以直接显示的效果，在html里的语句设定为：

<spanstyle="text-decoration:overline">显示文字</span>

其中，overline是指上划线效果。其它常用的效果还有：underline(下划线)，uppercase(大写)等等。字体大小的控制。