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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

小的評論氣泡，箭頭，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，這么來看即使是撥號(hào)網(wǎng)絡(luò)也能比較流暢的觀看網(wǎng)頁了。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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