网页顽主色彩设计指南

色彩对于事物的表现能力有着其他形式无法比拟的超强效果。在我们生活里,色彩无处不在，它是构成我们生活环境的重要组成部分。可以说我们对每一件事物的认知，都是从色彩与形状开始的，我们也在用色彩创造丰富的视觉空间，用颜色的语言与社会进行沟通。日常生活中，人们对色彩的反应都是有一定的规律。为此，人们把每种颜色都富裕了特殊的感情意义。

色彩构成（Interaction of Colour)，即色彩的相互作用，是从人对颜色的知觉和心理效果出发，用科学分析的方法，把复杂的色彩现象还原为基本要素，利用色彩在空间.量与质上的可变幻性，按照一定的规律去组合各构成之间的相互关系，再创造出新的色彩效果的过程。色彩构成是艺术设计的基础理论之一，它与平面构成及立体构成有着不可分割的关系，色彩不能脱离形体.空间.位置.面积.肌理等而独立存在。作为一个网页设计师，只有掌握色彩构成原理，熟知各色彩间的相互关系及各种颜色的生理或心理作用，结合自己所具备的平面构成知识，在网页设计中正确用色，才能实现传达特定信息和渲染页面的想国的目的

1、光与色彩

色彩是由光的刺激而产生的一种视觉效应。光是产生色的原因，色是光感觉的结果。

光在物理学上是电磁波的一部分，其波长自700-400mm,在此范围称为可视光线。当把光线引入三棱镜时，光线被分为红.橙.黄.绿.青.蓝.紫，因而的出自然光是七色光的混合。这种现象被称作光的分解或光谱，七色光谱的颜色分布是按光的波长排列的。

2、物体色

物体本身是不会发光的，之所以能看到它，是因为光源经物体表面的吸收.反射，反映到视觉中的光色感觉。

物体在自然光照下，只反射其中一种波长的光，而其他波长的光全部吸收，这个物体则呈现反射光的颜色。如果某一物体反射所有的光，那么，我们便感觉这个物体是白色的；如果把七色光全部吸收，那么就呈现一种黑色；实际上，相识生活中的颜色足极其丰富的，各种物体不可能单纯反射一种波长的光，它只能对某一波长的光反射得多，而对其他波长的光按不同的比例反射得少。因此，物体的颜色不可能是一种绝对标准的色彩，而只能是倾向某一种颜色，同时又具有其它色光的部分。所以说物体的颜色是受光源的色彩和该物体的选择吸收与反射能力所决定的。

3、计算机色彩显示

我们知道物体的色彩是对色光反射的结果。那么，计算机显示器的色彩有时如何生成的？

色彩显示器产生色彩的方式类似于大自然中的发光体。在显示器内部有一个和电视机一样的显象管，当显象管内的电子枪发射出的电子流打在荧光屏内侧的磷光片上时。磷光片就产生发光效应，由此精确控制各个磷光片的光波的波长，再经过合成叠加，就模拟出自然界中的各种色光。

二、原色

不能用其他色混合而成的色彩叫原色。用原色却可以混出其他色彩

原色有两个系统，一种是色光方面的，即，光的三原色，如图3-2。另一种是色素方面的，即，色素三原色

色光的三原色：红光-red. 绿光-green. 蓝光-blue

色素的三原色：品红-magenta. 黄色- yellow. 青色-cyan

1、色彩的正混合

正混合指色光的混合。将太阳光线引入三棱镜时，光线被分离为红.橙.黄.黄.绿.青.蓝.紫的光谱。同样，我们可以在实验室里把单色光混合成其他颜色的色光，得出如下的实验结果：

红光+绿光+蓝紫光=白光

红+绿=黄光

红光+蓝紫光=紫红光

可以看出色光的混合特征，两色或多色光相很和，混出的新色光，明度增高，明度是参加混合各色光明度之和。参混合的色光越多。混出的新色的名度就越高，如果把各种色光全部混合在一起则成为极强白色光。所以，把这种混合叫正混合或加法混合。

在色环上，相混合的两色光在色相环上的距离较近，中等，较远相混，形成的新色光均为相两色光的中间色光。相距近混出的新色光纯度高，相距远混出的新色观纯度低，相距最远的补色光相混，混出的光为白光，其纯度消失。混出新色光的明度为参加相混色光明度之和

电脑显示器的色彩是通过荧光屏的鳞片发出的色光通过正混合叠加出来的，它能够显示车百万种色彩，其三原色是红-red. 绿-green. 蓝-blue，所以称之为RGB模式

2、色彩的负混合

负混合指色素的混合，色素的混合是明度减低的减光现象，所以叫负混合或减法混合。如图3-3。颜料.染料.涂料等色素的性质与光谱上的单色光不同，是属于物体色的复色光，色料的显色是把白光中的色光经部分选择与吸收的结果，所反射的和说吸收的色光里，个含有集中不同的单色光。因此，色素间的负混合现象，不是属于反射部分的色光混合的结果，而是吸收部分相混合的所增加的减光现象

在色环上相混合的两色距离近，渔利中等，毅力较远的色相混，混合的结果均为相混两色的中间色。两色相距较近时，混出的色纯度降低的少；另色相距远时，混出的色出的减低的多。若两色为相距最远的互补色时，混出的新色纯度消失，明度降低为黑灰色

因此要混合出纯度较高的新色彩，一定要选择在色环上距离较近的色。如，用黄绿和蓝绿混户出的绿色，一定要比用黄和蓝混合出的绿色的纯度高。　　如今，互联网越来越走近我们的生活，网上冲浪也渐渐成为我们生活不可缺少的一部分。网络世界五彩缤纷，涌现出大量优秀精美的网页。大量网络信息的呈现，无非就是通过文本、图像、Flash动画等，其中， 文本是网页中最为重要的设计元素。 对于网页设计初学者而言，了解和掌握网页设计中的文字排版设计就显得尤为重要，下面笔者想谈谈一己之见。

　　文字的格式化

　　1.字号、字体、行距字号大小可以用不同的方式来计算，例如磅(Point)或像素(Pixel)。因为以像素技术为基础单位打印时需要转换为磅，所以，建议采用磅为单位。

　　最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。需要注意的是，小字号容易产生整体感和精致感，但可读性较差。

　　网页设计者可以用字体来更充分地体现设计中要表达的情感。字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。例如:粗体字强壮有力，有男性特点，适合机械、建筑业等内容;细体字高雅细致，有女性特点，更适合服装、化妆品、食品等行业的内容。在同一页面中，字体种类少，版面雅致，有稳定感;字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。

　　从加强平台无关性的角度来考虑，正文内容最好采用缺省字体。因为浏览器是用本地机器上的字库显示页面内容的。作为网页设计者必须考虑到大多数浏览者的机器里只装有三种字体类型及一些相应的特定字体。而你指定的字体在浏览者的机器里并不一定能够找到，这给网页设计带来很大的局限。解决问题的办法是:在确有必要使用特殊字体的地方，可以将文字制成图像，然后插入页面中。

　　行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。这主要是出于以下考虑:适当的行距会形成一条明显的水平空白带，以引导浏览者的目光，而行距过宽会使一行文字失去较好的延续性。

　　除了对于可读性的影响，行距本身也是具有很强表现力的设计语言，为了加强版式的装饰效果，可以有意识地加宽或缩窄行距，体现独特的审美意趣。例如，加宽行距可以体现轻松、舒展的情绪，应用于娱乐性、抒情性的内容恰如其分。另外，通过精心安排，使宽、窄行距并存，可增强版面的空间层次与弹性，表现出独到的匠心。

　　行距可以用行高(line-height)属性来设置，建议以磅或默认行高的百分数为单位。例如:{line-height:20pt｝、{line-height:150%｝。

　　文字的整体编排页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。从艺术的角度可以将字体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。在网页设计中，字体的处理与颜色、版式、图形等其他设计元素的处理一样非常关键。从某种意义上来讲，所有的设计元素都可以理解为图形。

　　1.文字的图形化字体具有两方面的作用:一是实现字意与语义的功能，二是美学效应。所谓文字的图形化，即是强调它的美学效应，把记号性的文字作为图形元素来表现，同时又强化了原有的功能。作为网页设计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化的设计。无论怎样，一切都应围绕如何更出色地实现自己的设计目标。

　　将文字图形化、意象化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心。

　　2.文字的叠置文字与图像之间或文字与文字之间在经过叠置后，能够产生空间感、跳跃感、透明感、杂音感和叙事感，从而成为页面中活跃的、令人注目的元素。虽然叠置手法影响了文字的可读性，但是能造成页面独特的视觉效果。这种不追求易读，而刻意追求“杂音”的表现手法，体现了一种艺术思潮。因而，它不仅大量运用于传统的版式设计，在网页设计中也被广泛采用。

　　3.标题与正文在进行标题与正文的编排时，可先考虑将正文作双栏、三栏或四栏的编排，再进行标题的置入。将正文分栏，是为了求取页面的空间与弹性，避免通栏的呆板以及标题插入方式的单一性。标题虽是整段或整篇文章的标题，但不一定千篇一律地置于段首之上。可作居中、横向、竖向或边置等编排处理，甚至可以直接插入字群中，以新颖的版式来打破旧有的规律。

　　4.文字编排的四种基本形式页面里的正文部分是由许多单个文字经过编排组成的群体，要充分发挥这个群体形状在版面整体布局中的作用。

　　两端均齐:文字从左端到右端的长度均齐，字群形成方方正正的面，显得端正、严谨、美观。

　　居中排列:在字距相等的情况下，以页面中心为轴线排列，这种编排方式使文字更加突出，产生对称的形式美感。

　　左对齐或右对齐:左对齐或右对齐使行首或行尾自然形成一条清晰的垂直线，很容易与图形配合。这种编排方式有松有紧，有虚有实，跳动而飘逸，产生节奏与韵律的形式美感。左对齐符合人们阅读时的习惯，显得自然;右对齐因不太符合阅读习惯而较少采用，但显得新颖。

    Google实验室总是会有许许多多的新奇想法。2006年2月23日，它又给我们带来了惊喜。这一次给我们带来的是一个名叫Google Page Creator的东西，利用这个在线网页编辑工具，我们也可以过一回网页制作的瘾了。在免费网页空间铺天盖地的今天，Google又会用怎样的手法来诠释网页制作这一理念呢？就让我们揭开Google Page Creator的神秘面纱，一探究竟。

    Google Page Creator需要使用Gmail帐号登陆，好在现在Gmail已经是遍地开花了。在浏览器中输入“http://pages.google.com”便可进入Google Page Creator。首次登陆会看到一个欢迎界面，这里介绍了Google Page Creator的诸多优点。Google在这里表示这个服务的用途是：“Create your own web pages, quickly and easily.（快速、简单地创造属于你自己的网页）”。这时，在网页下部勾选“I have read and agree to these Terms and Conditions（我已经阅读并认同协议）”，再单击“I'm ready to create my pages（看是创建我的网页）”按钮，就可以进入Google Page Creator的世界了。
进入Google Page Creator后，我们可以看到一个类似于Gmail的页面（如图1），这就是Google Page的编辑页面了。除了网页中部的编辑区以外，我们在页面上划分了五个工具区域，先来了解一下各个区域都能实现哪些功能。

图1

    ①．管理区域：发布和管理网页。网页编辑完成后，点击“Publish（发布）”可以发布网页；而点击“Back to Page Manager（返回页面管理）”则可以进入网站管理。

    ②．撤销（Undo）与重做（Redo）区域。

    ③．外观与框架区域：用以改变网页的外观和框架。在Google Page Creator中为用户提供了多种网页模板和4种网页框架可供选择。

    ④．工具栏：点击相关按钮，可以快速插入图片、创建超链接、改变文字格式等多种操作。

    ⑤．文字样式区：单击选项可以设定不同的文字样式，还可以直接编辑HTML源代码。
当我们了解了网页编辑器的操作界面后，就让我们动手制作一个首页吧！
首先单击工具栏的两个链接，把网页更改成自己喜欢的样式和框架。接着就可以在编辑区输入文字了（编辑区是所见即所得的），就跟我们用FrontPage等软件一样，能够直接显示网页的样子。通过工具栏，我们可以设置编辑区中文字的大小、颜色等选项，并在文字样式区还可以将文字设置为不同级别的标题与内文。

    当然，全部是文字的网页肯定不好看，那么我们还需要在网页中添加一些图片。在编辑区将光标定位在要插入图片的地方，点击工具栏的“Image片）”按钮，在弹出的对话框中，我们可以选择上传自己的图片或是引用网络中的图片。目前Google为每个用户提供了100MB的网页空间，对于一般的个人网站可以说是绰绰有余。选择图片后点击“Add Image（添加图片）”即可添加图片。在编辑区选择添加的图片，会出现一个工具栏（如图2），借助这个工具栏可以调整图片大小、制作缩略图等操作，方便用户编辑以适合网页排版，还可以方便地删除图片。