在你設計任何一個網頁之前有一些東西你是應該盡快做出決定的。其中最主要一個東西應該是頁面的寬度,我個人是比較喜歡960px作為寬度,即使用戶使用的是1024*768的分辨率,網頁也不會出現橫向移動 - 當然你可以使用任何寬度。
第一步已經完成了,我們進入第二步。
接下來我們要把這個960px的寬度縱向劃分為12或者16個區域,請看下方圖示。今天我會選擇12縱向區域,所以每一個縱向區域應該是60px寬,而且每一個縱向區域的左邊和右邊都有一個10px的空間,用數學的語言來表達就是: 12*60+24*10=960px, 總和等于我們的頁面寬度-960px。
也許有人說這第一和第二步我幾乎天天用,還要你教-不要著急,好戲在后面 - 一般設計師做完這兩步就要開始設計了,而對真正的高手而言這只是開始。
第三步就是我們要確定橫向區域. 請看下方圖示。 橫向區域的高度通常會比我們字體尺寸略大一點,為什么呢?因為如果我的字體是14px,橫向區域也是14px,那你的字與字的行距會變得很小,讓人沒法正常的閱讀。字的行距對于平面設計和網頁設計有著不同的意思-由于篇幅有限會在將來的文章中繼續探討這個話題。如果你懂前端 (html & css), 你可以把橫向區域當作的css中的line-height屬性。經過反復思考,我們這里會用18px作為我們橫向區域的高度.
小小的總結一下,我們已經有了頁面寬度,縱向區域,也有了橫向區域。
第四步是需要我們來確認這個設計中的"域"。通過對"域"的實現會使我們的網頁布局更合理更美觀, 比如通過"域"我們可以大概計算出如何擺放一些頁面中的重要元素。(切記,"域"是起輔助作用,而不是唯一標準)。
平面設計師,雜志設計師,圖書設計師在設計之前一般都會把A4,A3等的頁面從上到下劃分為幾個區域(也就是我們所說的"域"),這樣在設計的時候設計師可以很好的控制頁面中每一部分元素的平衡(視覺,內容和布局平衡),從而使這個設計達到不錯的效果; 但是在網頁中這些理論就非常的不實用,比如設計雜志的話都是用的A4紙大小,那么寬度和高度都是確定的,而在網頁設計中,高度是不定的,那應該怎么辦?!!!!
數學的魅力在這個時候再次給予我們無窮的力量!- 黃金分割線。要是你和我一樣,在上數學課的時候老是做小動作,千萬不要被這個名字給嚇到。
數學的魅力在這個時候再次給予我們無窮的力量!- 黃金分割線。要是你和我一樣,在上數學課的時候老是做小動作,千萬不要被這個名字給嚇到!
通過第一步,我們已經確認了我們的頁面寬度是960px, 所以我們可以通過黃金分割的原理來確定我們的"域"的高度。誰知道黃金分割的系數是多少?! - 答案是1.618。 于是我們可以把我們的頁面寬度(960px)除以 黃金分割的系數1.618來得到"域"的高度 - 960/1.618=593px。
通過運算我們知道了"域"的高度,如果你把593px除以我們的橫向區域的高度(18px - 查看第三步), 593/18=32.94444444,也就是說每一個"域"的里面有接近33個橫向區域。
但是現在擺在我們眼前還有一個問題,如果把593px最為我們設計中"域"的高度,那么你會發現我們的頁面也許一般也只能放下一到兩個域,顯然這對我們的布局不能起到很好的指引作用-要知道不少頁面的高度小于593px,那要這個域還有什么用?!
大家可以用以上的理論做出一套適合自己項目的頁面寬度,縱向區域, 橫向區域,"域",通過他們的輔助把你的設計水平提升到一個新的層次!切記- 規則是死的,人是活的,怎樣遵守規則的同時破壞規則是決定你是否能成功的關鍵。簡約的東西通常是通過復雜的過程得到的。
1. 優秀的網絡資源,穩定的網站和速度保證
?(配送雙線獨立ip空間,國際A級BGP機房,99.5% 的主機在線時間)
2. 7年北京網站建設經驗,優秀的技術和設計水平,更放心
3. 全程省心服務,不必擔心自己不懂網絡,更省心。
-----------------------------------------------------------------------------------------------------
我們的與眾不同之處:
????? 免費網絡營銷顧問:我們為您提供免費的網絡營銷顧問服務,您需要了解關于如何開展網絡營銷,電子商務,網站設計等的事宜,歡迎隨時聯系我們。
???? ?seo友好的網站管理系統:除了優質的網站空間,網站管理系統,和網站設計外,我們的網站管理系統更是seo友好的,包括:自定義欄目名,Google Sitemap自動生成,靜態頁面生成等等,讓您的網站。
???? ?免費網絡營銷培訓:如何更好的投放網絡廣告,如何提高網絡廣告的投資回報,如何發帖子,
???? ?如何優化網站,我們有豐富的經驗開放給您!祝君成功!
聯系我們:010-62199213?? 62122723-808?? 賈先生
傳誠信北京網站建設網站:m.xinyangweb.com?點擊查看經典網站案例!