CSS混沌初開(kāi)I：導航菜單素材的設計
CSS混沌初開(kāi)II:背景圖案及配色
本教程的第二部分主要有兩個(gè)重點(diǎn)：一是如何正確選擇導航菜單中所涉及的顏色，雖然它沒(méi)有很多的技術(shù)含量，但使用的顏色是否恰當，與后期出來(lái)的效果是有很大影響的；另外一部分主要是關(guān)于頁(yè)面背景的，側重于制作背景圖片素材時(shí)的一些細節問(wèn)題。
CSS混沌初開(kāi)III:頂部圖片視覺(jué)修飾
這節是關(guān)于素材設計的最后一部分了，設計工作完成后將會(huì )開(kāi)始講解如何切片以及在CSS和XHTML中構建最終頁(yè)面。首先看一下這節設計的效果圖：CSS混沌初開(kāi)V：側邊欄導航菜單的實(shí)現
首先對教程的第四部分作一點(diǎn)補充。有人建議Blog的標題最好使用H1標簽，以文本的形式表現標題內容，原因是不論是在CSS關(guān)閉的情況下，還是對于搜索引擎的抓取，H1標簽結合文本的形式都具有更好的可訪(fǎng)問(wèn)性。這個(gè)提議很有道理，很多人也是這么做的，所以我也建議大家對之前的代碼進(jìn)行調整。
若使用H1標簽來(lái)實(shí)現Blog標題，又想保持原來(lái)標題位置的圖片的話(huà)，那么就有必要了解一下CSS中很經(jīng)典的圖像替換文本技術(shù)。簡(jiǎn)單點(diǎn)說(shuō)就是在XHTML中包含了文本，并為其設置背景圖片，但是要通過(guò)CSS“隱藏”文本而僅僅顯示背景圖片。
圖像替換文本技術(shù)
這個(gè)技術(shù)有時(shí)候我們也稱(chēng)之為文本替換或圖像替換，其強調的核心是在HTML代碼中我們使用文本，然后通過(guò)一些方法將文本“隱藏”，而僅顯示背景或其它形式的圖片，這樣在保證可訪(fǎng)問(wèn)性的同時(shí)，也使得頁(yè)面因圖像的應用而更加美觀(guān)。比如我們可以將圖片設置為背景，讓后利用text-indent使文本有足夠的縮進(jìn)實(shí)現隱藏，代碼如下：
h1 {
width: 692px;
height: 90px;
text-indent: -9999px;
background: url(images/header.jpg);
margin: 0;
padding: 0;
}
其中的width和height是必須定義的，且需和背景圖片的尺寸保持一致。text-align: center被轉移到了body標簽中，這樣頁(yè)面中所有的內容都被定義為居中顯示，而那些不需要居中的內容，如文章正文，我們可以再添加text-align: left進(jìn)行覆蓋。當然對于外圍容器而言，我們利用margin: 0px auto使其在水平方向上保持在頁(yè)面的中部。
導航菜單的實(shí)現
首先定義導航外圍容器的樣式：
#left {
width: 178px;
}
現在外圍容器我們只要簡(jiǎn)單的定義其寬度，并賦予left的id名。在left容器中，我們添加一個(gè)名為navcontainer的子容器來(lái)放置導航菜單。實(shí)現導航的標簽推薦使用無(wú)序列表ul，通過(guò)CSS我們可以改變其外觀(guān)和形式。HTML結構如下：
<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標簽構建了一個(gè)簡(jiǎn)單的項目列表，其項目符號默認為小圓點(diǎn)，這是我們不需要的。利用CSS可以去掉那些小圓點(diǎn)，并用背景圖片的形式替換以我們制作好的圖標：
#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;
}
第一段代碼還是定義導航容器的寬度，其值與left容器相同。第二段代碼主要用于改變列表的外觀(guān)，margin和padding確保導航項目的周?chē)鷽](méi)有空隙，并去除了列表項默認的縮進(jìn)，list-style-type則定義了列表的項目符號為無(wú)。text-indent使文本左邊空出一定的空間，以便在之后的步驟中定義背景圖片，并保證背景圖不會(huì )被文本遮蓋。最后一行代碼在每個(gè)導航項目的底部生成一條白線(xiàn)，兼具美化和分界的功能。
接下來(lái)是鏈接外觀(guān)的定義：
#navcontainer a {
display: block;
width: 178px;
height: 22px;
}
以上代碼是對導航內a標簽的CSS定義，作用于導航中的每個(gè)鏈接元素。display: block將鏈接對象轉換為塊級元素，然后再定義其寬和高，使得鏈接能具有類(lèi)似按鈕一樣矩形的觸發(fā)區域，并且讓我們可以利用偽類(lèi)a:hover來(lái)定義鼠標經(jīng)過(guò)鏈接時(shí)的翻轉效果，如在第二段代碼中展示的簡(jiǎ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;
}
第一段代碼定義了鏈接文本的顏色，并設置text-decoration屬性為none來(lái)去除鏈接默認的下劃線(xiàn)。導航的設計往往要求簡(jiǎn)潔、明了，并且具有很強的指示性，所以我在這里定義了一個(gè)額外的樣式#current來(lái)表現當前頁(yè)面處于導航中的哪個(gè)項目：
#navcontainer li a#current {
background: url(images/bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}
名為current的樣式針對的是列表項目li中的鏈接元素，其屬性的定義與鏈接的hover狀態(tài)樣式是一樣的，現在我們要做的事情就是把這個(gè)樣式應用到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>
現在的current樣式是應用在第一個(gè)li上，也就是瀏覽器解析后“Home”菜單較之其它的菜單項目有其獨特的外觀(guān)，表明當前的頁(yè)面是屬于“Home”這里欄目的。當然頁(yè)面變化了，current樣式應用的li對象也就不一樣了。
CSS混沌初開(kāi)IV：頁(yè)面DIV布局解構
在前三講的教程中我們已經(jīng)完成了網(wǎng)頁(yè)界面設計的工作，從本節開(kāi)始，我們將關(guān)注如何對效果圖進(jìn)行解構，并初步擬定網(wǎng)頁(yè)文件的DIV結構。
首先我們必須明確幾個(gè)問(wèn)題，比如設計好的界面應該劃分成幾塊？每塊對應網(wǎng)頁(yè)中的哪部分內容？只有對這些問(wèn)題有了概念之后，我們才能開(kāi)始進(jìn)行切片和導出的操作。如果對頁(yè)面構建的整個(gè)流程很熟悉，那么以上幾個(gè)問(wèn)題并沒(méi)有太大的難度，可能你在PS中設計素材的時(shí)候就已經(jīng)開(kāi)始考慮之后的DIV劃分了。當然，我們是要有一定的應變能力，合理的組織CSS和XHTML，讓最終出爐的網(wǎng)頁(yè)具有更好的靈活性和可訪(fǎng)問(wèn)性。
本例中頁(yè)面模塊劃分的規劃
必須進(jìn)行切片并導出JPF或GIF的幾塊區域
也許你會(huì )想：“那背景圖片呢?”我沒(méi)有把它羅列在其中，因為背景圖片比較特殊，不論在何種分辨率下我們都要保持主體內容的居中，所以我們需要一種更聰明的方法。這是我們要導出的背景圖片，它的尺寸是1600X5px，應該夠用了，除非你擁有Apple公司30英寸的超寬屏顯示器。
利用CSS定義頁(yè)面的背景
下面的CSS代碼可以讓我們的頁(yè)面背景保持居中顯示：
body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
}
背景圖片只有5px高度，所以我們將其設置為縱向平鋪，然后利用參數50%使其水平居中，參數fixed的用處是讓背景不隨內容的滾動(dòng)而滾動(dòng)，它是“凝固”的。這里的選擇符我們使用body，因為背景效果是針對整張頁(yè)面而言的。
構建頁(yè)面的DIV結構
首先來(lái)看一下頂部版塊的CSS定義：
#header {
text-align: center;
}
頂部版塊的樣式我們使用id選擇符，注意在同一個(gè)文檔中id選擇符必須是唯一的。網(wǎng)頁(yè)的頂部也需要居中，這也是我們?yōu)槭裁炊xtext-align的原因。下面這段代碼我們要添加在body標簽之間：
<div id="header">
<img src="images/header.jpg" alt="ximicc" width="692" height="90" />
</div>
你可能也注意到了，當頂部圖片應用到網(wǎng)頁(yè)中的時(shí)候，其上邊緣和瀏覽器邊界之間有一定的間隙，所以在這里我們要用margin和padding進(jìn)行完善：
body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
margin: 0;
padding: 0;
}
CSS混沌初開(kāi)VI：正文與圖片的混排
現在我們可以開(kāi)始在網(wǎng)頁(yè)中添加內容了，在后續教程中將會(huì )介紹友情鏈接版塊以及頁(yè)腳的制作。
首先在CSS中添加一個(gè)id選擇符，在其中定義一個(gè)寬度值514px (692-178)：
#content {
width: 514px;
float: left;
}
因為導航菜單浮動(dòng)在頁(yè)面主體的左邊，所以我們要在#left中添加一條float: left語(yǔ)句，#content中的左浮動(dòng)是針對其外圍容器的，解析之后它將顯示在導航右邊的正文版塊：
#left {
width: 178px;
float: left;
}
接下來(lái)在XHTML中添加如下代碼：
<div id="content">this is the right</div>
如果你對上面的CSS和XHTML組織感到疑惑，下面的教程可能會(huì )對你有所幫助：
你會(huì )發(fā)現正文的內容跟導航菜單貼得很緊，我們可以利用padding來(lái)增加一點(diǎn)間隙：
#content {
width: 479px;
float: left;
padding-top: 15px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
}
也可以將代碼簡(jiǎn)化成：
[/code]#content {
width: 479px;
float: left;
padding: 15px 0 10px 20px;
}
[/code]
不論是padding還是margin，若其后跟著(zhù)四個(gè)數值，對應的邊緣順序是上右下左，即順時(shí)針?lè )较?。大家?huì )發(fā)現現在#container中定義的寬度由原來(lái)的514變成了479，因為我們?yōu)榱俗屨奈谋九c左右邊框空出一點(diǎn)距離，左邊緣用padding實(shí)現，而右邊緣因為整個(gè)DIV是左浮動(dòng)的，所以我們直接將DIV的寬度縮減15px，所以width的值就變成了514-20-15=479px。
你可能會(huì )疑問(wèn)：“為什么不直接使用"width: 494px" 和 "padding-right: 15px"呢？”剛開(kāi)始的時(shí)候我也是這么做的，出來(lái)的效果在Safari, FireFox 和Mozilla還算正常，但在IE中就不行了，正文版塊跳到了導航的下面，好像右邊沒(méi)有足夠的空間容納下正文DIV，具體問(wèn)題出在哪里我也說(shuō)不清楚，可能也是IE的一個(gè)Bug吧。
添加正文的文章標題
先來(lái)看一下主內容版塊的結構：
我們把文章的標題放在H2標簽中：
<h2>This is the title</h2>
針對文章標題的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的選擇符組合，當然也可以直接對H2標簽進(jìn)行定義，但是會(huì )對頁(yè)面中所有的H2元素都起作用。這個(gè)CSS樣式的定義中，除了常規的字體集、顏色、字號之外，還利用padding屬性在標題文本左邊空出30px的縮進(jìn)，目的是不要遮蓋背景圖片。背景background屬性中，除了圖片的路徑及其平鋪方式，還定義了其背景色為透明transparent，使整個(gè)標題更好的與其它元素融合
添加正文文本
下面一個(gè)class類(lèi).text定義了正文文字的樣式：
.text {
font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
color: #5B604C;
margin-bottom: 10px;
}
與id不同的是，class類(lèi)可以在一張頁(yè)面中重復使用，里面的屬性比較簡(jiǎn)單，需要補充一下的是，11px/18px表示字體大小是11px，行高是18px。在XHTML中，我們添加一個(gè)段落標簽P來(lái)放置文本，并應用.text樣式：
<p class="text">Here comes the text</p>
在正文中添加混排圖像
下面是應用在圖像上的樣式：
.imageright {
float: right;
padding: 7px;
background-color: #ffffff;
border: 1px solid #bac1a3;
}
CSS混沌初開(kāi)VII：頁(yè)腳的構建
在開(kāi)始第七部分的教程之前，我要先糾正一個(gè)小錯誤。之前在添加正文內容時(shí)，我把它放在了一個(gè)DIV容器中，事實(shí)上如果我們用段落標簽P作容器可以達到相同的效果，而且當CSS關(guān)閉時(shí)也能正常顯示。用P標簽來(lái)實(shí)現的話(huà)，還可以用margin來(lái)控制段落的上、下邊距，也就不需要什么換行標簽了。
首先要提醒大家的是，相對于表格布局方式，CSS中頁(yè)腳的實(shí)現有著(zhù)很大的區別。遺憾的是Safari作為一個(gè)新生瀏覽器，其對Web標準的支持還不是很完善，比如min-width和min-height屬性在Safari中還沒(méi)能得到良好的支持，但是頁(yè)腳的實(shí)現我們往往需要用到它們。在繼續本節教程之前，希望大家去了解一下這篇Bobby Van Der Sluis文章，它對CSS中的垂直定位和頁(yè)腳實(shí)現作了很到位的講解。
首先還是要先明確一下文檔的DIV結構，之前制作的內容比如頂部、導航、正文等我們都封裝到一個(gè)id名為container的DIV中，這組容器標簽緊跟在body標簽之后，接著(zhù)就是一個(gè)id名為footer的頁(yè)腳容器，代碼如下：
<html>
...
<body>
<div id="container"> ... </div>
<div id="footer"> ... </div>
</body>
</html>
頁(yè)腳DIV的CSS設置如下：
#footer {
margin: 0px auto;
position: relative;
background-color: #717F51;
border-top: 9px solid #F7F7F6;
width: 692px;
padding: 5px 0;
clear: both;
}
我們?yōu)轫?yè)腳設置暗綠色的背景以及9px的上邊框，寬度定義為692px。Clear屬性用于清除浮動(dòng)，簡(jiǎn)單點(diǎn)說(shuō)就是在其左邊或右邊不允許有任何浮動(dòng)元素。margin: 0px auto的語(yǔ)法在之前的教程中已經(jīng)出現過(guò)了，其作用就是讓頁(yè)腳在頁(yè)面中居中顯示。為了不讓頁(yè)腳文字和邊框貼得太近，我們用padding在上、下空出5px的填充空間。
接下來(lái)為頁(yè)腳中的文字和鏈接定義樣式：
#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;
}
頁(yè)腳中的文字我們放置到H2標簽中：
<div id="footer"><h2>....</h2></div>
上面這行代碼我們添加在名為container的DIV閉合標簽后面，也即是在body的閉合標簽之前。接下來(lái)我們要添加一段Bobby Van Der Sluis建議采用的JS腳本，讓頁(yè)腳在Safari瀏覽器中也能固定在瀏覽器底部。
確保你使用的ID名跟在JS中定義的函數名保持一致。
完成JS的添加后，如果你在瀏覽器中預覽，你會(huì )發(fā)現頁(yè)腳并沒(méi)有顯示出來(lái)。這可能是因為有兩個(gè)浮動(dòng)容器(#left and #content)都需要進(jìn)行浮動(dòng)清除，在的文章中有很詳細的介紹。我們需要添加下面的代碼進(jìn)行修正，首先添加一個(gè)用于清除浮動(dòng)的DIV：
<div class="clear"> </div>
然后為其定義CSS：
CSS混沌初開(kāi)VIII：側邊欄友情鏈接
這是本教程的最后一部分，講解如何實(shí)現友情鏈接版塊。需要說(shuō)明的是，這部分我們將把樣式表轉換為外聯(lián)式來(lái)實(shí)現CSS樣式的設定。
首先是XHTML代碼：
<div id="favlinks">
<h2>My Favorite Sites</h2>
<ul class="extlinks">
<li><a >Stopdesign</a></li>
<li><a >SimpleBits</a></li>
<li><a >Mezzoblue</a></li>
<li><a >Ximicc</a></li>
</ul>
</div>
我們把所有的鏈接放置在一個(gè)名為fav的DIV容器中，并將在CSS中定義其width、margin和padding等屬性。欄目標題利用H2標簽實(shí)現，而鏈接鏈表則還是用無(wú)序列表ul來(lái)實(shí)現。
接下來(lái)定義favlinks容器的樣式：
#favlinks {
width: 163px;
padding-left: 15px;
margin-top: 10px;
}
其中定義的三個(gè)屬性都比較簡(jiǎn)單，你可能會(huì )注意到width值與導航菜單的寬度178不相等，原因仍然是padding-left中定義了15px的內填充，所以其寬度值應該是178-15=163px。如果你對此不是很理解，建議你去參考一些介紹CSS中盒模型原理的文章。
下面是欄目標題文字的CSS定義：
#favlinks h2 {
font: normal 16px Georgia, Times New Roman, Times, serif;
color: #5C604D;
margin: 0 0 10px 0;
padding: 0;
}
除了設置文字的字體和顏色之外，padding和margin的定義也是必須的，因為如果不明確指定的話(huà)，欄目標題和鏈接列表之間的間隔可能會(huì )不可預期，在這里我直接用margin屬性定義了10px的下邊距。
無(wú)序列表ul的CSS定義：
#favlinks ul {
margin: 0;
padding: 0;
list-style-type: none;
}
這里的屬性設置與第五部分教程中實(shí)現導航的ul設置一樣，主要是隱藏了默認的小圓點(diǎn)項目符號，并把邊距和填充設置為0。
為列表中各個(gè)鏈接添加圖標：
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類(lèi)應用在了ul標簽上，所以這里用ul.extlinks li的選擇符組合來(lái)定義. Extlinks下級中的li元素樣式。圖標還是采用背景的方式實(shí)現，屬性中為其定義了坐標，即Y軸方向下移3px，目的是為了讓圖標與其后的鏈接文字實(shí)現更好的對齊。Padding中只定義了一個(gè)左填充，防止鏈接文字與圖標產(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;
}
在鼠標經(jīng)過(guò)的狀態(tài)中，除了背景色外，我們還用邊框屬性定義了一條1px的實(shí)線(xiàn)下邊框，相應的也就需要設置doc屬性來(lái)消除默認的鏈接下劃線(xiàn)。關(guān)于字體的定義不是必須的，因為在li標簽的CSS中已經(jīng)體現過(guò)了。對訪(fǎng)問(wèn)之后的鏈接，我們將文字及下邊框的顏色作了細微的淡化，使其不會(huì )那么顯眼，并提示訪(fǎng)問(wèn)者這個(gè)鏈接你已經(jīng)點(diǎn)擊過(guò)了。定義鏈接樣式的時(shí)候，注意四個(gè)鏈接轉臺的順序，正確的應該是LVHA，否則鼠標經(jīng)過(guò)等效果可能會(huì )不能正常顯示，這里有一種很好很有趣的方法希望能幫你牢記這個(gè)順序：LOVE/HATE。
創(chuàng )建外部樣式表
現在所有的界面設計和頁(yè)面構建工作已經(jīng)完成了，還剩下最后一項工作。在本教程的學(xué)習中，你可能會(huì )發(fā)現我經(jīng)常使用內聯(lián)樣式，事實(shí)上在很多人的概念中外部樣式表才是王道，我們應該把CSS樣式定義在一個(gè)單獨的樣式表文件中，然后與網(wǎng)頁(yè)文檔連接起來(lái)?，F在我們可以把之前的樣式定義剪切出來(lái)，粘貼到一個(gè)新文檔中，命名為ximicc.css 。
連接外部樣式表
<link rel="stylesheet" type="text/css" media="screen" href="ximicc.css" />
因為這里的樣式我們只要顯示在電腦屏幕上，所以連接代碼里的media參數設置為screen，若需要打印頁(yè)面，則把該參數設置為print會(huì )有更好的打印效果。關(guān)于該參數更多的設置，可以 參考這里 。
聯(lián)系客服
