Pjblog皮膚制作循序漸進(jìn)教程作者:cocoa日期:2008-12-05字體大小:[url=javascript:SetFont('12px')]小[/url][url=javascript:SetFont('14px')]中[/url][url=javascript:SetFont('16px')]大[/url]

Pjblog的用戶群越來越大，一個(gè)Blog就相當(dāng)于一個(gè)Blogger網(wǎng)上的家。而在現(xiàn)在追求個(gè)性的時(shí)代，給自己的Blog做過有個(gè)性的、符合自己特點(diǎn)的Skin是大家的一個(gè)愿望。但這個(gè)畢竟涉及到一些知識(shí)，我們需要通過自己的努力學(xué)習(xí)來完成我們的愿望。我將從零說起，大概是這樣的一個(gè)過程：準(zhǔn)備工作→Skin的構(gòu)思→制圖→切片→編寫CSS→預(yù)覽→調(diào)試兼容性→美化細(xì)節(jié)，預(yù)覽和編寫是個(gè)循環(huán)過程。我想通過本教程能夠使大家了解Skin制作，不需要再用別人做的Skin，靠自己的努力把自己的Blog裝飾的漂亮有個(gè)性。很振奮吧，那我們往下看……
一、準(zhǔn)備工作
1.1必需的一些基礎(chǔ)
你要有學(xué)習(xí)知識(shí)的欲望，這個(gè)是一切的前提。你對(duì)Pjblog的使用有一定的了解（如果你還不知道Skin是什么、怎么安裝，建議你不要往下看）。在做Skin的時(shí)候要細(xì)心，嚴(yán)格要求自己，有一定的審美觀。最好熟悉一些制圖軟件（AdobePotoshop、Fireworks之類）。
2.2涉及的工具
首先你要有太電腦，并且顯示器的色彩不是很差（我的本本的液晶顯示器讓我哭笑不得呀……）。制圖軟件AdobePotoshop、Fireworks之類。CSS編寫工具，你當(dāng)然用記事本也可以寫。色彩調(diào)配軟件，屏幕截圖軟件。MacromediaStudio8.0官方簡體中文正式版
比較認(rèn)同的網(wǎng)頁制作類軟件，這里我們主要是用套裝里面的Fireworks（教程里面用的就是他）。當(dāng)然你也可以用AdobePotoshop。
CSS編寫工具EditPlusV2.1.2Build147漢化版
下載地址：
當(dāng)然有人說用Dreamweaver不是更好？這里不建議用，手寫更容易記住代碼的含義，再說CSS可視化編寫不是很理想。本來TopStyle3是可視化編寫CSS的最佳工具，但介于Pjblog的CSS是分幾個(gè)文件的用他效果也不怎么明顯。
ColorSchemerStudio1.5配色工具
下載地址：
配色是你構(gòu)思Skin的第一步。這款工具對(duì)顏色的搭配比較專業(yè)。
蘇昱式樣表中文手冊(cè)2.0
下載地址：
調(diào)試軟件Firefox
現(xiàn)在有94％的人在用IE，但Firefox的用戶也在不斷的增長。Firefox的好我在這里就不說了。但CSS在這兩個(gè)瀏覽器之間肯定有兼容的問題。
截圖工具HyperSnap5
下載地址：
這個(gè)也是我用后認(rèn)為功能比較強(qiáng)大的截屏軟件。
如果你打瞌睡了[79]那就休息一下……
二、構(gòu)思你的Skin
2.1配色
你的Blog給人的第一印象就是視覺上的，所以說色很重要。

這里我們用的是白、灰、紅。一般灰色是通用的，就像血型里的O型血一樣。
2.2布局

頁面的布局先不說太復(fù)雜的，你理解了結(jié)構(gòu)后可以發(fā)揮自己的想象力。在這里要說的是CSS（CascadingStyleSheets層疊樣式表單）這里的重點(diǎn)就是層疊。如果說Skin設(shè)計(jì)是平面設(shè)計(jì)，那我認(rèn)為就錯(cuò)了。從欣賞的角度看這是個(gè)平面作品，但從設(shè)計(jì)的角度看那就是三維的。要不怎么有z-index這樣的屬性呢。再者我們可以這樣做個(gè)比較，CSS是說的層類似于PS或FW里面的圖層，不一樣的地方僅僅在于：層交換順序－－PS可以而DIV＋CSS不可以；Alpha通道－－PS可以而CSS不可以（一些瀏覽器可以）。圖片的如上圖所示，我們可以看到Pjblog的結(jié)構(gòu)和DIV的前后順序，前面的覆蓋后面的（當(dāng)然也可以是透明的）。我們先不玩花哨的，Blog的布局一般都就這樣。
這里的header就是頭部，里面包含Blog名、副標(biāo)題、橫向菜單；
Tbody是中部內(nèi)容，里面包含著主內(nèi)容（mainContent也就是我們寫的日志，就像這個(gè)教程在的位置）、側(cè)欄（sidebar）；
foot是底部，里面包含我們的一些版權(quán)信息、備案什么的；
我們說了這么多都是說的Pjblog的結(jié)構(gòu)，也就是說是Box和Box之間的關(guān)系。而Box是怎么組成的呢？這里已經(jīng)有高人Douglas做個(gè)個(gè)Flash模型，里面很明白的說明了margin，background-color，background-image，padding，border以及他們之間的關(guān)系。
當(dāng)然這些是Pjblog的主體部分，每個(gè)部分里面還包含一些其他DIV，而這些細(xì)節(jié)（像橫向菜單、側(cè)欄內(nèi)容面板、主內(nèi)容模塊等等）也是美化我們Blog的要點(diǎn)，但這個(gè)我們慢慢來。先看主體這樣先可以在你的腦海里有個(gè)Skin的大概樣子，為我們下面的制圖做好充分的準(zhǔn)備。
三、制圖
3.1了解背景
為什么要特設(shè)一節(jié)說背景呢？因?yàn)樵贑SS里所用的圖片都是以背景的形式存在的。在我們制圖、切圖的過程中始終不能忘記這點(diǎn)，要做到盡可能的減少圖片的體積（現(xiàn)在好多簡潔的Skin都實(shí)現(xiàn)了不用圖片或少用圖片），為的是減少下載量，提高頁面瀏覽的速度。
那我們來看看background:
他的屬性包括了
background-color
顏色
background-image
圖像
background-repeat
重復(fù)方式
background-attachment
是否滾動(dòng)
background-position
位置
而我們制圖的時(shí)候要注意的是那些呢？首先我們看color和image的關(guān)系，始終是color顯示在下面image在上面。這個(gè)的作用就是某些大塊單色的地方我們就不需要用image而是采用color；再個(gè)就是repeat，他可以讓圖片以X或Y重復(fù)或不重復(fù)的方式顯示。這個(gè)的作用就是某背景有這樣的重復(fù)的我們切圖的時(shí)候?qū)挘ㄩL）只要切1px就可以了；我們要結(jié)合Pjblog的結(jié)構(gòu)對(duì)這些特性綜合運(yùn)用，要培養(yǎng)自己的3D思維。
3.2主體的制作
我們以我現(xiàn)在用的這款Skin做例子，來簡述制圖過程。
我們先來看看我們想做的是怎樣的一個(gè)主體（這個(gè)在你自己的腦海里應(yīng)該已經(jīng)成型，或有個(gè)模糊的構(gòu)思）。

白色的主調(diào)兩邊帶點(diǎn)陰影，側(cè)邊是灰色（#EEEEEE）230px寬。
打開Fireworks，新建一個(gè)1000px×768px的白色背景的文件（因?yàn)檫@款Skin的主體背景是白色的）。確定我們的主體內(nèi)容為800px寬，繪制一個(gè)寬度為800px，高度大于畫布的矩形，再給加上1px寬的灰色（#999999）的邊框。用濾鏡發(fā)光給加點(diǎn)陰影，濾鏡的參數(shù)設(shè)置成寬度為5，柔化為10，透明度為15，顏色為黑色，偏移為0。
再給加個(gè)側(cè)欄繪制一個(gè)寬為230px，高度大于畫布的矩形，放置到左邊，注意不要壓住1px的邊框。這樣我們的主體部分就繪制好了。制作主體部分我們要注意些什么呢。主要我們要考慮到頁面的高度問題，因?yàn)轫撁娴母叨葧?huì)隨內(nèi)容的不同而變化，那我們就要做一個(gè)有彈性的高度。我們可以利用Background-repeat設(shè)置值為y。那我們的背景就是縱向重復(fù)了。
3.2頭部的制作
同樣我們先看一下我們要做個(gè)什么樣的Top。

我們看到的是兩條帶質(zhì)感的半透明的橫條壓在主體上，
我們畫兩個(gè)矩形，寬度大于畫布（因?yàn)槲覀円@兩條自適應(yīng)寬度）。通過調(diào)節(jié)漸變給矩形加點(diǎn)質(zhì)感，調(diào)整透明度為80。

這樣我們的Top就做好了。
3.3底部的制作
底部的制作一般比較簡單，這里為了對(duì)應(yīng)Top也加了個(gè)橫條，這里就不做自適應(yīng)寬度了（當(dāng)然也是可以做的，我們從簡單的做起）。下面是段灰色的矩形，上面壓個(gè)橫條。

到這里我們的圖基本已經(jīng)畫了個(gè)大概了。你看了可能就一會(huì)兒，但有的時(shí)候我們從構(gòu)思到成型可能需要幾天。為了配合看效果最好加點(diǎn)內(nèi)容里面。配合鏈接顏色看看，反復(fù)修改而達(dá)到最佳效果。
3.4切片
所謂切片，顧名思義就是把做好的圖切成你需要的一塊塊。有很多朋友都是在這里卡住了，不知道怎么切好。這里要說的是在可以表現(xiàn)出你的效果的前提下，圖切的越小越好、越少越好。那需要切那些呢？怎么切？其實(shí)是根據(jù)你CSS的需要來切的。你可以先跳過這個(gè)不看，在學(xué)習(xí)了CSS后你想在某個(gè)Box里設(shè)置背景的時(shí)候，你就會(huì)想到圖，那你就到做好的圖里面切一塊去用吧。慢慢的你就明白怎么切圖了。下圖就是頭部背景圖的切片，我們還可以看到切圖用的是什么工具（我認(rèn)為Fireworks切圖功能好點(diǎn)）。在Fireworks里面切片是放在網(wǎng)頁層里面的，我們可以給切片命名，想要這個(gè)切片的時(shí)候我們就可以導(dǎo)出圖片。這里還要說的是導(dǎo)出圖片的格式，就是優(yōu)化欄的屬性。個(gè)人比較喜歡PNG32格式，他支持Alpha通道（未來的趨勢）。要是不透明圖片選JPG也很好（他體積小）。

整體的PNG分層文件提供給大家研究。點(diǎn)擊下載此文件
我們打開這個(gè)文件可以看到。如頭部、主體背景、底部他們的寬度不是我們剛開始的時(shí)候說的800px，那是因?yàn)槲覀冊(cè)谕饷婕恿岁幱?。一定要把這個(gè)尺寸算進(jìn)去（一般要求算，而不是看陰影和背景色差不大的時(shí)候容易搞錯(cuò)，要做到仔細(xì)）。而全局背景并不需要拉的很高，因?yàn)橄旅娴陌咨覀兺耆梢杂肅SS做，大了就浪費(fèi)了。還有就是按鈕背景圖，如果你是有鼠標(biāo)接觸式樣的建議你不要分兩張圖，我們做在一張圖上，通過CSS控制圖片的位置來實(shí)現(xiàn)不同的背景，這個(gè)等說到CSS的時(shí)候再詳細(xì)說。
四、編寫代碼
4.1全局式樣
終于進(jìn)入了核心部分，我們將用CSS＋DIV美化我們的Blog。有好多朋友總是問這樣一個(gè)問題，我怎樣做Skin。我這里想說的是你先要了解CSS和DIV的關(guān)系。DIV就像房子的骨架（磚墻等等），而CSS就是室內(nèi)外裝潢，你不了解骨架是怎么構(gòu)成的你怎么去裝潢呢？還有要說的重要的一點(diǎn)是CSS的特點(diǎn)之一，后面定義的取代前面定義的。比如說我在全局式樣里定義了字體顏色是紅的，而在后面主體里面定義了顏色是藍(lán)的，那我們看到的就是藍(lán)的。
我們進(jìn)入正題，先說全局式樣（在Pjblog里面是Skin文件夾下面的global.css文件）。這里我們可以對(duì)整個(gè)頁面的特定標(biāo)簽定義外觀。特定標(biāo)簽比如
body、img、select、th
等等這些是內(nèi)置標(biāo)簽。這里的式樣對(duì)

里面的內(nèi)容和DIV有效?？创a（里面為CSS代碼，看作是DIV布局，以后都是用這種可運(yùn)行代碼表示，不在重復(fù)）
復(fù)制內(nèi)容到剪貼板
代碼:
通過預(yù)覽我們可以看到一個(gè)背景式樣了，那其他的說怎么沒提現(xiàn)呢。那是沒有內(nèi)容在里面，你可以試著在

之間添加代碼或文字看看。你也可以改變式樣里的屬性看看起了些什么變化（如果你不知道屬性是什么，建議你看看上面的《蘇昱式樣表中文手冊(cè)2.0》）。你可以把
background-color:
的屬性改成
#000
看看，背景是不是成黑色的了。是不是感覺有點(diǎn)成就感呢（我當(dāng)時(shí)就感覺到了-_-!!）。千萬不要拘束于這幾個(gè)標(biāo)簽，你可以試著用更多標(biāo)簽和屬性的組合來改變外觀。這樣你才有可能做出有個(gè)性的Skin。

4.2主體式樣
我們把全局式樣看作是

的話，那就把主體式樣看作是
#container
。說到這里我們可能有點(diǎn)明白了CSS的編寫其實(shí)是一個(gè)細(xì)化的過程。為什么這么說呢？你看
#container
其實(shí)是包含在

里的，而我們以后說的有都是包含在
#container
里的。
通過上面的模型可以看出，
#container
里包含了
#header、#Tbody、#foot
通過這幾個(gè)的定義我們就可以實(shí)現(xiàn)上面所畫的圖了。我們?cè)谏厦娴拇a上繼續(xù)添加，看代碼
復(fù)制內(nèi)容到剪貼板
代碼:








首先我們?cè)诶锾砑恿诵枰?br />主體
頂部

內(nèi)容


底部

我們先從#container加起（為什么要加個(gè)#號(hào)，不明白的去看手冊(cè)）。
#container{816px;
寬度，應(yīng)該和你切片的時(shí)候有所對(duì)應(yīng)

text-align:center;
內(nèi)容居中

margin:0auto;
邊框?yàn)榱恪＿@里要注意的是，要#container居中我們必須設(shè)置margin為auto而且父元素（body）為text-align:center;

background:url(skins/dnxh10/cont_bg.jpg)repeat-y;
背景路徑并以Y方向重復(fù)。

height:600px;
}
現(xiàn)在預(yù)覽一下看看，好像主體出來了。但頂部不是我們想象的那樣呀！在#container上不是有三個(gè)元素嗎，那我們?cè)賮矶x一下#header和#foot就可以了。#tbody我們可以留空有更大的活動(dòng)性。
復(fù)制內(nèi)容到剪貼板
代碼:








看到了，哈哈。整個(gè)結(jié)構(gòu)是不是好像成型了。這里我們定義了#header。
#header{

816px;
寬度，這里也就是圖片的寬度

height:110px;
高度，這里也就是圖片的高度

text-align:left;
內(nèi)容左對(duì)齊，因?yàn)槲覀円院罄锩娴腂log名字是要靠左的。

background:url(skins/dnxh10/top.jpg)no-repeat;
背景路徑，不重復(fù)
}
底部的定義也一樣。就不在羅嗦了。
PS:
這里的

因?yàn)槔锩鏇]內(nèi)容，而設(shè)置的高度做演示用的。
4.3頂部式樣
頂部的美化很重要，因?yàn)橛脩舸蜷_你的Blog的時(shí)候首先進(jìn)入眼簾的就是頂部。做頂部式樣的時(shí)候你要知道頂部式樣是在什么地方，他的結(jié)構(gòu)是怎樣的。頂部式樣就是Header和他里面的內(nèi)容，結(jié)構(gòu)我們可以通過上面的Flash模型來了解。我們還是看代碼：
復(fù)制內(nèi)容到剪貼板
代碼:
酷秀網(wǎng)絡(luò)
dnxh:電腦繡花、電腦協(xié)會(huì)、電腦笑話、呆腦小孩、等你喜歡……






首頁

聚合器



不知道為什么這段不能加式樣，可能是和頁面的代碼一樣的緣故吧。那我們就不加，我們先來分析一下結(jié)構(gòu)，看每個(gè)元素的作用是什么。我們先設(shè)置一下#header的式樣，上面我們已經(jīng)說過了。

#container#header{816px;height:110px;background:url(top.jpg)no-repeat;text-align:left;}
#blogname就是我們的Blog的名字，他包含了#blogtitle子元素。我們?cè)O(shè)置的時(shí)候先設(shè)置#blogname再設(shè)置#blogtitle。

#container#header#blogname{font-size:22px;color:#999;font-weight:bold;float:left;padding:15px0025px;}

#container#header#blogname#blogTitle{display:none}
在這里我們?cè)O(shè)置了#blogname的字體大小、顏色、粗體、和浮動(dòng)左、補(bǔ)白的距離。而blogtitle設(shè)置了不顯示。
再往下看，看到了#left和#right兩個(gè)元素，看命名的意思我們就知道了。那是#header兩頭的式樣，我們可以靠float:left和float:right來實(shí)現(xiàn)，在這個(gè)式樣里我們不需要設(shè)置。這個(gè)主要可以實(shí)現(xiàn)圓角之類的#header。
#menu是菜單項(xiàng)，一般我們看這里的時(shí)候比較糊涂，再加上含有float屬性，運(yùn)用起來比較難以駕驅(qū)。我們來分析一下：
#menu是個(gè)整體式樣。里面包含了一個(gè)的結(jié)構(gòu)。
關(guān)于項(xiàng)目列表
,而li里面又有綁定了式樣，分別是menuL、menuA、menuDIV、menuR分別的作用就是menuL利用Float:left;控制菜單左端的式樣，menuDIV控制菜單項(xiàng)目之間的式樣也就是分隔符，而menuR就是利用float:right;控制菜單右端的式樣。
#container#header#menu{float:right;margin:35px15px00}
#container#header#menuul{}
#container#header#menuulli{float:left;height:20px;list-style:none;}
.menuL{}
.menuR{}
...

總結(jié)

以上是生活随笔為你收集整理的Pjblog皮肤制作循序渐进教程作者:cocoa 日期:20081205的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。