沿阶草堂

在老莫的《刷新一下大脑，Grid based web design…》里了解到Grid based design，即Grid System，发现这种网页设计方法很高效，收获很多。

我最早学习CSS的时候，就特意打印了百度空首页间的HTML代码和模板的CSS的代码研究。还在草稿纸上绘了模板草图。网页栅格系统也是给网页设计一个草图，但是加上了尺寸线，栅格化。使得div+CSS设计的更精确，代码编写也更加规范。

步骤是：

1.绘制草图，设计出各个DIV盒子的大小和顺序。

图片来源（Designing blog theme templates）

2.填充内容，修改效果。

3.编写代码，浏览器查看效果。

设计素材：

1.页面宽度最佳的宽度是960PX，主流的门户网站是950PX/960PX，具体查看淘宝UED的数据。

960.gs 是一个基于960px宽度的设计模板集合。可以在他们网站的demo.html

查看各种设计排版比率。还可以在首页下载他们的PSD等网格设计模板，和HTML、CSS代码模板。

2.cssjuice.com收集了系列的Grid Based Design步骤和一些模板,请点击这里。英文功底得好，说的有些抽象～

3.雅虎YUI有个系统的YUI Grids CSS网页栅格文档，还提供一个简单的在线模板工具The YUI Grids Builder。这个教程说的最详细。推荐。

正在制作红杨工作室的网站，可以实践下，哈~