为什么要用960px？——网页内容宽度分析

为什么要用960px？——网页内容宽度分析

液晶还没普及的年代，网页设计需要考虑800×600的分辨率。但如今800×600的分辨率使用率不到2%，已经可以忽略了。比这个分辨率高一级别的1024×768，使用率接近50%(国内)，所以很多网站都是以1024的宽度为标准进行设计的，最常见的页面宽度是两种：1004和960。

早期的网页设计师使用1004px作为页面宽度，是基于这样的考虑：在1024*768的分辨率下打开IE，左边框宽度是2px，右边滚动条的宽度是18px，于是得出宽度就是1004px了。但这种宽度的设置并不利于栅格化布局的计算，如果选择三栏式的布局，就很难平均分配，所以现在很少有使用1004px宽度的网页了。

在比1004小的整数里，可以被较多数字整除的最大整数是960：

双栏布局：

三栏布局：

四栏布局：

所以，大多数设计师选择了960px作为网页的宽度。

确定了网页的宽度之后，接下来确定内容的宽度。通常我们都是直接按照黄金比例来进行划分，也就是将内容设定为600px，余下部分用作侧边导航。但内容的宽度还需要计算间距、留白，以及考虑文字和图片的搭配比例，比较规范的做法是绘制布局框架图。

一、自建布局框架图

自制布局框架图适用于不借用电脑，只在纸上画设计草图的阶段。上图是Jason Beaird在Principles of Beautifu Web Design提出的一种内容布局方式，首先将一张960px的画布划分为九等份(上图前两步)，再把第一行切出三分之一，最后再把每一列都对半分，就得到一张布局框架图了。依照此布局图安排内容即可(图片来自Principles of Beautifu Web Design)

二、模板布局框架图

960 Grid system中提供了很多现成的布局框架图。分12、16、24栏三种：

上图是12栏的样式图。静态网页样式图已经上传到本地，可以点击这里访问。使用Photoshop做页面设计的话，请直接下载psd文件

文件信息：960_grid.psd 大小：2MB

有效时间：永久

将现有内容按照布局框架图来组织，界面就会显得整洁、美观了。下图是一个典型的12栏布局的网站。