網(wǎng)站PSD模板切圖為XHTML+CSS的網(wǎng)頁(yè)實(shí)例(12)

之前教了大家做網(wǎng)站PSD模板,那么,做好后怎樣在實(shí)際中應(yīng)用呢??怎樣把這樣做好了的模板切圖為XHTML+CSS的網(wǎng)頁(yè)呢??現(xiàn)在我們就來(lái)看一下設(shè)計(jì)好的模板切圖的實(shí)例教程

現(xiàn)在我們來(lái)看看如何將這個(gè)概念設(shè)計(jì)轉(zhuǎn)化為完整的由XHTML和CSS組成的標(biāo)準(zhǔn)網(wǎng)頁(yè)。從PS里面將之前的設(shè)計(jì)稿從PS里面輸出然后再加上編碼，這樣我們就會(huì)得到一個(gè)完整的博客設(shè)計(jì)。

在上一個(gè)教程里面，我們創(chuàng)建了一個(gè)包含了所有框架，設(shè)計(jì)，色彩，擬議定的板式和基本內(nèi)容的設(shè)計(jì)模型。 現(xiàn)在是時(shí)候讓我們回顧一下之前的計(jì)劃和概念設(shè)定來(lái)看看——哪些需要使用純粹的xhtml和css，哪些需要使用到原來(lái)的圖片。

首先被導(dǎo)出的元素是大的背景圖。隱藏掉其他所有頁(yè)面的圖層，然后選擇大的背景圖導(dǎo)出為web使用格式。

從第一印象上來(lái)講，這個(gè)大圖片很容易讓人覺(jué)得他很大，所以體積會(huì)變的很大。但是事實(shí)上用jpg格式調(diào)整好質(zhì)量質(zhì)量之后這個(gè)文件僅僅才30K而已，這里需要你來(lái)拿捏文件的質(zhì)量和整體的體積的平衡。（譯者注：圖片如果太大可以適當(dāng)用高斯模糊來(lái)減少細(xì)節(jié)這樣圖片體積就會(huì)縮小點(diǎn)，一般來(lái)講背景圖不必使用特別清晰的底圖，增加體積卻又吸引眼球影響閱讀。）

接下來(lái)導(dǎo)出的是主體內(nèi)容區(qū)，畫(huà)出另一個(gè)大的選區(qū)，其重要包括整個(gè)中部面板——當(dāng)然別忘記那些帶有效果的地方比如陰影，半透明的邊框等，都要一一包含在內(nèi)。注意還要考慮到頭部復(fù)雜的透明度的導(dǎo)航區(qū)域，所以選取應(yīng)該直接延伸到頂部。

一般來(lái)講允許網(wǎng)頁(yè)垂直重復(fù)的話，只要選擇中部區(qū)域一小列內(nèi)容導(dǎo)出就可以，我們后面可以讓他垂直重復(fù)來(lái)達(dá)到設(shè)計(jì)稿上面的效果而不增加文件體積。

下面來(lái)完成頁(yè)腳部分，選擇同樣的寬度，然后高度要包含灰色漸變的圖形。

為了導(dǎo)出側(cè)邊欄，主體區(qū)域現(xiàn)在暫時(shí)的使用垂直拉伸。

因?yàn)橹暗?font color="#335533">設(shè)計(jì)，所以這個(gè)獨(dú)立的側(cè)邊欄的圖形將充分利用兩個(gè)圖片——上部是足夠長(zhǎng)的區(qū)域，以便容納更多的內(nèi)容防止超出設(shè)計(jì)的部分，另一個(gè)是一個(gè)小的底部，底部寬度要與上部一致。這是一個(gè)類似用于菜單的滑動(dòng)門(mén)的技術(shù)。

這個(gè)長(zhǎng)的可以自動(dòng)伸縮的部分導(dǎo)出的時(shí)候要注意包含邊線的透明效果。

下一步是薄的底部部分，這樣側(cè)邊欄部分就完成鳥(niǎo)。

另一個(gè)導(dǎo)出的小的可自動(dòng)伸縮部分的是導(dǎo)航欄的背景，它可以根據(jù)菜單文字的長(zhǎng)度來(lái)自動(dòng)伸縮。這里需要使用png的文件因?yàn)榭梢岳闷渫该鞫葋?lái)覆蓋住不同顏色的背景，這樣看起來(lái)會(huì)更~和諧~~~~

文章部分在概念設(shè)計(jì)稿上是跟側(cè)邊欄有一樣的邊線效果，但是因?yàn)樗麄儧](méi)有覆蓋在其他的圖片上并且也沒(méi)有復(fù)雜的透明度等問(wèn)題，所以我們將會(huì)用純粹的css代碼來(lái)實(shí)現(xiàn)他的效果。

接下來(lái)就是使用了藍(lán)色漸變的內(nèi)容區(qū)（也就是放留言數(shù)繼續(xù)閱讀等的區(qū)域），這個(gè)地方也是導(dǎo)出一個(gè)瘦長(zhǎng)的區(qū)域然后橫向重復(fù)就能達(dá)到其效果。

小的評(píng)論氣泡，箭頭，rss標(biāo)志和電子郵箱圖標(biāo)等，都隨著logo一起單獨(dú)的導(dǎo)出即可，最好使用png格式這樣適應(yīng)性更強(qiáng)——當(dāng)然如果你確定放棄給ie6的用戶使用或者瀏覽的話。

現(xiàn)在概念設(shè)定已經(jīng)完整的被分成了獨(dú)立的圖片，五部分的框架被拆分成了13個(gè)圖片文件。他們一共才95Kb，這么來(lái)看即使是撥號(hào)網(wǎng)絡(luò)也能比較流暢的觀看網(wǎng)頁(yè)了。

一個(gè)html網(wǎng)頁(yè)設(shè)置控制結(jié)構(gòu)的布局是必須的，上面那段話你沒(méi)必要自己寫(xiě)，隨便查看一個(gè)網(wǎng)頁(yè)的源文件都能找到。一個(gè)單獨(dú)的css樣式表是將包括視覺(jué)規(guī)則的設(shè)計(jì)。然后讓html文件鏈接到這個(gè)新建的css樣式表文件。

我們將內(nèi)容和背景放到一個(gè)含有ID的div的容器里面。不過(guò)要記得我們有一個(gè)淺色的背景在最后面需要垂直重復(fù)的說(shuō)，直到CSS3才更廣泛的支持第二個(gè)div在這個(gè)圖像之上。

網(wǎng)站名字用H1的標(biāo)簽來(lái)控制，他也是logo的基礎(chǔ)，上部導(dǎo)航和rss /電子郵件訂閱選項(xiàng)是作為無(wú)序列表。

接下來(lái)開(kāi)始用CSS重新構(gòu)建頁(yè)面，清除瀏覽器的默認(rèn)設(shè)置。背景圖像是附屬于body和全局字體風(fēng)格的設(shè)置。容器，內(nèi)容和頁(yè)腳的div也要使用適當(dāng)?shù)谋尘皥D片和風(fēng)格設(shè)置。

繼續(xù)寫(xiě)CSS樣式表，接下來(lái)的一些元素用代碼寫(xiě)出來(lái)慢慢加上，建立一個(gè)無(wú)序列表然后加上合適的圖片和顏色。

到目前來(lái)講就可以在瀏覽器里面看看啦～基本上的大型已經(jīng)出來(lái)啦～logo啊導(dǎo)航啊內(nèi)容區(qū)啊基本上已經(jīng)頗具雛形鳥(niǎo)。

接下來(lái)是在這個(gè)框架上漸漸豐滿起來(lái)，用一個(gè)容器來(lái)搞定文章發(fā)布區(qū)，就像我們前面說(shuō)的一樣，這個(gè)地方我們不用圖片只需要用代碼就能搞定。

文章發(fā)布區(qū)的邊線和顏色以及文章標(biāo)題和段落文字都繼續(xù)用CSS的樣式表寫(xiě)好（實(shí)在不行就照抄吧，囧rz）。對(duì)于網(wǎng)站開(kāi)發(fā)來(lái)講，大部分用 firefox的朋友有福了，這意味著我們可以用moz-border-radius這句話來(lái)讓我們的頁(yè)面有一個(gè)很漂亮的圓角就跟我們當(dāng)初的設(shè)計(jì)稿一樣。不過(guò)對(duì)于其他瀏覽器來(lái)講我們只能降級(jí)讓其實(shí)現(xiàn)為一個(gè)直角鳥(niǎo)。（不過(guò)貌似我記得IE下面也可以用css寫(xiě)出來(lái)圓角的說(shuō)，就是比較麻煩，這里給一個(gè)參考來(lái)）

然后在瀏覽器里面測(cè)試下啦～如果沒(méi)寫(xiě)錯(cuò)的話那么就跟設(shè)計(jì)稿上的效果是一樣的～這說(shuō)明CSS彪悍的將ps設(shè)計(jì)稿里面背景顏色和邊框的效果給實(shí)現(xiàn)了。

然后繼續(xù)完善html的結(jié)構(gòu)，現(xiàn)在輪到側(cè)邊欄了。我們來(lái)看看如何在一個(gè)容器里面用兩個(gè)背景圖片實(shí)現(xiàn)滑動(dòng)門(mén)效果來(lái)讓側(cè)邊欄的大小隨內(nèi)容來(lái)控制。

繼續(xù)添加更多的CSS樣式來(lái)控制html里面的元素（可憐的html淪落為css的傀儡…………我翻譯累了純屬發(fā)泄這個(gè)……）比如字體的大小，顏色，種類等等（其實(shí)CSS也就這么些個(gè)本事了……）

接下來(lái)就可以在瀏覽器里面看到側(cè)邊欄鳥(niǎo)～注意別讓內(nèi)容超過(guò)了圖片的寬度，及時(shí)的截?cái)嘞驴纯葱Ч秃美玻ó吘怪皇莌tml的～）

記下來(lái)我們快速的搞定繼續(xù)閱讀和評(píng)論等這個(gè)位置的東東

繼續(xù)給這些元素添加樣式，用一個(gè)特殊的class來(lái)給這個(gè)段落添加用繼續(xù)閱讀的肩頭和評(píng)論氣泡作為背景圖

搞定后又可以用瀏覽器YY下，重復(fù)的背景上面是堅(jiān)實(shí)的文本啊！

大體效果就這么搞定了，設(shè)計(jì)稿的內(nèi)容基本上也都呈現(xiàn)出來(lái)了，這時(shí)候你可以換著瀏覽器和分辨率來(lái)看看有沒(méi)有問(wèn)題以及模擬鏈接的效果比如鼠標(biāo)on啊 鼠標(biāo)點(diǎn)擊過(guò)啊等等效果。

其實(shí)網(wǎng)頁(yè)設(shè)計(jì)這玩意搞起來(lái)了就停不下來(lái)了。你必須在FF，opera，safari下面看看有沒(méi)有問(wèn)題，你看這不在IE下面就出問(wèn)題了么？（好討厭IE6……如果機(jī)器裝了更高版本的ie的話，你可以試試ietester）

修改一些CSS樣式表很快就能搞定這個(gè)問(wèn)題，具體的參見(jiàn)上圖。

訂閱的選項(xiàng)似乎總是在IE下面會(huì)有問(wèn)題，這個(gè)只需要簡(jiǎn)單地加上 display: inline在列表中就能解決。

改完這些問(wèn)題后這個(gè)正在做的網(wǎng)站就恢復(fù)正常勒，像一個(gè)wordpress主題鳥(niǎo)，當(dāng)然想要更多的東西必須在加入更多的代碼，比如內(nèi)頁(yè)區(qū)域和評(píng)論區(qū)域等～

當(dāng)然如果每行代碼都詳細(xì)地解釋得話，我估計(jì)我沒(méi)寫(xiě)完各位看官就已經(jīng)困倒了，所以發(fā)揮舉一反三地精神就看上面得源文件吧！