CSS網(wǎng)頁制作布局實(shí)例教程

互聯(lián)網(wǎng) 發(fā)布時(shí)間：2008-10-17 19:24:36 作者：佚名

相關(guān)文章：用CSS建設(shè)網(wǎng)站的實(shí)例原文博客：veerle 翻譯整理：西米CC 來自國(guó)外博客veerle的一個(gè)系列教程，分八個(gè)部分講解一張完整CSS頁面的構(gòu)建過程。雖然它不是每個(gè)步驟都解釋得非常詳細(xì)，但是其中提及的很多技巧和經(jīng)驗(yàn)都很值得初學(xué)者借鑒，從界面設(shè)計(jì)到頁面構(gòu)建，

CSS混沌初開II:背景圖案及配色
本教程的第二部分主要有兩個(gè)重點(diǎn)：一是如何正確選擇導(dǎo)航菜單中所涉及的顏色，雖然它沒有很多的技術(shù)含量，但使用的顏色是否恰當(dāng)，與后期出來的效果是有很大影響的；另外一部分主要是關(guān)于頁面背景的，側(cè)重于制作背景圖片素材時(shí)的一些細(xì)節(jié)問題。
在第一講中，我主要是介紹一種實(shí)現(xiàn)玻璃材質(zhì)按鈕的快捷途徑，現(xiàn)在來講顏色的選擇似乎有點(diǎn)滯后了。不過鑒于網(wǎng)站的風(fēng)格存在差異，素材色系的選擇也是界面設(shè)計(jì)階段很重要的一塊內(nèi)容，網(wǎng)絡(luò)上也有很多關(guān)于網(wǎng)頁色彩的文章，大家可以依據(jù)其中介紹的一些基本知識(shí)進(jìn)行參考，雖然良好的色彩感覺需要很長(zhǎng)一段時(shí)間來培養(yǎng)。
選擇你的色彩體系
事實(shí)上色系的選擇會(huì)體現(xiàn)很多個(gè)人因素，畢竟每個(gè)人都會(huì)有各自的色彩偏好，你的選擇也會(huì)彰顯你的個(gè)人風(fēng)格。沒人能建議你“必須選擇什么顏色”，這里我也只能提供一些個(gè)人認(rèn)為比較實(shí)用的意見：

使用至少一種高飽和度、高辨識(shí)度的色彩，并以其色調(diào)定義站點(diǎn)的整體基調(diào)。把這個(gè)色彩運(yùn)用在文本鏈接上，能使其更加顯眼、引人關(guān)注；謹(jǐn)記不要在一張頁面中使用過多的顏色，這樣只會(huì)讓你的網(wǎng)頁看起來很花哨繁雜。我的建議是最好保持在三種之內(nèi)：一個(gè)強(qiáng)調(diào)色和兩個(gè)輔色；
在顏色的搭配上，不論是主色還是輔助色，都要善于通過它們明度變化來衍生更多的色彩，如果只是反復(fù)的使用三種以下的顏色未免會(huì)讓人感覺單調(diào)，當(dāng)然這也不是意味著顏色變化越多你的頁面看起來就會(huì)越出色，仍然要視乎網(wǎng)站的整體風(fēng)格和設(shè)計(jì)者對(duì)顏色的駕馭能力：

在PS中我們可以通過在色相/飽和度（Ctrl U）面板中調(diào)整參數(shù)來調(diào)配顏色。事實(shí)上圖中的幾組顏色就是通過這種方法調(diào)制出來的，當(dāng)然在這個(gè)面板中可以變化出很多顏色，具體哪個(gè)參數(shù)應(yīng)該為什么值都沒有硬性的規(guī)定，網(wǎng)絡(luò)上有很多推薦的色彩組合并明確給出了RGB值，大家在利用這種方法配色的時(shí)候也可以參考那些文章教程。
如果你看了上面的講解之后仍然不知道如何著手，這段關(guān)于顏色的影片 或許會(huì)對(duì)你有所幫助。事實(shí)上我覺得每個(gè)人都應(yīng)該去看一下這個(gè)影片，不僅因?yàn)樗旧碓O(shè)計(jì)得相當(dāng)有趣，更重要的是對(duì)于認(rèn)識(shí)和了解大眾化的色彩體驗(yàn)和感知從而運(yùn)用到網(wǎng)頁設(shè)計(jì)中，它都是一個(gè)很好的引導(dǎo)和鞏固。
是時(shí)候開始繪制背景圖案了
現(xiàn)在我們開始討論網(wǎng)頁的背景圖案。當(dāng)我們?cè)赑S等軟件中創(chuàng)作背景圖案時(shí)，往往要精細(xì)到像素，尤其是那些平鋪填充的背景。首先我們?cè)赑S中新建一個(gè)30x像素的空白文檔，填充適當(dāng)?shù)念伾?，并用鉛筆工具在其上繪制一些單像素小點(diǎn)，下面是一些例子：

如第一講中導(dǎo)航按鈕上的小點(diǎn)一樣，在這里你也可以盡量的發(fā)揮自己的創(chuàng)意，但是還是有幾個(gè)需要注意的地方，比如小點(diǎn)的顏色，不能跟背景色反差太大，不然平鋪以后它們會(huì)變得很刺眼。如果要利用小點(diǎn)來組合出一些圖案或線條，我通常會(huì)采用復(fù)制圖層并通過方向鍵調(diào)整其位置的方法，適當(dāng)?shù)臅r(shí)候還會(huì)變化其圖層模式或透明度等。

制作這些背景圖案的一個(gè)難點(diǎn)就是，如何保證圖案平鋪時(shí)能實(shí)現(xiàn)無縫接合，畢竟背景的面積往往比較大，它上面若有割裂就會(huì)很顯眼。我通常采用的方法是利用PS中的矩形選框工具，比如下圖中，正方形選區(qū)左上角標(biāo)識(shí)出的像素必須與其它三個(gè)標(biāo)識(shí)區(qū)一致，那么當(dāng)我們把這樣一塊區(qū)域截取下來進(jìn)行平鋪的時(shí)候就不會(huì)有問題：