固定宽度布局

固定宽度的布局，就像它的名字一样，是一种以像素为单位、宽度固定的静态布局。这类布局的外层宽度都是固定的，内部使用了百分比或者固定的宽度。这样一来，设计师对内容区域周围的设计元素就有了更大的控制力，并且能够更精确地设计内容和导航的宽度。设计师根据自己的经验和探索，可以对页面中的字体、图片和平衡关系进行更精确的规划。固定宽度的设计可以确保所有设计中的平衡关系能够始终如一，不管用户使用什么样的浏览器，这种平衡永远不会被打破。

固定宽度布局正是由于其简洁、直观、易于实现和定制的特性，成了一种非常流行的选择。使用固定宽度布局，可以确保在不同分辨率下的设计效果保持一致。设计师不用去猜测用户使用什么客户端，测试也变得简单，从而在总体上缩短了开发时间。特别是固定宽度布局使用绝对的像素值，这比相对单位的百分比或者em（基于字体大小）更能让设计师感到舒服和直观。严格按照像素来定位内容区域也许就是固定宽度布局最为显著的特点（图4.1）。

图4.1

例如，Colourpixel 的首页就使用了950 px的固定宽度布局。图4.1就是用户将浏览器设置为1 045 px宽度时的效果。

固定宽度布局所用的宽度往往由显示器的平均分辨率决定。当下，大多数用户都已经拥有了1 024 px×768 px或更高分辨率的显示器，所以大多数设计师选择使用960 px或者1 050 px作为固定宽度布局的宽度。这个宽度可以避免水平滚动条的出现，并且为多数浏览器中都会出现的20 px的垂直滚动条留下了充足的空间。但是，对于低分辨率的屏幕，设计师需要多加注意，如果固定宽度布局的宽度过宽，则会出现水平的滚动条。

固定宽度布局的一个优势在于设计要素易于定位，结果容易预测。确定了布局的宽度，定位元素就不会很复杂。另外，即使一个网站设计师考虑兼容最小的800 px×600 px分辨率显示器，在高分辨率的情况下，内容区域仍会清晰可辨。那些从平面设计领域转行到基于网页的设计领域的设计师趋向于选择固定宽度布局，因为他们热衷于精确的控制，毕竟在传统的印刷设计中普遍采用绝对定位的方式（图4.2）。

图4.2

同一个网站在不同分辨率下的情况：浏览器的分辨率为1 680 px，这时布局的右侧显示了大量的空白。

固定宽度布局的缺点是没有充分利用用户显示器的全部显示区域。当然，屏幕的分辨率不一定会和浏览器的分辨率相同，因为很多“宽屏”不会最大化浏览器窗口。但是，如果用户有一个很大的宽屏显示器（例如，分辨率1 900 px×1200 px，浏览器分辨率1 500 px），屏幕中很大一部分没有被使用的假设就比较合理了。例如，浏览一个750 px宽的固定布局，空白区域的水平宽度会和布局一样宽。

因此，固定宽度布局产生了过度的空白，扰乱了黄金比例、三分构图、总体平衡或者其他的设计原则。那些顺畅的纹理、图案和连续的图片也需要适应高分辨率的情况。最后，强烈推荐使用一个居中的DIV来维护固定宽度设计中的平衡感。

#wrapper { margin:0 auto;}

这段代码可以实现这个效果。如果不这么做，在那些拥有高分辨率显示器的用户看来，整个布局会藏在左上的角落里。

那么，如何确定什么尺寸是最合适的呢？许多用户有了很大的宽屏显示器，但更多的人还在使用普通尺寸的显示器，还有一些人仍在使用低分辨率显示器。不管是哪种情况，多数用户都会将窗口调整到他们喜欢的尺寸，而不是使用最大化的、标准的或者和屏幕分辨率成比例的窗口大小。

在实践中，为网站固定宽度布局找一个最佳的平衡点通常需要对网站的用户资料进行深入的研究。通常的做法是评定访问者的浏览偏好，然后相应地调整设计。最常用的方法是分析网站的统计数据，找到使用最多的分辨率，并分析有多少用户使用较低的分辨率。根据通常的经验，可以将宽度设置在800～1 000 px。作为专业人士，必须为用户而不是自己创建合适的布局，即使设计师的设计在高分辨率的宽屏笔记本上看起来很糟糕。

下面，就来创建一个简单的两栏的固定宽度布局。这个布局有一个放置Logo的标题区域、主导航以及一个实现额外信息的底部区域。HTML 代码如下所示。

＜div id="container"＞

＜div id="header"＞

＜!-- logo, navigation --＞

＜/div＞

＜div id="content"＞

＜!-- main content --＞

＜/div＞

＜div id="sidebar"＞

＜!-- sidebar --＞

＜/div＞

＜div id="footer"＞

＜!-- site information --＞

＜/div＞

＜/div＞

为了固定宽度，在 #container 层上设置width（宽度）属性，同时为左右两栏设置固定宽度。为了让头部和底部与容器等宽，设置宽度为100%（尽管在大多数的时候这个属性是不必要的，但这是一个很好的习惯，可以确保这两个区域确实与容器等宽）。

本例中使用了float属性来让左侧和右侧的栏目得到正确显示（当然，也可以使用相对或者绝对定位），同时使用clear属性确保底部显示在两个栏目下方。另外，还需要在其他类型的浏览器上进行测试，确保布局能够在不同的浏览器上正常显示（图4.3）。

图4.3

网站使用了固定宽度布局。#content 层的宽度固定为900 px。

#container {

margin: 0 auto;/* Centering the layout horizontally */

width: 960px;

}

#header {

width: 100%;

}

#content {

width: 600px;

float: left;

display: inline;/* IE 5/6 Doubled Float-Margin Bug 消除IE5/6 中的浮动元素边距加倍的bug */

}

#sidebar {

width: 330px;

/* 960px - 600px - 330px = 30px is used to separate columns */

float: right;

display: inline;/* IE 5/6 Doubled Float-Margin Bug */

}

#footer {

width: 100%;

clear: both;

}

选择固定宽度布局还是其他类型的布局，其实是一个设计师愿意给用户多少自由的问题。前者把设计的决策交给了设计师而不是用户；后者则允许用户根据喜好调整字体、图片以及列宽（图4.4）。

图4.4  固定宽度布局图例

对于固定宽度布局，人们普遍认为，从长远看来，其代码维护困难。如果设计中使用了固定尺寸的字体（尽管IE6的用户完全不能改变文字的尺寸），有一天客户要求加大某些特定的设计元素的尺寸（例如文本），重新计算并修改文本的尺寸将会成为一场“噩梦”。一个比较好的方法应当是使用元素之间的比例关系来决定设计的尺寸（例如使用相对值），这就是接下来要介绍的灵活布局（自适应布局和弹性布局）。