我們發(fā)現(xiàn)很多杭州網(wǎng)頁設(shè)計都采用了數(shù)字應(yīng)用，這究竟是怎么回事呢?其中有什么奧妙和玄機(jī)嗎，好奇心讓我們一同去看個究竟吧!

　　第一、確定頁面的寬度

　　我認(rèn)為，在你設(shè)計任何一個網(wǎng)頁之前，都有一些東西需要你盡快做出決定的，其中最重要的就是頁面的寬度，我比較喜歡960px作為網(wǎng)站的寬度，即是使用1024*768的分辨率，這樣網(wǎng)頁也不會出現(xiàn)橫向移動(當(dāng)然，你也可以使用任何寬度，根據(jù)你的實(shí)際要求決定)

　　第二、劃分區(qū)域

　　接下來我們要把這個960px的寬度縱向劃分為12或者16個區(qū)域。今天我會選擇12縱向區(qū)域，所以每一個縱向區(qū)域應(yīng)該是60px寬，而且每一個縱向區(qū)域的左邊和右邊都有一個10px的空間，用數(shù)學(xué)的語言來表達(dá)就是： 12*60+24*10=960px，總和等于我們的頁面寬度-960px。

　　也許有人說這第一和第二步我?guī)缀跆焯煊茫€要你教-不要著急，好戲在后面 - 一般設(shè)計師做完這兩步就要開始設(shè)計了，而對真正的高手而言這只是開始。

　　第三、確定橫向區(qū)域

　　橫向區(qū)域的高度通常會比我們字體尺寸略大一點(diǎn)，為什么呢?因?yàn)槿绻业淖煮w是14px，橫向區(qū)域也是14px，那你的字與字的行距會變得很小，讓人沒法正常的閱讀。字的行距對于平面設(shè)計和網(wǎng)頁設(shè)計有著不同的意思-由于篇幅有限會在將來的文章中繼續(xù)探討這個話題。如果你懂前端 (html & css)， 你可以把橫向區(qū)域當(dāng)作css中的line-height屬性。經(jīng)過反復(fù)思考，我們這里會用18px作為我們橫向區(qū)域的高度。

　　第四、確認(rèn)這個設(shè)計中的”域”

　　通過對”域”的實(shí)現(xiàn)會使我們的網(wǎng)頁布局更合理更美觀，比如通過”域”我們可以大概計算出如何擺放一些頁面中的重要元素。(切記，”域”是起輔助作用，而不是唯一標(biāo)準(zhǔn))。

　　平面設(shè)計師，雜志設(shè)計師，圖書設(shè)計師在設(shè)計之前一般都會把A4，A3等的頁面從上到下劃分為幾個區(qū)域(也就是我們所說的”域”)，這樣在設(shè)計的時候設(shè)計師可以很好的控制頁面中每一部分元素的平衡(視覺，內(nèi)容和布局平衡)，從而使這個設(shè)計達(dá)到不錯的效果; 但是在網(wǎng)頁中這些理論就非常的不實(shí)用，比如設(shè)計雜志的話都是用的A4紙大小，那么寬度和高度都是確定的，而在網(wǎng)頁設(shè)計中，高度是不定的，那應(yīng)該怎么辦?數(shù)學(xué)的魅力在這個時候再次給予我們無窮的力量!那就是黃金分割線。要是你和我一樣，在上數(shù)學(xué)課的時候老是做小動作，千萬不要被這個名字給嚇到。通過第一步，我已經(jīng)確認(rèn)了頁面寬度是960px, 所以我們可以通過黃金分割的原理來確定我們的”域”的高度。誰知道黃金分割的系數(shù)是多少?!答案是1.618。 于是可以把頁面寬度(960px)除以 黃金分割的系數(shù)1.618來得到”域”的高度 - 960/1.618=593px。通過運(yùn)算知道了”域”的高度,如果你把593px除以我們的橫向區(qū)域的高度(18px – 查看第三步)， 593/18=32.94444444，也就是說每一個”域”的里面有接近33個橫向區(qū)域。

　　但是現(xiàn)在擺在眼前還有一個問題，如果把593px作為我們設(shè)計中”域”的高度，那么你會發(fā)現(xiàn)我們的頁面也許一般也只能放下一到兩個域，顯然這對我們的布局不能起到很好的指引作用-要知道不少頁面的高度小于593px，那要這個域還有什么用?

　　第五、通過三分法來進(jìn)一步改進(jìn)域的大小

　　只要把現(xiàn)在”域”的高度，也就是593px除以 3 - 593/3=197.6666667，約等于 198px， 然后只要把 198-18=180px, 這個就是”域”的高度了。為什么要在最后減去18px，那是因?yàn)闀o每個”域”之間加一個空白空間，就像在每個縱向區(qū)域的左邊和右邊都有一個10px的空間一樣，而且同時18px也是橫向區(qū)域高度，請看下方示意圖。通過以上的五個步驟，我可以非常負(fù)責(zé)任的告訴你，你可以開始做視覺上的設(shè)計了，大家也可以用以上的理論做出一套適合自己項(xiàng)目的頁面寬度，縱向區(qū)域、橫向區(qū)域、域等，通過這些輔助，可以把你的設(shè)計水平提高到一個的新的高度，但是，切記一點(diǎn)的就是，人是活的，是否遵循這個規(guī)則要根據(jù)的你的情況來決定。當(dāng)然，任何簡約的東西都是通過復(fù)雜的過程得到的。

　　杭州網(wǎng)站設(shè)計的技巧和秘密真的很多，如果需要可以詳詢蒙特，你們最需要的...