Front Website

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

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

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

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

双栏布局:960/2=480

三栏布局:960/3=320

四栏布局:960/4=240

所以,大多数设计师选择了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栏布局的网站。

0 0 投票数
文章评分
订阅评论
提醒
guest

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

4 评论
最新
最旧 最多投票
内联反馈
查看所有评论
trackback

[…] 这种情况我通常只需要框架来做布局(Grid),10年写过一篇文章介绍网页设计多用960px宽度的原因,当时还在用960gs,但自适应的需求960gs满足不了,就用了一段时间的lessfreamwork。最近960gs的作者开发了unsemantic,于是又换成了unsemantic。在编写自适应网页时,要根据设备的不同加载不同的css文件,unsemantic都替你切分好了,省时省力。 […]

trackback

[…] 我用过的CSS框架并不多,960px.gs一直是当成布局规范来用,并未视作一个css框架;clearCSS和YUI的一个CSS框架也有在用,但坦白来说并没有给我节约太多时间。YAML的pagerank高达8,应该是一个非常流行的css框架了。虽然对于我现在的工作中项目来说没什么太大帮助,但以后自己做什么小项目的时候,还是会考虑它的。 分享到Facebook […]

X东
X东
13 年 前

花妈..我是无意间逛到这的..= =