數(shù)學(xué)是優(yōu)美的. 聽上去有點奇怪? 當(dāng)我第一次開始設(shè)計的時候，我確信如此。數(shù)學(xué)如此刻板乏味。你可能會驚訝的發(fā)現(xiàn)，最美觀的設(shè)計，藝術(shù)作品，物體，甚至人都有數(shù)學(xué)上的共同點。尤其是黃金分割，也被稱為神之比例，希臘字母表示其為 φ (phi). 本教程會剖析一個網(wǎng)站的布局，以及如何對其黃金分割。

網(wǎng)頁骨架

這些是web頁面的主要元素。有很多不同的方法去組織它們，但是這種布局也許是最常用的。

container

所有的web頁面都用一個container，主要是為了同一個目的：去包含一些頁面元素，然而這個方法實現(xiàn)各有不同。例如，body標(biāo)簽或者是最常用的div。甚至于過去常用的table（不要使用table作為你的container，這是一個破方法）。想想container作為你房子的外墻，里面包含臥室，廚房，起居室等等。

container的類型:

1. liquid: 根據(jù)瀏覽器寬度填充。
2. fixed: 指定的寬度，并不會根據(jù)瀏覽器寬度改變。

header

header并不真的是一個特定的元素，盡管某些人會認(rèn)為它是。它更多是用在涉及到你放置你的logo，導(dǎo)航欄，tagline的web頁面頂層的地方。許多人更愿意把這些元素包含在一個div里以方便使頁面樣式和內(nèi)容分離。header會被視為一個container，所以它有兩種類型選擇，就是上文提到的 liquid 或 fixed 。

logo

你的logo是你的身份和品牌。最常用的是把logo放在你header的左上角。我們的閱讀習(xí)慣是，從左往右，從上至下，所以你的log應(yīng)該放在訪問者第一眼能看到的地方。

navigation

頁面導(dǎo)航是最重要的元素之一;你的訪問者需要用它來使用你的站點。 它應(yīng)該是容易被找到且易用的，這就是為什么大多數(shù)的人把它放在header部分，最少也是在頁面頂端附近的原因。

 navigation類型:

1. horizontal: 水平顯示，被稱為‘navigation’。
2. vertical: 垂直顯示，被稱為‘menu’

main content

每個人都（應(yīng)該）知道，內(nèi)容才是王道！當(dāng)人們來參觀你的站點，這是他們想看的主要元素。它應(yīng)該是web頁面的焦點，所以參觀者才能快速找到他們想要的。

sidebar

sidebar是放置你次要內(nèi)容的元素，像一些廣告，站點搜索，訂閱鏈接(rss, twitter, email, 等), 聯(lián)系方法等。這個元素不是必需的，盡管右很多站點用它。它大多數(shù)是放在右邊的，但是你也能把它放在左邊或者兩邊，只要不擾亂主要內(nèi)容的瀏覽就行。網(wǎng)站使用橫向或縱向?qū)Ш剑瑂idebar往往是用縱向?qū)Ш健?/p>

footer

web頁面的尾部總會有一個頁腳，讓您的訪客知道他已經(jīng)到達(dá)了你web頁面的結(jié)束部分。和heaser一樣，footer也不是一個特殊的元素 。在你的頁腳里包含版權(quán)，法律聲明以及主要的聯(lián)系方式。包含一些重要的鏈接是個好主意，比如home page, contact page, 等. 有些網(wǎng)站用這個區(qū)域提供一些相關(guān)材料或者其他重要信息。

"whitespace"

你可能有強(qiáng)烈的愿望去填充這些頁面上的空白，但是請不要這么做。“空白”也是相當(dāng)重要的。你可以看看nettuts網(wǎng)站是如何有效的使用空白區(qū)域的，創(chuàng)建了頁面平衡給人一個好的感覺。

以上是web頁面的骨架，現(xiàn)在我們來看如何黃金分割這些元素。

黃金分割和使用網(wǎng)格（grids）

還記得之前我說數(shù)學(xué)是美麗的嗎？我們認(rèn)為視覺的吸引力是基于比例的（比如，黃金分割）。幾千年來，藝術(shù)家，設(shè)計師，建筑師等都有意無意的在使用了一個共同的比例來增加他們作品的美感。這個神奇的數(shù)字是什么呢？ 1.62 (實際是 1.618...) 我不會說這個數(shù)字的起源，但是我會告訴你如何使用它。

使用黃金分割是非常簡單的。比如你像找到你主要內(nèi)容和sidebar列表的寬度。你將使用你內(nèi)容區(qū)域總的寬度除以 1.62. 然后得到555.55px. 我們不需要那么精確，所以我們就用555px。現(xiàn)在你就知道你的主要內(nèi)容元素是555px的寬度，你的sidebar是345px?？纯炊嗝慈菀祝?！

但是等等先，樂趣不止于此！你也可以應(yīng)用黃金分割到其他元素的寬度和高度。

using grids

如果你和大多數(shù)的人一樣，不想每次都抱著個計算器來計算這個黃金比率。那么最簡單的方法就是用grid。所以你需要做的就是把你的寬度或是高度分成三分。

要產(chǎn)生更詳細(xì)的gird，只需要繼續(xù)三等分就行。如果你讀了前一篇文章“與blueprint css框架的親密接觸”的話，你會看到blueprint css框架用了一個詳細(xì)的gird系統(tǒng)。 不僅僅是gird設(shè)計更容易更快，而且它也創(chuàng)建了一個美觀的布局。如果你還沒有使用gird設(shè)計，那么這是一個很好的嘗試機(jī)會。你可以為fireworks，photoshops或者其他軟件從 http://960.gs下載grid模板。

正如你看到的，nettuts很好的遵循了黃金比率。頂端三分之一的網(wǎng)頁再次分成了三分，非常接近黃金比率。難怪nettuts的設(shè)計是如此吸引人！

如果你要做一個新的設(shè)計，我嚴(yán)重推薦你找一些流行的站點，評價他們的布局，以及如何應(yīng)用黃金比率和gird。然后花一些時間去實踐使用黃金分割，并在你的布局上面使用gird。