固定布局与流式布局

固定式网页布局

固定布局(Fixed Layout)使用固定宽度的包裹层(Wrapper), 内部的各个部分可以使用百分比或者固定的宽度来表示. 这里最重要的是, 外面的所谓包裹层(或称为容器)的宽度是固定不变的, 所以不论访问者的浏览器是什么分辨率, 他们看到的网页宽度都彼此相同.

图一: 固定宽度的网页布局

上图显示了一个典型的固定网页布局, 外层宽度为960像素, 内部分别为520, 200和200像素的宽度. 实际上, 960像素已经成为了行业标准, 因为主流用户的屏幕分辨率往往是1024×768或者更高.

流式网页布局

流式布局(Fluid Layout 或 Liquid Layout), 主要使用百分比来设置各个部分的宽度, 用来适应不同的分辨率. 有时候, 对于网页中的某一部分元素(比如边界值, 侧边栏), 可以使用固定宽度, 但大部分元素是使用百分比来控制的.

图二: 流式或称液态网页布局

小结

在设计网页布局的时候, 设计者应考虑到以下情况:

• 屏幕分辨率
• 用户使用的浏览器
• 浏览器是否最大化了
• 浏览器的侧栏是否打开
• 甚至是用户的操作系统和硬件配置

当然, 设计的主要原则是可用性(usability).

本文大部分翻译自smashingmagazine, 原文讨论了各种网页布局的优缺点, 配有丰富的实例, 点击这里前往观看.