【译者的话】 很多综合性网站都在网页上挤满了信息以显示自己的“海量”，但对于很多小型企业来说，他们只希望自己的网页显得精致、优雅及专业，而且个性十足——小版面能够轻易做到这一点，而设计一个这样的版面关键是要分配好各个区域，我们是如何做的？

本文介绍的这个简单且漂亮的版面能够完美地配合一些专业及小型企业的宣传。

“我需要的只是一个小网站！”你有多少次听过这样的想法？如果你只是一家专业的小型公司或者一个小的分支机构，本文所介绍的版面就非常合适你。它显得清新，开阔，非常适合那些简短的文字介绍，同时也可以很好地配合你产品图片及作品的展示。这种设计属于一种小而精的设计，这种设计不是简单地将一个大版面减去一半。我们在设计这种版面时难度并不大，而且容易维护及方便阅读，看一下我们是怎么做的？

漂亮的字体标题放置在一个白色的版面中，传达了一种安静及自信的气息。整个版面显得简约、精致。

初看上面的网页，好象只有两个区域，一个是白色区域，一个是着色区域，但其实它是由四个区域组成，见上图。标志区域及白色的主要信息区域形成了强烈的对比。

在开始做这个版面时，首先要确定一些位置关系。你可以利用我们在文章后面提供的模板尺寸来设计。当然，如果你希望自己能够安排版面，也可以看一下我们是如何建立一个这样的版面的。

凡事一分为三：首先，我们定好总体的尺寸（比如，尺寸为 900 × 600px ）。同时，将宽及高同时一分为三，你可以将下面占三分之一的底部区域加上一种较深的颜色。同时，链接区域的颜色与标志区域的颜色略有不同（我们在上面所选择的链接区域颜色为标志区域颜色的 90% ），这样使人看起来仍然浑为一体。如果象小图那样，下面的颜色反差较大，则形成一种分离感，应该避免。

定好页边距：上图中（ 1 ），将刚才三分之一的区域的宽与高再分成三等分，使到左边距与上边距设为该区域的三分之一的距离。留意白色区域中，上下的页边距比左右的页边距更窄一些。（ 2 ），将刚才左边确定的页边距加宽 150% 来作为右边的页边距（也意味着，右边的页边距与左边的页边距比例仍为 3 ： 2 ）。顺便提一下，这些数值并不需要精确到像素，我们这样分配，只是为了尽可能让各种比例统一，从而使观看时更加一致和谐。通过刚才的两个步骤，我们就形成一个放置信息的区域（上图虚线处）。

元素的安排应该以底线为基准（与我们设计一般的网页刚好倒过来，道理何在？因为一般的网页中，标志及链接都是放在上面，而在这里，它们是在底部，所以我们安排元素应该从下到上来配合这种转变）。象上图中，无论是文字还是图片，都需要与加亮的这一点为准。也意味着，所有的文字与图片都要接触到这个基线。左侧的文字为右对齐，这样文字与图片的交接处才显得整洁。

[1] [2] [3] 下一页