网站的技术随着时代的步伐在不但的进步，但正如你所看到的一样，网站的页面布局并没有跟上网络技术的步伐，当然回首很久以前，从事网站建设的朋友也会感觉到这种布局的变化。因此，网站的布局决定了整个网站和用户交互的体验而变得越来越重要，因此，本文就针对网站的布局谈谈自己的看法。

一、网页布局的基本概念

最开始，网站建设呈现在你面前的时侯，它就好像一张白纸，它需要你任意挥洒你的设计才思。在开始的时侯，你需要明白，虽然你能控制一切你所能控制的东西，但假如你知道什么是一种约定俗成的标准或者说大多数访问者的浏览习惯，那么你可以在此基础上加上自己的东西。你当然也可以创造出自己的设计方案，但如果你是初学者，那么最好明白网页布局的基本概念。

1.整体造型：

什么是造型，造型就是创造出来的物体形象。这里是指网页的整体形象，这种形象应该是一个整体，图形与文本的接合应该是层叠有序。虽然，显示器和浏览器都是矩形，但对于网页的造型，你可以充分运用自然界中的其它形状以及它们的组合：矩形，圆形，三角形，菱形等。

对于不同的形状，它们所代表的意义是不同的。比如矩形代表着正式，规则，你注意到很多ICP和政 府网页都是以矩形为整体造型；圆形带表着柔和，团结，温暖，安全等，许多时尚网站喜欢以圆形为网页整体造型；三角形代表着力量，权威，牢固，侵略等，许多大型的商业网站为显示它的权威性常以三角形为网页整体造型；菱形代表着平衡，协调，公平，一些交友网站常运用菱形作为网页整体造型。虽然不同形状带表着不同意义，但目前的网页制作多数是接合多个图形加以设计，在这其中某种图形的构图比例可能占的多一些。

2.网页尺寸：

由于网页尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的网页范围变得越来越小。一般分辨率在800x600的情况下，网页的显示尺寸为：780x428个象素；分辨率在640x480的情况下，网页的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，网页的显示尺寸为：1007x600。从以上数据可以看出，分辨率越高网页尺寸越大。

浏览器的工具栏也是影响网页尺寸的原因。一般目前的浏览器的工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，网页的尺寸是不一样的。

在网页设计过程中，向下拖动网页是惟一给网页增加更多内容(尺寸)的方法。但我想提醒大家除非你能肯定网站的内容能吸引大家拖动，否则不要让访问者拖动网页超过三屏。如果需要在同一网页显示超过三屏的内容，那么你最好能在上面做上网页内部连接，方便访问者浏览。

3.文本：

文本在网页中出现都数以行或者块(段落)出现，它们的摆放位置决定者整个网页布局的可视性。在过去因为网页制作技术的局限，文本放置的位置的灵活性非常小，而随着DHTML的兴起，文本已经可以按照自己的要求放置到网页的任何位置。

4.页头：

页头又可称之为页眉，页眉的作用是定义网页的主题。比如一个网站的名字多数都显示在页眉里。这样，访问者能很快知道这个网站是什么内容。页头是整个网页设计的关键，它将牵涉到下面的更多设计和整个网页的协调性。页头常放置网站名字的图片和公司标志以及旗帜广告。

5.页脚：

页脚和页头相呼应。页头是放置网站主题的地方，而页脚是放置制作者或者公司信息的地方。你能看到，许多制作信息都是放置在页脚的。

6.多媒体

除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也已变得非常重要。

7.图片

图片和文本是网页的两大构成元素，缺一不可。如何处理好图片和文本的位置成了整个网页布局的关键。而你的布局思维也将体现在这里。

二、网页布局的技术

1.层叠样式表的应用

在新的HTML4.0标准中，CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是一个好的布局方法。你曾经无法实现的想法利用CSS都能实现。目前在许多网站上，层叠样式表的运用是一个网站优秀的体现。你可以在网上找到许多关于CSS的介绍和使用方法。

2.表格布局

表格布局好像已经成为一个标准，随便浏览一些网站，它们还是有很多是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，网页下载速度受到影响。对于表格布局，你可以随便找一个网站的首页，然后保存为HTML文件，利用网页编辑工具打开它(要所见即所得的软件)，你会看到这个网页是如何利用表格的。

3.框架布局

不知道什么原故，框架结构的网页开始被许多人不喜欢，可能是因为它的兼容性、搜索引挚的收录。但从网页布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同网页加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。

三、网页布局的方法

网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。下面分别加以介绍：

1.纸上布局法

许多网页制作者不喜欢先画出网页布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出你网页的布局草图来，试想一下一个在纸上勾画出十个方案的人他的脑子里已有十个以上的构思，但另一个在电脑上操作的人速度会慢很多。

准备若干张白纸和一只铅笔，你要设计一个时尚网站时，铅笔会比鼠标快Ｎ倍。

*尺寸选择：

目前一般1024X768的分辨率为约定俗成的浏览模式。所以为了照顾大多数访问者，你网页的尺寸以小于1024X768的分辨率为准。

*造型的选择：

先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了。选择一个形状作为整个网页的主题造型，我们选择圆形，因为它代表者柔和，和时尚流行比较相称，然后在矩形框架里随意画出来，你可以试者在增加一些圆形或者其它形状。这样画下来，你会发现很乱。其实，如果你一开始就想设计出一个完美的布局来是比较困难的，而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点，你不要担心你设计的布局是否能够实现。事实上，只要你能想到的布局都能靠现今的HTML技术实现。

*增加页头：

一般页头都是位于网页顶部，LOGO及主体代表形象。

*增加文本：

网页的空白部分加别加入文本和图形。因为在网页右边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调，铅笔会为你的重复修改提供足够的速度。

*增加图片：

图片是美化网页和说明内容必须的媒体。在这里把图片加入到适当的地方。

经过以上的几个步骤，一个时尚网页的大概布局就出现了。当然，它不是最后的结果，而是你以后制作时的重要参考依据。

2.软件布局法

如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。

我今天来介绍的布局指南并不是全部的网页布局技术，从某种意义上来说，我想引导你在制作网页的时侯，怎样把图片和文本放置的恰到好处，而且如何拥有一个跳越的设计思维。

有朋友问我，如何使用色彩？答案简单得很，先学会用黑白颜色做几个布局不错的设计出来吧，你会发现，当你熟练使用黑白搭配后，随便加入几个鲜艳的色块就很协调。不要急于做那些色彩丰富的设计，那样会使你的页面很乱……慢慢来，时间也是个很好的导师。