CSS混沌初開I：導(dǎo)航菜單素材的設(shè)計(jì)
CSS混沌初開II:背景圖案及配色
本教程的第二部分主要有兩個(gè)重點(diǎn)：一是如何正確選擇導(dǎo)航菜單中所涉及的顏色，雖然它沒有很多的技術(shù)含量，但使用的顏色是否恰當(dāng)，與后期出來的效果是有很大影響的；另外一部分主要是關(guān)于頁面背景的，側(cè)重于制作背景圖片素材時(shí)的一些細(xì)節(jié)問題。
CSS混沌初開III:頂部圖片視覺修飾
這節(jié)是關(guān)于素材設(shè)計(jì)的最后一部分了，設(shè)計(jì)工作完成后將會(huì)開始講解如何切片以及在CSS和XHTML中構(gòu)建最終頁面。首先看一下這節(jié)設(shè)計(jì)的效果圖：CSS混沌初開V：側(cè)邊欄導(dǎo)航菜單的實(shí)現(xiàn)
首先對教程的第四部分作一點(diǎn)補(bǔ)充。有人建議Blog的標(biāo)題最好使用H1標(biāo)簽，以文本的形式表現(xiàn)標(biāo)題內(nèi)容，原因是不論是在CSS關(guān)閉的情況下，還是對于搜索引擎的抓取，H1標(biāo)簽結(jié)合文本的形式都具有更好的可訪問性。這個(gè)提議很有道理，很多人也是這么做的，所以我也建議大家對之前的代碼進(jìn)行調(diào)整。
若使用H1標(biāo)簽來實(shí)現(xiàn)Blog標(biāo)題，又想保持原來標(biāo)題位置的圖片的話，那么就有必要了解一下CSS中很經(jīng)典的圖像替換文本技術(shù)。簡單點(diǎn)說就是在XHTML中包含了文本，并為其設(shè)置背景圖片，但是要通過CSS“隱藏”文本而僅僅顯示背景圖片。
圖像替換文本技術(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)然對于外圍容器而言，我們利用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)目符號默認(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)目符號為無。text-indent使文本左邊空出一定的空間，以便在之后的步驟中定義背景圖片，并保證背景圖不會(huì)被文本遮蓋。最后一行代碼在每個(gè)導(dǎo)航項(xiàng)目的底部生成一條白線，兼具美化和分界的功能。
接下來是鏈接外觀的定義：
#navcontainer a {
display: block;
width: 178px;
height: 22px;
}
以上代碼是對導(dǎo)航內(nèi)a標(biāo)簽的CSS定義，作用于導(dǎo)航中的每個(gè)鏈接元素。display: block將鏈接對象轉(zhuǎn)換為塊級元素，然后再定義其寬和高，使得鏈接能具有類似按鈕一樣矩形的觸發(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的樣式針對的是列表項(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對象也就不一樣了。
CSS混沌初開IV：頁面DIV布局解構(gòu)
在前三講的教程中我們已經(jīng)完成了網(wǎng)頁界面設(shè)計(jì)的工作，從本節(jié)開始，我們將關(guān)注如何對效果圖進(jìn)行解構(gòu)，并初步擬定網(wǎng)頁文件的DIV結(jié)構(gòu)。
首先我們必須明確幾個(gè)問題，比如設(shè)計(jì)好的界面應(yīng)該劃分成幾塊？每塊對應(yīng)網(wǎng)頁中的哪部分內(nèi)容？只有對這些問題有了概念之后，我們才能開始進(jìn)行切片和導(dǎo)出的操作。如果對頁面構(gòu)建的整個(gè)流程很熟悉，那么以上幾個(gè)問題并沒有太大的難度，可能你在PS中設(shè)計(jì)素材的時(shí)候就已經(jīng)開始考慮之后的DIV劃分了。當(dāng)然，我們是要有一定的應(yīng)變能力，合理的組織CSS和XHTML，讓最終出爐的網(wǎng)頁具有更好的靈活性和可訪問性。
本例中頁面模塊劃分的規(guī)劃
必須進(jìn)行切片并導(dǎo)出JPF或GIF的幾塊區(qū)域
也許你會(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)楸尘靶Ч轻槍φ麖堩撁娑缘摹?/p>
構(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;
}
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)是針對其外圍容器的，解析之后它將顯示在導(dǎo)航右邊的正文版塊：
#left {
width: 178px;
float: left;
}
接下來在XHTML中添加如下代碼：
<div id="content">this is the right</div>
如果你對上面的CSS和XHTML組織感到疑惑，下面的教程可能會(huì)對你有所幫助：
你會(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ù)值，對應(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>
針對文章標(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)然也可以直接對H2標(biāo)簽進(jìn)行定義，但是會(huì)對頁面中所有的H2元素都起作用。這個(gè)CSS樣式的定義中，除了常規(guī)的字體集、顏色、字號之外，還利用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;
}
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)簽了。
首先要提醒大家的是，相對于表格布局方式，CSS中頁腳的實(shí)現(xiàn)有著很大的區(qū)別。遺憾的是Safari作為一個(gè)新生瀏覽器，其對Web標(biāo)準(zhǔn)的支持還不是很完善，比如min-width和min-height屬性在Safari中還沒能得到良好的支持，但是頁腳的實(shí)現(xiàn)我們往往需要用到它們。在繼續(xù)本節(jié)教程之前，希望大家去了解一下這篇Bobby Van Der Sluis文章，它對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：
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 >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等屬性。欄目標(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。如果你對此不是很理解，建議你去參考一些介紹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)目符號，并把邊距和填充設(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下級中的li元素樣式。圖標(biāo)還是采用背景的方式實(shí)現(xiàn)，屬性中為其定義了坐標(biāo)，即Y軸方向下移3px，目的是為了讓圖標(biāo)與其后的鏈接文字實(shí)現(xiàn)更好的對齊。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)過了。對訪問之后的鏈接，我們將文字及下邊框的顏色作了細(xì)微的淡化，使其不會(huì)那么顯眼，并提示訪問者這個(gè)鏈接你已經(jīng)點(diǎn)擊過了。定義鏈接樣式的時(shí)候，注意四個(gè)鏈接轉(zhuǎn)臺的順序，正確的應(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è)置，可以 參考這里 。
