好的
網(wǎng)站設(shè)計(jì)沒(méi)有計(jì)劃是不行的。
在你設(shè)計(jì)任何一個(gè)網(wǎng)頁(yè)之前有一些東西你是應(yīng)該盡快做出決定的。其中最主要一個(gè)東西應(yīng)該是頁(yè)面的寬度,我個(gè)人是比較喜歡960px作為寬度,即使用戶(hù)使用的是1024*768的分辨率,網(wǎng)頁(yè)也不會(huì)出現(xiàn)橫向移動(dòng) - 當(dāng)然你可以使用任何寬度。
第一步已經(jīng)完成了,我們進(jìn)入第二步。
接下來(lái)我們要把這個(gè)960px的寬度縱向劃分為12或者16個(gè)區(qū)域,請(qǐng)看下方圖示。今天我會(huì)選擇12縱向區(qū)域,所以每一個(gè)縱向區(qū)域應(yīng)該是60px寬,而且每一個(gè)縱向區(qū)域的左邊和右邊都有一個(gè)10px的空間,用數(shù)學(xué)的語(yǔ)言來(lái)表達(dá)就是: 12*60+24*10=960px, 總和等于我們的頁(yè)面寬度-960px。
也許有人說(shuō)這第一和第二步我?guī)缀跆焯煊?,還要你教-不要著急,好戲在后面 - 一般設(shè)計(jì)師做完這兩步就要開(kāi)始設(shè)計(jì)了,而對(duì)真正的高手而言這只是開(kāi)始。
第三步就是我們要確定橫向區(qū)域. 請(qǐng)看下方圖示。 橫向區(qū)域的高度通常會(huì)比我們字體尺寸略大一點(diǎn),為什么呢?因?yàn)槿绻业淖煮w是14px,橫向區(qū)域也是14px,那你的字與字的行距會(huì)變得很小,讓人沒(méi)法正常的閱讀。字的行距對(duì)于平面設(shè)計(jì)和網(wǎng)頁(yè)設(shè)計(jì)有著不同的意思-由于篇幅有限會(huì)在將來(lái)的文章中繼續(xù)探討這個(gè)話題。如果你懂前端 (html & css), 你可以把橫向區(qū)域當(dāng)作的css中的line-height屬性。經(jīng)過(guò)反復(fù)思考,我們這里會(huì)用18px作為我們橫向區(qū)域的高度.
小小的總結(jié)一下,我們已經(jīng)有了頁(yè)面寬度,縱向區(qū)域,也有了橫向區(qū)域。
第四步是需要我們來(lái)確認(rèn)這個(gè)設(shè)計(jì)中的"域"。通過(guò)對(duì)"域"的實(shí)現(xiàn)會(huì)使我們的網(wǎng)頁(yè)布局更合理更美觀, 比如通過(guò)"域"我們可以大概計(jì)算出如何擺放一些頁(yè)面中的重要元素。(切記,"域"是起輔助作用,而不是唯一標(biāo)準(zhǔn))。
平面設(shè)計(jì)師,雜志設(shè)計(jì)師,圖書(shū)設(shè)計(jì)師在設(shè)計(jì)之前一般都會(huì)把A4,A3等的頁(yè)面從上到下劃分為幾個(gè)區(qū)域(也就是我們所說(shuō)的"域"),這樣在設(shè)計(jì)的時(shí)候設(shè)計(jì)師可以很好的控制頁(yè)面中每一部分元素的平衡(視覺(jué),內(nèi)容和布局平衡),從而使這個(gè)設(shè)計(jì)達(dá)到不錯(cuò)的效果; 但是在網(wǎng)頁(yè)中這些理論就非常的不實(shí)用,比如設(shè)計(jì)雜志的話都是用的A4紙大小,那么寬度和高度都是確定的,而在網(wǎng)頁(yè)設(shè)計(jì)中,高度是不定的,那應(yīng)該怎么辦?!?。?!
數(shù)學(xué)的魅力在這個(gè)時(shí)候再次給予我們無(wú)窮的力量?。?黃金分割線。要是你和我一樣,在上數(shù)學(xué)課的時(shí)候老是做小動(dòng)作,千萬(wàn)不要被這個(gè)名字給嚇到。
數(shù)學(xué)的魅力在這個(gè)時(shí)候再次給予我們無(wú)窮的力量?。?黃金分割線。要是你和我一樣,在上數(shù)學(xué)課的時(shí)候老是做小動(dòng)作,千萬(wàn)不要被這個(gè)名字給嚇到!
通過(guò)第一步,我們已經(jīng)確認(rèn)了我們的頁(yè)面寬度是960px, 所以我們可以通過(guò)黃金分割的原理來(lái)確定我們的"域"的高度。誰(shuí)知道黃金分割的系數(shù)是多少?! - 答案是1.618。 于是我們可以把我們的頁(yè)面寬度(960px)除以 黃金分割的系數(shù)1.618來(lái)得到"域"的高度 - 960/1.618=593px。
通過(guò)運(yùn)算我們知道了"域"的高度,如果你把593px除以我們的橫向區(qū)域的高度(18px - 查看第三步), 593/18=32.94444444,也就是說(shuō)每一個(gè)"域"的里面有接近33個(gè)橫向區(qū)域。
但是現(xiàn)在擺在我們眼前還有一個(gè)問(wèn)題,如果把593px最為我們?cè)O(shè)計(jì)中"域"的高度,那么你會(huì)發(fā)現(xiàn)我們的頁(yè)面也許一般也只能放下一到兩個(gè)域,顯然這對(duì)我們的布局不能起到很好的指引作用-要知道不少頁(yè)面的高度小于593px,那要這個(gè)域還有什么用?!
大家可以用以上的理論做出一套適合自己項(xiàng)目的頁(yè)面寬度,縱向區(qū)域, 橫向區(qū)域,"域",通過(guò)他們的輔助把你的設(shè)計(jì)水平提升到一個(gè)新的層次!切記- 規(guī)則是死的,人是活的,怎樣遵守規(guī)則的同時(shí)破壞規(guī)則是決定你是否能成功的關(guān)鍵。簡(jiǎn)約的東西通常是通過(guò)復(fù)雜的過(guò)程得到的。
1. 優(yōu)秀的網(wǎng)絡(luò)資源,穩(wěn)定的網(wǎng)站和速度保證
(配送雙線獨(dú)立ip空間,國(guó)際A級(jí)BGP機(jī)房,99.5% 的主機(jī)在線時(shí)間)
2. 7年北京網(wǎng)站建設(shè)經(jīng)驗(yàn),優(yōu)秀的技術(shù)和設(shè)計(jì)水平,更放心
3. 全程省心服務(wù),不必?fù)?dān)心自己不懂網(wǎng)絡(luò),更省心。
-----------------------------------------------------------------------------------------------------
我們的與眾不同之處:
免費(fèi)網(wǎng)絡(luò)營(yíng)銷(xiāo)顧問(wèn):我們?yōu)槟峁┟赓M(fèi)的網(wǎng)絡(luò)營(yíng)銷(xiāo)顧問(wèn)服務(wù),您需要了解關(guān)于如何開(kāi)展網(wǎng)絡(luò)營(yíng)銷(xiāo),電子商務(wù),網(wǎng)站設(shè)計(jì)等的事宜,歡迎隨時(shí)聯(lián)系我們。
seo友好的網(wǎng)站管理系統(tǒng):除了優(yōu)質(zhì)的網(wǎng)站空間,網(wǎng)站管理系統(tǒng),和網(wǎng)站設(shè)計(jì)外,我們的網(wǎng)站管理系統(tǒng)更是seo友好的,包括:自定義欄目名,Google Sitemap自動(dòng)生成,靜態(tài)頁(yè)面生成等等,讓您的網(wǎng)站。
免費(fèi)網(wǎng)絡(luò)營(yíng)銷(xiāo)培訓(xùn):如何更好的投放網(wǎng)絡(luò)廣告,如何提高網(wǎng)絡(luò)廣告的投資回報(bào),如何發(fā)帖子,
如何優(yōu)化網(wǎng)站,我們有豐富的經(jīng)驗(yàn)開(kāi)放給您!祝君成功!
創(chuàng)新互聯(lián)專(zhuān)業(yè)成都網(wǎng)站建設(shè)公司提供一站式網(wǎng)站解決方案,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù)!
文章名稱(chēng):好的網(wǎng)站設(shè)計(jì)沒(méi)有計(jì)劃是不行的。
文章路徑:http://m.rwnh.cn/news/78118.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專(zhuān)注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營(yíng)銷(xiāo)seo公司;服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)