2008/12/29

如何用欄格來幫助網頁佈局設計?





柵格系統的形成
1692年,新登基的法國國王路易十四感到法國的印刷水平強差人意,因此命令成立一個管理印刷的皇家特別委員會。他們的首要任務是設計出科學的、合理的, 重視功能性的新字體。委員會由數學家尼古拉斯加宗(Nicolas Jaugeon)擔任領導,他們以羅馬體爲基礎,采用方格爲設計依據,每個字體方格分爲64個基本方各單位,每個方各單位再分成36個小格,這樣,一個印 刷版面就有 2304個小格組成,在這個嚴謹的幾何網格網絡中設計字體的形狀,版面的編排,試驗傳達功能的效能,這是是世界上最早對字體和版面進行科學實驗的活動,也 是柵格系統最早的雛形。
柵格系統英文爲“grid systems”,也有人翻譯爲“網格系統”,其實是一回事。不過從定義上說,柵格更爲准確些,從維基百科查到柵格的定義爲:柵格設計系統(又稱網格設計系統、標准尺寸系統、程序版面設計、瑞士平面設計風格、國際主義平面設計風格),是一種平面設計的方法與風格。運用固定的格子設計版面布局,其風格工整簡潔,在二戰後大受歡迎,已成爲今日出版物設計的主流風格之一



網頁設計中的柵格系統
我給網頁柵格系統下的定義爲:以規則的網格陣列來指導和規範網頁中的版面布局以及信息分布。
網頁柵格系統是從平面柵格系統中發展而來。對于網頁設計來說,柵格系統的使用,不僅可以讓網頁的信息呈現更加美觀易讀,更具可用性。而且,對于前端開發來說,網頁將更加的靈活與規範。

柵格系統在現在的網頁設計中應用越來越多,從網絡上搜羅了一篇關于柵格系統應用的文章:30個最頂尖的基于柵格系統的博客網站設計
柵格系統的設計原理及應用
那麽如何設計一個柵格系統?接下來我們將通過實例,詳細的介紹一下網頁柵格系統的原理與應用:


在網頁設計中,我們把寬度爲“W”的頁面分割成n個網格單元“a”,每個單元與單元之間的間隙設爲“i”,此時我們把“a+i”定義“A”。他們之間的關系如下:
W =(a×n)+(n-1)i
由于a+i=A,
可得:(A×n) - i = W
這個公式表述了網頁的布局與網頁“背後”的柵格系統之間的某種關系。我們拿yahoo作例,來看一下柵格系統的應用:

yahoo的網站頁面寬度爲W=950px,每個區塊與區塊的間隔爲i=10px;如果應用上面的公式,可以推出A=40px,既yahoo首頁橫向版式設計采用的柵格系統爲:
(40×n)- 10 = W
下面我們列出當n等于不同數值時W變化的數值表格 :



從表格可以看出:yahoo首頁的布局完全是按照柵格系統進行設計的,每個區塊的寬度對應的n值分別爲:4,11,9。在這裏我們看到一個很有意思 的事情:只要保證一個橫向維度的各個區塊的n值相加等于24,則即可保證頁面的寬度一定是950px。然而,950px的寬度也恰好就是當n=24的時 候,W的寬度值。由此我們得出以下的應用模式:

在柵格系統中,設計師根據需要制定不同的版式或者劃分區塊,他們的依據將是上面的那張對應表進行設計。這樣,一個柵格系統的應用就從此開始了。我們 看到,使用柵格系統的網頁設計,非常的有條理性;看上去也很舒服。最重要的是,它給整個網站的頁面結構定義了一個標准。對于視覺設計師來說,他們不用再爲 設計一個網站每個頁面都要想一個寬度或高度而煩惱了。對于前端開發工程師來說,頁面的布局設計將完全是規範的和可重用的,這將大大節約了開發成本。對于內 容編輯或廣告銷售來說,所有的廣告都是規則的,通用的,他們再也不用做出一套N張不同尺寸的廣告圖了……
當然只要你願意,我們可以衍生出任何一種柵格系統,只要改變A和i的值,這個根據網站的實際情況來制定。那麽如何選擇合適柵格系統,主要通過“構成 要素與程序、限制與選擇、構成要素的比例、組合、虛空間與組合、四邊聯系與軸的聯系、三的法則、圓與構成、水平構成這些設計元素規劃,來實現比例和諧的平 面設計”。比較深奧,我們在這裏就不詳細闡述了。
呵呵,說了一堆柵格系統的優點。大家可能會問:難道柵格系統真的是完美的麽?答案是否定的:對于內容信息不確定導致高度不確定的頁面,在高度層面上就無法做到柵格了。當然,具體的情況還需具體的分析與解決,這就需要設計師們在實際的應用中不斷的總結經驗,不斷實踐了。


table排主圖,在firefox看會破掉怎麼辦?

我們常常製作網頁、活動企劃頁,把主圖會切圖切好用table排,
在ie看都很正常,卻在ff會破掉,整個很沮喪...

只要把主圖的那個tabel設個class,就可以解決這個問題了~


例如:
主圖那個table設定為 class="mainimg"

在css加

.mainimg td{line-height:0;margin:0;padding:0;}

即可


原因:firefox會自己把行高弄高一點、而且他預設的一個字母比ie又大顆,就會變成有間距了


不可全文轉貼、可部份引用,請以本文網址連結方式註明出處。