|
原文：http://jorux.com/archives/layout-1-if-you-love-css/
從本篇開始講述如何用css實(shí)現(xiàn)網(wǎng)頁的布局，即如何用css控制網(wǎng)頁內(nèi)各個(gè)元素的顯示位置。如果你是一個(gè)初學(xué)者，很可能覺得做一個(gè)網(wǎng)頁的第一步就是布局。其實(shí)不然，css網(wǎng)頁的設(shè)計(jì)過程可以參考分為以下幾步：
平面設(shè)計(jì)—>頁面切割—>布局—>細(xì)節(jié)控制
- 平面設(shè)計(jì)是一個(gè)網(wǎng)頁的精髓所在，讀者直接面對(duì)的界面，在本站以后的文章中會(huì)涉及此方面內(nèi)容。也許你會(huì)認(rèn)為在腦子里形成一個(gè)網(wǎng)站的大概印象就可以了，那么這種想法直接就給你貼上業(yè)余的標(biāo)簽。推薦工具：Photoshop；
- 頁面切割其實(shí)可以劃分到布局里，因?yàn)槟愕捻撁媲懈罘绞街苯佑绊懥瞬季址绞�，也體現(xiàn)了你是屬于表格布局陣營(yíng)還是css布局陣營(yíng)。它是布局(前)的關(guān)鍵步驟。將在本章重點(diǎn)講述。推薦工具：Photoshop；
- 如果把布局說簡(jiǎn)單點(diǎn)，就先得把你的網(wǎng)頁簡(jiǎn)單化。簡(jiǎn)單到把你的網(wǎng)站分為header，content，sidebar，footer四個(gè)部分。
- 細(xì)節(jié)控制，將header，content，sidebar，footer的表現(xiàn)細(xì)節(jié)化。
本章將針對(duì)頁面切割講述一些Jorux的私人觀點(diǎn)與技術(shù)。
首先，我們要有一個(gè)被切割的對(duì)象，這里以Jorux.com的原始photoshop平面設(shè)計(jì)圖為例。如下（Fig.01）：
點(diǎn)擊查看大圖
如果使用表格布局的話，你可能就想到在photoshop里把頁面切割為無數(shù)個(gè)固定寬高的格子。但用css布局的話，你首先要明確的以下幾點(diǎn)是：
- 你是要橫著切，還是要豎著切；
- 第一次切割，只需要把網(wǎng)頁中的背景圖片切割出來(因?yàn)楸尘皥D片是在css里聲明的)；
- 切的的圖片要盡量小，然后讓css去做更多的事情；
- 設(shè)計(jì)比較復(fù)雜的部分，可以不分割，從而減少css編碼的難度；
- 讀者應(yīng)該根據(jù)自己的能力，找出哪些效果css可以輕松實(shí)現(xiàn)，而哪些效果用圖片更加簡(jiǎn)單而且size不大，仔細(xì)在3.4之間權(quán)衡利弊；
現(xiàn)在我們來看Fig.01, 最靠上的部分是個(gè)黑色的尺子，遮住了“Jorux記事本”，更遭的是它居然還有黑色的投影。等到要切割的時(shí)候，我才后悔當(dāng)初怎么能設(shè)計(jì)得如此復(fù)雜。但沒關(guān)系，一切都會(huì)好起來的�，F(xiàn)在跟著來重溫我的切割思路：
1. 整個(gè)網(wǎng)頁背景色大家應(yīng)該很清楚，就是深灰色#444，這無需圖片，在css里的body選擇器里聲明就好；
2. 這一步是最關(guān)鍵的一步，請(qǐng)讀者仔細(xì)體會(huì)。對(duì)于css布局的網(wǎng)頁，Jorux建議你首先給你的原始平面設(shè)計(jì)來兩個(gè)橫刀(紅色)，接著就來個(gè)豎刀(藍(lán)色)。實(shí)現(xiàn)如下效果(Fig.02)：
點(diǎn)擊查看大圖
一定要先橫再豎，即先把你的網(wǎng)頁分為top，mid，bottom三個(gè)部分，然后再把mid分為content和sidebar兩個(gè)部分。對(duì)于單欄樣式，只需要兩橫刀，而對(duì)于三欄樣式，可能就需要兩橫兩豎刀。
這樣你就得到header，content，sidebar，footer四個(gè)部分�，F(xiàn)在來分析這四個(gè)部分的背景圖片需要如何切割。
出處：Jorux Notebook
責(zé)任編輯：moby
上一頁 下一頁 css基礎(chǔ)教程布局篇之一 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 css基礎(chǔ)教程布局篇之一 [1]
第 2 頁 
