網(wǎng)站建設(shè)中的網(wǎng)站布局?
我給網(wǎng)頁網(wǎng)站布局下的定義為：以規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布。
網(wǎng)頁網(wǎng)站布局是從平面網(wǎng)站布局中發(fā)展而來。對于網(wǎng)站建設(shè)來說，網(wǎng)站布局的使用，不僅可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對于前端開發(fā)來說，網(wǎng)頁將更加的靈活與規(guī)范。
網(wǎng)站布局的設(shè)計原理及應(yīng)用
那么如何設(shè)計一個網(wǎng)站布局？接下來我們將通過實例，詳細的介紹一下網(wǎng)頁網(wǎng)站布局的原理與應(yīng)用：
在網(wǎng)站建設(shè)中，我們把寬度為“W”的頁面分割成n個網(wǎng)格單元“a”，每個單元與單元之間的間隙設(shè)為“i”,此時我們把“a+i”定義“A”。他們之間的關(guān)系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) – i = W
這個公式表述了網(wǎng)頁的布局與網(wǎng)頁“背后”的網(wǎng)站布局之間的某種關(guān)系。我們拿yahoo作例，來看一下網(wǎng)站布局的應(yīng)用：
yahoo的網(wǎng)站頁面寬度為W=950px，每個區(qū)塊與區(qū)塊的間隔為i=10px；如果應(yīng)用上面的公式，可以推出A=40px，既yahoo首頁橫向版式設(shè)計采用的網(wǎng)站布局為：
（40×n）- 10 = W
下面我們列出當n等于不同數(shù)值時W變化的數(shù)值表格 ：
從表格可以看出：yahoo首頁的布局完全是按照網(wǎng)站布局進行設(shè)計的，每個區(qū)塊的寬度對應(yīng)的n值分別為：4，11，9。在這里我們看到一個很有意思 的事情：只要保證一個橫向維度的各個區(qū)塊的n值相加等于24，則即可保證頁面的寬度一定是950px。然而，950px的寬度也恰好就是當n=24的時 候，W的寬度值。由此我們得出以下的應(yīng)用模式：
在網(wǎng)站布局中，設(shè)計師根據(jù)需要制定不同的版式或者劃分區(qū)塊，他們的依據(jù)將是上面的那張對應(yīng)表進行設(shè)計。這樣，一個網(wǎng)站布局的應(yīng)用就從此開始了。我們 看到，使用網(wǎng)站布局的網(wǎng)站建設(shè)，非常的有條理性；看上去也很舒服。最重要的是，它給整個網(wǎng)站的頁面結(jié)構(gòu)定義了一個標準。對于視覺設(shè)計師來說，他們不用再為 設(shè)計一個網(wǎng)站每個頁面都要想一個寬度或高度而煩惱了。對于前端開發(fā)工程師來說，頁面的布局設(shè)計將完全是規(guī)范的和可重用的，這將大大節(jié)約了開發(fā)成本。對于內(nèi) 容編輯或廣告銷售來說，所有的廣告都是規(guī)則的，通用的，他們再也不用做出一套N張不同尺寸的廣告圖了……
當然只要你愿意，我們可以衍生出任何一種網(wǎng)站布局，只要改變A和i的值，這個根據(jù)網(wǎng)站的實際情況來制定。那么如何選擇合適網(wǎng)站布局，主要通過“構(gòu)成 要素與程序、限制與選擇、構(gòu)成要素的比例、組合、虛空間與組合、四邊聯(lián)系與軸的聯(lián)系、三的法則、圓與構(gòu)成、水平構(gòu)成這些設(shè)計元素規(guī)劃，來實現(xiàn)比例和諧的平 面設(shè)計”。比較深奧，我們在這里就不詳細闡述了。
呵呵，說了一堆網(wǎng)站布局的優(yōu)點。大家可能會問：難道網(wǎng)站布局真的是完美的么？答案是否定的：對于內(nèi)容信息不確定導(dǎo)致高度不確定的頁面，在高度層面上就無法做到柵格了。當然，具體的情況還需具體的分析與解決，這就需要設(shè)計師們在實際的應(yīng)用中不斷的總結(jié)經(jīng)驗，不斷實踐了。
