相關(guān)文章：用CSS建設(shè)網(wǎng)站的實(shí)例
原文博客：veerle
翻譯整理：西米CC
來自國外博客veerle的一個(gè)系列教程，分八個(gè)部分講解一張完整CSS頁面的構(gòu)建過程。雖然它不是每個(gè)步驟都解釋得非常詳細(xì)，但是其中提及的很多技巧和經(jīng)驗(yàn)都很值得初學(xué)者借鑒，從界面設(shè)計(jì)到頁面構(gòu)建，強(qiáng)調(diào)了很多細(xì)節(jié)的設(shè)計(jì)理念。在翻譯的過程中，個(gè)人覺得本教程比較薄弱的環(huán)節(jié)是頁面整體布局的搭建，篇幅不是很充分，不過大家仍然可以通過觀察源文件進(jìn)行查漏補(bǔ)缺。
本教程最終效果如下（瀏覽示例頁面）：
本教程素材及頁面源代碼下載

教程的每個(gè)部分都有其側(cè)重點(diǎn)，其中前三節(jié)都是關(guān)于素材制作與設(shè)計(jì)的，要求有一定的Photoshop操作基礎(chǔ)，我想這也是網(wǎng)頁設(shè)計(jì)必備的基礎(chǔ)技能之一。
英文原文
#p#

CSS混沌初開I：導(dǎo)航菜單素材的設(shè)計(jì)
現(xiàn)在開始我們將學(xué)習(xí)如何一步一步的構(gòu)建一張CSS頁面。本教程分成以下幾個(gè)部分：第一講主要是關(guān)于如何在PS中制作導(dǎo)航按鈕素材；第二部分主要針對(duì)的內(nèi)容是背景，接著是頁面的整體布局以及頂部解析，最后一部分是如何整合CSS和XHTML。
有些人可能會(huì)疑惑為什么要從導(dǎo)航按鈕圖片的制作開始，事實(shí)上我的初衷是讓大家了解進(jìn)而注重素材制作中的一些細(xì)節(jié)處理，這對(duì)最終的作品效果有很大的影響，至少在視覺上而言。首先看一下完成的效果：

玻璃質(zhì)感導(dǎo)航圖片的制作：
首先我們?cè)赑hotoshop中建立一個(gè)178x22像素的RGB空白文檔，添加一個(gè)新圖層命名為“按鈕”，并用灰色#ECECEC進(jìn)行填充。再新建一個(gè)圖層命名為“高光”，在其上、左邊緣各繪制1px的白色線條，你用畫筆或單像素選取工具都可以。然后我們用橡皮工具把左邊緣白線的底部擦除一段，在這里我使用的是大小20px透明度為50%的橡皮刷：

新建一個(gè)名為“網(wǎng)點(diǎn)”的圖層，用1px的鉛筆工具在適當(dāng)?shù)奈恢美L制幾個(gè)小點(diǎn)，示例中的顏色是#727272，當(dāng)然這里你可以自由發(fā)揮設(shè)計(jì)更有創(chuàng)意的小點(diǎn)組合，關(guān)鍵就是要讓它們看起來精致有序：

接著我們可以通過鋼筆工具繪制路徑創(chuàng)建選區(qū)，并在選區(qū)內(nèi)填充#d6d6d6顏色，來模擬玻璃的質(zhì)感效果。整個(gè)圖片素材的制作過程雖然不是很復(fù)雜，但是最終效果看起來也不是很差，不是么？

鼠標(biāo)經(jīng)過導(dǎo)航時(shí)的翻轉(zhuǎn)圖片：
創(chuàng)建翻轉(zhuǎn)效果圖片，我們只要簡單的在原有素材基礎(chǔ)上調(diào)整色調(diào)就即可，關(guān)于文本的添加在這里就不細(xì)說了。我們可以為每個(gè)圖層調(diào)整色調(diào)，在示例中我主要使用了一下幾種顏色：背景#BFE3FF、玻璃質(zhì)感#A5D1F3、網(wǎng)點(diǎn)#E4001B。這部分教程涉及到一些Photoshop的基本知識(shí)，如果你不是很了解，建議先學(xué)習(xí)一些PS的入門基礎(chǔ)，畢竟Adobe合并了Macromedia之后，其旗下軟件尤其是PS與網(wǎng)頁設(shè)計(jì)的關(guān)聯(lián)性已經(jīng)越來越緊密了，大多時(shí)候你要設(shè)計(jì)出優(yōu)秀美觀的網(wǎng)頁，都離不開這些軟件的幫助。當(dāng)然顏色選擇要視乎你的需要，制作的方法大致還是相通的，你也可以發(fā)揮創(chuàng)意進(jìn)行更好的細(xì)節(jié)設(shè)計(jì)：

下載本例素材源文件
#p#

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)行參考，雖然良好的色彩感覺需要很長一段時(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ì)有問題：

當(dāng)然這個(gè)問題是否容易解決，也是視乎你最初設(shè)計(jì)的背景圖案，如果我們動(dòng)手的時(shí)候就把可能遇到的一些問題考慮在內(nèi)，那么到解決的時(shí)候也不會(huì)太費(fèi)力甚至返工了。
下載本例素材源文件
#p#

CSS混沌初開III:頂部圖片視覺修飾
這節(jié)是關(guān)于素材設(shè)計(jì)的最后一部分了，設(shè)計(jì)工作完成后將會(huì)開始講解如何切片以及在CSS和XHTML中構(gòu)建最終頁面。首先看一下這節(jié)設(shè)計(jì)的效果圖：

在制作按鈕時(shí)，我用了粉紅和暗綠兩種色調(diào)，可能看起來有點(diǎn)怪，但個(gè)人很鐘意這個(gè)組合。在設(shè)計(jì)網(wǎng)頁整體界面的過程中，我會(huì)給出一些意見和建議，重點(diǎn)是頂部的圖片，如何增加一些細(xì)節(jié)，讓它看起來更加的美觀、精致。
頂部圖片的視覺處理
在教程的前兩部分中，提到過導(dǎo)航按鈕的顏色選擇，現(xiàn)在我們來看一下如何處理一張花卉圖像的色調(diào)，使其與頁面的風(fēng)格達(dá)到統(tǒng)一。在用到的花卉圖像素材中，大家可以發(fā)現(xiàn)它上面也有紅和綠兩種色調(diào)，我要做的事情就是把其中的顏色調(diào)制成粉紅和暗綠，就好似導(dǎo)航菜單中使用的色調(diào)一樣：

首先來看一下圖片中花朵的顏色，它的色調(diào)偏向于大紅，還是使用PS中的色相/飽和度命令來對(duì)它進(jìn)行調(diào)整。利用快捷鍵按Ctrl U調(diào)出色相/飽和度面板，在“編輯”項(xiàng)的下拉列表中選擇“紅色（Ctrl 1）”，這樣我們就能只針對(duì)圖像中的紅色進(jìn)行調(diào)整了。拖動(dòng)色相滑塊調(diào)制出我們需要的紅色，具體的數(shù)值依據(jù)實(shí)際情況，比如我這里是大致是-30左右：

下一步就是通過修飾細(xì)節(jié)增加一些輔助色調(diào)來增進(jìn)視覺效果，為接下來的濾鏡處理作一些預(yù)處理。頂部圖片的處理對(duì)創(chuàng)意有一定的要求，如果有相關(guān)的經(jīng)驗(yàn)的話也就不是件難事，所以素材處理能力以及個(gè)人的美工基礎(chǔ)都會(huì)對(duì)設(shè)計(jì)過程、設(shè)計(jì)結(jié)果產(chǎn)生影響：

在之前的步驟中圖片的尺寸和體積無疑已經(jīng)進(jìn)行了調(diào)整，但是如果有比較多的細(xì)節(jié)要處理的話，建議還是在原始尺寸上操作，像示例中的圖片我剛開始也是在1600 1200的原始大小下進(jìn)行處理的。我為圖像添加了個(gè)人比較偏愛的繪畫涂抹濾鏡（濾鏡菜單—藝術(shù)效果），效果如下圖。在PS中，濾鏡的運(yùn)用是很有趣的一件事情，調(diào)節(jié)其中的參數(shù)就可以達(dá)到很多意想不到的效果，加之在CS版本中提供了可用濾鏡效果的縮略圖預(yù)覽，讓這個(gè)實(shí)用的工具用起來更加方便：

接著我們添加一些波浪線條來營造虛幻的意境，可以用筆刷或者鋼筆繪制一些曲線，當(dāng)然也可以用漸變工具制作，只要達(dá)到下圖中漸隱效果即可。事實(shí)上我們只需要做出其中一條就可以了，然后復(fù)制圖層調(diào)整其透明度、角度、扭曲制作出其它的線條。這里使用的顏色還是推薦使用粉紅，為了區(qū)別于花朵的顏色，可以把線條的粉紅明度調(diào)大一點(diǎn)。在圖片的右邊，我利用Tamuz字體添加了一個(gè)修飾符號(hào)，效果如下：

如果對(duì)以上操作有疑問，可以 下載QuickTime演示影片 觀看！
在圖片上添加BLOG標(biāo)題
Blog的標(biāo)題反映了你網(wǎng)站的內(nèi)容主題，其文字組織因人而異，一般還會(huì)加上一個(gè)圖標(biāo)或LOGO，畢竟每個(gè)人都想自己的Blog與眾不同，有一些標(biāo)志性的元素，在這里我就簡單的選用一個(gè)仙人掌標(biāo)志：

下面是一些關(guān)于字體或修飾符號(hào)的資源鏈接： Minion修飾符和Tamuz字體 Adobe提供的修飾性字體 一系列免費(fèi)的Dingbats字體
最終的界面設(shè)計(jì)效果
至今為止，不論是在導(dǎo)航按鈕還是頂部圖片的制作，我們都還沒有遇到什么棘手的難題。現(xiàn)在讓我們把做出來的素材整合在一起，拼合成一張 最終的界面效果 。這已經(jīng)是界面設(shè)計(jì)的最后一個(gè)階段了，所有若還有什么可添加的修飾元素，最好都在界面效果圖中體現(xiàn)出來。在我的示例頁面中，文章標(biāo)題和友情鏈接的前面我都用精致的圖標(biāo)進(jìn)行修飾，效果看起來還可以，當(dāng)然你們可以選擇自己喜歡的素材替換，最好也能在設(shè)計(jì)過程中體會(huì)到樂趣！
#p#

CSS混沌初開V：側(cè)邊欄導(dǎo)航菜單的實(shí)現(xiàn)
首先對(duì)教程的第四部分作一點(diǎn)補(bǔ)充。有人建議Blog的標(biāo)題最好使用H1標(biāo)簽，以文本的形式表現(xiàn)標(biāo)題內(nèi)容，原因是不論是在CSS關(guān)閉的情況下，還是對(duì)于搜索引擎的抓取，H1標(biāo)簽結(jié)合文本的形式都具有更好的可訪問性。這個(gè)提議很有道理，很多人也是這么做的，所以我也建議大家對(duì)之前的代碼進(jìn)行調(diào)整。
若使用H1標(biāo)簽來實(shí)現(xiàn)Blog標(biāo)題，又想保持原來標(biāo)題位置的圖片的話，那么就有必要了解一下CSS中很經(jīng)典的圖像替換文本技術(shù)。簡單點(diǎn)說就是在XHTML中包含了文本，并為其設(shè)置背景圖片，但是要通過CSS“隱藏”文本而僅僅顯示背景圖片。若你對(duì)這個(gè)技術(shù)不是很了解，本站也有一篇專門關(guān)于 圖像替換文本技術(shù) 的文章，希望對(duì)你有所幫助。
圖像替換文本技術(shù)
這個(gè)技術(shù)有時(shí)候我們也稱之為文本替換或圖像替換，其強(qiáng)調(diào)的核心是在HTML代碼中我們使用文本，然后通過一些方法將文本“隱藏”，而僅顯示背景或其它形式的圖片，這樣在保證可訪問性的同時(shí)，也使得頁面因圖像的應(yīng)用而更加美觀。比如我們可以將圖片設(shè)置為背景，讓后利用text-indent使文本有足夠的縮進(jìn)實(shí)現(xiàn)隱藏，代碼如下：
h1 {
width: 692px;
height: 90px;
text-indent: -9999px;
background: url(images/header.jpg);
margin: 0;
padding: 0;
}
其中的width和height是必須定義的，且需和背景圖片的尺寸保持一致。text-align: center被轉(zhuǎn)移到了body標(biāo)簽中，這樣頁面中所有的內(nèi)容都被定義為居中顯示，而那些不需要居中的內(nèi)容，如文章正文，我們可以再添加text-align: left進(jìn)行覆蓋。當(dāng)然對(duì)于外圍容器而言，我們利用margin: 0px auto使其在水平方向上保持在頁面的中部。
導(dǎo)航菜單的實(shí)現(xiàn)
首先定義導(dǎo)航外圍容器的樣式：
#left {
width: 178px;
}
現(xiàn)在外圍容器我們只要簡單的定義其寬度，并賦予left的id名。在left容器中，我們添加一個(gè)名為navcontainer的子容器來放置導(dǎo)航菜單。實(shí)現(xiàn)導(dǎo)航的標(biāo)簽推薦使用無序列表ul，通過CSS我們可以改變其外觀和形式。HTML結(jié)構(gòu)如下：
<div id="navcontainer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">ximicc</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Photo roll</a></li>
</ul>
</div>

ul和li標(biāo)簽構(gòu)建了一個(gè)簡單的項(xiàng)目列表，其項(xiàng)目符號(hào)默認(rèn)為小圓點(diǎn)，這是我們不需要的。利用CSS可以去掉那些小圓點(diǎn)，并用背景圖片的形式替換以我們制作好的圖標(biāo)：

#navcontainer {
width: 178px;
}
#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
text-indent: 20px;
letter-spacing: 1px;
border-bottom: 1px solid #fff;
}
第一段代碼還是定義導(dǎo)航容器的寬度，其值與left容器相同。第二段代碼主要用于改變列表的外觀，margin和padding確保導(dǎo)航項(xiàng)目的周圍沒有空隙，并去除了列表項(xiàng)默認(rèn)的縮進(jìn)，list-style-type則定義了列表的項(xiàng)目符號(hào)為無。text-indent使文本左邊空出一定的空間，以便在之后的步驟中定義背景圖片，并保證背景圖不會(huì)被文本遮蓋。最后一行代碼在每個(gè)導(dǎo)航項(xiàng)目的底部生成一條白線，兼具美化和分界的功能。
接下來是鏈接外觀的定義：
#navcontainer a {
display: block;
width: 178px;
height: 22px;
}
以上代碼是對(duì)導(dǎo)航內(nèi)a標(biāo)簽的CSS定義，作用于導(dǎo)航中的每個(gè)鏈接元素。display: block將鏈接對(duì)象轉(zhuǎn)換為塊級(jí)元素，然后再定義其寬和高，使得鏈接能具有類似按鈕一樣矩形的觸發(fā)區(qū)域，并且讓我們可以利用偽類a:hover來定義鼠標(biāo)經(jīng)過鏈接時(shí)的翻轉(zhuǎn)效果，如在第二段代碼中展示的簡單的改變背景色或背景圖片：

#navcontainer a:link, #navcontainer a:visited {
background: url(images/bg_navbutton.gif);
color: #5C604D;
text-decoration: none;
}
#navcontainer a:hover {
background: url(images/bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}
第一段代碼定義了鏈接文本的顏色，并設(shè)置text-decoration屬性為none來去除鏈接默認(rèn)的下劃線。導(dǎo)航的設(shè)計(jì)往往要求簡潔、明了，并且具有很強(qiáng)的指示性，所以我在這里定義了一個(gè)額外的樣式#current來表現(xiàn)當(dāng)前頁面處于導(dǎo)航中的哪個(gè)項(xiàng)目：
#navcontainer li a#current {
background: url(images/bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}
名為current的樣式針對(duì)的是列表項(xiàng)目li中的鏈接元素，其屬性的定義與鏈接的hover狀態(tài)樣式是一樣的，現(xiàn)在我們要做的事情就是把這個(gè)樣式應(yīng)用到HTML中：
<div id="navcontainer">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact me</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Photo roll</a></li>
</ul>
</div>
現(xiàn)在的current樣式是應(yīng)用在第一個(gè)li上，也就是瀏覽器解析后“Home”菜單較之其它的菜單項(xiàng)目有其獨(dú)特的外觀，表明當(dāng)前的頁面是屬于“Home”這里欄目的。當(dāng)然頁面變化了，current樣式應(yīng)用的li對(duì)象也就不一樣了。

#p#

CSS混沌初開IV：頁面DIV布局解構(gòu)
在前三講的教程中我們已經(jīng)完成了網(wǎng)頁界面設(shè)計(jì)的工作，從本節(jié)開始，我們將關(guān)注如何對(duì)效果圖進(jìn)行解構(gòu)，并初步擬定網(wǎng)頁文件的DIV結(jié)構(gòu)。
首先我們必須明確幾個(gè)問題，比如設(shè)計(jì)好的界面應(yīng)該劃分成幾塊？每塊對(duì)應(yīng)網(wǎng)頁中的哪部分內(nèi)容？只有對(duì)這些問題有了概念之后，我們才能開始進(jìn)行切片和導(dǎo)出的操作。如果對(duì)頁面構(gòu)建的整個(gè)流程很熟悉，那么以上幾個(gè)問題并沒有太大的難度，可能你在PS中設(shè)計(jì)素材的時(shí)候就已經(jīng)開始考慮之后的DIV劃分了。當(dāng)然，我們是要有一定的應(yīng)變能力，合理的組織CSS和XHTML，讓最終出爐的網(wǎng)頁具有更好的靈活性和可訪問性。
本例中頁面模塊劃分的規(guī)劃

頁面頂部（the header）； 左側(cè)邊欄（the left）； 主體內(nèi)容（the content）； 頁腳（the footer）；

必須進(jìn)行切片并導(dǎo)出JPF或GIF的幾塊區(qū)域

頂部圖片（header）； 默認(rèn)導(dǎo)航圖片（bg_navbutton） 翻轉(zhuǎn)導(dǎo)航圖片（bg_navbutton_over） 友情鏈接圖標(biāo)（bullet_extlink） 文章標(biāo)題圖標(biāo)（bullet_title）

也許你會(huì)想：“那背景圖片呢?”我沒有把它羅列在其中，因?yàn)楸尘皥D片比較特殊，不論在何種分辨率下我們都要保持主體內(nèi)容的居中，所以我們需要一種更聰明的方法。這是我們要導(dǎo)出的背景圖片，它的尺寸是1600X5px，應(yīng)該夠用了，除非你擁有Apple公司30英寸的超寬屏顯示器。
利用CSS定義頁面的背景
下面的CSS代碼可以讓我們的頁面背景保持居中顯示：
body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
}
背景圖片只有5px高度，所以我們將其設(shè)置為縱向平鋪，然后利用參數(shù)50%使其水平居中，參數(shù)fixed的用處是讓背景不隨內(nèi)容的滾動(dòng)而滾動(dòng)，它是“凝固”的。這里的選擇符我們使用body，因?yàn)楸尘靶Ч轻槍?duì)整張頁面而言的。

構(gòu)建頁面的DIV結(jié)構(gòu)
首先來看一下頂部版塊的CSS定義：
#header {
text-align: center;
}
頂部版塊的樣式我們使用id選擇符，注意在同一個(gè)文檔中id選擇符必須是唯一的。網(wǎng)頁的頂部也需要居中，這也是我們?yōu)槭裁炊xtext-align的原因。下面這段代碼我們要添加在body標(biāo)簽之間：
<div id="header">
<img src="images/header.jpg" alt="ximicc" width="692" height="90" />
</div>
你可能也注意到了，當(dāng)頂部圖片應(yīng)用到網(wǎng)頁中的時(shí)候，其上邊緣和瀏覽器邊界之間有一定的間隙，所以在這里我們要用margin和padding進(jìn)行完善：

body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
margin: 0;
padding: 0;
}
如果你對(duì)以上涉及的CSS還不是很熟悉的話，這個(gè) 入門教程（英文的，節(jié)哀...）建議你去看一下，相信會(huì)有很大的幫助。
#p#

CSS混沌初開VI：正文與圖片的混排
現(xiàn)在我們可以開始在網(wǎng)頁中添加內(nèi)容了，在后續(xù)教程中將會(huì)介紹友情鏈接版塊以及頁腳的制作。
首先在CSS中添加一個(gè)id選擇符，在其中定義一個(gè)寬度值514px (692-178)：
#content {
width: 514px;
float: left;
}
因?yàn)閷?dǎo)航菜單浮動(dòng)在頁面主體的左邊，所以我們要在#left中添加一條float: left語句，#content中的左浮動(dòng)是針對(duì)其外圍容器的，解析之后它將顯示在導(dǎo)航右邊的正文版塊：
#left {
width: 178px;
float: left;
}
接下來在XHTML中添加如下代碼：
<div id="content">this is the right</div>
如果你對(duì)上面的CSS和XHTML組織感到疑惑，下面的教程可能會(huì)對(duì)你有所幫助： CSS中的Float屬性入門 浮動(dòng)屬性Float的應(yīng)用
你會(huì)發(fā)現(xiàn)正文的內(nèi)容跟導(dǎo)航菜單貼得很緊，我們可以利用padding來增加一點(diǎn)間隙：
#content {
width: 479px;
float: left;
padding-top: 15px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
}
也可以將代碼簡化成：
[/code]#content {
width: 479px;
float: left;
padding: 15px 0 10px 20px;
}
[/code]
不論是padding還是margin，若其后跟著四個(gè)數(shù)值，對(duì)應(yīng)的邊緣順序是上右下左，即順時(shí)針方向。大家會(huì)發(fā)現(xiàn)現(xiàn)在#container中定義的寬度由原來的514變成了479，因?yàn)槲覀優(yōu)榱俗屨奈谋九c左右邊框空出一點(diǎn)距離，左邊緣用padding實(shí)現(xiàn)，而右邊緣因?yàn)檎麄€(gè)DIV是左浮動(dòng)的，所以我們直接將DIV的寬度縮減15px，所以width的值就變成了514-20-15=479px。

你可能會(huì)疑問：“為什么不直接使用"width: 494px" 和 "padding-right: 15px"呢？”剛開始的時(shí)候我也是這么做的，出來的效果在Safari, FireFox 和Mozilla還算正常，但在IE中就不行了，正文版塊跳到了導(dǎo)航的下面，好像右邊沒有足夠的空間容納下正文DIV，具體問題出在哪里我也說不清楚，可能也是IE的一個(gè)Bug吧。
添加正文的文章標(biāo)題
先來看一下主內(nèi)容版塊的結(jié)構(gòu)：

我們把文章的標(biāo)題放在H2標(biāo)簽中：
<h2>This is the title</h2>
針對(duì)文章標(biāo)題的CSS定義如下：
#content h2 {
font: normal 18px Georgia, Times New Roman, Times, serif;
color: #80866A;
background: transparent url(images/bullet_title.gif) no-repeat;
width: 454px;
padding: 0 0 0 30px;
margin: 0;
}
這里我們使用#content h2的選擇符組合，當(dāng)然也可以直接對(duì)H2標(biāo)簽進(jìn)行定義，但是會(huì)對(duì)頁面中所有的H2元素都起作用。這個(gè)CSS樣式的定義中，除了常規(guī)的字體集、顏色、字號(hào)之外，還利用padding屬性在標(biāo)題文本左邊空出30px的縮進(jìn)，目的是不要遮蓋背景圖片。背景background屬性中，除了圖片的路徑及其平鋪方式，還定義了其背景色為透明transparent，使整個(gè)標(biāo)題更好的與其它元素融合
添加正文文本
下面一個(gè)class類.text定義了正文文字的樣式：
.text {
font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
color: #5B604C;
margin-bottom: 10px;
}
與id不同的是，class類可以在一張頁面中重復(fù)使用，里面的屬性比較簡單，需要補(bǔ)充一下的是，11px/18px表示字體大小是11px，行高是18px。在XHTML中，我們添加一個(gè)段落標(biāo)簽P來放置文本，并應(yīng)用.text樣式：
<p class="text">Here comes the text</p>
在正文中添加混排圖像
下面是應(yīng)用在圖像上的樣式：
.imageright {
float: right;
padding: 7px;
background-color: #ffffff;
border: 1px solid #bac1a3;
}
這里我們還是使用class類，因?yàn)橐院罂赡苓€會(huì)用到它。float:right讓圖片在文本塊中居右，而白色的背景和四邊均為7px的padding，使得圖片的四周有了類似7像素白邊的效果，目的是讓圖片內(nèi)容與邊框保持7px的間距。而真正的邊框由border定義，1像素實(shí)線。如果在文本塊中有居左的圖片，我們可以再添加一個(gè)名為.imageleft的class類，具體的屬性設(shè)置只要把float: right改成float: left就可以了。
#p#

CSS混沌初開VII：頁腳的構(gòu)建
在開始第七部分的教程之前，我要先糾正一個(gè)小錯(cuò)誤。之前在添加正文內(nèi)容時(shí)，我把它放在了一個(gè)DIV容器中，事實(shí)上如果我們用段落標(biāo)簽P作容器可以達(dá)到相同的效果，而且當(dāng)CSS關(guān)閉時(shí)也能正常顯示。用P標(biāo)簽來實(shí)現(xiàn)的話，還可以用margin來控制段落的上、下邊距，也就不需要什么換行標(biāo)簽了。
首先要提醒大家的是，相對(duì)于表格布局方式，CSS中頁腳的實(shí)現(xiàn)有著很大的區(qū)別。遺憾的是Safari作為一個(gè)新生瀏覽器，其對(duì)Web標(biāo)準(zhǔn)的支持還不是很完善，比如min-width和min-height屬性在Safari中還沒能得到良好的支持，但是頁腳的實(shí)現(xiàn)我們往往需要用到它們。在繼續(xù)本節(jié)教程之前，希望大家去了解一下這篇Bobby Van Der Sluis文章，它對(duì)CSS中的垂直定位和頁腳實(shí)現(xiàn)作了很到位的講解。
首先還是要先明確一下文檔的DIV結(jié)構(gòu)，之前制作的內(nèi)容比如頂部、導(dǎo)航、正文等我們都封裝到一個(gè)id名為container的DIV中，這組容器標(biāo)簽緊跟在body標(biāo)簽之后，接著就是一個(gè)id名為footer的頁腳容器，代碼如下：
<html>
...
<body>
<div id="container"> ... </div>
<div id="footer"> ... </div>
</body>
</html>
頁腳DIV的CSS設(shè)置如下：
#footer {
margin: 0px auto;
position: relative;
background-color: #717F51;
border-top: 9px solid #F7F7F6;
width: 692px;
padding: 5px 0;
clear: both;
}
我們?yōu)轫撃_設(shè)置暗綠色的背景以及9px的上邊框，寬度定義為692px。Clear屬性用于清除浮動(dòng)，簡單點(diǎn)說就是在其左邊或右邊不允許有任何浮動(dòng)元素。margin: 0px auto的語法在之前的教程中已經(jīng)出現(xiàn)過了，其作用就是讓頁腳在頁面中居中顯示。為了不讓頁腳文字和邊框貼得太近，我們用padding在上、下空出5px的填充空間。
接下來為頁腳中的文字和鏈接定義樣式：
#footer h2 {
maring: 0;
text-align: center;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #D3D8C4;
}
#footer h2 a:visited, #footer h2 a:link {
color: #D3D8C4;
text-decoration: none;
border-bottom: 1px dotted #D3D8C4;
}
#footer h2 a:hover {
color: #F7F7F6;
text-decoration: none;
border-bottom: none;
background-color: #A5003B;
}
頁腳中的文字我們放置到H2標(biāo)簽中：
<div id="footer"><h2>....</h2></div>
上面這行代碼我們添加在名為container的DIV閉合標(biāo)簽后面，也即是在body的閉合標(biāo)簽之前。接下來我們要添加一段Bobby Van Der Sluis建議采用的JS腳本，讓頁腳在Safari瀏覽器中也能固定在瀏覽器底部。
確保你使用的ID名跟在JS中定義的函數(shù)名保持一致。
完成JS的添加后，如果你在瀏覽器中預(yù)覽，你會(huì)發(fā)現(xiàn)頁腳并沒有顯示出來。這可能是因?yàn)橛袃蓚€(gè)浮動(dòng)容器(#left and #content)都需要進(jìn)行浮動(dòng)清除，在的文章中有很詳細(xì)的介紹。我們需要添加下面的代碼進(jìn)行修正，首先添加一個(gè)用于清除浮動(dòng)的DIV：
<div class="clear"> </div>
然后為其定義CSS：
.clear {
clear: both;
}
#p#
CSS混沌初開VIII：側(cè)邊欄友情鏈接
這是本教程的最后一部分，講解如何實(shí)現(xiàn)友情鏈接版塊。需要說明的是，這部分我們將把樣式表轉(zhuǎn)換為外聯(lián)式來實(shí)現(xiàn)CSS樣式的設(shè)定。
首先是XHTML代碼：
<div id="favlinks">
<h2>My Favorite Sites</h2>
<ul class="extlinks">
<li><a href="http://stopdesign.com/">Stopdesign</a></li>
<li><a href="http://www.simplebits.com/">SimpleBits</a></li>
<li><a href="http://www.mezzoblue.com/" >Mezzoblue</a></li>
<li><a href="http://www.ximicc.com/">Ximicc</a></li>
</ul>
</div>
我們把所有的鏈接放置在一個(gè)名為fav的DIV容器中，并將在CSS中定義其width、margin和padding等屬性。欄目標(biāo)題利用H2標(biāo)簽實(shí)現(xiàn)，而鏈接鏈表則還是用無序列表ul來實(shí)現(xiàn)。
接下來定義favlinks容器的樣式：
#favlinks {
width: 163px;
padding-left: 15px;
margin-top: 10px;
}
其中定義的三個(gè)屬性都比較簡單，你可能會(huì)注意到width值與導(dǎo)航菜單的寬度178不相等，原因仍然是padding-left中定義了15px的內(nèi)填充，所以其寬度值應(yīng)該是178-15=163px。如果你對(duì)此不是很理解，建議你去參考一些介紹CSS中盒模型原理的文章。
下面是欄目標(biāo)題文字的CSS定義：
#favlinks h2 {
font: normal 16px Georgia, Times New Roman, Times, serif;
color: #5C604D;
margin: 0 0 10px 0;
padding: 0;
}
除了設(shè)置文字的字體和顏色之外，padding和margin的定義也是必須的，因?yàn)槿绻幻鞔_指定的話，欄目標(biāo)題和鏈接列表之間的間隔可能會(huì)不可預(yù)期，在這里我直接用margin屬性定義了10px的下邊距。
無序列表ul的CSS定義：
#favlinks ul {
margin: 0;
padding: 0;
list-style-type: none;
}
這里的屬性設(shè)置與第五部分教程中實(shí)現(xiàn)導(dǎo)航的ul設(shè)置一樣，主要是隱藏了默認(rèn)的小圓點(diǎn)項(xiàng)目符號(hào)，并把邊距和填充設(shè)置為0。
為列表中各個(gè)鏈接添加圖標(biāo)：
ul.extlinks li {
background: url(images/bullet_extlink.gif) no-repeat 0 3px;
font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
padding-left: 12px;
}
在XHTML中我們把名為extlinks的class類應(yīng)用在了ul標(biāo)簽上，所以這里用ul.extlinks li的選擇符組合來定義. Extlinks下級(jí)中的li元素樣式。圖標(biāo)還是采用背景的方式實(shí)現(xiàn)，屬性中為其定義了坐標(biāo)，即Y軸方向下移3px，目的是為了讓圖標(biāo)與其后的鏈接文字實(shí)現(xiàn)更好的對(duì)齊。Padding中只定義了一個(gè)左填充，防止鏈接文字與圖標(biāo)產(chǎn)生重疊。
鏈接樣式的定義：
.extlinks a:link {
color: #A5003B;
text-decoration: none;
border-bottom: 1px dotted #A5003B;
}
.extlinks a:visited {
color: #6F2D47;
text-decoration: none;
border-bottom: 1px dotted #959E79;
}
.extlinks a:hover {
background-color: #C3C9B1;
color: #A5003B;
text-decoration: none;
border-bottom: 1px solid #A5003B;
}
在鼠標(biāo)經(jīng)過的狀態(tài)中，除了背景色外，我們還用邊框?qū)傩远x了一條1px的實(shí)線下邊框，相應(yīng)的也就需要設(shè)置doc屬性來消除默認(rèn)的鏈接下劃線。關(guān)于字體的定義不是必須的，因?yàn)樵趌i標(biāo)簽的CSS中已經(jīng)體現(xiàn)過了。對(duì)訪問之后的鏈接，我們將文字及下邊框的顏色作了細(xì)微的淡化，使其不會(huì)那么顯眼，并提示訪問者這個(gè)鏈接你已經(jīng)點(diǎn)擊過了。定義鏈接樣式的時(shí)候，注意四個(gè)鏈接轉(zhuǎn)臺(tái)的順序，正確的應(yīng)該是LVHA，否則鼠標(biāo)經(jīng)過等效果可能會(huì)不能正常顯示，這里有一種很好很有趣的方法希望能幫你牢記這個(gè)順序：LOVE/HATE。
創(chuàng)建外部樣式表
現(xiàn)在所有的界面設(shè)計(jì)和頁面構(gòu)建工作已經(jīng)完成了，還剩下最后一項(xiàng)工作。在本教程的學(xué)習(xí)中，你可能會(huì)發(fā)現(xiàn)我經(jīng)常使用內(nèi)聯(lián)樣式，事實(shí)上在很多人的概念中外部樣式表才是王道，我們應(yīng)該把CSS樣式定義在一個(gè)單獨(dú)的樣式表文件中，然后與網(wǎng)頁文檔連接起來?，F(xiàn)在我們可以把之前的樣式定義剪切出來，粘貼到一個(gè)新文檔中，命名為ximicc.css 。
連接外部樣式表
<link rel="stylesheet" type="text/css" media="screen" href="ximicc.css" />
因?yàn)檫@里的樣式我們只要顯示在電腦屏幕上，所以連接代碼里的media參數(shù)設(shè)置為screen，若需要打印頁面，則把該參數(shù)設(shè)置為print會(huì)有更好的打印效果。關(guān)于該參數(shù)更多的設(shè)置，可以 參考這里 。
該系列教程至此結(jié)束，希望大家能真正學(xué)到一點(diǎn)東西。若你對(duì)該教程有什么心得或建議，歡迎評(píng)論或?yàn)g覽。另外由于水平有限，翻譯的過程中難免有不妥之處，也希望大家多多糾正，西米CC歡迎大家的光臨。