网页布局和色彩搭配

网络已经影响到了我们生活和工作的方方面面，每天都有很多浏览网页。政府，学校，企业，甚至个人都有自己的网页。其实制作网页并不神秘，而在制作过程中，网页的布局和用色的非常重要。介绍了网页布局的设计方法和颜色搭配的技巧问题。

[关键词]布局 色彩  用色

中图分类号：TP3 　   文献标识码：B    文章编号：1002—6908（2007）0520   

 

网页不同的布局设计和颜色搭配会产生不同的视觉效果，直接影响到浏览者对网页的第一印象。精彩的网页往往布局整体美观，色彩搭配协调，令浏览者赏心悦目，流连忘返。那么，怎样设计布局和搭配颜色更合理呢？下面，我就此谈论一下。

网页布局就是安排网页组成元素，如：文字、图片的位置。报刊和杂志的排版样式值得我们学习借鉴，但又不可原样照抄，毕竟网页有它自己的特点。网页的布局通常是根据网站的类型设计的，不同的网站有不同的风格，但基本都有以下几个部分：网页标题，页眉，网站标识，导航栏，内容板块和页脚。

1．网页标题显示在浏览器的标题栏中，用于说明网页的内容。

2．页眉位于页面的上方，通常放置用户注册和登录的表单。

3．网站标识相当于企业的商标。一般显示于页眉下方，目的是加深浏览者对网站的印象。标识代表了网站的形象，在网站的宣传推广方面作用巨大，因此标识一般是经过精心设计的。

4．导航栏相当于网站向导。一般显示在和标识相邻的位置上。提供网站内容的索引，帮助浏览者快速查找网页信息。导航栏形式多样，可以是文字、图片或按钮。

5．内容版块网页的的主体。内容是网页的精髓，通常是有方向性的。可以根据网页内容再划分栏目版块。只有丰富多彩的网页内容，才能吸引浏览者的点击。

6．页脚位于页面的下方。一般放置网站的版权信息、联系方式等。

网页布局大致可以归纳为以下几种类型：

1．“国”字型也称“同”字型。结构特点是：页面上方放置网站标识、导航栏或横幅广告条。接下来页面内容版块分为左、中、右3栏。中间较宽，两边较窄。页面下方放置网站的版权信息、联系方式等。多数网站采用这种布局，结构清晰，整齐直观。

2．“匡”字型也称拐角型。结构特点是：页面上面是网站标识、导航栏或横幅广告条，左侧或右侧是一窄列链接等，右方或左方是很宽的正文，下面是一些网站的辅助信息。

3．上下型页面分为上下两大版块，其中每一版块都具有“国”字型或“匡”字型。

4．左右型 一种左右为分别两页的框架结构，一般左窄右宽。左面是导航链接，右面是正文内容。大部分的大型论坛都是这种结构，一些企业网站也喜欢采用。这种类型结构清晰，一目了然。

5．自由型页面布局就像杂志的封面或宣传海报，自由随意。可以放置设计精美的图片和按钮作为链接。

网页布局的设计通常分为以下几个步骤：

1．确定主题首先需要确定网页的目的，或者说网页的类型。例如：政府类网站，新闻类网站，学校类网站或娱乐类网站等。不同类型的网站采用的布局也不尽相同。政府类网站就不宜采用自由型布局。

2．构思布局网页最初呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在这个阶段，可以参考他人的布局结构，借鉴他人的布局经验。当然一定要有自己的创新，发挥想象力，结合实际，尽量特点鲜明、整齐大方。

3．绘制草图设计布局就像写作文一样，可以先打草稿。绘制草图就是想象中的布局实际化的过程。绘制草图时不必考虑细节，只要勾勒出大体轮廓即可。

4．确定布局这个阶段的设计方案应该是比较完备的，除了一些细节之外，其他内容应接近网页的实际浏览效果。

网页布局的实现技术：

1．使用表格很多网页设计师喜欢采用表格实现页面规划布局。我们随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打开它，你会看到这个页面是如何利用表格的。

使用表格的缺点是无法实现自由移动，因为最初创建表格是为了显示表格数据，而不是用于对 Web页进行布局。页面下载速度也受影响。

2．使用框架  框架提供将一个浏览器窗口划分为多个区域、每个区域都可以显示不同 HTML文档的方法。使用框架的最常见的情况就是，一个框架显示包含导航控件的文档，而另一个框架显示含有内容的文档。

3．使用 CSS样式可以在HTML代码中手动插入 div标签并对其应用 CSS 定位样式，也可以使用层来创建布局。层是被分配了绝对位置的 HTML页面元素－具体地说，是 div 标签或任何其他标签。

网页的色彩是树立网站形象的关键之一,起着画龙点睛的作用。作为一个网页设计师，只有掌握色彩构成原理，熟知各色彩间的相互关系及各种颜色的心理作用，结合平面构成知识，在网页设计中正确用色，才能实现传达特定信息和渲染页面的目的。

一、色彩的基础知识

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

自然界中的色彩分为有色彩和无色彩两类。无色彩指黑、白色和深浅不同的灰色。有色彩指除了无色彩以外的其他所有色彩。

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

红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如：红色是color (255,0,0)十六进制的表示方法为(FF0000)、白色为(FFFFFF),我们经常看到的"bgColor=#FFFFFF"就是指背景色为白色。

二、色彩的象征意义

根据色彩的心理作用，人们常常把色彩分冷色和暖色。冷色(如蓝色和绿色)给人的感觉是安静、冰冷；而暖色(如红色和黄色)给人的感觉是热烈、火热。冷暖色的巧妙运用可以让网站产生意想不到的效果。　

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

三、色彩的搭配原则　　

色彩搭配既是一项技术性工作，同时它也是一项艺术性很强的工作，因此，设计者在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、性格独特的网站。具体来说，应该遵循以下几个原则：

（一）色彩的鲜明性

一个网站的用色必须要有自己独特的风格，这样才能显得个性鲜明，给浏览者留下深刻的印象。如邮政类网站多采用绿色，微软的网页多采用蓝色。　　　　

（二）搭配的合理性

网页设计不仅色彩要漂亮，还要考虑人的生理特点，色彩搭配一定要合理，给人一种和谐、愉快的感觉，避免采用纯度很高的单一色彩，这样容易造成视觉疲劳。

（三）色彩的联想性

不同的色彩会产生不同的联想。例如：白色使人联想到白雪，黄色使人联想到丰收，黑色使人联想到夜晚。要考虑色彩的联想性，可以使浏览者印象深刻。

四、色彩搭配的注意问题
（一）使用单色

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

（二）使用邻近色

例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，从而达到页面的和谐统一。　　

（三）背景色的使用　　

背景色一般采用清淡素雅的色彩，避免采用复杂的图片作为背景色，同时背景色要与文字的色彩对比强烈一些。　　

（四）色彩的数量　　

初学者设计的网页往往五颜六色，看起来很花哨。事实上，网页用色并不是越多越好，一般控制在三种色彩以内，通过调整色彩的各种属性来产生变化。

以上是我从事教学中的一些心得和经验，希望会对读者有所帮助。