JBTALKS.CC

标题: 960 Grid System Framework, 做网页的必看。 [打印本页]

作者: 宅男-兜着走 时间: 2010-9-28 10:35 PM
标题: 960 Grid System Framework, 做网页的必看。
本帖最后由宅男-兜着走于 2010-9-28 11:24 PM 编辑

先给他们的网站。
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来实现。

<Table>
<tr>
<td width=50%></td>
<td width=50%> </td>
</tr>
</Table>

复制代码

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

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

<div class="grid_5"></div>
<div class="grid_5"></div>

复制代码

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

Styling

<style>
#firstColumn, #secondColumn
{
-- cssCode--
}
</style>
<div class="grid_5" id="firstColumn"></div>
<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 时间: 2010-9-28 11:15 PM
對初學者來說是不錯的起步，但最重要的還是從中了解 CSS 的應用變化

作者: 宅男-兜着走 时间: 2010-9-28 11:21 PM

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

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

作者: Super-Tomato 时间: 2010-9-28 11:31 PM

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

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

作者: 宅男-兜着走 时间: 2010-9-28 11:43 PM

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

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

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

作者: Super-Tomato 时间: 2010-9-28 11:46 PM

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

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

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

作者: 宅男-兜着走 时间: 2010-9-29 12:19 AM

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

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

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

作者: Super-Tomato 时间: 2010-9-29 12:43 AM

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

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

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

作者: 宅男-兜着走 时间: 2010-9-29 12:49 AM

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

狗急跳墙的理论。

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

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

作者: Super-Tomato 时间: 2010-9-29 01:12 AM

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

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

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

作者: 小恶魔J@YL()NG 时间: 2010-9-29 11:28 PM
很不错的教程~帅~

作者: 宅男-兜着走 时间: 2010-9-30 01:32 AM

很不错的教程~帅~
小恶魔J@YL()NG 发表于 2010-9-29 11:28 PM

我没放教程啊 ==

作者: 宅男-兜着走 时间: 2010-9-30 01:34 AM

不是需要用到的時候才來學，而一般人都是惰性影响，要一天學一點的毅力都不坚定，所以要掌握好一種技术 ...
Super-Tomato 发表于 2010-9-29 01:12 AM

我比较觉得掌握技术是要看兴趣+ 心情。
没兴趣的人自然的连碰的心情就不会有了。

虽然你说强迫自己去接Project== 但是陌生的情况下，很担心会做不出，然后赔钱。

作者: Super-Tomato 时间: 2010-9-30 01:46 AM

我比较觉得掌握技术是要看兴趣+ 心情。
没兴趣的人自然的连碰的心情就不会有了。

虽然你说强迫自己去接Project== 但是陌生的情况下，很担心会做不出，然后赔钱。
宅男-兜着走发表于 2010-9-30 01:34 AM

没興趣的人自然就不會要學，更加不會問要如何掌握的問題
哈～～如果你是老闆，要等自己員工都摸清楚了才去接的話，公司應該就快倒閉了
其实這只是給大部份不會自動自發的人的方式(從學校的 assignment 來看就很清楚了，時間幾乎要到才来求助)

作者: sweet_lady 时间: 2010-10-4 02:06 AM
好专业的用词，我很想学。但是却看不懂t.t

欢迎光临 JBTALKS.CC (https://jbtalks.my/)