好的網(wǎng)站設計沒有計劃是不行的。
在你設計任何一個網(wǎng)頁之前有一些東西你是應該盡快做出決定的。其中最主要一個東西應該是頁面的寬度，我個人是比較喜歡960px作為寬度，即使用戶使用的是1024＊768的分辨率，網(wǎng)頁也不會出現(xiàn)橫向移動 － 當然你可以使用任何寬度。
第一步已經(jīng)完成了，我們進入第二步。
接下來我們要把這個960px的寬度縱向劃分為12或者16個區(qū)域，請看下方圖示。今天我會選擇12縱向區(qū)域，所以每一個縱向區(qū)域應該是60px寬，而且每一個縱向區(qū)域的左邊和右邊都有一個10px的空間，用數(shù)學的語言來表達就是： 12*60+24*10=960px， 總和等于我們的頁面寬度－960px。
也許有人說這第一和第二步我?guī)缀跆焯煊?，還要你教－不要著急，好戲在后面 － 一般設計師做完這兩步就要開始設計了，而對真正的高手而言這只是開始。
第三步就是我們要確定橫向區(qū)域. 請看下方圖示。 橫向區(qū)域的高度通常會比我們字體尺寸略大一點，為什么呢？因為如果我的字體是14px，橫向區(qū)域也是14px，那你的字與字的行距會變得很小，讓人沒法正常的閱讀。字的行距對于平面設計和網(wǎng)頁設計有著不同的意思－由于篇幅有限會在將來的文章中繼續(xù)探討這個話題。如果你懂前端 （html & css)， 你可以把橫向區(qū)域當作的css中的line-height屬性。經(jīng)過反復思考，我們這里會用18px作為我們橫向區(qū)域的高度.
小小的總結(jié)一下，我們已經(jīng)有了頁面寬度，縱向區(qū)域，也有了橫向區(qū)域。
第四步是需要我們來確認這個設計中的"域"。通過對"域"的實現(xiàn)會使我們的網(wǎng)頁布局更合理更美觀， 比如通過"域"我們可以大概計算出如何擺放一些頁面中的重要元素。（切記，"域"是起輔助作用，而不是唯一標準）。
平面設計師，雜志設計師，圖書設計師在設計之前一般都會把A4，A3等的頁面從上到下劃分為幾個區(qū)域（也就是我們所說的"域"），這樣在設計的時候設計師可以很好的控制頁面中每一部分元素的平衡（視覺，內(nèi)容和布局平衡），從而使這個設計達到不錯的效果； 但是在網(wǎng)頁中這些理論就非常的不實用，比如設計雜志的話都是用的A4紙大小，那么寬度和高度都是確定的，而在網(wǎng)頁設計中，高度是不定的，那應該怎么辦？?。。。?br/>數(shù)學的魅力在這個時候再次給予我們無窮的力量?。?黃金分割線。要是你和我一樣，在上數(shù)學課的時候老是做小動作，千萬不要被這個名字給嚇到。
數(shù)學的魅力在這個時候再次給予我們無窮的力量！－ 黃金分割線。要是你和我一樣，在上數(shù)學課的時候老是做小動作，千萬不要被這個名字給嚇到！
通過第一步，我們已經(jīng)確認了我們的頁面寬度是960px, 所以我們可以通過黃金分割的原理來確定我們的"域"的高度。誰知道黃金分割的系數(shù)是多少？！ － 答案是1.618。 于是我們可以把我們的頁面寬度（960px)除以 黃金分割的系數(shù)1.618來得到"域"的高度 － 960／1.618=593px。
通過運算我們知道了"域"的高度,如果你把593px除以我們的橫向區(qū)域的高度（18px - 查看第三步)， 593/18=32.94444444，也就是說每一個"域"的里面有接近33個橫向區(qū)域。
但是現(xiàn)在擺在我們眼前還有一個問題，如果把593px最為我們設計中"域"的高度，那么你會發(fā)現(xiàn)我們的頁面也許一般也只能放下一到兩個域，顯然這對我們的布局不能起到很好的指引作用－要知道不少頁面的高度小于593px，那要這個域還有什么用？！
大家可以用以上的理論做出一套適合自己項目的頁面寬度，縱向區(qū)域， 橫向區(qū)域，"域"，通過他們的輔助把你的設計水平提升到一個新的層次！切記－ 規(guī)則是死的，人是活的，怎樣遵守規(guī)則的同時破壞規(guī)則是決定你是否能成功的關鍵。簡約的東西通常是通過復雜的過程得到的。

1. 優(yōu)秀的網(wǎng)絡資源，穩(wěn)定的網(wǎng)站和速度保證

（配送雙線獨立ip空間，國際A級BGP機房，99.5% 的主機在線時間）

2. 7年北京網(wǎng)站建設經(jīng)驗，優(yōu)秀的技術和設計水平，更放心

3. 全程省心服務，不必擔心自己不懂網(wǎng)絡，更省心。

-----------------------------------------------------------------------------------------------------

我們的與眾不同之處：

免費網(wǎng)絡營銷顧問：我們?yōu)槟峁┟赓M的網(wǎng)絡營銷顧問服務，您需要了解關于如何開展網(wǎng)絡營銷，電子商務，網(wǎng)站設計等的事宜，歡迎隨時聯(lián)系我們。

seo友好的網(wǎng)站管理系統(tǒng)：除了優(yōu)質(zhì)的網(wǎng)站空間，網(wǎng)站管理系統(tǒng)，和網(wǎng)站設計外，我們的網(wǎng)站管理系統(tǒng)更是seo友好的，包括：自定義欄目名，Google Sitemap自動生成，靜態(tài)頁面生成等等，讓您的網(wǎng)站。

免費網(wǎng)絡營銷培訓：如何更好的投放網(wǎng)絡廣告，如何提高網(wǎng)絡廣告的投資回報，如何發(fā)帖子，
如何優(yōu)化網(wǎng)站，我們有豐富的經(jīng)驗開放給您！祝君成功！

創(chuàng)新互聯(lián)專業(yè)成都網(wǎng)站建設公司提供一站式網(wǎng)站解決方案，為您提供網(wǎng)站建設,網(wǎng)站制作,網(wǎng)頁設計及定制高端網(wǎng)站建設服務！

分享文章：好的網(wǎng)站設計沒有計劃是不行的。
網(wǎng)站網(wǎng)址：http://www.rwnh.cn/news18/78118.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡營銷seo公司；服務項目有網(wǎng)站設計等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)