960 Grid System Framework, 做网页的必看。

宅男-兜着走

先给他们的网站。
http://960.gs/


简介

960 Grid System 其实是网页的Layout 框架，
比较“传统”的网页设计师是用 Table 来layout 网页。为什么会叫 960 System？ 其实就只是个名字， 别太在意。
但是960 其实是有意思的， 因为960 Grid 的Standard width 是 960 px，可能就是因为酱， 就命名为 960 吧

使用 960 Grid System 之前， 必须要掌握 CSS 的基本技巧。
这里有个网站能补助CSS 学徒。
http://www.w3.org/TR/CSS2/indexlist.html

---

使用

进入网站， 按Download， 就能下载到一个 Zip file， 打开来看，里面有 Demo.html， Uncompressed 的 CSS 文件。
只要把 Uncompressed 下的 960.css, 跟 text.css 拷贝进您的 Project 文件夹下就好了。

记得记得... 要reference。

也或者您想使用 PS， 或 Firework 来设计也可以的， 文件夹内已经包括了 PSD， AI， Firework Png 的格式了。

---

Table-based layout VS. DIV 960 Grid System.

我举个例子， 现在我要做个 Table 有两个 Cell， 两个Cell 的 Column 要 equal width。 我用以下的 HTML来实现。

1. 
   
2. <Table>
   
3.           <tr>
   
4.            <td width=50%></td>
   
5.            <td width=50%> </td>
   
6.           </tr>
   
7. </Table>
   

复制代码

*补充： 不是所有的Browser 都能使用 % 来设置 Width

但是， 如果你使用了 960 Grid 框架， 复杂的TR， TD ,Table 可以完全不必再使用了。

1. 
   
2. <div class="grid_5"></div>
   
3. <div class="grid_5"></div>
   

复制代码

轻轻松松的， 两个 Cell 就出现了， 复杂的话也没比 Table-based 的复杂。

---

Styling

1. 
   
2. <style>
   
3.    #firstColumn, #secondColumn
   
4.    {
   
5.         -- cssCode--
   
6.    }
   
7. </style>
   
8. <div class="grid_5" id="firstColumn"></div>
   
9. <div class="grid_5" id="secondColumn"></div>
   

复制代码

这个我不解释了，只要会CSS 的人都看得懂。代码如上。

---

总结

好处
*  提升开发速度。
* 干净简洁的Grid/DIV 结构。
* 多数的Browser 都能支持。
* 能更快速的建造复杂的Layout。

坏处
* 如果你不是要 960 Width 的网页的话， 那么你还是选别的 框架吧。
* 因为是“框架”(Framework) 当然你失去了一些伸缩性。（** 补充：http://www.spry-soft.com/grids/ 这里能下载适合您的 Width 跟Column）

如果你不熟CSS的话这个框架不会为你带来任何的方便， 反而还会为你带来更多的麻烦， 所以用之前还是考虑考虑下。

---

最后的最后！！！
就留给各位 Web programmer 啊， Web Designer 啊～
大家Coding， Design 到顺顺利利。

Happy Coding Cheers!!

Super-Tomato

對初學者來說是不錯的起步，但最重要的還是從中了解 CSS 的應用變化

宅男-兜着走

對初學者來說是不錯的起步，但最重要的還是從中了解 CSS 的應用變化
Super-Tomato 发表于 2010-9-28 11:15 PM

那么你都是怎么 Layout 你的网页？

Super-Tomato

那么你都是怎么 Layout 你的网页？
宅男-兜着走 发表于 2010-9-28 11:21 PM

看心情用 CSS 和一些 JS 設計 XD

宅男-兜着走

看心情用 CSS 和一些 JS 設計 XD
Super-Tomato 发表于 2010-9-28 11:31 PM

哈哈，大多数的 Programmer 好像都这样。

虽说我放这个贴
但是我用的是 JS 跟 PS, 很少用 CSS

Super-Tomato

哈哈，大多数的 Programmer 好像都这样。

虽说我放这个贴
但是我用的是 也是 JS 跟 PS, 很少用 CSS ; ...
宅男-兜着走 发表于 2010-9-28 11:43 PM

在 JS 控制的一些效果中 CSS 是必不可缺的

宅男-兜着走

在 JS 控制的一些效果中 CSS 是必不可缺的
Super-Tomato 发表于 2010-9-28 11:46 PM

    说的没错， 因为 Jquery 我才明白 CSS 的重要性。
    现阶段来说，Selector 方面我明白了， 但是不是所有的 效果我都会使用。







    虽说如此， 你有什么 CSS 的documentation 吗？

Super-Tomato

    说的没错， 因为 Jquery 我才明白 CSS 的重要性。
    现阶段来说，Selector 方面我明白了， 但是不是所有的 效果我都会使用。







    虽说如此， 你有什么 CSS 的documentation 吗？
宅男-兜着走 发表于 2010-9-29 12:19 AM

我只是偶尔才去w3c翻一翻 documentation，所以没甚么去看過哪些有比較好的 documentation... ，但直接推上战场自然就能够學會了

宅男-兜着走

我只是偶尔才去w3c翻一翻 documentation，所以没甚么去看過哪些有比較好的 documentation... ，但直接 ...
Super-Tomato 发表于 2010-9-29 12:43 AM

狗急跳墙的理论。
但是不能每次这样吧，万一真的有一天需要用到的时候才来学就晚了。

好吧～那么我努力找看， 有了就放上来造福大家

Super-Tomato

狗急跳墙的理论。
但是不能每次这样吧，万一真的有一天需要用到的时候才来学就晚了。

好吧～那么我努力找看， 有了就放上来造福大家
宅男-兜着走 发表于 2010-9-29 12:49 AM

不是需要用到的時候才來學，而一般人都是惰性影响，要一天學一點的毅力都不坚定，所以要掌握好一種技术也可以說是要看心情。
所以我指的是要强迫自己學會的方式就是强迫自己去接些外包，而每個外包都用上 CSS 和 JS 做控制，最好就别去拿寫好的 plugin 會磨练的更加快。