网页设计配色技巧
以下就是网页设计配色技巧等等的介绍，希望为您带来帮助。
一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。下面是我做网页和浏览别人的网页时，对网页背景色和文字色彩搭配积累的经验，这些颜色可以做正文的底色，也可以做标题的底色，再搭配不同的字体，一定 会有不错的效果，希望对大家在制作网页时有用。
BgcolorΚ″#F1FAFA″———做正文的背景色好，淡雅
BgcolorΚ″#E8FFE8″———做标题的背景色较好
BgcolorΚ″#E8E8FF″———做正文的背景色较好，文字颜色配黑色
BgcolorΚ″#8080C0″———上配黄色白色文字较好
BgcolorΚ″#E8D098″———上配浅蓝色或蓝色文字较好
BgcolorΚ″#EFEFDA″———上配浅蓝色或红色文字较好
BgcolorΚ″#F2F1D7″———配黑色文字素雅，如果是红色则显得醒目
BgcolorΚ″#336699″———配白色文字好看些
BgcolorΚ″#6699CC″———配白色文字好看些，可以做标题
BgcolorΚ″#66CCCC″———配白色文字好看些，可以做标题
BgcolorΚ″#B45B3E″———配白色文字好看些，可以做标题
BgcolorΚ″#479AC7″———配白色文字好看些，可以做标题
BgcolorΚ″#00B271″———配白色文字好看些，可以做标题
BgcolorΚ″#FBFBEA″———配黑色文字比较好看，一般作为正文
BgcolorΚ″#D5F3F4″———配黑色文字比较好看，一般作为正文
BgcolorΚ″#D7FFF0″———配黑色文字比较好看，一般作为正文
BgcolorΚ″#F0DAD2″———配黑色文字比较好看，一般作为正文
BgcolorΚ″#DDF3FF″———配黑色文字比较好看，一般作为正文
浅绿色底配黑色文字，或白色底配蓝色文字都很醒目，但前者突出背景，后者突出文字。红色底配白色文字，比较深的底色配黄色文字显得非常有效果。
网页设计技巧
一、页面平铺
把页面平铺开，主要的物件有：导航栏、LOGO、Banner、按钮、图片、文字。
1.导航栏
导航栏如果设计得恰到好处，是会给网页本身增色很多。导航栏有一排、两排、多排、图片导航和Frame框架快捷导航等等各种情况的设计。有时候是横排，有时候则是竖排。另外还有一些动态的导航栏，如很精彩的Flash导航。
2.LOGO
LOGO并不是每个网站多要有的，他是网站为了给大家一个比较直观的信息的表达工具。LOGO的位置通常在页面的左上角。这个地方最明显和直观，可以第一时间给人于默化的效果;网站的LOGO，一般以静态的居多，也有动态的，但是LOGO的特点都是在表达网站的信息，是一个网站的直接的表现窗口。
3.BANNER(广告条)类型
Banner设计注意点：Banner有动态和静态两种。在浏览网页的过程中，虽然闪烁的图案会产生瞬间记忆刺激，引起注意，但这种记忆往往为压迫性的，久之易产生负面效应，从而模糊记忆。而稳定的画面不易引发特殊的关注，但如果有良好的界面引导和内容，可产生良性的记忆，持久而牢固。设计要点：Banner的文字不能太多，用一两句话来表达即可;广告语要朗朗上口，可以第一时间的让人捕获表达的重点;图形无须太繁杂，文字尽量使用黑体等粗壮的字体，否则在视觉上很容易被网页其他内容淹没;图形尽量选择颜色数少，能够说明问题的事物;如果选择颜色很复杂的物体，要考虑一下在低颜色数情况下，是否会有明显的色斑;尽量不要使用彩虹色、晕边等复杂的特技图形效果，这样做会大大增加图形所占据的颜色数，增大体积。
4.按钮
按钮设计要点：设计按钮要同页面的整体协调，不能太抢眼;有的页面很单调，还要依靠花哨的按钮来提一下;选用的字体，选用的插图，或插图及字体搭配，都要考虑字迹清楚，色彩简单一些，不要超过四种;很长的按钮可能就是框架的分界，尽量要纤细一些，否则页面会显臃肿。
5.图片
为了美化页面，图片是任何一个页面都要用到的，图片的运用要合理。图片运用要点：图形的主体最好清晰可见;图形的含义最好简单明了;图片内所含文字应该清晰容易辨认;背景与主体明度对比比例应为3∶1到5∶1之间为宜;淡色系列的背景有助于整体和谐;淡色材质背景最佳，能与主题分离之浅色标志或文字背景亦可。
6.文字
文字也是设计的。设计要点：每一行文字的长度最好20到30个中文字(40到60个英文字母);行距与字距已由软件内定。设计时注意段落与段落间空行及首行缩排方式以辅助阅读;标题以H1到H3字号为佳，内文Font size=3到4级为佳;同版面字型最好在三种以内;文字的颜色最好也是三种以内;文字在颜色上要与背景区别;内文的排列向左对齐并与左边界保持适当距离。可以用表格填入文字以达此效果;表格或清单内的字运用相同字型与字体大小，以利辨别。
二、整体规划
有共性，才有统一，有细节区别，就有层次;防止设计与实现过程中的偏差;设计的各部分，要配合整体风格;不仅页面上各项设计要统一，而且网站的各级别页面也要统一;信息不要太过集中，以免文字编排太紧密;不要有太多分散注意力的点。动态闪烁要适中;页面留白部分，要根据平面设计原理来设计，注意分栏式结构不宜留白;还要考虑到浏览器上部占用的屏幕空间，防止图片截断等造成视觉效果不好;首页设计图片+导航，这是一种比较强的网站表达，可以根据时间的变化更改图片。
三、功能易用性
导航栏应最先调入，以便访客快速前往所需信息空间;页面长度要短，使得用户在信息空间内可迅速移动;导航设计方向要一致。支持导航的层次按钮应当从上到下或从左到右，但不要两者都用，不要混用方向。
网页设计配色秩序
配色有理性的层面，也有感性的层面。配色也需要遵循一定的节奏，有的配色跳跃明快，有的又显得舒缓柔和。我们从理性出发的同时，也要把自己的思维深入到感性的层面去理解色彩。
主 色
主色是指在配色中处于支配地位的色彩。在配色前，主色是最先确定的色彩，例如，当我们想要设计一个珠宝展示的页面，我们决定这个页面所需要的色彩是紫色时，紫色就是主色。主色的确定看起来并不困难，因为一开始确定好主色只是定出一个宏观方向，并没有细化成具体的色调。主色的选择也非常自由，因为并没有完全正确的公论，每种色彩都有它的特性和优劣，没有最好的色彩或最差的色彩。
最终确定对主色色调的选择需要感性的参与，你希望你的网站看上去“沉稳典雅”还是“清新明快”?这些不同的感受都来自色调的制约平衡。
一般情况下，主色是配色中使用面积最大的色彩。用于主要的组件、组件的背景和大面积色块等。
页面中的主色是清爽的蓝色。尽管背景也运用了大面积的白色，但是黑白灰色属于无彩色，无彩色并不参与到配色过程中。红色是作为衬托色而出现的。
衬托色
衬托色是主色以外，为了衬托主色而出现的另一种色彩。衬托色通常为主色的互补色或对比色。衬托色所使用的面积可大可小，只要达到衬托的目的即可。
黄色是主色，蓝色是衬托色，黄蓝两色互为对比色。
衬托色也可用在面积较大的地方，和主色平分秋色，彼此呼应。
页面的主色为橙色，而衬托色为浅粉色，这两种色彩为邻近色，彼此饱和度上有非常明显的对比，也能很好地衬托出主色，为页面增加了气氛。
一组配色中一定会有一个主色，而衬托色并非是必不可少的。是否采用衬托色，取决于你的配色计划。通常单一的色彩会比较单调，而利用衬托色来强化主色的丰富变化是解决这一问题的方案之一。
背景色
背景色经常表现为无彩色(黑白灰色)或者低饱和度的色彩。背景色主要是作为背景而存在的，它最好不要以非常强烈的姿态出现。背景色并非具有某种功能，它是一个页面的基础底色。
页面的背景色为蓝绿色到蓝紫色的渐变色，因此配图时就应该考虑与背景色的搭配协调。
黑色作为背景色时，浅米色作为主色，主色和背景色之间相得益彰，这时的背景色也可看作衬托色。
强调色
强调色是在主色以外起强调作用的色彩，可以说它是非常重要的视觉焦点。它本身具有一种独立性，因此在配色上要形成与主色的强烈对比。它可以是主色的对比色、互补色等，使其与主色的色彩形成明显的对比。
页面的主色为蓝色，红色则作为强调色，在进入另一个页面时，红色又作为了主色，而紫色作为了强调色。
强调色所用的面积比较小，只要在焦点区域运用强调色，其本身就有着聚焦的作用。有时候强调色还扮演着衬托色的角色。
网页设计排版技巧分享
1、纠正行高
最常见的网页布局错误之一是定义了不正确的行高。行高是定义一行文本的高度，所以我们必须按照文本字体大小来设定行高。
一般来说，在设置文本行高的时候，我经常在字体大小的基础上加上7个像素(对12-17像素的字体而言)
body{
font-size:14px;
line-height:21px; /* 14px + 7px */
}
2、纠正标题margin值
另外一个常见的错误是标题周围不正确的margin值。标题其实是与它下面的段落是相关联的，而不仅仅是两个段落的分 割符。这就是为什么标题的margin-top比margin-bottom要宽。
3、不要使用过多的字体
为了确保可读性和专业性，你的网页上不应该使用超过3种字体。使用过多的字体会干扰你的用户而且让你的网站看起 来很乱。相反，较少的字体让你的网站显得干净易读。你可以标题使用一种字体，正文使用一种字体，最后 logo或副标题使用另外的字体。
4、代码部分使用等宽字体
如果你是一位开发者(就像大部分读这篇博客的人)你可能想贴一些代码在你的博客里。如果是这样，请使用等宽字体。 那么，什么是等宽字体?它就是字母和字符占相同水平宽度的字体。
那么在网站的代码段你应该使用哪种字体呢? 到目前为止 Courier字体是最流行的，那么尝试一下最新的一些字体像 Consolas或 Monaco怎么样呢?那你一定要看看这里咯。这里
5、关注对比
即使你的网站有很好的排版了，另一个需要注意的是对比。如果你的页面背景是中灰色(#999999)，那么不要使用深灰色(#333333)的文本，否则你的内容很难看清，尤其是对一些年纪比较大的或视力差的人。
总之，除非你的网站是关于黑客、黑帽seo或哥特摇滚的，不然你应该使用浅色背景和深色字体来保证清晰的对比度增加你网站的可读性。
6、只给链接的文本加下划线
在我上网的12年中，浏览器用在链接的默认样式一直是蓝色文本加下划线。虽然这个蓝色经常被改成另外的颜色，但下划线一直被当做是链接的常规样式。这就是为什么除了链接你不要给其他的东西加上下划线的原因。否则，这可能对你的用户造成很大的困惑。
7、创建样式库
让你的网站产生视觉震撼的一个简单高效的方法是给特殊的页面创建特殊的样式。例如，创建一个.warning的CSS类来向 你的用户显示“警告”。
8、按级别来排列标题和文本
为了增加可读性，给标题、介绍段落和常规文本创建标签层级是很重要的，这样你的用户可以看清你的文章结构并能很 快的找到他们感兴趣的部分。
9、大胆留白
我认为最重要的排版技巧之一是“大胆留白”。留白是指空白区或没有使用的空间，它会使你的设计整齐而专业。许多人 喜欢苹果网站的原因是：它尽管简单但很精致，而且有很多留白。
10、正确使用标点符号
如果你想提升你的排版水平不容忽视的一点是正确使用标点符号。例如，引号经常用双撇符号代替(译者注：我想作者要表达的意思应该是全角符号和半角符号的区别，就像中文的引号和英文的引号不同一样)。
注意区分双撇符号：
He said "Hello".
同样的文本，使用引号：
He said “Hello”.
这样更好，不是吗?如果你是WordPress用户，你可能很乐意知道你最喜欢的博客平台自动将双撇号转换为智能的引号 。否则，你得使用HTML字符编码。如下所示：
He said &s;ldquo;Hello”.
