网页版面布局设计的探讨

摘要：网页版面布局设计是整个网站构思和网页制作过程中最重要的一部分，本文通过案例分析，对网页版面布局的基本要素；设计的一般步骤；以及应该遵循的原则做了一些介绍和探讨。

关键词：网页制作；版面；布局

中图分类号：TP393.092文献标识码：A文章编号：1007-9599 (2010) 16-0000-01

Discussion on the Design of Web Page Layout

Zeng Linghui

(Wuhan Vocational College of Software&Engineering,Wuhan430205,China)

Abstract:Web layout design is the most important part of the concept and web production process in this paper,via case analysis,the basic elements of page layout;general steps of the design;and should make some principles presented and discussed.

Keywords:Web production;Forum;Layout

一、网页版面布局的基本要素

网页版面布局设计是整个网站构思过程中最重要的一部分，一个精美的网站，其网页版面布局一定是优秀的。文字和图片是网页的最基本元素，我们可以把网站看作是一份报纸或杂志来进行版面布局设计。

版面指的是用浏览器看到的一个完整的页面，由于浏览者遍布世界各地、所用电脑显示器的分辨率不尽相同，所以同一个页面会出现不同的显示效果。网页的局限就在于我们无法突破显示器的范围，而且浏览器也将占去一定的空间，因此、网页的尺寸比显示器的分辩率要小的多（见表一）。

布局就是以最合适的浏览方式将图片和文字排放在页面的不同位置，目的在于以纯美的页面效果吸引更多的访问者（当然页面的信息必须有价值）。

网页的第一屏属“黄金”区域，在版面布局时，要把网页的重要内容尽可能的放在第一屏。向下拖动网页是给网页增加更多内容的唯一方法，但经验告诉我们，除非你能肯定站点的内容能吸引大家拖动，即便如此，对于中小型站点，笔者认为首页的长度最多不宜超过2屏。

二、常规版面布局样式分析

网页版面布局，根据个人爱好及网页内容的不同，其版面布局千变万化。这里对两种得到公众认可的分栏式版面布局（见图1、2）作一分析介绍：

无论网页采用什么版式，对于一个正规的站点而言，网页中的一些基本内容是必不可少的，这些内容在页面中的位置多数情况下也是固定不变的。如LOGO（标志）一般位于页面左上角；Banner（横幅）置于图1所示右上方位置，有时在Banner之后布置Time，用来显示日历和时间（图2）；主导航菜单一般位于版面第二行的显著位置；分栏网页内容位于第三行页面中，布局的变化多样主要表现于此；版权信息（包括次链接及联系方式等）一般置于网页的最底部。

三、网页版面布局的方法和步骤

版面布局是一个创意的问题。作为网页设计者，在制作网页的时候，应该不时地把自己当作访问者，站在他们的角度评价网页是否符合一般的浏览习惯，界面样式是否有新意、吸引人。版面布局要比站点的整体创意容易、有规律的多，其一般步骤如下：

（一）草案。最初展现在我们面前的网页就好像一张白纸，它可以让我们任意挥洒设计才思，充分发挥你的想象力，将你想到的"景象"用铅笔粗略地画在一张白纸上（也可以用各种绘图软件做草案）。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，反复比较优化，最后选定一个满意的作为继续创作的脚本。

（二）粗略布局。在草案的基础上，用网页制作软件将你确定需要放置的各个模块安排到页面上。在安排各模块时，我们必须遵循突出重点、平衡协调的原则。

（三）定案。将粗略布局精细化，具体化。

四、版面布局设计应遵循的一般原则

在版面布局过程中，我们应该遵循如下一般性原则：

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

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

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

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

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

1.网页的白色背景太虚，则可以加些色块；

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

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

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

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

要提高版面布局设计水平，第一要多看：WWW上的网页数以亿计，各种版面布局样式美不胜收，我们要多看人家的成功之作；第二是模仿：模仿是初学者提高水平的捷径，当你上网浏览时，把那些你认为不错的站点收集起来，再用网页制作软件打开来仔细推敲，会有许多意想不到的收获。经过不断的尝试和吸取众家之长，你的网页版面布局水平就会大幅度提高。

参考文献：

[1]宋琳,董鲁平.网页制作技术[M].清华大学出版社,2000

[2]黎文峰,李素青.Dreamweaver8完美网页设计[M].中国青年出版社,2007