佳木斯湛栽影视文化发展公司
主頁(yè) > 知識(shí)庫(kù) > Pjblog模板制作教程 超強(qiáng)推薦

Pjblog模板制作教程 超強(qiáng)推薦
熱門標(biāo)簽：銀行業(yè)務(wù) 服務(wù)器配置 智能手機(jī) 檢查注冊(cè)表項(xiàng) 鐵路電話系統(tǒng) 美圖手機(jī) 網(wǎng)站文章發(fā)布 呼叫中心市場(chǎng)需求
2007.1.30更新……轉(zhuǎn)載自 http://www.dnxh.cn/blog/article.asp?id=155
Pjblog的用戶群越來(lái)越大，一個(gè)Blog就相當(dāng)于一個(gè)Blogger網(wǎng)上的家。而現(xiàn)在追求個(gè)性的時(shí)代，給自己的Blog做過(guò)有個(gè)性的、符合自己特點(diǎn)的Skin是大家的一個(gè)愿望。但這個(gè)畢竟涉及到一些知識(shí)，我們需要通過(guò)自己的努力學(xué)習(xí)來(lái)完成我們的愿望。我將從零說(shuō)起，大概是這樣的一個(gè)過(guò)程：準(zhǔn)備工作→Skin的構(gòu)思→制圖→切片→編寫CSS→預(yù)覽→調(diào)試兼容性→美化細(xì)節(jié)，預(yù)覽和編寫是個(gè)循環(huán)過(guò)程。我想通過(guò)本教程能夠使大家了解Skin制作，不需要再用別人做的Skin，靠自己的努力把自己的Blog裝飾的漂亮有個(gè)性。很振奮吧，那我們往下看……
一、準(zhǔn)備工作
1.1 必需的一些基礎(chǔ)
你要有學(xué)習(xí)知識(shí)的欲望，這個(gè)是一切的前提。你對(duì)Pjblog的使用有一定的了解（如果你還不知道Skin是什么、怎么安裝，建議你不要往下看）。在做Skin的時(shí)候要細(xì)心，嚴(yán)格要求自己，有一定的審美觀。最好熟悉一些制圖軟件（Adobe Potoshop、Fireworks之類）。對(duì)CSS方面番茄做過(guò)很不錯(cuò)的教程（需要注冊(cè)）。
2.2 涉及的工具
首先你要有太電腦，并且顯示器的色彩不是很差（我的本本的液晶顯示器讓我哭笑不得呀……）。制圖軟件Adobe Potoshop、Fireworks之類。CSS編寫工具，你當(dāng)然用記事本也可以寫。色彩調(diào)配軟件，屏幕截圖軟件。這些基本在本站都有下載，為了防止站點(diǎn)流量過(guò)大被K，我只能加了下載級(jí)別，并隨機(jī)變換下載地址。請(qǐng)注冊(cè)后下載，謝謝你的合作！
Macromedia Studio 8.0 官方簡(jiǎn)體中文正式版
電驢下載地址:http://lib.verycd.com/2005/10/14/0000069569.html
比較認(rèn)同的網(wǎng)頁(yè)制作類軟件，這里我們主要是用套裝里面的 Fireworks（教程里面用的就是他）。當(dāng)然你也可以用Adobe Potoshop。
CSS編寫工具EditPlus V2.1.2 Build 147 漢化版
下載地址：下載文件 點(diǎn)擊下載文件
當(dāng)然有人說(shuō)用Dreamweaver不是更好？這里不建議用，手寫更容易記住代碼的含義，再說(shuō)CSS可視化編寫不是很理想。本來(lái)TopStyle3是可視化編寫CSS的最佳工具，但介于Pjblog的CSS是分幾個(gè)文件的用他效果也不怎么明顯。
Color Schemer Studio1.5配色工具
下載地址：下載文件 點(diǎn)擊下載文件
配色是你構(gòu)思Skin的第一步。這款工具對(duì)顏色的搭配比較專業(yè)。
蘇昱式樣表中文手冊(cè)2.0（一下簡(jiǎn)稱《手冊(cè)》）
下載地址：下載文件 點(diǎn)擊下載文件
調(diào)試軟件Firefox
下載地址：下載文件 點(diǎn)擊下載文件

現(xiàn)在有94％的人在用IE，但Firefox的用戶也在不斷的增長(zhǎng)。Firefox的好我在這里就不說(shuō)了。但CSS在這兩個(gè)瀏覽器之間肯定有兼容的問(wèn)題。
截圖工具HyperSnap5
下載地址：下載文件 點(diǎn)擊下載文件
這個(gè)也是我用后認(rèn)為功能比較強(qiáng)大的截屏軟件。
如果你打瞌睡了[79]那就休息一下……
二、 構(gòu)思你的Skin
2.1配色
你的Blog給人的第一印象就是視覺(jué)上的，所以說(shuō)色很重要。

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

頁(yè)面的布局先不說(shuō)太復(fù)雜的，你理解了結(jié)構(gòu)后可以發(fā)揮自己的想象力。在這里要說(shuō)的是CSS（Cascading Style Sheets層疊樣式表單）這里的重點(diǎn)就是層疊。如果說(shuō)Skin設(shè)計(jì)是平面設(shè)計(jì)，那我認(rèn)為就錯(cuò)了。從欣賞的角度看這是個(gè)平面作品，但從設(shè)計(jì)的角度看那就是三維的。要不怎么有z-index這樣的屬性呢。再者我們可以這樣做個(gè)比較，CSS是說(shuō)的層類似于PS或FW里面的圖層，不一樣的地方僅僅在于：層交換順序－－PS可以而DIV＋CSS不可以；Alpha通道－－PS可以而CSS不可以（一些瀏覽器可以）。圖片的如上圖所示，我們可以看到Pjblog的結(jié)構(gòu)和DIV的前后順序，前面的覆蓋后面的（當(dāng)然也可以是透明的）。我們先不玩花哨的，Blog的布局一般都就這樣。
這里的header就是頭部，里面包含Blog名、副標(biāo)題、橫向菜單；
Tbody是中部?jī)?nèi)容，里面包含著主內(nèi)容（mainContent也就是我們寫的日志，就像這個(gè)教程在的位置）、側(cè)欄（sidebar）；
foot是底部，里面包含我們的一些版權(quán)信息、備案什么的；
我們說(shuō)了這么多都是說(shuō)的Pjblog的結(jié)構(gòu)，也就是說(shuō)是Box和Box之間的關(guān)系。而Box是怎么組成的呢？這里已經(jīng)有高人Douglas做個(gè)個(gè)Flash模型，里面很明白的說(shuō)明了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è)我們慢慢來(lái)。先看主體這樣先可以在你的腦海里有個(gè)Skin的大概樣子，為我們下面的制圖做好充分的準(zhǔn)備。
下面自己做了個(gè)Pjblog的結(jié)構(gòu)模型。
三、制圖
3.1了解背景
為什么要特設(shè)一節(jié)說(shuō)背景呢？因?yàn)樵贑SS里所用的圖片都是以背景的形式存在的。在我們制圖、切圖的過(guò)程中始終不能忘記這點(diǎn)，要做到盡可能的減少圖片的體積（現(xiàn)在好多簡(jiǎn)潔的Skin都實(shí)現(xiàn)了不用圖片或少用圖片），為的是減少下載量，提高頁(yè)面瀏覽的速度。
那我們來(lái)看看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(zhǎng)）只要切1px就可以了；我們要結(jié)合Pjblog的結(jié)構(gòu)對(duì)這些特性綜合運(yùn)用，要培養(yǎng)自己的3D思維。
3.2主體的制作
我們以我現(xiàn)在用的這款Skin做例子，來(lái)簡(jiǎn)述制圖過(guò)程。
我們先來(lái)看看我們想做的是怎樣的一個(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è)面的高度問(wèn)題，因?yàn)轫?yè)面的高度會(huì)隨內(nèi)容的不同而變化，那我們就要做一個(gè)有彈性的高度。我們可以利用Background-repeat設(shè)置值為y。那我們的背景就是縱向重復(fù)了。
3.2頭部的制作
同樣我們先看一下我們要做個(gè)什么樣的Top。

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

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

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

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

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

通過(guò)預(yù)覽我們可以看到一個(gè)背景式樣了，那其他的說(shuō)怎么沒(méi)提現(xiàn)呢。那是沒(méi)有內(nèi)容在里面，你可以試著在body>/body>之間添加代碼或文字看看。你也可以改變式樣里的屬性看看起了些什么變化（如果你不知道屬性是什么，建議你看看上面的《蘇昱式樣表中文手冊(cè)2.0》）。你可以把background-color:的屬性改成#000看看，背景是不是成黑色的了。是不是感覺(jué)有點(diǎn)成就感呢（我當(dāng)時(shí)就感覺(jué)到了 !）。千萬(wàn)不要拘束于這幾個(gè)標(biāo)簽，你可以試著用更多標(biāo)簽和屬性的組合來(lái)改變外觀。這樣你才有可能做出有個(gè)性的Skin。
4.2主體式樣
我們把全局式樣看作是body>的話，那就把主體式樣看作是#container。說(shuō)到這里我們可能有點(diǎn)明白了CSS的編寫其實(shí)是一個(gè)細(xì)化的過(guò)程。為什么這么說(shuō)呢？你看#container其實(shí)是包含在body>里的，而我們以后說(shuō)的有都是包含在#container里的。
通過(guò)上面的模型可以看出，#container里包含了#header、#Tbody、#foot通過(guò)這幾個(gè)的定義我們就可以實(shí)現(xiàn)上面所畫的圖了。我們?cè)谏厦娴拇a上繼續(xù)添加，看代碼

[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

首先我們?cè)赽ody>里添加了需要的div>
div id="">主體
       div id="header">頂部
       /div>

       div id="tbody">內(nèi)容
       /div>

       div id="foot">底部
       /div>

/div>
我們先從#container加起（為什么要加個(gè)#號(hào)，不明白的去看手冊(cè)）。
#container{width:816px;寬度，應(yīng)該和你切片的時(shí)候有所對(duì)應(yīng)
             text-align:center;內(nèi)容居中
             margin:0 auto;邊框?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ù)覽一下看看，好像主體出來(lái)了。但頂部不是我們想象的那樣呀！在#container上不是有三個(gè)元素嗎，那我們?cè)賮?lái)定義一下#header和#foot就可以了。#tbody我們可以留空有更大的活動(dòng)性。
HTML代碼


[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

看到了，哈哈。整個(gè)結(jié)構(gòu)是不是好像成型了。這里我們定義了#header。
#header {
                 width:816px;寬度，這里也就是圖片的寬度
                 height:110px;高度，這里也就是圖片的高度
                 text-align:left;內(nèi)容左對(duì)齊，因?yàn)槲覀円院罄锩娴腂log名字是要靠左的。
                 background:url(skins/dnxh10/top.jpg) no-repeat;背景路徑，不重復(fù)
}
底部的定義也一樣。就不在羅嗦了。
PS:這里的div id="tbody" style="height:500px">因?yàn)槔锩鏇](méi)內(nèi)容，而設(shè)置的高度做演示用的。
4.3頂部式樣
頂部的美化很重要，因?yàn)橛脩舸蜷_你的Blog的時(shí)候首先進(jìn)入眼簾的就是頂部。做頂部式樣的時(shí)候你要知道頂部式樣是在什么地方，他的結(jié)構(gòu)是怎樣的。頂部式樣就是Header和他里面的內(nèi)容，結(jié)構(gòu)我們可以通過(guò)上面的Flash模型來(lái)了解。我們還是看代碼：
HTML代碼


[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

不知道為什么這段不能加式樣，可能是和頁(yè)面的代碼一樣的緣故吧。那我們就不加，我們先來(lái)分析一下結(jié)構(gòu)，看每個(gè)元素的作用是什么。我們先設(shè)置一下#header的式樣，上面我們已經(jīng)說(shuō)過(guò)了。
  #container #header{width: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:15px 0 0 25px;}
   #container #header #blogname #blogTitle{display:none}
在這里我們?cè)O(shè)置了#blogname的字體大小、顏色、粗體、和浮動(dòng)左、補(bǔ)白的距離。而blogtitle設(shè)置了不顯示。
再往下看，看到了#left和#right兩個(gè)元素，看命名的意思我們就知道了。那是#header兩頭的式樣，我們可以靠float:left和float:right來(lái)實(shí)現(xiàn)，在這個(gè)式樣里我們不需要設(shè)置。這個(gè)主要可以實(shí)現(xiàn)圓角之類的#header。
#menu是菜單項(xiàng)，一般我們看這里的時(shí)候比較糊涂，再加上含有float屬性，運(yùn)用起來(lái)比較難以駕驅(qū)。我們來(lái)分析一下：
#menu是個(gè)整體式樣。里面包含了一個(gè)ul>li>/li>/ul>的結(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:35px 15px 0 0}
  #container #header #menu ul{}
  #container #header #menu ul li{float:left;height:20px;list-style:none;}  
   .menuL{}
   .menuR{}  
   .menuDiv{width:1px;height:20px;background:#999;margin-right:15px;margin-left:15px;}
li里面的float:left;是實(shí)現(xiàn)橫向菜單的必要條件，list-style:none;是消除列表前的小圓點(diǎn)的。
僅僅就這些式樣頂部還是不完美的。我們要設(shè)置菜單的鏈接式樣。也就是我們剛才少一個(gè)沒(méi)說(shuō)的menuA的式樣。
.menuA:link,.menuA:visited{text-align:center;text-decoration:none;color:#cc3300;line-height:19px;height:15px;}  
.menuA:hover{text-decoration:none;}
:visited是訪問(wèn)后的式樣，:link是通常的式樣，:hover是鼠標(biāo)接觸的式樣，其實(shí)還有個(gè):active（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件時(shí)的樣式）這里有個(gè)書寫的順序“LoVe/HAte”（愛(ài)/恨）鏈接規(guī)則：Link, Visited, Hover, Acitve。具體參數(shù)可以參照手冊(cè)。
4.4內(nèi)容式樣
內(nèi)容式樣里包含的元素比較多，變換也比較多，我們看看到底要做的是那些式樣。首先是內(nèi)容#Tbody，這個(gè)里面在首頁(yè)的時(shí)候包含的是主內(nèi)容#mainContent和工具條也就是側(cè)欄#sidebar。而在登陸頁(yè)的時(shí)候里面就是登陸框，注冊(cè)頁(yè)，還有信息提示出錯(cuò)，恭喜通過(guò)什么這些就是消息框式樣#MsgContent。如果你看過(guò)以前的式樣文件里的Layout.css的你可能會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，我上面說(shuō)的這些標(biāo)簽都是帶#號(hào)的也就是ID選擇符，而上面沒(méi)有提及是.開頭的是類選擇符，也就是class="*"。為什么會(huì)有這樣的命名方式，我們知道Pjblog是一個(gè)模塊化的程序。我們可以自己自定義側(cè)欄模塊和內(nèi)容模塊，也就是說(shuō)側(cè)欄工具條里的若干個(gè)工具箱里的ID（模塊標(biāo)識(shí)）是可以自己定義名字的，內(nèi)容里的模塊也是如此。這就為我們的模板創(chuàng)造了更多式樣的可能。你可以這樣理解，首先我們用了統(tǒng)一的類class，再個(gè)我們又給每個(gè)工具箱定義了唯一的一個(gè)ID，那我們通過(guò)這兩組合就可以定義每個(gè)工具箱的式樣了。形式如下：

我們從側(cè)欄開始，側(cè)欄的結(jié)構(gòu)很清晰。一個(gè)#sidebar主元素，里面包含了#sidebar-topimg、#innersidebar、#sidebar-bottomimg三個(gè)子元素，很明顯#sidebar-topimg、#sidebar-bottomimg是側(cè)欄的頂部和底部的式樣，而#innersidebar里面是放工具箱.sidepanel的。工具箱.sidepanel又作為一個(gè)主元素，里面包含了.Ptitle標(biāo)題、.Pcontent內(nèi)容面板、.Pfoot底部。看代碼：
程序代碼 程序代碼

div id="sidebar">
     div id="sidebar-topimg">/div>
     div id="innersidebar">
           div id="Side_AA" class="sidepanel">
           h4 class="Ptitle">/h4>
           div class="pcontent">/div>
           div class="pfoot">/div>
           /div>

           div id="Side_BB" class="sidepanel">
           h4 class="Ptitle">/h4>
           div class="pcontent">/div>
           div class="pfoot">/div>
           /div>

           div id="Side_CC" class="sidepanel">
           h4 class="Ptitle">/h4>
           div class="pcontent">/div>
           div class="pfoot">/div>
           /div>
     /div>
     div id="sidebar-bottomimg">/div>
/div>

代碼里的AA、BB、CC就是我們自定義的模塊標(biāo)識(shí)。這個(gè)在后臺(tái)模塊設(shè)置里可以自己定義。

那我們把上面的代碼定義一下式樣看看效果，想要的效果就是每個(gè)功能塊(AA、BB、CC)的頭部(ptitle)有一個(gè)自己的式樣（分別是：紅、黃、藍(lán)）。
HTML代碼


[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

.ptitle{height:10px}定義一下ptitle共有的式樣屬性；
#Side_aa .ptitle{background:red}下面就分別定義不同的顏色。
#Side_bb .ptitle{background:yellow}
#Side_cc .ptitle{background:blue}
這里要注意的是PJ側(cè)欄模塊的ID命名規(guī)則：在模塊標(biāo)識(shí)前加Side_。比如這里的aa，那就是#Side_aa。而程序默認(rèn)得模塊標(biāo)識(shí)是不可以更改的。
看到效果后你是不是已經(jīng)感覺(jué)到了Pjblog的模塊功能的神奇了，我們還可以給個(gè)個(gè)模塊給于絕對(duì)定位來(lái)實(shí)現(xiàn)各式各樣的布局。比如Eternal Love的日歷式樣、Yahoo Weight的Skins切換模塊式樣。我們這里同樣說(shuō)的是Pj的構(gòu)造和怎么運(yùn)用這些構(gòu)造，具體的CSS屬性還是去參考手冊(cè)。
這里我們著重要了解的是模塊標(biāo)識(shí)、選擇符之間的關(guān)系。關(guān)于選擇符手冊(cè)里有更詳細(xì)的說(shuō)明。

然后我們看主內(nèi)容的式樣。主內(nèi)容的式樣比側(cè)欄要復(fù)雜一點(diǎn)，首先主內(nèi)容的標(biāo)簽是#innermainContent，這也是一個(gè)三欄（或說(shuō)成是多欄，因?yàn)榭梢蕴砑幼远x模塊）的布局。包括了頭部#mainContent-topimg、中欄#Content_Contentlist和底部#mainContent-bottomimg。我們可以分別定義他們的式樣，頭部和底部已經(jīng)是最基層的DIV了，不含有子元素了，你可以盡情的定義他們的式樣，不用考慮他里面還有什么式樣，這句話的含義就是定義完后就是最終式樣了。而#Content_Contentlist是程序的默認(rèn)模塊，是不可以刪除的，在后臺(tái)設(shè)置模塊的最下面一個(gè)。如果你增加了內(nèi)容模塊，那增加的那些內(nèi)容模塊就像上面?zhèn)葯谡f(shuō)到的一樣，可以自由定義。這里也要注意的是：PJ內(nèi)容模塊的ID命名規(guī)則：比如內(nèi)容模塊標(biāo)識(shí)是Contentlist那這個(gè)模塊的ID就是#Content_Contentlist，要在內(nèi)容模塊標(biāo)識(shí)前加Content_，這個(gè)很重要
自定義模塊因?yàn)榫哂胁淮_定性，我在這里就不具體的說(shuō)了，著重說(shuō)說(shuō)Contentlist這個(gè)默認(rèn)模塊。這里面的內(nèi)容和側(cè)欄一樣不再是用ID選擇符了，用的是類選擇符。首先#Content_Contentlist包含了兩欄，.pageContent和.Content，.pageContent是分頁(yè)式樣，這也是最終定義的式樣。具體的是那部分呢，我們看下圖：

凡是這些地方都屬于.pageContent這個(gè)類的。這就是類選擇符的優(yōu)點(diǎn)。你可能覺(jué)得怎么說(shuō)了半天的結(jié)構(gòu)不說(shuō)CSS呢，別急，了解結(jié)構(gòu)很重要。忍著點(diǎn)往下看。
分頁(yè)式樣了解后我們?cè)倏?SPAN style="COLOR: brown">.Content的式樣。.Content里面的內(nèi)容比較豐富。首先他是一個(gè)三欄的布局，頭部.Content-top、內(nèi)容.content-body、底部.content-bottom。而頭部和底部又分別掛了左右兩DIV。頭部的是.Contentleft和.contentright，底部的是.ContentBleft和.contentBright。我們從字面上就可以了解到這些分別是在那個(gè)位置了。如果你還不了解請(qǐng)去看模型。
在.Content-top里面還包含著一些日志其他信息，就是日志的標(biāo)題、作者、日期。那這些分別是在哪里呢？標(biāo)題是屬于.ContentTitle一類，作者和日期包是屬于.ContentAuthor一類。他們分別包含在h1>/h1>和h2>/h2>里面。
上面說(shuō)道這些是在首頁(yè)情況下的式樣，在單篇日志的模式下有一點(diǎn)不一樣。在h2>/h2>下面多了個(gè).Content-Info類，再里面又包含了InfoAuthor和InfoOther兩個(gè)類。這里包含的信息如下圖：

再下面就是正文了.Content-body了。在單篇日志里因?yàn)椤疚恼聛?lái)自】【引用通告地址】【Tags】等內(nèi)容也賦予了.Content-body這個(gè)類，為了和【文章來(lái)自】【引用通告地址】【Tags】區(qū)別還給這個(gè)ID加了#logPanel標(biāo)簽，在首頁(yè)里是沒(méi)有的。其實(shí)在首頁(yè)里加個(gè)也可以，我在做Yahoo Weight這個(gè)式樣的時(shí)候，內(nèi)容首字母式樣就在首頁(yè)加了個(gè)#logPanel標(biāo)簽，可以單獨(dú)控制日志內(nèi)容和首頁(yè)摘要的式樣。
內(nèi)容里除了這些式樣外還有評(píng)論框式樣.comment和信息框式樣#MsgContent、UBB框.comment。
評(píng)論框式樣.comment一般是在單篇日志內(nèi)容里，他是一個(gè)兩欄的布局。里面包含了.commenttop和.commentcontent兩個(gè)類。

你往下拉了看看是不是這樣的。
信息框式樣#MsgContent。就是評(píng)論信息的下面，你發(fā)表評(píng)論的地方（當(dāng)然還有登陸框、信息提示寬、注冊(cè)等等要用到）。這個(gè)也不復(fù)雜，就一個(gè)頭部#MsgHead和#MsgBody，意思也很明了。而內(nèi)容里面的UBB編輯器式樣是另外一個(gè)文件控制，這就放到后面說(shuō)。
到這里內(nèi)容式樣基本結(jié)束，下面我們主要看這節(jié)的部分代碼。
內(nèi)容塊的結(jié)構(gòu)會(huì)出現(xiàn)幾種情況，首頁(yè)狀態(tài)、單篇日志、內(nèi)容插件等模式。著重說(shuō)前兩種情況。
首頁(yè)狀態(tài)代碼
HTML代碼


[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

從上面的代碼可以看到，我并不沒(méi)有用多少式樣，我只用了背景色和前景色來(lái)區(qū)別各個(gè)元素?？瓷先タ赡懿皇呛芷?，重要的是自己改。有些時(shí)候一個(gè)元素里沒(méi)有內(nèi)容，我們就不容易了解這個(gè)元素的存在。我一些模塊里沒(méi)有文字等內(nèi)容的元素添加了文字說(shuō)明。你可以試著把CSS代碼刪掉或改動(dòng)，來(lái)進(jìn)一步了解沒(méi)個(gè)元素的作用。這里還有個(gè)小技巧，在首頁(yè)普通模式下Pjblog給每個(gè)日志摘要都給于了一個(gè)ID，單獨(dú)定義或批量定義式樣，命名規(guī)則是"log_"+"日志ID號(hào)"。我們從上面的代碼可以看到日志173和174的不同的地方。那日志的ID怎么知道？我們把鼠標(biāo)挪到日志的鏈接那里，看到鏈接的最后有?id=***這樣的，就是日志的ID了。
單篇日志狀態(tài)
單篇日志狀態(tài)和首頁(yè)有很大的不同。里面包括的內(nèi)容有自定義模塊、分類和上下篇（.pageContent）、標(biāo)題作者日期（.ContentTitle.ContentAuthor）、自定義字體大小和日志等級(jí)天氣情況（.Content-Info）、內(nèi)容、評(píng)論分頁(yè)（pageContent）、評(píng)論（comment）、發(fā)表評(píng)論框（MsgContent）等等。
看代碼
HTML代碼


[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

發(fā)表評(píng)論框（MsgContent）準(zhǔn)備放到以后的章節(jié)里詳細(xì)說(shuō)明。內(nèi)容通用部分大體就說(shuō)完了，重要的是自己把上面的代碼通過(guò)改動(dòng)，細(xì)化來(lái)認(rèn)識(shí)Pjblog的結(jié)構(gòu)和CSS各個(gè)屬性的具體含義和產(chǎn)生的效果。
4.5底部式樣
底部式樣內(nèi)容其實(shí)不是很多，可以說(shuō)是非常的少。但這里為什么也要開一節(jié)說(shuō)呢，這里要涉及一些教程的題外話。大家也不得不看一下，要不做的再好的Skin也會(huì)被人BS的。
我們知道Blog的底部包含著一些重要的信息。第一行開頭就是很重要的版權(quán)信息，說(shuō)明了Pjblog的版權(quán)并含有官方的網(wǎng)址鏈接，后面是自己站點(diǎn)的名字，站點(diǎn)是有什么構(gòu)架的（就是xhtml | css）。第二行是頁(yè)面執(zhí)行的時(shí)間和查詢數(shù)據(jù)庫(kù)的次數(shù)，再后面就是我們Skin的一些信息了包含了Skin名字作者的站點(diǎn)和Email地址。第三行是站點(diǎn)的備案。
這里要著重說(shuō)說(shuō)版權(quán)。Skin的一些信息就標(biāo)明了這個(gè)Skin是你做的（具體怎么弄，等后面的章節(jié)里會(huì)說(shuō)到的），使用者可以通過(guò)這些信息和你聯(lián)系反應(yīng)一些問(wèn)題，當(dāng)然也是宣傳你的好方法，也是鼓勵(lì)大家做Skin的好處。對(duì)于Pjblog的版權(quán)信息我們要絕對(duì)的保護(hù)。我們也討論過(guò)這個(gè)問(wèn)題，說(shuō)Windows這么多盜版的但這些也保留了MS的版權(quán)，都知道Windows是微軟的產(chǎn)品。盜版可能是某些人窮，這我可以理解。但對(duì)于Pjblog這樣一個(gè)優(yōu)秀的開源程序，要你一分錢了嗎？你有必要把他的版權(quán)去掉嗎？這樣就會(huì)失去了基本的道德。所以我們無(wú)論是在做Skin還是在使用Pjblog都應(yīng)該尊重作者。似乎叉的遠(yuǎn)了點(diǎn)。
言歸正傳，來(lái)簡(jiǎn)單的看一下底部式樣。很簡(jiǎn)單，看代碼：
HTML代碼


[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

很清楚，一個(gè)Foot標(biāo)簽的DIV和兩個(gè)p>。通過(guò)前面的學(xué)習(xí)我想大家應(yīng)該了解怎么做了。其實(shí)一般這個(gè)不需要我們?cè)O(shè)置，基本的字體大小什么的都默認(rèn)已經(jīng)定義了。但我們可以要在底部加一些圖片之類的，利用padding、margin等屬性控制文字的位置，文本的左對(duì)齊、右對(duì)齊等等。這里要了解的一點(diǎn)是對(duì)p>的控制，程序里面用了兩p>字段，可能在設(shè)置邊框或補(bǔ)白的時(shí)候出現(xiàn)分行的問(wèn)題。
五、細(xì)節(jié)表現(xiàn)
5.1 Pjblog默認(rèn)模塊
我們知道Pjblog的很多功能是有模塊構(gòu)成的，而程序默認(rèn)的模塊我們?cè)谧鯯kin的時(shí)候?yàn)榱送ㄓ眯砸脖仨氁⒁舛x的。
5.1.1 日歷式樣
同樣我們要來(lái)了解它的結(jié)構(gòu)。
日歷它是一個(gè)側(cè)欄模塊。我們前面說(shuō)了模塊是包含在側(cè)欄的sidepanel面板里的，然后給各自的模塊一個(gè)唯一的ID。在這里日歷的ID就是Side_Calenbar。那我們就可以對(duì)這class為sidepanel、ID為Side_Calendar的DIV進(jìn)行定義了。對(duì)于class、ID 是怎樣定義式樣的我們前面也說(shuō)了在這里再?gòu)?fù)習(xí)一下。前者是類選擇符，表現(xiàn)形式為：.類屬性。后者是ID選擇符，表現(xiàn)形式為：#ID名稱。以后就不再重復(fù)了。一般為了Skin的統(tǒng)一協(xié)調(diào)是對(duì)sidepanel進(jìn)行統(tǒng)一定義的，只有特殊式樣的時(shí)候才定義這個(gè)ID為Side_Calendar的DIV。當(dāng)然這個(gè)DIV里面和其他側(cè)欄面板一樣同樣有一個(gè)Class為Ptitle的H4標(biāo)簽、一個(gè)Class為Pcontent的內(nèi)容DIV和一個(gè)Class為Pfoot的底部DIV。
日歷的主要內(nèi)容是在Pcontent里的一個(gè)ID為Calendar_Body的DIV。這里面一共保護(hù)了7行。一個(gè)ID為Calendar_Top的DIV里面顯示的就是XXXX年XX月和兩個(gè)方向按鈕，一個(gè)ID為Calendar_week的DIV里面顯示的是星期， 還有5個(gè)都是ID為Calendar_Day的DIV這里就是具體的日期了。

我們?cè)賮?lái)看看進(jìn)一步的結(jié)構(gòu)，充分的了解結(jié)構(gòu)才能做好Skin。
Calendar_Top:除了內(nèi)容外還有ID為L(zhǎng)eftB和RightB兩個(gè)DIV，分別控制兩個(gè)方向按鈕。我們可以自定義按鈕的圖片
Calendar_week:里面是一個(gè)ul>li>/ul>/li>的結(jié)構(gòu)其中第一個(gè)也就是星期天“日”外面套了一個(gè)font>程序默認(rèn)定義了紅色。我們通過(guò)導(dǎo)航的了解知道了這個(gè)結(jié)構(gòu)要使它橫向排列必須用Float，要不見(jiàn)點(diǎn)必須用liststyle:none;
Calendar_Day:這里面的結(jié)構(gòu)和Calendar_week是一樣的，不同的是li里面都包含超鏈接a>,對(duì)不同情況的日期做了不同的Class。日期選中（.click）、今天（.today）、非本月日期（.otherday）、本日存在日志（.haveD）、今天存在日志（.DayD）
那我們來(lái)看代碼，日歷的式樣表在模板的typography.css里面。因?yàn)镃SS有繼承的特性，因此我們最好按照默認(rèn)式樣的順序書寫代碼。
文本查看復(fù)制到剪貼板打印©
  1. /*日歷式樣－－－對(duì)整個(gè)框架進(jìn)行定義，這里定義的內(nèi)容是會(huì)繼承的下面的。也就是說(shuō)如果下面的不另外聲明就表現(xiàn)這里定義的內(nèi)容*/  
  2.   #Calendar_Body{margin:5px 10px 5px 0px;font-family:arial;line-height:120%}   
  3. /*頂部－－－對(duì)頂部定義式樣，這里定義了一下文本居中*/  
  4.   #Calendar_Body #Calendar_Top{padding:0px 2px 0px 2px;height:18px;text-align:center;font-weight:bold;}   
  5. /*按鈕左－－－按鈕圖片（我這里用了顏色背景代替）*/  
  6.   #Calendar_Body #Calendar_Top #LeftB{background:#333;width:9px;height:16px;float:left;cursor:pointer;overflow:hidden;}   
  7. /*按鈕右－－－和上面的一樣都要注意float*/  
  8.   #Calendar_Body #Calendar_Top #RightB{background:#333;width:9px;height:16px;float:rightright;cursor:pointer;overflow:hidden;}   
  9.  /*星期－－－這里要注意的是浮動(dòng)（float）和寬度（width），寬帶是用的%，這樣做是為了適應(yīng)個(gè)個(gè)Skin*/  
  10.   #Calendar_Body #Calendar_week{text-align:center;height:20px;padding:0px 0px 0px 2%;font-weight:bold;}   
  11.   ul.Week_UL{display:inline;list-style:none;margin:0px;padding:0px;}   
  12.   ul.Week_UL li{display:inline;margin:3px 0px 2px 0px;padding:0px;float:left;color:#003;width:14%;}   
  13. /*日期－－－日期的整體使用這里定義了li使之橫向排列同時(shí)注意寬帶也是和上面一樣用的%*/  
  14.   .Calendar_Day {text-align:center;height:20px;padding:0px 0px 0px 2%;color:#9c1c1c}   
  15.   .Calendar_Day ul.Day_UL{display:inline;list-style:none;}   
  16.   .Calendar_Day ul.Day_UL li{display:inline;float:left;width:14%;}   
  17.   
  18.  /*日期超鏈接－－－可以定義鼠標(biāo)式樣等等，包括下面的個(gè)個(gè)項(xiàng)完全可以自由發(fā)揮，不過(guò)要注意的是寬帶、高度不需要再定義了。*/  
  19.   .DayA a{cursor:default;padding:2px 0px 3px 0px;display:block;font-size:11px;height:13px;color:#9c1c1c}   
  20.   .DayA a:link,.DayA a:visited{color:#06c;}   
  21.   .DayA a:hover{color:#f0821d;background:#FFBFBF}   
  22.  /*選中日期*/  
  23.   .DayA a.click{cursor:default;background:#9c1c1c;font-weight:bold;}   
  24.   .DayA a.click:link,.DayA a.click:visited{cursor:pointer;font-weight:bold;text-decoration:none;color:#fff}   
  25.   .DayA a.click:hover{text-decoration:none;color:#336633;}   
  26.  /*今天*/  
  27.    .DayA a.today{cursor:default;color:#9c1c1c;border:1px solid #9c1c1c;background:#fff;}   
  28.       
  29. /*非本月日期*/  
  30.    .DayA a.otherday{cursor:default;color:#fff;text-decoration:none;/*visibility:hidden*/}   
  31.    .DayA a.otherday:link,.DayA a.otherday:visited{cursor:default;color:#eee;font-weight:bold;}   
  32.    .DayA a.otherday:hover{cursor:default;color:#9c1c1c;font-weight:bold;}   
  33.   
  34.  /*本日存在日志*/  
  35.    .DayA a.haveD{cursor:pointer;}   
  36.    .DayA a.haveD:link,.DayA a.haveD:visited{color:#9c1c1c;font-weight:bold;}   
  37.    .DayA a.haveD:hover{color:#9c1c1c;}   
  38.  /*今天存在日志*/  
  39.    .DayA a.DayD{cursor:pointer;}   
  40.    .DayA a.DayD:link,.DayA a.DayD:visited{border:1px solid #9c1c1c;background:#fff;font-weight:bold;text-decoration:none;color:#9c1c1c}   
  41.    .DayA a.DayD:hover{color:#9c1c1c;text-decoration:underline;border:1px solid #9c1c1c;background:#fff;font-weight:bold;}  

5.2 按鈕、信息框和輸入框
    都被指著鼻子說(shuō)了，實(shí)在是不好意思再偷懶了。由于前段時(shí)間工作的變動(dòng)，以及自己的懶惰 這文章一直沒(méi)續(xù)，今天開始繼續(xù)來(lái)完成他。順便自己也對(duì)CSS也溫習(xí)一下。
   以后說(shuō)的內(nèi)容可能影響的地方不大，都是對(duì)一些細(xì)節(jié)方面的表現(xiàn)。前一節(jié)我們說(shuō)了默認(rèn)模塊日歷的編排，這最重要的就是要學(xué)習(xí)和了解CSS的繼承性，其他默認(rèn)模塊里面其實(shí)就是一些超鏈接，其他沒(méi)什么特別的。
    首先我們要了解這一節(jié)里面我們要對(duì)哪些地方的式樣進(jìn)行定義。內(nèi)容有文本輸入框（用戶名）、密碼輸入框（密碼）、按鈕、置頂日志按鈕、日志分類圖標(biāo)、信息框（確認(rèn)、報(bào)錯(cuò)等等）。而這些部位有些內(nèi)容是在特定的時(shí)候出現(xiàn)的往往一些朋友剛開始做Skin的時(shí)候不注意這些地方，使得模版不夠完美。這些內(nèi)容Pjblog一般都是用類選擇符來(lái)定義的，什么是類選擇符我們?cè)诘谒恼碌谝还?jié)里面做了簡(jiǎn)短的說(shuō)明。
    在CSS里面你只要選擇了一個(gè)元素那你可以把這個(gè)元素看成或認(rèn)為這個(gè)元素就是一個(gè)BOX。在第二章第二節(jié)里面有BOX的Flash模型，你可以盡情的對(duì)他們定義發(fā)揮你的創(chuàng)意。其中輸入框（.inputBox）、密碼輸入框（.userpass）、按鈕（.userbutton）、分類圖標(biāo)（.CateIcon）。這些我們可以定義他們的背景（background）、邊框等等。重要的是他們還具有偽類（什么是偽類，在上面提供下載的CSS2.0手冊(cè)里面有詳細(xì)的說(shuō)明），這樣我們就可以做出鼠標(biāo)在和不在的時(shí)候的式樣。對(duì)于分類圖標(biāo)你還可以利用BOX的display屬性定義他是否需要顯示。還有就是置頂按鈕，我們知道置頂按鈕有兩種狀態(tài)，一個(gè)就是打開的時(shí)候的狀態(tài)（.BttnC），還有一個(gè)就是關(guān)閉的狀態(tài)（.BttnE），這樣我們就可以給兩個(gè)不同的圖片作為按鈕了。在當(dāng)前我的這個(gè)Skin上面做了以下定義：
文本查看復(fù)制到剪貼板打印©
  1. .userpass{border:1px solid #cc3300;font-size:12px;font-family: Verdana, Arial, Helvetica, sans-serif;background:#fff;}   
  2.  .userpass:hover,.userpass:focus{border-color:#cc3300;background:#fff;}   
  3.  .inputBox{border:1px solid #cc3300;;font-size:12px;}   
  4.  .inputBox:hover,.inputBox:focus{border-color:#cc3300;}   
  5.  .userbutton{height:21px;background:url(button_bg.jpg) repeat-x;border:none;padding:3px;border-right:2px solid #d6d6d6;border-bottom:2px solid #d6d6d6;}   
  6.  .CateIcon{display:none}  

    對(duì)于信息框我們來(lái)看一下他的結(jié)構(gòu)。

首先我們這個(gè)信息框（MsgContent）是包含在Tbody）里面的，這個(gè)也要了解的，因?yàn)門body里的定義一般會(huì)繼承到他的子元素里面。我們了解了結(jié)構(gòu)就好辦了分別對(duì)這3個(gè)BOX定義就是了。
文本查看復(fù)制到剪貼板打印©
  1.   /*---信息框--*/  
  2.   #MsgContent{text-align:center;margin:auto;border:1px #999 solid;width:450px;}   
  3.   #MsgContent #MsgHead{padding:4px;color:#999;font-weight:bold;}   
  4.   #MsgContent #MsgBody{padding:4px;line-height:180%;color:#333;}  

而在MsgBody里面可能有一些不同的情況發(fā)生，比如包含一個(gè)注冊(cè)的表單和就只有一些文字。而需要定義的就是提示（.MessageIcon）、出錯(cuò)（.ErrorIcon）、警告（.WarningIcon）和詢問(wèn)（.QuestionIcon）的圖標(biāo)和文字。
文本查看復(fù)制到剪貼板打印©
  1. /*信息框圖標(biāo)以及文字*/  
  2.    .MessageText{height:76px;margin-right:18px;margin-top:2px}   
  3.    .MessageIcon{background:url(2.gif) no-repeat;width:60px;height:60px;float:left;margin-left:10px;}   
  4.    .ErrorIcon{background:url(5.gif) no-repeat;width:60px;height:60px;float:left;margin-left:10px;}   
  5.    .WarningIcon{background:url(5.gif) no-repeat;width:60px;height:60px;float:left;margin-left:10px;}      
  6.    .QuestionIcon{background:url(5.gif) no-repeat;width:60px;height:60px;float:left;margin-left:10px;}  

這里再提一個(gè)額外的式樣，一般Pjblog默認(rèn)情況下是不開啟這個(gè)功能的。那就是提示框。

這個(gè)只有在header.asp文件里面啟用一個(gè)JS文件的時(shí)候才有效，但是你做的Skin無(wú)論是愿意提供給別人還是自己用建議都應(yīng)該定義一下。
文本查看復(fù)制到剪貼板打印©
  1. /*提示框CSS*/  
  2.    div.nicetitle {   
  3.     position: absolute;   
  4.     padding: 4px !important;   
  5.     padding: 6px 4px 4px 4px;   
  6.     top: 0;   
  7.     left: 0;   
  8.     font-family: Verdana, Helvetica, Arial, sans-serif;   
  9.     font-size: 12px;   
  10.     width: 15em;   
  11.     background: #FFFBD1 url(nicetitlebg.jpg);   
  12.     color: #3D2C05;   
  13.     border: 1px solid #715208;   
  14.     text-align: left;   
  15. }   
  16.    div.nicetitle p {   
  17.     margin: 0; padding: 0 3px;   
  18. }   
  19.    div.nicetitle p.destination {   
  20.     font-size: 9px;   
  21.     text-align: left;   
  22.     padding:3px 0px 0px 3px;   
  23.     color: #715208;   
  24. }  

5.3 UBB編輯器以及內(nèi)容
    這應(yīng)該是全部模塊講述里面的最后一個(gè)部分了。有的時(shí)候我們使用UBB編輯器寫的內(nèi)容里包含一些代碼塊，說(shuō)代碼塊可能不是很好理解。舉例子就像插入Flash、視頻、代碼、可運(yùn)行代碼等等。這些我們可以在定義完內(nèi)容面板式樣后定義這些內(nèi)容。這些內(nèi)容就是包含在一個(gè)大的元素（.UBBPanel）里面的，同樣是類選擇符。

從上圖中可以看出這個(gè)結(jié)構(gòu)很容易理解，同樣我們只要分別把里面的每個(gè)元素看成是一個(gè)BOX，然后對(duì)他們進(jìn)行定義。而其中的.UBBContent TEXTAREA為文本框多數(shù)在可運(yùn)行代碼里可以看到，里面的字體不要設(shè)置的過(guò)小哦，看代碼太小很累的。
說(shuō)完內(nèi)容部分接下來(lái)就說(shuō)說(shuō)UBB編輯器的式樣。UBB式樣是包含在模版主目錄里的UBB文件夾里面，里面分別有一個(gè)editor.css的式樣文件、bar.gif的欄目分割圖片、和一個(gè)Icons的圖標(biāo)文件夾。我們可以替換這些圖片但不能改文件名（有的時(shí)候?yàn)榱撕湍０鎱f(xié)調(diào)，需要更換UBB圖標(biāo)）。這里重點(diǎn)看editor.css這個(gè)式樣文件。我們先開看看UBB編輯器的結(jié)構(gòu)

我們從圖中的結(jié)構(gòu)可以看出，.editorContent部分的內(nèi)容相對(duì)比較簡(jiǎn)單就是一個(gè)大的里面包含了一個(gè)文本框。主要是在#editorHead里的內(nèi)容首先是包含了一個(gè)縱向排列的.editorTools我們可以看做是一個(gè)個(gè)工具欄。在工具欄里面又包含了一個(gè)個(gè).Toolsbar工具條。工具條里是一個(gè)有Ul、Li構(gòu)成的列表列表里是一個(gè)個(gè)的.Toolsbutton按鈕，當(dāng)然有的時(shí)候也有選擇框.ToolsUL Li select。在一般情況下默認(rèn)式樣文件里的UBB式樣可以通用不需要自己寫，當(dāng)然如果你的模版要求UBB編輯器協(xié)調(diào)的話可以在默認(rèn)的基礎(chǔ)上修改比如邊框色、背景色之類的。當(dāng)然如果你要在鼠標(biāo)移到圖標(biāo)的時(shí)候當(dāng)前圖標(biāo)稍微變大點(diǎn)，那你就可以.Toolsbutton:hover的式樣，在里面定義一下尺寸。每個(gè)按鈕除了有一個(gè)統(tǒng)一的Toolsbutton類之外他們各自還有一個(gè)唯一的ID，比如粗體就是A_bold。
    說(shuō)到這里似乎要完了，但還有很重要的一個(gè)元素，那就是.UBBSmiliesPanel。這個(gè)是就是表情面板，就是點(diǎn)擊插入表情的那個(gè)按鈕時(shí)跳出給你選擇表情的面板。因?yàn)檫@個(gè)元素默認(rèn)是隱藏的，一般不會(huì)很注意他。這個(gè)面板除了自身的一個(gè)元素.UBBSmiliesPanel外，里面包含的就是一個(gè)表格，表格里面是一個(gè)個(gè)圖像鏈接每個(gè)鏈接都有一個(gè)名為Smilie的類。我們定義的時(shí)候就定義.Smilie{}。這里要注意的是.UBBSmiliesPanel這個(gè)面板的定義，因?yàn)橐恍┯行┡笥延胿isibility:hidden來(lái)定義這個(gè)面板的隱藏。這里要注意，隱藏一個(gè)元素有兩種方法visibility:hidden和display:none，這兩個(gè)不同的是display:none不為被隱藏的對(duì)象保留其物理空間。也就是說(shuō)display:none這個(gè)隱藏了就不占地方了，如果有的時(shí)候你做了一個(gè)800px的模版，但是有時(shí)遇到有橫向滾動(dòng)條的情況，但找不到那里出了問(wèn)題，那你就試試這里有問(wèn)題沒(méi)有。
六、兼容調(diào)試
    兼容問(wèn)題一直是設(shè)計(jì)制作模版最頭疼的問(wèn)題。這里我們就目前主要流行的瀏覽器Firefox和IE6/7做為主要瀏覽器。在我們編寫CSS過(guò)程中我們要經(jīng)常的預(yù)覽觀看書寫的效果，這個(gè)預(yù)覽的過(guò)程最好使用一種瀏覽器或Firefox或IE，這里推薦使用Firefox。這里我就主要會(huì)出現(xiàn)的問(wèn)題來(lái)進(jìn)行說(shuō)明。
    居中的問(wèn)題。我們?cè)谝挂粋€(gè)DIV居中的時(shí)候，首先要對(duì)這個(gè)DIV的父元素（就使這個(gè)BOX的外面一層）設(shè)置text-align為center，然后設(shè)置目標(biāo)DIV的margin為auto；
    尺寸問(wèn)題。Firefox在設(shè)置padding后會(huì)加上這個(gè)BOX的高度和寬度，而IE就不加。由于Firefox和IE中的BOX模型解釋不一致導(dǎo)致margin相差2px，就是說(shuō)Firefox下設(shè)置margin:30px，那IE下就顯示的尺寸為28px。margin還有個(gè)問(wèn)題就是解決辦法在IE7沒(méi)出來(lái)前是用!important來(lái)解決的，IE出來(lái)了對(duì)!important認(rèn)識(shí)了那就要另外解決了，解決方法看這里。另外在計(jì)算BOX寬度的時(shí)候一定要記得算上邊框border的寬度。比如
程序代碼 程序代碼
div id="1">
div id="2">div>
/div>

這樣的結(jié)構(gòu)在Pjblog里隨處可見(jiàn)。看式樣
程序代碼 程序代碼

#2{width:100px;height:100px;border:2px solid #fff;}

這樣的式樣，由于1沒(méi)設(shè)置固定的高和寬，而2設(shè)定了高和寬都為100px并且邊框?yàn)?px，那1就被撐開到的高度和寬度尺寸為104px=100px+2px+2px。
    浮動(dòng)的問(wèn)題，這個(gè)最頭疼了。這個(gè)主要是在使用橫向布局的時(shí)候，比如使用Ul、Li結(jié)構(gòu)的菜單、工具條等等。設(shè)置浮動(dòng)的DIV那這個(gè)元素的margin的數(shù)值在IE下會(huì)加倍，這是一個(gè)ie6都存在的bug。解決方案是在這個(gè)浮動(dòng)的div里面加上display:inline
    由于兼容出現(xiàn)的問(wèn)題會(huì)根據(jù)不同的情況而出現(xiàn)，所以在這里就講這些比較常見(jiàn)的問(wèn)題。同時(shí)推薦一些調(diào)試工具，都是瀏覽器插件。一個(gè)是在IE下的由微軟自己出的Internet Explorer Developer Toolbar，就是英文版的。還有個(gè)就是Firefox的Web Developer Extension
七、打包
    如果你認(rèn)真看過(guò)Pjblog的官方文檔，這部分基本沒(méi)什么問(wèn)題了。所謂的打包，就是我們所做的模版的一些文件按Pjblog要求的文檔結(jié)構(gòu)布置。并且放置一個(gè)可以給Blog程序識(shí)別的skin.xml文件。文檔的放置結(jié)構(gòu)你隨便拿個(gè)可用的模版參考一下就行了。我們重點(diǎn)看一下這個(gè)skin.xml文件
文本查看復(fù)制到剪貼板打印©
  1. ?xml version="1.0" encoding="UTF-8"?>  
  2. SkinSet>  
  3.  SkinName>2007/SkinName>!-- 模版名字 -->  
  4.  SkinDesigner>dnxh/SkinDesigner>!-- 作者名字 -->  
  5.  pubDate>2001-01-25/pubDate>!-- 發(fā)布日期 -->  
  6.  DesignerURL>http://www.dnxh.cn/DesignerURL>!-- 作者站點(diǎn) -->  
  7.  DesignerMail>embont@gmail.com/DesignerMail>!-- 作者郵箱 -->  
  8. /SkinSet>  
這是一個(gè)標(biāo)準(zhǔn)的XML文件。每一項(xiàng)我都已經(jīng)注明了含意。最后強(qiáng)調(diào)的是模版里的所有文件，包括這個(gè)XML全部采用UTF-8的編碼
未完待續(xù)……

標(biāo)簽：新疆 河南 滄州 沈陽(yáng) 上海 紅河 長(zhǎng)治 樂(lè)山

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《Pjblog模板制作教程 超強(qiáng)推薦》，本文關(guān)鍵詞  ；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼

    • 電話咨詢

    • 400-1100-266
    龙州县| 阳山县| 通辽市| 西平县| 桐城市| 镶黄旗| 昌图县| 隆尧县| 武山县| 阳原县| 东乡族自治县| 新民市| 包头市| 湟中县| 贵州省| 肃宁县| 天等县| 丰台区| 淮滨县| 枣强县| 郑州市| 营山县| 历史| 栖霞市| 广东省| 团风县| 南华县| 历史| 平山县| 涿鹿县| 鸡西市| 横山县| 南华县| 若尔盖县| 太白县| 闽侯县| 盖州市| 廉江市| 页游| 开平市| 乳源|