有关网页布局设计的讲解

图1-11 网页效果图

当把网页效果图中的各个内容区域看成为一个个的“矩形块”后，按照从上到下，从左到右的顺序对网页的布局结构进行分析，最终得到的效果如图1-12所示。

图1-12 网页的布局结构

从上图中可以看出，网页的整体布局结构划分为四行（从上到下），第一行来制作Logo，第二行制作导航，第三行制作内容，第四行制作版权信息。然后在第三行又拆分为两列（从左到右），分别在左右两列中制作不同的内容。

在这个基础上，可以对网页布局进行更细致的拆分，如果说前面的拆分是用来制作网页的大框架，那么接下来拆分的就是内容区域了，这里分析的方法和前面是完全一样的，拆分后的效果如图1-13所示，其中的文本表示在当前“矩形块”中放置的内容。

图1-13 进行更加细致的拆分

这样，一个网页的布局就初步形成了，至于把什么内容放置到什么位置，这个可以按照网页内容的重要程度，结合人的视觉流程来确定。因为中国人在阅读的时候总是按照从上到下，从左到右的顺序，所以对于网页而言最重要的位置应当是网页的左上角，这也就是为什么所有网页的左上角都是标志的原因。而最次要的位置应当的网页的右下角，所以在网页的最下方一般都是版权信息。把最重要的信息放置在网页左上的位置，而相对次要的信息则可以放置到网页右下的位置。

最后，所有的网页布局都可以在如图1-14所示的布局原型上变形而来，读者可以多找一些现成的网页效果图，按照这里所介绍的方法进行分析对照，从而掌握网页布局的方法。

1-14 网页布局的基础原型

网页布局设计在整个网页设计的流程中都会发挥其重要的作用，网页效果图设计、网页效果图切片、网页布局都会按照最先的布局设计来实现。相关的具体内容，将在后面的章节进行详细的介绍。