DREAMWEAVER網(wǎng)制作和css實(shí)例

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

2、ECECCEC進(jìn)行填填充。再新建建一個(gè)圖層命命名為“高光”，在其上、左左邊緣各繪制制1px的白色色線條，你用用畫(huà)筆或單像像素選取工具具都可以。然然后我們用橡橡皮工具把左左邊緣白線的的底部擦除一一段，在這里里我使用的是是大小20ppx透明度為為50%的橡皮皮刷：新建一個(gè)名為“網(wǎng)點(diǎn)”的圖層，用用1px的鉛筆筆工具在適當(dāng)當(dāng)?shù)奈恢美L制制幾個(gè)小點(diǎn)，示示例中的顏色色是#7277272，當(dāng)當(dāng)然這里你可可以自由發(fā)揮揮設(shè)計(jì)更有創(chuàng)創(chuàng)意的小點(diǎn)組組合，關(guān)鍵就就是要讓它們們看起來(lái)精致致有序：接著我們可以通通過(guò)鋼筆工具具繪制路徑創(chuàng)創(chuàng)建選區(qū)，并并在選區(qū)內(nèi)填填充#d6dd6d6顏色色，來(lái)模擬玻玻璃的質(zhì)感效效果。整個(gè)圖圖片素材

3、的制制作過(guò)程雖然然不是很復(fù)雜雜，但是最終終效果看起來(lái)來(lái)也不是很差差，不是么？鼠標(biāo)經(jīng)過(guò)導(dǎo)航時(shí)時(shí)的翻轉(zhuǎn)圖片片：創(chuàng)建翻轉(zhuǎn)效效果圖片，我我們只要簡(jiǎn)單單的在原有素素材基礎(chǔ)上調(diào)調(diào)整色調(diào)就即即可，關(guān)于文文本的添加在在這里就不細(xì)細(xì)說(shuō)了。我們們可以為每個(gè)個(gè)圖層調(diào)整色色調(diào)，在示例例中我主要使使用了一下幾幾種顏色：背背景#BFEE3FF、玻玻璃質(zhì)感#AA5D1F33、網(wǎng)點(diǎn)#E44001B。這這部分教程涉涉及到一些PPhotosshop的基基本知識(shí)，如如果你不是很很了解，建議議先學(xué)習(xí)一些些PS的入門基基礎(chǔ)，畢竟AAdobe合合并了*之后，其旗旗下軟件尤其其是PS與網(wǎng)頁(yè)設(shè)設(shè)計(jì)的關(guān)聯(lián)性性已經(jīng)越來(lái)越越緊密了，大大多時(shí)候你要

4、要設(shè)計(jì)出優(yōu)秀秀美觀的網(wǎng)頁(yè)頁(yè)，都離不開(kāi)開(kāi)這些軟件的的幫助。當(dāng)然然顏色選擇要要視乎你的需需要，制作的的方法大致還還是相通的，你你也可以發(fā)揮揮創(chuàng)意進(jìn)行更更好的細(xì)節(jié)設(shè)設(shè)計(jì)：CSS混沌初開(kāi)開(kāi)II:背景圖圖案及配色本教程的第二部部分主要有兩兩個(gè)重點(diǎn)：一一是如何正確確選擇導(dǎo)航菜菜單中所涉及及的顏色，雖雖然它沒(méi)有很很多的技術(shù)含含量，但使用用的顏色是否否恰當(dāng)，與后后期出來(lái)的效效果是有很大大影響的；另另外一部分主主要是關(guān)于頁(yè)頁(yè)面背景的，側(cè)側(cè)重于制作背背景圖片素材材時(shí)的一些細(xì)細(xì)節(jié)問(wèn)題。在在第一講中，我我主要是介紹紹一種實(shí)現(xiàn)玻玻璃材質(zhì)按鈕鈕的快捷途徑徑，現(xiàn)在來(lái)講講顏色的選擇擇似乎有點(diǎn)滯滯后了。不過(guò)過(guò)鑒于網(wǎng)站的的風(fēng)格存

5、在差差異，素材色色系的選擇也也是界面設(shè)計(jì)計(jì)階段很重要要的一塊內(nèi)容容，網(wǎng)絡(luò)上也也有很多關(guān)于于網(wǎng)頁(yè)色彩的的文章，大家家可以依據(jù)其其中介紹的一一些基本知識(shí)識(shí)進(jìn)行參考，雖雖然良好的色色彩感覺(jué)需要要很長(zhǎng)一段時(shí)時(shí)間來(lái)培養(yǎng)。選擇你的色彩體系事實(shí)上色系的選擇會(huì)體現(xiàn)很多個(gè)人因素，畢竟每個(gè)人都會(huì)有各自的色彩偏好，你的選擇也會(huì)彰顯你的個(gè)人風(fēng)格。沒(méi)人能建議你“必須選擇什么顏色”，這里我也只能提供一些個(gè)人認(rèn)為比較實(shí)用的意見(jiàn)：使用至少一種高高飽和度、高高辨識(shí)度的色色彩，并以其其色調(diào)定義站站點(diǎn)的整體基基調(diào)。把這個(gè)個(gè)色彩運(yùn)用在在文本鏈接上上，能使其更更加顯眼、引引人關(guān)注； 謹(jǐn)記不要在一張張頁(yè)面中使用用過(guò)多的顏色色，這樣只會(huì)會(huì)

6、讓你的網(wǎng)頁(yè)頁(yè)看起來(lái)很花花哨繁雜。我我的建議是最最好保持在三三種之內(nèi)：一一個(gè)強(qiáng)調(diào)色和和兩個(gè)輔色； 在顏色的搭配上上，不論是主主色還是輔助助色，都要善善于通過(guò)它們們明度變化來(lái)來(lái)衍生更多的的色彩，如果果只是反復(fù)的的使用三種以以下的顏色未未免會(huì)讓人感感覺(jué)單調(diào)，當(dāng)當(dāng)然這也不是是意味著顏色色變化越多你你的頁(yè)面看起起來(lái)就會(huì)越出出色，仍然要要視乎網(wǎng)站的的整體風(fēng)格和和設(shè)計(jì)者對(duì)顏顏色的駕馭能能力：在PS中我們可可以通過(guò)在色色相/飽和度（Cttrl+U）面面板中調(diào)整參參數(shù)來(lái)調(diào)配顏顏色。事實(shí)上上圖中的幾組組顏色就是通通過(guò)這種方法法調(diào)制出來(lái)的的，當(dāng)然在這這個(gè)面板中可可以變化出很很多顏色，具具體哪個(gè)參數(shù)數(shù)應(yīng)該為什么么值都

7、沒(méi)有硬硬性的規(guī)定，網(wǎng)網(wǎng)絡(luò)上有很多多推薦的色彩彩組合并明確確給出了RGGB值，大家家在利用這種種方法配色的的時(shí)候也可以以參考那些文文章教程。如如果你看了上上面的講解之之后仍然不知知道如何著手手， HYPERLINK /colors/Colors.html 這段關(guān)于于顏色的影片片 或許會(huì)對(duì)你你有所幫助。事事實(shí)上我覺(jué)得得每個(gè)人都應(yīng)應(yīng)該去看一下下這個(gè)影片，不不僅因?yàn)樗颈旧碓O(shè)計(jì)得相相當(dāng)有趣，更更重要的是對(duì)對(duì)于認(rèn)識(shí)和了了解大眾化的的色彩體驗(yàn)和和感知從而運(yùn)運(yùn)用到網(wǎng)頁(yè)設(shè)設(shè)計(jì)中，它都都是一個(gè)很好好的引導(dǎo)和鞏鞏固。是時(shí)候候開(kāi)始繪制背背景圖案了現(xiàn)現(xiàn)在我們開(kāi)始始討論網(wǎng)頁(yè)的的背景圖案。當(dāng)當(dāng)我們?cè)赑SS等軟件中創(chuàng)創(chuàng)作背

8、景圖案案時(shí)，往往要要精細(xì)到像素素，尤其是那那些平鋪填充充的背景。首首先我們?cè)赑PS中新建一一個(gè)30 x像素的的空白文檔，填填充適當(dāng)?shù)念侇伾⒂勉U鉛筆工具在其其上繪制一些些單像素小點(diǎn)點(diǎn)，下面是一一些例子：如第一講中導(dǎo)航航按鈕上的小小點(diǎn)一樣，在在這里你也可可以盡量的發(fā)發(fā)揮自己的創(chuàng)創(chuàng)意，但是還還是有幾個(gè)需需要注意的地地方，比如小小點(diǎn)的顏色，不不能跟背景色色反差太大，不不然平鋪以后后它們會(huì)變得得很刺眼。如如果要利用小小點(diǎn)來(lái)組合出出一些圖案或或線條，我通通常會(huì)采用復(fù)復(fù)制圖層并通通過(guò)方向鍵調(diào)調(diào)整其位置的的方法，適當(dāng)當(dāng)?shù)臅r(shí)候還會(huì)會(huì)變化其圖層層模式或透明明度等。制作這些背景圖圖案的一個(gè)難難點(diǎn)就是，如如何保證

9、圖案案平鋪時(shí)能實(shí)實(shí)現(xiàn)無(wú)縫接合合，畢竟背景景的面積往往往比較大，它它上面若有割割裂就會(huì)很顯顯眼。我通常常采用的方法法是利用PSS中的矩形選選框工具，比比如下圖中，正正方形選區(qū)左左上角標(biāo)識(shí)出出的像素必須須與其它三個(gè)個(gè)標(biāo)識(shí)區(qū)一致致，那么當(dāng)我我們把這樣一一塊區(qū)域截取取下來(lái)進(jìn)行平平鋪的時(shí)候就就不會(huì)有問(wèn)題題：當(dāng)然這個(gè)問(wèn)題是是否容易解決決，也是視乎乎你最初設(shè)計(jì)計(jì)的背景圖案案，如果我們們動(dòng)手的時(shí)候候就把可能遇遇到的一些問(wèn)問(wèn)題考慮在內(nèi)內(nèi)，那么到解解決的時(shí)候也也不會(huì)太費(fèi)力力甚至返工了了。 CSS混沌初開(kāi)開(kāi)III:頂部部圖片視覺(jué)修修飾這節(jié)是關(guān)于素材材設(shè)計(jì)的最后后一部分了，設(shè)設(shè)計(jì)工作完成成后將會(huì)開(kāi)始始講解如何切切片以

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

11、片中花朵的的顏色，它的的色調(diào)偏向于于大紅，還是是使用PS中的色相相/飽和度命令令來(lái)對(duì)它進(jìn)行行調(diào)整。利用用快捷鍵按CCtrl+UU調(diào)出色相/飽和度面板板，在“編輯”項(xiàng)的下拉列列表中選擇“紅色（Ctrrl+1）”，這樣我們們就能只針對(duì)對(duì)圖像中的紅紅色進(jìn)行調(diào)整整了。拖動(dòng)色色相滑塊調(diào)制制出我們需要要的紅色，具具體的數(shù)值依依據(jù)實(shí)際情況況，比如我這這里是大致是是-30左右：下一步就是通過(guò)過(guò)修飾細(xì)節(jié)增增加一些輔助助色調(diào)來(lái)增進(jìn)進(jìn)視覺(jué)效果，為為接下來(lái)的濾濾鏡處理作一一些預(yù)處理。頂頂部圖片的處處理對(duì)創(chuàng)意有有一定的要求求，如果有相相關(guān)的經(jīng)驗(yàn)的的話也就不是是件難事，所所以素材處理理能力以及個(gè)個(gè)人的美工基基礎(chǔ)都會(huì)對(duì)設(shè)設(shè)

12、計(jì)過(guò)程、設(shè)設(shè)計(jì)結(jié)果產(chǎn)生生影響：在之前的步驟中中圖片的尺寸寸和體積無(wú)疑疑已經(jīng)進(jìn)行了了調(diào)整，但是是如果有比較較多的細(xì)節(jié)要要處理的話，建建議還是在原原始尺寸上操操作，像示例例中的圖片我我剛開(kāi)始也是是在16000 12000的原始大小小下進(jìn)行處理理的。我為圖圖像添加了個(gè)個(gè)人比較偏愛(ài)愛(ài)的繪畫(huà)涂抹抹濾鏡（濾鏡鏡菜單藝術(shù)效果），效效果如下圖。在在PS中，濾鏡鏡的運(yùn)用是很很有趣的一件件事情，調(diào)節(jié)節(jié)其中的參數(shù)數(shù)就可以達(dá)到到很多意想不不到的效果，加加之在CS版本中提提供了可用濾濾鏡效果的縮縮略圖預(yù)覽，讓讓這個(gè)實(shí)用的的工具用起來(lái)來(lái)更加方便：接著我們添加一一些波浪線條條來(lái)營(yíng)造虛幻幻的意境，可可以用筆刷或或者鋼筆繪制制

13、一些曲線，當(dāng)當(dāng)然也可以用用漸變工具制制作，只要達(dá)達(dá)到下圖中漸漸隱效果即可可。事實(shí)上我我們只需要做做出其中一條條就可以了，然然后復(fù)制圖層層調(diào)整其透明明度、角度、扭扭曲制作出其其它的線條。這這里使用的顏顏色還是推薦薦使用粉紅，為為了區(qū)別于花花朵的顏色，可可以把線條的的粉紅明度調(diào)調(diào)大一點(diǎn)。在在圖片的右邊邊，我利用TTamuz字字體添加了一一個(gè)修飾符號(hào)號(hào)，效果如下下：如果對(duì)以上操作作有疑問(wèn)，可可以 HYPERLINK /vpieters/css_step2/step2_whooshes.mov.zip 下載QuicckTimee演示影片 觀看！在圖片片上添加BLLOG標(biāo)題Blogg的標(biāo)題反映映了你網(wǎng)站

14、的的內(nèi)容主題，其其文字組織因因人而異，一一般還會(huì)加上上一個(gè)圖標(biāo)或或LOGO，畢畢竟每個(gè)人都都想自己的BBlog與眾眾不同，有一一些標(biāo)志性的的元素，在這這里我就簡(jiǎn)單單的選用一個(gè)個(gè)仙人掌標(biāo)志志：下面是一些關(guān)于于字體或修飾飾符號(hào)的資源源鏈接： HYPERLINK /findfonts/detail.asp?pid=201879 Minion修修飾符和Taamuz字體體 HYPERLINK /type/browser/C/C_ornament.jhtml;storesessionid=TSUS1JHN0R5NTQFI0IKRT5GAVDJBIIV1 Adobe提供供的修飾性字字體 HYPERLINK

15、/ding-e.htm 一系列免費(fèi)的DDingbaats字體 最終的界面設(shè)計(jì)計(jì)效果至今為為止，不論是是在導(dǎo)航按鈕鈕還是頂部圖圖片的制作，我我們都還沒(méi)有有遇到什么棘棘手的難題。現(xiàn)現(xiàn)在讓我們把把做出來(lái)的素素材整合在一一起，拼合成成一張 HYPERLINK /articleimg/2008/06/5893/css_templatedesign.jpg 最終的界面面效果 。這已經(jīng)是是界面設(shè)計(jì)的的最后一個(gè)階階段了，所有有若還有什么么可添加的修修飾元素，最最好都在界面面效果圖中體體現(xiàn)出來(lái)。在在我的示例頁(yè)頁(yè)面中，文章章標(biāo)題和友情情鏈接的前面面我都用精致致的圖標(biāo)進(jìn)行行修飾，效果果看起來(lái)還可可以，當(dāng)然你你們可以

16、選擇擇自己喜歡的的素材替換，最最好也能在設(shè)設(shè)計(jì)過(guò)程中體體會(huì)到樂(lè)趣！ CSS混沌初開(kāi)開(kāi)V：側(cè)邊欄導(dǎo)導(dǎo)航菜單的實(shí)實(shí)現(xiàn)首先對(duì)教程的第第四部分作一一點(diǎn)補(bǔ)充。有有人建議Bllog的標(biāo)題題最好使用HH1標(biāo)簽，以以文本的形式式表現(xiàn)標(biāo)題內(nèi)內(nèi)容，原因是是不論是在CCSS關(guān)閉的的情況下，還還是對(duì)于搜索索引擎的抓取取，H1標(biāo)簽結(jié)合合文本的形式式都具有更好好的可訪問(wèn)性性。這個(gè)提議議很有道理，很很多人也是這這么做的，所所以我也建議議大家對(duì)之前前的代碼進(jìn)行行調(diào)整。若使用H1標(biāo)簽簽來(lái)實(shí)現(xiàn)Bllog標(biāo)題，又又想保持原來(lái)來(lái)標(biāo)題位置的的圖片的話，那那么就有必要要了解一下CCSS中很經(jīng)經(jīng)典的圖像替替換文本技術(shù)術(shù)。簡(jiǎn)單點(diǎn)說(shuō)說(shuō)就是在X

17、HHTML中包包含了文本，并并為其設(shè)置背背景圖片，但但是要通過(guò)CCSS“隱藏藏”文本而僅僅僅顯示背景圖圖片。圖像替換文本技技術(shù)這個(gè)技術(shù)有時(shí)候候我們也稱之之為文本替換換或圖像替換換，其強(qiáng)調(diào)的的核心是在HHTML代碼碼中我們使用用文本，然后后通過(guò)一些方方法將文本“隱藏”，而僅顯示示背景或其它它形式的圖片片，這樣在保保證可訪問(wèn)性性的同時(shí)，也也使得頁(yè)面因因圖像的應(yīng)用用而更加美觀觀。比如我們們可以將圖片片設(shè)置為背景景，讓后利用用text-indennt使文本有有足夠的縮進(jìn)進(jìn)實(shí)現(xiàn)隱藏，代代碼如下：h1 widdth: 6692px; heighht: 900px; teext-inndent: -9999

18、9px; bbackgrround: url(imagees/heaader.jjpg); mmarginn: 0; ppaddinng: 0; 其中的widtth和heighht是必須定定義的，且需需和背景圖片片的尺寸保持持一致。teext-allign: centeer被轉(zhuǎn)移到到了bodyy標(biāo)簽中，這這樣頁(yè)面中所所有的內(nèi)容都都被定義為居居中顯示，而而那些不需要要居中的內(nèi)容容，如文章正正文，我們可可以再添加ttext-aalign: leftt進(jìn)行覆蓋。當(dāng)當(dāng)然對(duì)于外圍圍容器而言，我我們利用maargin: 0px auto使使其在水平方方向上保持在在頁(yè)面的中部部。導(dǎo)航菜單的實(shí)現(xiàn)現(xiàn)首先定義導(dǎo)航

19、外外圍容器的樣樣式：#left widthh: 1788px; 現(xiàn)在外圍容器我我們只要簡(jiǎn)單單的定義其寬寬度，并賦予予left的id名。在lefft容器中，我我們添加一個(gè)個(gè)名為navvcontaainer的的子容器來(lái)放放置導(dǎo)航菜單單。實(shí)現(xiàn)導(dǎo)航航的標(biāo)簽推薦薦使用無(wú)序列列表ul，通過(guò)CSSS我們可以改改變其外觀和和形式。HTTML結(jié)構(gòu)如如下： Homme Abouut me xximiccc Articcles Phhoto rroll ul和li標(biāo)簽簽構(gòu)建了一個(gè)個(gè)簡(jiǎn)單的項(xiàng)目目列表，其項(xiàng)項(xiàng)目符號(hào)默認(rèn)認(rèn)為小圓點(diǎn)，這這是我們不需需要的。利用用CSS可以去去掉那些小圓圓點(diǎn)，并用背背景圖片的形形式替換以我我

20、們制作好的的圖標(biāo)：#navconntaineer wiidth: 178pxx; #navconntaineer ul marggin: 00; paddding: 0; lisst-styyle-tyype: nnone; ffont: bold 12px/22px Verdaana, AArial, Helvveticaa, sanns-serrif; teext-inndent: 20pxx; lettter-sppacingg: 1pxx; bordder-boottom: 1px solidd #ffff; 第一段代碼還是是定義導(dǎo)航容容器的寬度，其其值與lefft容器相同同。第二段代

21、代碼主要用于于改變列表的的外觀，maargin和和paddiing確保導(dǎo)導(dǎo)航項(xiàng)目的周周圍沒(méi)有空隙隙，并去除了了列表項(xiàng)默認(rèn)認(rèn)的縮進(jìn)，llist-sstyle-type則則定義了列表表的項(xiàng)目符號(hào)號(hào)為無(wú)。teext-inndent使使文本左邊空空出一定的空空間，以便在在之后的步驟驟中定義背景景圖片，并保保證背景圖不不會(huì)被文本遮遮蓋。最后一一行代碼在每每個(gè)導(dǎo)航項(xiàng)目目的底部生成成一條白線，兼兼具美化和分分界的功能。接下來(lái)是鏈接外外觀的定義：#navconntaineer a displlay: bblock; widthh: 1788px; heeight: 22pxx; 以上代碼是對(duì)導(dǎo)導(dǎo)航內(nèi)a標(biāo)簽的C

22、SSS定義，作用用于導(dǎo)航中的的每個(gè)鏈接元元素。dissplay: blocck將鏈接對(duì)對(duì)象轉(zhuǎn)換為塊塊級(jí)元素，然然后再定義其其寬和高，使使得鏈接能具具有類似按鈕鈕一樣矩形的的觸發(fā)區(qū)域，并并且讓我們可可以利用偽類類a:hovver來(lái)定義義鼠標(biāo)經(jīng)過(guò)鏈鏈接時(shí)的翻轉(zhuǎn)轉(zhuǎn)效果，如在在第二段代碼碼中展示的簡(jiǎn)簡(jiǎn)單的改變背背景色或背景景圖片：#navconntaineer a:llink, #navccontaiiner aa:visiited backggroundd: urll(imagges/bgg_navbbuttonn.gif); coloor: #55C604DD; textt-decooratioo

23、n: noone; #navconntaineer a:hhover backkgrounnd: urrl(imaages/bbg_navvbuttoon_oveer.giff); collor: #A50033B; texxt-deccoratiion: nnone; 第一段代碼定義義了鏈接文本本的顏色，并并設(shè)置texxt-deccoratiion屬性為為none來(lái)去去除鏈接默認(rèn)認(rèn)的下劃線。導(dǎo)導(dǎo)航的設(shè)計(jì)往往往要求簡(jiǎn)潔潔、明了，并并且具有很強(qiáng)強(qiáng)的指示性，所所以我在這里里定義了一個(gè)個(gè)額外的樣式式#currrent來(lái)表表現(xiàn)當(dāng)前頁(yè)面面處于導(dǎo)航中中的哪個(gè)項(xiàng)目目：#navconntaineer li a

24、#currrent backkgrounnd: urrl(imaages/bbg_navvbuttoon_oveer.giff); collor: #A50033B; texxt-deccoratiion: nnone; 名為curreent的樣式式針對(duì)的是列列表項(xiàng)目lii中的鏈接元元素，其屬性性的定義與鏈鏈接的hovver狀態(tài)樣樣式是一樣的的，現(xiàn)在我們們要做的事情情就是把這個(gè)個(gè)樣式應(yīng)用到到HTML中： Home AAbout me Conntact me Artticless Photoo rolll 現(xiàn)在的currrent樣式式是應(yīng)用在第第一個(gè)li上，也就就是瀏覽器解解析后“Hoome”菜

25、單單較之其它的的菜單項(xiàng)目有有其獨(dú)特的外外觀，表明當(dāng)當(dāng)前的頁(yè)面是是屬于“Hoome”這里里欄目的。當(dāng)當(dāng)然頁(yè)面變化化了，currrent樣樣式應(yīng)用的lli對(duì)象也就就不一樣了。CSS混沌初開(kāi)開(kāi)IV：頁(yè)面DIVV布局解構(gòu)在前三講的教程程中我們已經(jīng)經(jīng)完成了網(wǎng)頁(yè)頁(yè)界面設(shè)計(jì)的的工作，從本本節(jié)開(kāi)始，我我們將關(guān)注如如何對(duì)效果圖圖進(jìn)行解構(gòu)，并并初步擬定網(wǎng)網(wǎng)頁(yè)文件的DDIV結(jié)構(gòu)。首先我們必須明明確幾個(gè)問(wèn)題題，比如設(shè)計(jì)計(jì)好的界面應(yīng)應(yīng)該劃分成幾幾塊？每塊對(duì)對(duì)應(yīng)網(wǎng)頁(yè)中的的哪部分內(nèi)容容？只有對(duì)這這些問(wèn)題有了了概念之后，我我們才能開(kāi)始始進(jìn)行切片和和導(dǎo)出的操作作。如果對(duì)頁(yè)頁(yè)面構(gòu)建的整整個(gè)流程很熟熟悉，那么以以上幾個(gè)問(wèn)題題并沒(méi)有

26、太大大的難度，可可能你在PSS中設(shè)計(jì)素材材的時(shí)候就已已經(jīng)開(kāi)始考慮慮之后的DIIV劃分了。當(dāng)當(dāng)然，我們是是要有一定的的應(yīng)變能力，合合理的組織CCSS和XHTMLL，讓最終出出爐的網(wǎng)頁(yè)具具有更好的靈靈活性和可訪訪問(wèn)性。本例中頁(yè)面模塊塊劃分的規(guī)劃劃頁(yè)面頂部（thhe heaader）； 左側(cè)邊欄（thhe lefft）； 主體內(nèi)容（thhe conntent）； 頁(yè)腳（the footeer）； 必須進(jìn)行切片并并導(dǎo)出JPFF或GIF的幾塊塊區(qū)域頂部圖片（heeader）； 默認(rèn)導(dǎo)航圖片（bg_navbutton） 翻轉(zhuǎn)導(dǎo)航圖片（bg_navbutton_over） 友情鏈接圖標(biāo)（bullet_ext

27、link） 文章標(biāo)題圖標(biāo)（bullet_title） 也許你會(huì)想：“那背景圖片片呢?”我沒(méi)有把把它羅列在其其中，因?yàn)楸潮尘皥D片比較較特殊，不論論在何種分辨辨率下我們都都要保持主體體內(nèi)容的居中中，所以我們們需要一種更更聰明的方法法。這是我們們要導(dǎo)出的背背景圖片，它它的尺寸是11600X55px，應(yīng)該該夠用了，除除非你擁有AApple公公司30英寸的超超寬屏顯示器器。利用CSS定義義頁(yè)面的背景景下面的CSS代代碼可以讓我我們的頁(yè)面背背景保持居中中顯示：body bbackgrround: #F7FF7F6 uurl(immages/backggroundd.gif) repeeat-y 50% 0

28、0; backkgrounnd-atttachmeent: ffixed; 背景圖片只有55px高度，所所以我們將其其設(shè)置為縱向向平鋪，然后后利用參數(shù)550%使其水水平居中，參參數(shù)fixeed的用處是是讓背景不隨隨內(nèi)容的滾動(dòng)動(dòng)而滾動(dòng)，它它是“凝固”的。這里的的選擇符我們們使用boddy，因?yàn)楸潮尘靶Ч轻樶槍?duì)整張頁(yè)面面而言的。構(gòu)建頁(yè)面的DIIV結(jié)構(gòu)首先來(lái)看一下頂頂部版塊的CCSS定義：#headerr texxt-aliign: ccenterr; 頂部版塊的樣式式我們使用iid選擇符，注注意在同一個(gè)個(gè)文檔中idd選擇符必須須是唯一的。網(wǎng)網(wǎng)頁(yè)的頂部也也需要居中，這這也是我們?yōu)闉槭裁炊xttex

29、t-aalign的的原因。下面面這段代碼我我們要添加在在body標(biāo)簽簽之間： 你可能也注意到到了，當(dāng)頂部部圖片應(yīng)用到到網(wǎng)頁(yè)中的時(shí)時(shí)候，其上邊邊緣和瀏覽器器邊界之間有有一定的間隙隙，所以在這這里我們要用用margiin和paddiing進(jìn)行完完善：body bbackgrround: #F7FF7F6 uurl(immages/backggroundd.gif) repeeat-y 50% 00; backkgrounnd-atttachmeent: ffixed; margiin: 0; paddiing: 00; 如果你對(duì)以上涉涉及的CSSS還不是很熟熟悉的話，這這個(gè) HYPERLINK /

30、css/css_intro.asp 入門教程（英英文的，節(jié)哀哀.）建議議你去看一下下，相信會(huì)有有很大的幫助助。CSS混沌初開(kāi)開(kāi)VI：正文與與圖片的混排排現(xiàn)在我們可以開(kāi)開(kāi)始在網(wǎng)頁(yè)中中添加內(nèi)容了了，在后續(xù)教教程中將會(huì)介介紹友情鏈接接版塊以及頁(yè)頁(yè)腳的制作。首先在CSS中中添加一個(gè)iid選擇符，在在其中定義一一個(gè)寬度值5514px (692-178)：#contennt wiidth: 514pxx; floaat: leeft; 因?yàn)閷?dǎo)航菜單浮浮動(dòng)在頁(yè)面主主體的左邊，所所以我們要在在#leftt中添加一條條floatt: lefft語(yǔ)句，#coontentt中的左浮動(dòng)動(dòng)是針對(duì)其外外圍容器的，解解析之

31、后它將將顯示在導(dǎo)航航右邊的正文文版塊：#left widthh: 1788px; flloat: left; 接下來(lái)在XHTTML中添加加如下代碼：thiss is tthe riight如果你對(duì)上面的的CSS和XHTMLL組織感到疑疑惑，下面的的教程可能會(huì)會(huì)對(duì)你有所幫幫助： HYPERLINK .au/floatutorial/introduction.htm CSS中的Flloat屬性性入門 HYPERLINK .au/floatutorial/ 浮動(dòng)屬性Flooat的應(yīng)用用 你會(huì)發(fā)現(xiàn)正文的的內(nèi)容跟導(dǎo)航航菜單貼得很很緊，我們可可以利用paaddingg來(lái)增加一點(diǎn)點(diǎn)間隙：#contennt

32、wiidth: 479pxx; floaat: leeft; paaddingg-top: 15pxx; paddding-rright: 0; paaddingg-botttom: 110px; ppaddinng-lefft: 200px; 也可以將代碼簡(jiǎn)簡(jiǎn)化成：/code#conttent widthh: 4799px; flloat: left; paddiing: 115px 00 10pxx 20pxx; /coode不論是paddding還是是margiin，若其后后跟著四個(gè)數(shù)數(shù)值，對(duì)應(yīng)的的邊緣順序是是上右下左，即即順時(shí)針?lè)较蛳?。大家?huì)發(fā)發(fā)現(xiàn)現(xiàn)在#ccontaiiner中定定義的

33、寬度由由原來(lái)的5114變成了4799，因?yàn)槲覀儌優(yōu)榱俗屨奈奈谋九c左右右邊框空出一一點(diǎn)距離，左左邊緣用paaddingg實(shí)現(xiàn)，而右右邊緣因?yàn)檎麄€(gè)DIV是左浮浮動(dòng)的，所以以我們直接將將DIV的寬度度縮減15ppx，所以widdth的值就就變成了5114-20-15=4779px。你可能會(huì)疑問(wèn)：“為什么不直直接使用wwidth: 494ppx 和 paddding-rightt: 15ppx呢？”剛開(kāi)始的時(shí)時(shí)候我也是這這么做的，出出來(lái)的效果在在Safarri, FiireFoxx 和Mozillla還算正正常，但在IIE中就不行行了，正文版版塊跳到了導(dǎo)導(dǎo)航的下面，好好像右邊沒(méi)有有足夠的空間間容納

34、下正文文DIV，具體體問(wèn)題出在哪哪里我也說(shuō)不不清楚，可能能也是IE的一個(gè)Bugg吧。添加正文的文章章標(biāo)題先來(lái)看一下主內(nèi)內(nèi)容版塊的結(jié)結(jié)構(gòu)：我們把文章的標(biāo)標(biāo)題放在H22標(biāo)簽中：Thiis is the ttitle 針對(duì)文章標(biāo)題的的CSS定義如如下：#contennt h2 fontt: norrmal 118px GGeorgiia, Tiimes NNew Rooman, Timess, serrif; coolor: #808666A; baackgroound: transsparennt urll(imagges/buullet_titlee.gif) no-rrepeatt; widt

35、th: 4554px; ppaddinng: 0 0 0 330px; mmarginn: 0; 這里我們使用#conteent h22的選擇符組組合，當(dāng)然也也可以直接對(duì)對(duì)H2標(biāo)簽進(jìn)行行定義，但是是會(huì)對(duì)頁(yè)面中中所有的H22元素都起作作用。這個(gè)CCSS樣式的的定義中，除除了常規(guī)的字字體集、顏色色、字號(hào)之外外，還利用ppaddinng屬性在標(biāo)標(biāo)題文本左邊邊空出30ppx的縮進(jìn)，目目的是不要遮遮蓋背景圖片片。背景baackgroound屬性性中，除了圖圖片的路徑及及其平鋪方式式，還定義了了其背景色為為透明traansparrent，使使整個(gè)標(biāo)題更更好的與其它它元素融合添加正文文本下面一個(gè)claass

36、類.textt定義了正文文文字的樣式式：.text font: 11pxx/18pxx Verddana, Ariall, Hellveticca, saans-seerif; ccolor: #5B6604C; mmarginn-botttom: 110px; 與id不同的是是，classs類可以在在一張頁(yè)面中中重復(fù)使用，里里面的屬性比比較簡(jiǎn)單，需需要補(bǔ)充一下下的是，111px/188px表示字字體大小是111px，行行高是18ppx。在XHTMML中，我們們添加一個(gè)段段落標(biāo)簽P來(lái)放置文本本，并應(yīng)用.text樣樣式：HHere ccomes the ttext 在正文中添加混混排圖像下面是應(yīng)

37、用在圖圖像上的樣式式：.imagerright floaat: riight; ppaddinng: 7ppx; bacckgrouund-coolor: #fffffff; boorder: 1px solidd #bacc1a3; 這里我們還是使使用classs類，因?yàn)闉橐院罂赡苓€還會(huì)用到它。float:right讓圖片在文本塊中居右，而白色的背景和四邊均為7px的padding，使得圖片的四周有了類似7像素白邊的效果，目的是讓圖片內(nèi)容與邊框保持7px的間距。而真正的邊框由border定義，1像素實(shí)線。如果在文本塊中有居左的圖片，我們可以再添加一個(gè)名為.imageleft的class類，具

38、體的屬性設(shè)置只要把float: right改成float: left就可以了。CSS混沌初開(kāi)開(kāi)VII：頁(yè)腳腳的構(gòu)建在開(kāi)始第七部分分的教程之前前，我要先糾糾正一個(gè)小錯(cuò)錯(cuò)誤。之前在在添加正文內(nèi)內(nèi)容時(shí)，我把把它放在了一一個(gè)DIV容器中中，事實(shí)上如如果我們用段段落標(biāo)簽P作容器可以以達(dá)到相同的的效果，而且且當(dāng)CSS關(guān)閉時(shí)時(shí)也能正常顯顯示。用P標(biāo)簽來(lái)實(shí)現(xiàn)現(xiàn)的話，還可可以用marrgin來(lái)控控制段落的上上、下邊距，也也就不需要什什么換行標(biāo)簽簽了。首先要提醒大家家的是，相對(duì)對(duì)于表格布局局方式，CSSS中頁(yè)腳的的實(shí)現(xiàn)有著很很大的區(qū)別。遺遺憾的是Saafari作作為一個(gè)新生生瀏覽器，其其對(duì)Web標(biāo)準(zhǔn)的的支持還不是

39、是很完善，比比如min-widthh和min-hheightt屬性在Saffari中還還沒(méi)能得到良良好的支持，但但是頁(yè)腳的實(shí)實(shí)現(xiàn)我們往往往需要用到它它們。在繼續(xù)續(xù)本節(jié)教程之之前，希望大大家去了解一一下這篇Boobby VVan Deer Sluuis文章，它它對(duì)CSS中的垂垂直定位和頁(yè)頁(yè)腳實(shí)現(xiàn)作了了很到位的講講解。首先還是要先明明確一下文檔檔的DIV結(jié)構(gòu)，之之前制作的內(nèi)內(nèi)容比如頂部部、導(dǎo)航、正正文等我們都都封裝到一個(gè)個(gè)id名為conttainerr的DIV中，這這組容器標(biāo)簽簽緊跟在boody標(biāo)簽之之后，接著就就是一個(gè)idd名為footter的頁(yè)腳腳容器，代碼碼如下： . . . 頁(yè)腳DIV的C

40、CSS設(shè)置如如下：#footerr marrgin: 0px aauto; ppositiion: rrelatiive; baackgroound-ccolor: #7177F51; bborderr-top: 9px solidd #F7FF7F6; wwidth: 692ppx; paddding: 5px 0; cleear: bboth; 我們?yōu)轫?yè)腳設(shè)置置暗綠色的背背景以及9ppx的上邊框框，寬度定義義為692ppx。Clearr屬性用于清清除浮動(dòng)，簡(jiǎn)簡(jiǎn)單點(diǎn)說(shuō)就是是在其左邊或或右邊不允許許有任何浮動(dòng)動(dòng)元素。maargin: 0px auto的的語(yǔ)法在之前前的教程中已已經(jīng)出現(xiàn)過(guò)了了，其

41、作用就就是讓頁(yè)腳在在頁(yè)面中居中中顯示。為了了不讓頁(yè)腳文文字和邊框貼貼得太近，我我們用paddding在在上、下空出出5px的填充充空間。接下來(lái)為頁(yè)腳中中的文字和鏈鏈接定義樣式式：#footerr h2 marinng: 0; text-alignn: cennter; ffont: normaal 10ppx Verrdana, Ariaal, Heelvetiica, ssans-sserif; colorr: #D33D8C4; #foooter hh2 a:vvisiteed, #ffooterr h2 aa:linkk collor: #D3D8CC4; texxt-deccorati

42、ion: nnone; bborderr-botttom: 11px dootted #D3D88C4; #foooter hh2 a:hhover coloor: #FF7F7F66; textt-decooratioon: noone; boorder-bottoom: noone; baackgroound-ccolor: #A50003B; 頁(yè)腳中的文字我我們放置到HH2標(biāo)簽中：. 上面這行代碼我我們添加在名名為conttainerr的DIV閉合標(biāo)標(biāo)簽后面，也也即是在boody的閉合合標(biāo)簽之前。接接下來(lái)我們要要添加一段BBobby Van DDer Slluis建議議采用的JSS腳本，

43、讓頁(yè)頁(yè)腳在Saffari瀏覽覽器中也能固固定在瀏覽器器底部。確保你使用的IID名跟在JS中定義的的函數(shù)名保持持一致。完成JS的添加加后，如果你你在瀏覽器中中預(yù)覽，你會(huì)會(huì)發(fā)現(xiàn)頁(yè)腳并并沒(méi)有顯示出出來(lái)。這可能能是因?yàn)橛袃蓛蓚€(gè)浮動(dòng)容器器(#lefft andd #conntent)都需要進(jìn)行行浮動(dòng)清除，在在的文章中有有很詳細(xì)的介介紹。我們需需要添加下面面的代碼進(jìn)行行修正，首先先添加一個(gè)用用于清除浮動(dòng)動(dòng)的DIV： 然后為其定義CCSS：.clear cleaar: booth; CSS混沌初開(kāi)開(kāi)VIII：側(cè)側(cè)邊欄友情鏈鏈接這是本教程的最最后一部分，講講解如何實(shí)現(xiàn)現(xiàn)友情鏈接版版塊。需要說(shuō)說(shuō)明的是，這這部分

44、我們將將把樣式表轉(zhuǎn)轉(zhuǎn)換為外聯(lián)式式來(lái)實(shí)現(xiàn)CSSS樣式的設(shè)設(shè)定。首先是XHTMML代碼： My Favorrite SSites Sttopdessign SiimpleBBits Meezzobllue Xiimicc 我們把所有的鏈鏈接放置在一一個(gè)名為faav的DIV容器中中，并將在CCSS中定義義其widtth、margiin和paddiing等屬性性。欄目標(biāo)題題利用H2標(biāo)簽實(shí)現(xiàn)現(xiàn)，而鏈接鏈鏈表則還是用用無(wú)序列表uul來(lái)實(shí)現(xiàn)。接下來(lái)定義faavlinkks容器的樣樣式：#favlinnks wwidth: 163ppx; paddding-left: 15pxx; marggin-toop:

45、 100px; 其中定義的三個(gè)個(gè)屬性都比較較簡(jiǎn)單，你可可能會(huì)注意到到widthh值與導(dǎo)航菜菜單的寬度1178不相等等，原因仍然然是paddding-lleft中定定義了15ppx的內(nèi)填充充，所以其寬寬度值應(yīng)該是是178-115=1633px。如果果你對(duì)此不是是很理解，建建議你去參考考一些介紹CCSS中盒模模型原理的文文章。下面是欄目標(biāo)題題文字的CSSS定義：#favlinnks h22 fonnt: noormal 16px Georggia, TTimes New RRoman, Timees, seerif; ccolor: #5C6604D; mmarginn: 0 00 10pxx 0; paaddingg: 0; 除了設(shè)置文字的的字體和顏色色之外，paaddingg和margiin的定義也也是必須的，因因?yàn)槿绻幻髅鞔_指定的話話，欄目標(biāo)題題和鏈接列表表之間的間隔隔可能會(huì)不可可預(yù)期，在這這里我直接用