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

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

2、hhop中建建立一個(gè)1178x222像素的的RGB空白白文檔，添添加一個(gè)新新圖層命名名為“按鈕”，并用灰灰色#ECCECECC進(jìn)行填充充。再新建建一個(gè)圖層層命名為“高光”，在其上上、左邊緣緣各繪制11px的白白色線(xiàn)條，你你用畫(huà)筆或或單像素選選取工具都都可以。然然后我們用用橡皮工具具把左邊緣緣白線(xiàn)的底底部擦除一一段，在這這里我使用用的是大小小20pxx透明度為為50%的橡橡皮刷：新建一個(gè)名名為“網(wǎng)點(diǎn)”的圖層，用用1px的鉛鉛筆工具在在適當(dāng)?shù)奈晃恢美L制幾幾個(gè)小點(diǎn)，示示例中的顏顏色是#77272772，當(dāng)然然這里你可可以自由發(fā)發(fā)揮設(shè)計(jì)更更有創(chuàng)意的的小點(diǎn)組合合，關(guān)鍵就就是要讓它它們看起來(lái)來(lái)精致有序序：

3、接著我們可可以通過(guò)鋼鋼筆工具繪繪制路徑創(chuàng)創(chuàng)建選區(qū)，并并在選區(qū)內(nèi)內(nèi)填充#dd6d6dd6顏色，來(lái)來(lái)模擬玻璃璃的質(zhì)感效效果。整個(gè)個(gè)圖片素材材的制作過(guò)過(guò)程雖然不不是很復(fù)雜雜，但是最最終效果看看起來(lái)也不不是很差，不不是么？鼠標(biāo)經(jīng)過(guò)導(dǎo)導(dǎo)航時(shí)的翻翻轉(zhuǎn)圖片：創(chuàng)建翻轉(zhuǎn)轉(zhuǎn)效果圖片片，我們只只要簡(jiǎn)單的的在原有素素材基礎(chǔ)上上調(diào)整色調(diào)調(diào)就即可，關(guān)關(guān)于文本的的添加在這這里就不細(xì)細(xì)說(shuō)了。我我們可以為為每個(gè)圖層層調(diào)整色調(diào)調(diào)，在示例例中我主要要使用了一一下幾種顏顏色：背景景#BFEE3FF、玻璃質(zhì)感感#A5DD1F3、網(wǎng)點(diǎn)#EE40011B。這部部分教程涉涉及到一些些Phottoshoop的基本本知識(shí)，如如果你不是是很了解，

4、建建議先學(xué)習(xí)習(xí)一些PSS的入門(mén)基基礎(chǔ)，畢竟竟Adobbe合并了了*之后，其其旗下軟件件尤其是PPS與網(wǎng)頁(yè)頁(yè)設(shè)計(jì)的關(guān)關(guān)聯(lián)性已經(jīng)經(jīng)越來(lái)越緊緊密了，大大多時(shí)候你你要設(shè)計(jì)出出優(yōu)秀美觀觀的網(wǎng)頁(yè)，都都離不開(kāi)這這些軟件的的幫助。當(dāng)當(dāng)然顏色選選擇要視乎乎你的需要要，制作的的方法大致致還是相通通的，你也也可以發(fā)揮揮創(chuàng)意進(jìn)行行更好的細(xì)細(xì)節(jié)設(shè)計(jì)：CSS混沌沌初開(kāi)III:背景圖圖案及配色色本教程的第第二部分主主要有兩個(gè)個(gè)重點(diǎn)：一一是如何正正確選擇導(dǎo)導(dǎo)航菜單中中所涉及的的顏色，雖雖然它沒(méi)有有很多的技技術(shù)含量，但但使用的顏顏色是否恰恰當(dāng)，與后后期出來(lái)的的效果是有有很大影響響的；另外外一部分主主要是關(guān)于于頁(yè)面背景景的，側(cè)重

5、重于制作背背景圖片素素材時(shí)的一一些細(xì)節(jié)問(wèn)問(wèn)題。在第第一講中，我我主要是介介紹一種實(shí)實(shí)現(xiàn)玻璃材材質(zhì)按鈕的的快捷途徑徑，現(xiàn)在來(lái)來(lái)講顏色的的選擇似乎乎有點(diǎn)滯后后了。不過(guò)過(guò)鑒于網(wǎng)站站的風(fēng)格存存在差異，素素材色系的的選擇也是是界面設(shè)計(jì)計(jì)階段很重重要的一塊塊內(nèi)容，網(wǎng)網(wǎng)絡(luò)上也有有很多關(guān)于于網(wǎng)頁(yè)色彩彩的文章，大大家可以依依據(jù)其中介介紹的一些些基本知識(shí)識(shí)進(jìn)行參考考，雖然良良好的色彩彩感覺(jué)需要要很長(zhǎng)一段段時(shí)間來(lái)培培養(yǎng)。選擇擇你的色彩彩體系事實(shí)實(shí)上色系的的選擇會(huì)體體現(xiàn)很多個(gè)個(gè)人因素，畢畢竟每個(gè)人人都會(huì)有各各自的色彩彩偏好，你你的選擇也也會(huì)彰顯你你的個(gè)人風(fēng)風(fēng)格。沒(méi)人人能建議你你“必須選擇擇什么顏色色”，這里我我也只能

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

7、的整體風(fēng)風(fēng)格和設(shè)計(jì)計(jì)者對(duì)顏色色的駕馭能能力：在PS中我我們可以通通過(guò)在色相相/飽和度（CCtrl+U）面板板中調(diào)整參參數(shù)來(lái)調(diào)配配顏色。事事實(shí)上圖中中的幾組顏顏色就是通通過(guò)這種方方法調(diào)制出出來(lái)的，當(dāng)當(dāng)然在這個(gè)個(gè)面板中可可以變化出出很多顏色色，具體哪哪個(gè)參數(shù)應(yīng)應(yīng)該為什么么值都沒(méi)有有硬性的規(guī)規(guī)定，網(wǎng)絡(luò)絡(luò)上有很多多推薦的色色彩組合并并明確給出出了RGBB值，大家家在利用這這種方法配配色的時(shí)候候也可以參參考那些文文章教程。如果你看看了上面的的講解之后后仍然不知知道如何著著手， HYPERLINK /colors/Colors.html 這段段關(guān)于顏色色的影片 或許會(huì)對(duì)對(duì)你有所幫幫助。事實(shí)實(shí)上我覺(jué)得得每個(gè)

8、人都都應(yīng)該去看看一下這個(gè)個(gè)影片，不不僅因?yàn)樗旧碓O(shè)計(jì)計(jì)得相當(dāng)有有趣，更重重要的是對(duì)對(duì)于認(rèn)識(shí)和和了解大眾眾化的色彩彩體驗(yàn)和感感知從而運(yùn)運(yùn)用到網(wǎng)頁(yè)頁(yè)設(shè)計(jì)中，它它都是一個(gè)個(gè)很好的引引導(dǎo)和鞏固固。是時(shí)候候開(kāi)始繪制制背景圖案案了現(xiàn)在我我們開(kāi)始討討論網(wǎng)頁(yè)的的背景圖案案。當(dāng)我們們?cè)赑S等軟件件中創(chuàng)作背背景圖案時(shí)時(shí)，往往要要精細(xì)到像像素，尤其其是那些平平鋪填充的的背景。首首先我們?cè)谠赑S中新建建一個(gè)300 x像素的的空白文檔檔，填充適適當(dāng)?shù)念伾?，并用鉛鉛筆工具在在其上繪制制一些單像像素小點(diǎn)，下下面是一些些例子：如第一講中中導(dǎo)航按鈕鈕上的小點(diǎn)點(diǎn)一樣，在在這里你也也可以盡量量的發(fā)揮自自己的創(chuàng)意意，但是還還是有

9、幾個(gè)個(gè)需要注意意的地方，比比如小點(diǎn)的的顏色，不不能跟背景景色反差太太大，不然然平鋪以后后它們會(huì)變變得很刺眼眼。如果要要利用小點(diǎn)點(diǎn)來(lái)組合出出一些圖案案或線(xiàn)條，我我通常會(huì)采采用復(fù)制圖圖層并通過(guò)過(guò)方向鍵調(diào)調(diào)整其位置置的方法，適適當(dāng)?shù)臅r(shí)候候還會(huì)變化化其圖層模模式或透明明度等。制作這些背背景圖案的的一個(gè)難點(diǎn)點(diǎn)就是，如如何保證圖圖案平鋪時(shí)時(shí)能實(shí)現(xiàn)無(wú)無(wú)縫接合，畢畢竟背景的的面積往往往比較大，它它上面若有有割裂就會(huì)會(huì)很顯眼。我通常采采用的方法法是利用PPS中的矩矩形選框工工具，比如如下圖中，正正方形選區(qū)區(qū)左上角標(biāo)標(biāo)識(shí)出的像像素必須與與其它三個(gè)個(gè)標(biāo)識(shí)區(qū)一一致，那么么當(dāng)我們把把這樣一塊塊區(qū)域截取取下來(lái)進(jìn)行行平鋪的

10、時(shí)時(shí)候就不會(huì)會(huì)有問(wèn)題：當(dāng)然這個(gè)問(wèn)問(wèn)題是否容容易解決，也也是視乎你你最初設(shè)計(jì)計(jì)的背景圖圖案，如果果我們動(dòng)手手的時(shí)候就就把可能遇遇到的一些些問(wèn)題考慮慮在內(nèi)，那那么到解決決的時(shí)候也也不會(huì)太費(fèi)費(fèi)力甚至返返工了。 CSS混沌沌初開(kāi)IIII:頂部部圖片視覺(jué)覺(jué)修飾這節(jié)是關(guān)于于素材設(shè)計(jì)計(jì)的最后一一部分了，設(shè)設(shè)計(jì)工作完完成后將會(huì)會(huì)開(kāi)始講解解如何切片片以及在CCSS和XHTMML中構(gòu)建建最終頁(yè)面面。首先看看一下這節(jié)節(jié)設(shè)計(jì)的效效果圖：在制作按鈕鈕時(shí)，我用用了粉紅和和暗綠兩種種色調(diào)，可可能看起來(lái)來(lái)有點(diǎn)怪，但但個(gè)人很鐘鐘意這個(gè)組組合。在設(shè)設(shè)計(jì)網(wǎng)頁(yè)整整體界面的的過(guò)程中，我我會(huì)給出一一些意見(jiàn)和和建議，重重點(diǎn)是頂部部的圖片，

11、如如何增加一一些細(xì)節(jié)，讓讓它看起來(lái)來(lái)更加的美美觀、精致致。頂部圖圖片的視覺(jué)覺(jué)處理在教教程的前兩兩部分中，提提到過(guò)導(dǎo)航航按鈕的顏顏色選擇，現(xiàn)現(xiàn)在我們來(lái)來(lái)看一下如如何處理一一張花卉圖圖像的色調(diào)調(diào)，使其與與頁(yè)面的風(fēng)風(fēng)格達(dá)到統(tǒng)統(tǒng)一。在用用到的花卉卉圖像素材材中，大家家可以發(fā)現(xiàn)現(xiàn)它上面也也有紅和綠綠兩種色調(diào)調(diào)，我要做做的事情就就是把其中中的顏色調(diào)調(diào)制成粉紅紅和暗綠，就就好似導(dǎo)航航菜單中使使用的色調(diào)調(diào)一樣：首先來(lái)看一一下圖片中中花朵的顏顏色，它的的色調(diào)偏向向于大紅，還還是使用PPS中的色色相/飽和度命命令來(lái)對(duì)它它進(jìn)行調(diào)整整。利用快快捷鍵按CCtrl+U調(diào)出色色相/飽和度面面板，在“編輯”項(xiàng)的下拉拉列表中選

12、選擇“紅色（Cttrl+11）”，這樣我我們就能只只針對(duì)圖像像中的紅色色進(jìn)行調(diào)整整了。拖動(dòng)動(dòng)色相滑塊塊調(diào)制出我我們需要的的紅色，具具體的數(shù)值值依據(jù)實(shí)際際情況，比比如我這里里是大致是是-30左右右：下一步就是是通過(guò)修飾飾細(xì)節(jié)增加加一些輔助助色調(diào)來(lái)增增進(jìn)視覺(jué)效效果，為接接下來(lái)的濾濾鏡處理作作一些預(yù)處處理。頂部部圖片的處處理對(duì)創(chuàng)意意有一定的的要求，如如果有相關(guān)關(guān)的經(jīng)驗(yàn)的的話(huà)也就不不是件難事事，所以素素材處理能能力以及個(gè)個(gè)人的美工工基礎(chǔ)都會(huì)會(huì)對(duì)設(shè)計(jì)過(guò)過(guò)程、設(shè)計(jì)計(jì)結(jié)果產(chǎn)生生影響：在之前的步步驟中圖片片的尺寸和和體積無(wú)疑疑已經(jīng)進(jìn)行行了調(diào)整，但但是如果有有比較多的的細(xì)節(jié)要處處理的話(huà)，建建議還是在在原始尺寸寸

13、上操作，像像示例中的的圖片我剛剛開(kāi)始也是是在16000 12200的原原始大小下下進(jìn)行處理理的。我為為圖像添加加了個(gè)人比比較偏愛(ài)的的繪畫(huà)涂抹抹濾鏡（濾濾鏡菜單藝術(shù)效果果），效果果如下圖。在PS中，濾濾鏡的運(yùn)用用是很有趣趣的一件事事情，調(diào)節(jié)節(jié)其中的參參數(shù)就可以以達(dá)到很多多意想不到到的效果，加加之在CSS版本中提提供了可用用濾鏡效果果的縮略圖圖預(yù)覽，讓讓這個(gè)實(shí)用用的工具用用起來(lái)更加加方便：接著我們添添加一些波波浪線(xiàn)條來(lái)來(lái)營(yíng)造虛幻幻的意境，可可以用筆刷刷或者鋼筆筆繪制一些些曲線(xiàn)，當(dāng)當(dāng)然也可以以用漸變工工具制作，只只要達(dá)到下下圖中漸隱隱效果即可可。事實(shí)上上我們只需需要做出其其中一條就就可以了，然然后復(fù)

14、制圖圖層調(diào)整其其透明度、角度、扭扭曲制作出出其它的線(xiàn)線(xiàn)條。這里里使用的顏顏色還是推推薦使用粉粉紅，為了了區(qū)別于花花朵的顏色色，可以把把線(xiàn)條的粉粉紅明度調(diào)調(diào)大一點(diǎn)。在圖片的的右邊，我我利用Taamuz字字體添加了了一個(gè)修飾飾符號(hào)，效效果如下：如果對(duì)以上上操作有疑疑問(wèn)，可以以 HYPERLINK /vpieters/css_step2/step2_whooshes.mov.zip 下載QuiickTiime演示示影片 觀看！在圖圖片上添加加BLOGG標(biāo)題Bloog的標(biāo)題題反映了你你網(wǎng)站的內(nèi)內(nèi)容主題，其其文字組織織因人而異異，一般還還會(huì)加上一一個(gè)圖標(biāo)或或LOGOO，畢竟每每個(gè)人都想想自己的BBlog

15、與與眾不同，有有一些標(biāo)志志性的元素素，在這里里我就簡(jiǎn)單單的選用一一個(gè)仙人掌掌標(biāo)志：下面是一些些關(guān)于字體體或修飾符符號(hào)的資源源鏈接： HYPERLINK /findfonts/detail.asp?pid=201879 Minioon修飾符符和Tammuz字體體 HYPERLINK /type/browser/C/C_ornament.jhtml;storesessionid=TSUS1JHN0R5NTQFI0IKRT5GAVDJBIIV1 Adobee提供的修修飾性字體體 HYPERLINK /ding-e.htm 一系列免費(fèi)費(fèi)的Dinngbatts字體 最終的界面面設(shè)計(jì)效果果至今為止止，不論

16、是是在導(dǎo)航按按鈕還是頂頂部圖片的的制作，我我們都還沒(méi)沒(méi)有遇到什什么棘手的的難題?，F(xiàn)現(xiàn)在讓我們們把做出來(lái)來(lái)的素材整整合在一起起，拼合成成一張 HYPERLINK /articleimg/2008/06/5893/css_templatedesign.jpg 最終的界界面效果 。這已經(jīng)經(jīng)是界面設(shè)設(shè)計(jì)的最后后一個(gè)階段段了，所有有若還有什什么可添加加的修飾元元素，最好好都在界面面效果圖中中體現(xiàn)出來(lái)來(lái)。在我的的示例頁(yè)面面中，文章章標(biāo)題和友友情鏈接的的前面我都都用精致的的圖標(biāo)進(jìn)行行修飾，效效果看起來(lái)來(lái)還可以，當(dāng)當(dāng)然你們可可以選擇自自己喜歡的的素材替換換，最好也也能在設(shè)計(jì)計(jì)過(guò)程中體體會(huì)到樂(lè)趣趣！ CSS混沌

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

18、是要通過(guò)過(guò)CSS“隱藏”文本而僅僅僅顯示背背景圖片。圖像替換文文本技術(shù)這個(gè)技術(shù)有有時(shí)候我們們也稱(chēng)之為為文本替換換或圖像替替換，其強(qiáng)強(qiáng)調(diào)的核心心是在HTTML代碼碼中我們使使用文本，然然后通過(guò)一一些方法將將文本“隱藏”，而僅顯顯示背景或或其它形式式的圖片，這這樣在保證證可訪(fǎng)問(wèn)性性的同時(shí)，也也使得頁(yè)面面因圖像的的應(yīng)用而更更加美觀。比如我們們可以將圖圖片設(shè)置為為背景，讓讓后利用ttext-indeent使文文本有足夠夠的縮進(jìn)實(shí)實(shí)現(xiàn)隱藏，代代碼如下：h1 widtth: 6692pxx; heeightt: 900px; textt-inddent: -99999pxx; baackgrroundd:

19、 urrl(immagess/heaader.jpg); maarginn: 0; padddingg: 0; 其中的wiidth和和heigght是必必須定義的的，且需和和背景圖片片的尺寸保保持一致。textt-aliign: centter被轉(zhuǎn)轉(zhuǎn)移到了bbody標(biāo)標(biāo)簽中，這這樣頁(yè)面中中所有的內(nèi)內(nèi)容都被定定義為居中中顯示，而而那些不需需要居中的的內(nèi)容，如如文章正文文，我們可可以再添加加textt-aliign: leftt進(jìn)行覆蓋蓋。當(dāng)然對(duì)對(duì)于外圍容容器而言，我我們利用mmargiin: 00px aauto使使其在水平平方向上保保持在頁(yè)面面的中部。導(dǎo)航菜單的的實(shí)現(xiàn)首先定義導(dǎo)導(dǎo)航外圍容容器的

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

21、式替換以我我們制作好好的圖標(biāo)：#navccontaainerr wwidthh: 1778px; #navccontaainerr ul maarginn: 0; padddingg: 0; lisst-sttyle-typee: noone; fontt: boold 112px/22pxx Verrdanaa, Arrial, Hellvetiica, sanss-serrif; textt-inddent: 20ppx; lletteer-sppacinng: 11px; bordder-bbottoom: 11px ssolidd #ffff; 第一段代碼碼還是定義義導(dǎo)航容器器的寬度，

22、其其值與leeft容器器相同。第第二段代碼碼主要用于于改變列表表的外觀，margin和padding確保導(dǎo)航項(xiàng)目的周?chē)鷽](méi)有空隙，并去除了列表項(xiàng)默認(rèn)的縮進(jìn)，list-style-type則定義了列表的項(xiàng)目符號(hào)為無(wú)。text-indent使文本左邊空出一定的空間，以便在之后的步驟中定義背景圖片，并保證背景圖不會(huì)被文本遮蓋。最后一行代碼在每個(gè)導(dǎo)航項(xiàng)目的底部生成一條白線(xiàn)，兼具美化和分界的功能。接下來(lái)是鏈鏈接外觀的的定義：#navccontaainerr a dissplayy: bllock; widdth: 178ppx; hheighht: 222px; 以上代碼是是對(duì)導(dǎo)航內(nèi)內(nèi)a標(biāo)簽的CSSS定義

23、，作作用于導(dǎo)航航中的每個(gè)個(gè)鏈接元素素。dissplayy: bllock將將鏈接對(duì)象象轉(zhuǎn)換為塊塊級(jí)元素，然然后再定義義其寬和高高，使得鏈鏈接能具有有類(lèi)似按鈕鈕一樣矩形形的觸發(fā)區(qū)區(qū)域，并且且讓我們可可以利用偽偽類(lèi)a:hhoverr來(lái)定義鼠鼠標(biāo)經(jīng)過(guò)鏈鏈接時(shí)的翻翻轉(zhuǎn)效果，如如在第二段段代碼中展展示的簡(jiǎn)單單的改變背背景色或背背景圖片：#navccontaainerr a:llink, #naavconntainner aa:vissitedd bbackggrounnd: uurl(iimagees/bgg_navvbuttton.ggif); collor: #5C6604D; texxt-deec

24、oraationn: noone; #navccontaainerr a:hhoverr bbackggrounnd: uurl(iimagees/bgg_navvbuttton_oover.gif); coolor: #A55003BB; teext-ddecorratioon: nnone; 第一段代碼碼定義了鏈鏈接文本的的顏色，并并設(shè)置teext-ddecorratioon屬性為為nonee來(lái)去除鏈鏈接默認(rèn)的的下劃線(xiàn)。導(dǎo)航的設(shè)設(shè)計(jì)往往要要求簡(jiǎn)潔、明了，并并且具有很很強(qiáng)的指示示性，所以以我在這里里定義了一一個(gè)額外的的樣式#ccurreent來(lái)表表現(xiàn)當(dāng)前頁(yè)頁(yè)面處于導(dǎo)導(dǎo)航中的哪哪個(gè)項(xiàng)目：#na

25、vccontaainerr li a#cuurrennt backkgrouund: url(imagges/bbg_naavbuttton_overr.giff); ccolorr: #AA50033B; ttext-decooratiion: nonee; 名為currrentt的樣式針針對(duì)的是列列表項(xiàng)目lli中的鏈鏈接元素，其其屬性的定定義與鏈接接的hovver狀態(tài)態(tài)樣式是一一樣的，現(xiàn)現(xiàn)在我們要要做的事情情就是把這這個(gè)樣式應(yīng)應(yīng)用到HTTML中： Homme AAboutt me Conntactt me Artticlees PPhotoo rolll 現(xiàn)在的cuurrennt樣式是是應(yīng)

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

27、切片和導(dǎo)出出的操作。如果對(duì)頁(yè)頁(yè)面構(gòu)建的的整個(gè)流程程很熟悉，那那么以上幾幾個(gè)問(wèn)題并并沒(méi)有太大大的難度，可可能你在PPS中設(shè)計(jì)計(jì)素材的時(shí)時(shí)候就已經(jīng)經(jīng)開(kāi)始考慮慮之后的DDIV劃分分了。當(dāng)然然，我們是是要有一定定的應(yīng)變能能力，合理理的組織CCSS和XHTMML，讓最最終出爐的的網(wǎng)頁(yè)具有有更好的靈靈活性和可可訪(fǎng)問(wèn)性。本例中頁(yè)面面模塊劃分分的規(guī)劃頁(yè)面頂部（the header）； 左側(cè)邊欄（the left）； 主體內(nèi)容（the content）； 頁(yè)腳（thhe foooterr）； 必須進(jìn)行切切片并導(dǎo)出出JPF或GIF的幾幾塊區(qū)域頂部圖片（header）； 默認(rèn)導(dǎo)航圖圖片（bgg_navvbuttto

28、n） 翻轉(zhuǎn)導(dǎo)航圖圖片（bgg_navvbuttton_oover） 友情鏈接圖圖標(biāo)（buullett_exttlinkk） 文章標(biāo)題圖圖標(biāo)（buullett_tittle） 也許你會(huì)想想：“那背景圖圖片呢?”我沒(méi)有把把它羅列在在其中，因因?yàn)楸尘皥D圖片比較特特殊，不論論在何種分分辨率下我我們都要保保持主體內(nèi)內(nèi)容的居中中，所以我我們需要一一種更聰明明的方法。這是我們們要導(dǎo)出的的背景圖片片，它的尺尺寸是16600X55px，應(yīng)應(yīng)該夠用了了，除非你你擁有Appple公公司30英寸的的超寬屏顯顯示器。利用CSSS定義頁(yè)面面的背景下面的CSSS代碼可可以讓我們們的頁(yè)面背背景保持居居中顯示：body baa

29、ckgrroundd: #FF7F7FF6 urrl(immagess/bacckgroound.gif) reppeat-y 500% 0; bacckgroound-attaachmeent: fixeed; 背景圖片只只有5pxx高度，所所以我們將將其設(shè)置為為縱向平鋪鋪，然后利利用參數(shù)550%使其其水平居中中，參數(shù)ffixedd的用處是是讓背景不不隨內(nèi)容的的滾動(dòng)而滾滾動(dòng)，它是是“凝固”的。這里里的選擇符符我們使用用bodyy，因?yàn)楸潮尘靶Ч鞘轻槍?duì)整張張頁(yè)面而言言的。構(gòu)建頁(yè)面的的DIV結(jié)構(gòu)構(gòu)首先來(lái)看一一下頂部版版塊的CSSS定義：#headder texxt-allign: cennte

30、r; 頂部版塊的的樣式我們們使用idd選擇符，注注意在同一一個(gè)文檔中中id選擇符符必須是唯唯一的。網(wǎng)網(wǎng)頁(yè)的頂部部也需要居居中，這也也是我們?yōu)闉槭裁炊x義textt-aliign的原原因。下面面這段代碼碼我們要添添加在boody標(biāo)簽簽之間： 你可能也注注意到了，當(dāng)當(dāng)頂部圖片片應(yīng)用到網(wǎng)網(wǎng)頁(yè)中的時(shí)時(shí)候，其上上邊緣和瀏瀏覽器邊界界之間有一一定的間隙隙，所以在在這里我們們要用maarginn和paddding進(jìn)進(jìn)行完善：body baackgrroundd: #FF7F7FF6 urrl(immagess/bacckgroound.gif) reppeat-y 500% 0; bacckgroound-

31、attaachmeent: fixeed; mmargiin: 00; paaddinng: 00; 如果你對(duì)以以上涉及的的CSS還不不是很熟悉悉的話(huà)，這這個(gè) HYPERLINK /css/css_intro.asp 入門(mén)教程程（英文的的，節(jié)哀.）建建議你去看看一下，相相信會(huì)有很很大的幫助助。CSS混沌沌初開(kāi)VII：正文與與圖片的混混排現(xiàn)在我們可可以開(kāi)始在在網(wǎng)頁(yè)中添添加內(nèi)容了了，在后續(xù)續(xù)教程中將將會(huì)介紹友友情鏈接版版塊以及頁(yè)頁(yè)腳的制作作。首先在CSSS中添加加一個(gè)idd選擇符，在在其中定義義一個(gè)寬度度值5144px (692-178)：#conttent wiidth: 5144px; flo

32、aat: lleft; 因?yàn)閷?dǎo)航菜菜單浮動(dòng)在在頁(yè)面主體體的左邊，所所以我們要要在#leeft中添添加一條ffloatt: leeft語(yǔ)句句，#coontennt中的左左浮動(dòng)是針針對(duì)其外圍圍容器的，解解析之后它它將顯示在在導(dǎo)航右邊邊的正文版版塊：#leftt wwidthh: 1778px; flooat: leftt; 接下來(lái)在XXHTMLL中添加如如下代碼：thiis iss thee rigght如果你對(duì)上上面的CSSS和XHTMML組織感感到疑惑，下下面的教程程可能會(huì)對(duì)對(duì)你有所幫幫助： HYPERLINK .au/floatutorial/introduction.htm CSS中的的F

33、loaat屬性入入門(mén) HYPERLINK .au/floatutorial/ 浮動(dòng)屬性FFloatt的應(yīng)用 你會(huì)發(fā)現(xiàn)正正文的內(nèi)容容跟導(dǎo)航菜菜單貼得很很緊，我們們可以利用用paddding來(lái)來(lái)增加一點(diǎn)點(diǎn)間隙：#conttent wiidth: 4799px; floaat: lleft; padddingg-topp: 155px; paddding-righht: 00; paaddinng-boottomm: 100px; paddding-leftt: 200px; 也可以將代代碼簡(jiǎn)化成成：/codde#cconteent widdth: 479ppx; ffloatt: leeft; p

34、addding: 15ppx 0 10pxx 20ppx; /ccode不論是paaddinng還是marrgin，若若其后跟著著四個(gè)數(shù)值值，對(duì)應(yīng)的的邊緣順序序是上右下下左，即順順時(shí)針?lè)较蛳?。大家?huì)會(huì)發(fā)現(xiàn)現(xiàn)在在#conntainner中定定義的寬度度由原來(lái)的的514變成成了4799，因?yàn)槲椅覀優(yōu)榱俗屪屨奈谋颈九c左右邊邊框空出一一點(diǎn)距離，左左邊緣用ppaddiing實(shí)現(xiàn)現(xiàn)，而右邊邊緣因?yàn)檎麄€(gè)DIVV是左浮動(dòng)動(dòng)的，所以以我們直接接將DIVV的寬度縮縮減15ppx，所以以widtth的值就就變成了5514-220-155=4799px。你可能會(huì)疑疑問(wèn)：“為什么不不直接使用用widdth: 494

35、ppx 和和 paaddinng-riight: 15ppx呢？”剛開(kāi)始的的時(shí)候我也也是這么做做的，出來(lái)來(lái)的效果在在Safaari, FireeFox 和Moziilla還還算正常，但但在IE中就不不行了，正正文版塊跳跳到了導(dǎo)航航的下面，好好像右邊沒(méi)沒(méi)有足夠的的空間容納納下正文DDIV，具具體問(wèn)題出出在哪里我我也說(shuō)不清清楚，可能能也是IEE的一個(gè)Buug吧。添加正文的的文章標(biāo)題題先來(lái)看一下下主內(nèi)容版版塊的結(jié)構(gòu)構(gòu)：我們把文章章的標(biāo)題放放在H2標(biāo)簽中中：TThis is tthe ttitlee 針對(duì)文章標(biāo)標(biāo)題的CSSS定義如如下：#conttent h2 fonnt: nnormaal 188p

36、x GGeorggia, Timees Neew Rooman, Timmes, seriif; ccolorr: #8808666A; bbackggrounnd: ttransspareent uurl(iimagees/buullett_tittle.ggif) no-rrepeaat; wwidthh: 4554px; padddingg: 0 0 0 30pxx; maarginn: 0; 這里我們使使用#coontennt h22的選擇符符組合，當(dāng)當(dāng)然也可以以直接對(duì)HH2標(biāo)簽進(jìn)進(jìn)行定義，但但是會(huì)對(duì)頁(yè)頁(yè)面中所有有的H2元素都都起作用。這個(gè)CSSS樣式的的定義中，除除了常規(guī)的的字體集、

37、顏色、字字號(hào)之外，還還利用paaddinng屬性在在標(biāo)題文本本左邊空出出30pxx的縮進(jìn)，目目的是不要要遮蓋背景景圖片。背背景bacckgroound屬屬性中，除除了圖片的的路徑及其其平鋪方式式，還定義義了其背景景色為透明明trannsparrent，使使整個(gè)標(biāo)題題更好的與與其它元素素融合添加正文文文本下面一個(gè)cclasss類(lèi).texxt定義了了正文文字字的樣式：.textt ffont: 11ppx/188px VVerdaana, Ariaal, HHelveeticaa, saans-sseriff; coolor: #5BB604CC; maarginn-botttom: 10ppx;

38、 與id不同同的是，cclasss類(lèi)可以在在一張頁(yè)面面中重復(fù)使使用，里面面的屬性比比較簡(jiǎn)單，需需要補(bǔ)充一一下的是，11px/18px表示字體大小是11px，行高是18px。在XHTML中，我們添加一個(gè)段落標(biāo)簽P來(lái)放置文本，并應(yīng)用.text樣式：HHere comees thhe teext 在正文中添添加混排圖圖像下面是應(yīng)用用在圖像上上的樣式：.imaggerigght flooat: righht; ppaddiing: 7px; bacckgroound-coloor: #fffffff; bordder: 1px soliid #bbac1aa3; 這里我們還還是使用cclasss類(lèi)，因

39、為為以后可能能還會(huì)用到到它。flloat:righht讓圖片片在文本塊塊中居右，而而白色的背背景和四邊邊均為7ppx的paddding，使使得圖片的的四周有了了類(lèi)似7像素白邊邊的效果，目目的是讓圖圖片內(nèi)容與與邊框保持持7px的間間距。而真真正的邊框框由borrder定定義，1像素實(shí)線(xiàn)線(xiàn)。如果在在文本塊中中有居左的的圖片，我我們可以再再添加一個(gè)個(gè)名為.iimageeleftt的classs類(lèi)，具具體的屬性性設(shè)置只要要把flooat: righht改成flooat: leftt就可以了了。CSS混沌沌初開(kāi)VIII：頁(yè)腳腳的構(gòu)建在開(kāi)始第七七部分的教教程之前，我我要先糾正正一個(gè)小錯(cuò)錯(cuò)誤。之前前在添加正

40、正文內(nèi)容時(shí)時(shí)，我把它它放在了一一個(gè)DIVV容器中，事事實(shí)上如果果我們用段段落標(biāo)簽PP作容器可可以達(dá)到相相同的效果果，而且當(dāng)當(dāng)CSS關(guān)閉閉時(shí)也能正正常顯示。用P標(biāo)簽來(lái)實(shí)實(shí)現(xiàn)的話(huà)，還還可以用mmargiin來(lái)控制制段落的上上、下邊距距，也就不不需要什么么換行標(biāo)簽簽了。首先要提醒醒大家的是是，相對(duì)于于表格布局局方式，CCSS中頁(yè)頁(yè)腳的實(shí)現(xiàn)現(xiàn)有著很大大的區(qū)別。遺憾的是是Safaari作為為一個(gè)新生生瀏覽器，其其對(duì)Webb標(biāo)準(zhǔn)的支支持還不是是很完善，比比如minn-widdth和min-heigght屬性性在Saffari中中還沒(méi)能得得到良好的的支持，但但是頁(yè)腳的的實(shí)現(xiàn)我們們往往需要要用到它們們。在繼續(xù)

41、續(xù)本節(jié)教程程之前，希希望大家去去了解一下下這篇Boobby Van Der Sluiis文章，它它對(duì)CSSS中的垂直直定位和頁(yè)頁(yè)腳實(shí)現(xiàn)作作了很到位位的講解。首先還是要要先明確一一下文檔的的DIV結(jié)構(gòu)構(gòu)，之前制制作的內(nèi)容容比如頂部部、導(dǎo)航、正文等我我們都封裝裝到一個(gè)iid名為conntainner的DIV中，這這組容器標(biāo)標(biāo)簽緊跟在在bodyy標(biāo)簽之后后，接著就就是一個(gè)iid名為foooter的的頁(yè)腳容器器，代碼如如下： . . . 頁(yè)腳DIVV的CSS設(shè)置置如下：#footter marrgin: 0pxx autto; pposittion: rellativve; bbackggrounnd

42、-coolor: #7117F511; boorderr-topp: 9ppx soolid #F7FF7F6; widdth: 692ppx; ppaddiing: 5px 0; cclearr: booth; 我們?yōu)轫?yè)腳腳設(shè)置暗綠綠色的背景景以及9ppx的上邊邊框，寬度度定義為6692pxx。Cleaar屬性用用于清除浮浮動(dòng)，簡(jiǎn)單單點(diǎn)說(shuō)就是是在其左邊邊或右邊不不允許有任任何浮動(dòng)元元素。maarginn: 0ppx auuto的語(yǔ)語(yǔ)法在之前前的教程中中已經(jīng)出現(xiàn)現(xiàn)過(guò)了，其其作用就是是讓頁(yè)腳在在頁(yè)面中居居中顯示。為了不讓讓頁(yè)腳文字字和邊框貼貼得太近，我我們用paaddinng在上、下空出55px

43、的填填充空間。接下來(lái)為頁(yè)頁(yè)腳中的文文字和鏈接接定義樣式式：#footter hh2 mariing: 0; ttext-aliggn: ccenteer; ffont: norrmal 10pxx Verrdanaa, Arrial, Hellvetiica, sanss-serrif; coloor: #D3D88C4; #foooterr h2 a:viisiteed, #footter hh2 a:linkk ccolorr: #DD3D8CC4; ttext-decooratiion: nonee; boorderr-botttom: 1pxx dottted #D3DD8C4; #f

44、oooterr h2 a:hoover coolor: #F77F7F66; teext-ddecorratioon: nnone; borrder-botttom: nonee; baackgrroundd-collor: #A50003B; 頁(yè)腳中的文文字我們放放置到H22標(biāo)簽中：. 上面這行代代碼我們添添加在名為為conttaineer的DIV閉合合標(biāo)簽后面面，也即是是在boddy的閉合合標(biāo)簽之前前。接下來(lái)來(lái)我們要添添加一段BBobbyy Vann Derr Sluuis建議議采用的JJS腳本，讓讓頁(yè)腳在SSafarri瀏覽器器中也能固固定在瀏覽覽器底部。確保你使用用的ID名跟在在JS中

45、定義義的函數(shù)名名保持一致致。完成JS的的添加后，如如果你在瀏瀏覽器中預(yù)預(yù)覽，你會(huì)會(huì)發(fā)現(xiàn)頁(yè)腳腳并沒(méi)有顯顯示出來(lái)。這可能是是因?yàn)橛袃蓛蓚€(gè)浮動(dòng)容容器(#lleft and #conntentt)都需要要進(jìn)行浮動(dòng)動(dòng)清除，在在的文章中中有很詳細(xì)細(xì)的介紹。我們需要要添加下面面的代碼進(jìn)進(jìn)行修正，首首先添加一一個(gè)用于清清除浮動(dòng)的的DIV： 然后為其定定義CSSS：.cleaar cleaar: bboth; CSS混沌沌初開(kāi)VIIII：側(cè)側(cè)邊欄友情情鏈接這是本教程程的最后一一部分，講講解如何實(shí)實(shí)現(xiàn)友情鏈鏈接版塊。需要說(shuō)明明的是，這這部分我們們將把樣式式表轉(zhuǎn)換為為外聯(lián)式來(lái)來(lái)實(shí)現(xiàn)CSSS樣式的的設(shè)定。首先是XHH

46、TML代代碼： MMy Faavoriite SSitess Stoopdessign SiimpleeBitss MMezzoobluee XXimiccc 我們把所有有的鏈接放放置在一個(gè)個(gè)名為faav的DIV容器器中，并將將在CSSS中定義其其widtth、marggin和paddding等等屬性。欄欄目標(biāo)題利利用H2標(biāo)簽實(shí)實(shí)現(xiàn)，而鏈鏈接鏈表則則還是用無(wú)無(wú)序列表uul來(lái)實(shí)現(xiàn)現(xiàn)。接下來(lái)定義義favllinkss容器的樣樣式：#favllinkss wwidthh: 1663px; padddingg-lefft: 115px; marrgin-top: 10ppx; 其中定義的的三個(gè)屬性性都

47、比較簡(jiǎn)簡(jiǎn)單，你可可能會(huì)注意意到widdth值與與導(dǎo)航菜單單的寬度1178不相相等，原因因仍然是ppaddiing-lleft中中定義了115px的的內(nèi)填充，所所以其寬度度值應(yīng)該是是178-15=1163pxx。如果你你對(duì)此不是是很理解，建建議你去參參考一些介介紹CSSS中盒模型型原理的文文章。下面是欄目目標(biāo)題文字字的CSSS定義：#favllinkss h2 foont: normmal 116px Georrgia, Timmes NNew RRomann, Tiimes, serrif; coloor: #5C6004D; marggin: 0 0 10pxx 0; paddding: 0; 除了設(shè)置文文字的字體體和顏色之之外，paaddinng和marggin的定定義也是必必須的，因因?yàn)槿绻徊幻鞔_指定定的話(huà)，欄欄目標(biāo)題和和鏈接列表表之間的間間隔可能會(huì)會(huì)不可預(yù)期期，在這里里我直接用用