主頁 > 知識(shí)庫 > Pjblog模板制作教程 超強(qiáng)推薦

Pjblog模板制作教程 超強(qiáng)推薦

熱門標(biāo)簽:電銷智能機(jī)器人靠譜么 南通電話外呼系統(tǒng)開發(fā) 沸思外呼線路 北京銷售外呼系統(tǒng)線路 電銷機(jī)器人的宣傳語 400電話辦理安徽 南寧外呼電銷系統(tǒng)招商 江西防封卡外呼系統(tǒng)怎么安裝 石家莊電話機(jī)器人電話
2007.1.30更新……轉(zhuǎn)載自 http://www.dnxh.cn/blog/article.asp?id=155
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)格要求自己,有一定的審美觀。最好熟悉一些制圖軟件(Adobe Potoshop、Fireworks之類)。對(duì)CSS方面番茄做過很不錯(cuò)的教程(需要注冊)。
2.2 涉及的工具
首先你要有太電腦,并且顯示器的色彩不是很差(我的本本的液晶顯示器讓我哭笑不得呀……)。制圖軟件Adobe Potoshop、Fireworks之類。CSS編寫工具,你當(dāng)然用記事本也可以寫。色彩調(diào)配軟件,屏幕截圖軟件。這些基本在本站都有下載,為了防止站點(diǎn)流量過大被K,我只能加了下載級(jí)別,并隨機(jī)變換下載地址。請注冊后下載,謝謝你的合作!
Macromedia Studio 8.0 官方簡體中文正式版
電驢下載地址:http://lib.verycd.com/2005/10/14/0000069569.html
比較認(rèn)同的網(wǎng)頁制作類軟件,這里我們主要是用套裝里面的 Fireworks(教程里面用的就是他)。當(dāng)然你也可以用Adobe Potoshop。
CSS編寫工具EditPlus V2.1.2 Build 147 漢化版
下載地址:下載文件 點(diǎn)擊下載文件
當(dāng)然有人說用Dreamweaver不是更好?這里不建議用,手寫更容易記住代碼的含義,再說CSS可視化編寫不是很理想。本來TopStyle3是可視化編寫CSS的最佳工具,但介于Pjblog的CSS是分幾個(gè)文件的用他效果也不怎么明顯。
Color Schemer Studio1.5配色工具
下載地址:下載文件 點(diǎn)擊下載文件
配色是你構(gòu)思Skin的第一步。這款工具對(duì)顏色的搭配比較專業(yè)。
蘇昱式樣表中文手冊2.0(一下簡稱《手冊》)
下載地址:下載文件 點(diǎn)擊下載文件
調(diào)試軟件Firefox
下載地址:下載文件 點(diǎn)擊下載文件

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

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

頁面的布局先不說太復(fù)雜的,你理解了結(jié)構(gòu)后可以發(fā)揮自己的想象力。在這里要說的是CSS(Cascading Style Sheets層疊樣式表單)這里的重點(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)備。
下面自己做了個(gè)Pjblog的結(jié)構(gòu)模型。
三、制圖
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也很好(他體積?。?BR>
整體的PNG分層文件提供給大家研究。下載文件 點(diǎn)擊下載此文件
我們打開這個(gè)文件可以看到。如頭部、主體背景、底部他們的寬度不是我們剛開始的時(shí)候說的800px,那是因?yàn)槲覀冊谕饷婕恿岁幱?。一定要把這個(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ì)body>/body>里面的內(nèi)容和DIV有效??创a(style type="text/css">/style>里面為CSS代碼,/head>看作是DIV布局,以后都是用這種可運(yùn)行代碼表示,不在重復(fù))

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

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

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

首先我們在body>里添加了需要的div>
div id="">主體
       div id="header">頂部
       /div>

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

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

/div>

我們先從#container加起(為什么要加個(gè)#號(hào),不明白的去看手冊)。
#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ù)覽一下看看,好像主體出來了。但頂部不是我們想象的那樣呀!在#container上不是有三個(gè)元素嗎,那我們再來定義一下#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)槔锩鏇]內(nèi)容,而設(shè)置的高度做演示用的。
4.3頂部式樣
頂部的美化很重要,因?yàn)橛脩舸蜷_你的Blog的時(shí)候首先進(jìn)入眼簾的就是頂部。做頂部式樣的時(shí)候你要知道頂部式樣是在什么地方,他的結(jié)構(gòu)是怎樣的。頂部式樣就是Header和他里面的內(nèi)容,結(jié)構(gòu)我們可以通過上面的Flash模型來了解。我們還是看代碼:
HTML代碼


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

不知道為什么這段不能加式樣,可能是和頁面的代碼一樣的緣故吧。那我們就不加,我們先來分析一下結(jié)構(gòu),看每個(gè)元素的作用是什么。我們先設(shè)置一下#header的式樣,上面我們已經(jīng)說過了。
  #container #header{width:816px;height:110px;background: url(top.jpg) no-repeat;text-align:left;}
#blogname就是我們的Blog的名字,他包含了#blogtitle子元素。我們設(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}
在這里我們設(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è)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è)沒說的menuA的式樣。
.menuA:link,.menuA:visited{text-align:center;text-decoration:none;color:#cc3300;line-height:19px;height:15px;}  
.menuA:hover{text-decoration:none;}

:visited是訪問后的式樣,:link是通常的式樣,:hover是鼠標(biāo)接觸的式樣,其實(shí)還有個(gè):active(在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件時(shí)的樣式)這里有個(gè)書寫的順序“LoVe/HAte”(愛/恨)鏈接規(guī)則:Link, Visited, Hover, Acitve。具體參數(shù)可以參照手冊。
4.4內(nèi)容式樣
內(nèi)容式樣里包含的元素比較多,變換也比較多,我們看看到底要做的是那些式樣。首先是內(nèi)容#Tbody,這個(gè)里面在首頁的時(shí)候包含的是主內(nèi)容#mainContent和工具條也就是側(cè)欄#sidebar。而在登陸頁的時(shí)候里面就是登陸框,注冊頁,還有信息提示出錯(cuò),恭喜通過什么這些就是消息框式樣#MsgContent。如果你看過以前的式樣文件里的Layout.css的你可能會(huì)發(fā)現(xiàn)一個(gè)問題,我上面說的這些標(biāo)簽都是帶#號(hào)的也就是ID選擇符,而上面沒有提及是.開頭的是類選擇符,也就是class="*"。為什么會(huì)有這樣的命名方式,我們知道Pjblog是一個(gè)模塊化的程序。我們可以自己自定義側(cè)欄模塊和內(nèi)容模塊,也就是說側(cè)欄工具條里的若干個(gè)工具箱里的ID(模塊標(biāo)識(shí))是可以自己定義名字的,內(nèi)容里的模塊也是如此。這就為我們的模板創(chuàng)造了更多式樣的可能。你可以這樣理解,首先我們用了統(tǒng)一的類class,再個(gè)我們又給每個(gè)工具箱定義了唯一的一個(gè)ID,那我們通過這兩組合就可以定義每個(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底部??创a:
程序代碼 程序代碼

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)感覺到了Pjblog的模塊功能的神奇了,我們還可以給個(gè)個(gè)模塊給于絕對(duì)定位來實(shí)現(xiàn)各式各樣的布局。比如Eternal Love的日歷式樣、Yahoo Weight的Skins切換模塊式樣。我們這里同樣說的是Pj的構(gòu)造和怎么運(yùn)用這些構(gòu)造,具體的CSS屬性還是去參考手冊。
這里我們著重要了解的是模塊標(biāo)識(shí)、選擇符之間的關(guān)系。關(guān)于選擇符手冊里有更詳細(xì)的說明。

然后我們看主內(nèi)容的式樣。主內(nèi)容的式樣比側(cè)欄要復(fù)雜一點(diǎn),首先主內(nèi)容的標(biāo)簽是#innermainContent,這也是一個(gè)三欄(或說成是多欄,因?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到的一樣,可以自由定義。這里也要注意的是:PJ內(nèi)容模塊的ID命名規(guī)則:比如內(nèi)容模塊標(biāo)識(shí)是Contentlist那這個(gè)模塊的ID就是#Content_Contentlist,要在內(nèi)容模塊標(biāo)識(shí)前加Content_,這個(gè)很重要
自定義模塊因?yàn)榫哂胁淮_定性,我在這里就不具體的說了,著重說說Contentlist這個(gè)默認(rèn)模塊。這里面的內(nèi)容和側(cè)欄一樣不再是用ID選擇符了,用的是類選擇符。首先#Content_Contentlist包含了兩欄,.pageContent.Content,.pageContent是分頁式樣,這也是最終定義的式樣。具體的是那部分呢,我們看下圖:

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

再下面就是正文了.Content-body了。在單篇日志里因?yàn)椤疚恼聛碜浴俊疽猛ǜ娴刂贰俊綯ags】等內(nèi)容也賦予了.Content-body這個(gè)類,為了和【文章來自】【引用通告地址】【Tags】區(qū)別還給這個(gè)ID加了#logPanel標(biāo)簽,在首頁里是沒有的。其實(shí)在首頁里加個(gè)也可以,我在做Yahoo Weight這個(gè)式樣的時(shí)候,內(nèi)容首字母式樣就在首頁加了個(gè)#logPanel標(biāo)簽,可以單獨(dú)控制日志內(nèi)容和首頁摘要的式樣。
內(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)然還有登陸框、信息提示寬、注冊等等要用到)。這個(gè)也不復(fù)雜,就一個(gè)頭部#MsgHead和#MsgBody,意思也很明了。而內(nèi)容里面的UBB編輯器式樣是另外一個(gè)文件控制,這就放到后面說。
到這里內(nèi)容式樣基本結(jié)束,下面我們主要看這節(jié)的部分代碼。
內(nèi)容塊的結(jié)構(gòu)會(huì)出現(xiàn)幾種情況,首頁狀態(tài)、單篇日志、內(nèi)容插件等模式。著重說前兩種情況。
首頁狀態(tài)代碼
HTML代碼


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

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


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

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


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

很清楚,一個(gè)Foot標(biāo)簽的DIV和兩個(gè)p>。通過前面的學(xué)習(xí)我想大家應(yīng)該了解怎么做了。其實(shí)一般這個(gè)不需要我們設(shè)置,基本的字體大小什么的都默認(rèn)已經(jīng)定義了。但我們可以要在底部加一些圖片之類的,利用padding、margin等屬性控制文字的位置,文本的左對(duì)齊、右對(duì)齊等等。這里要了解的一點(diǎn)是對(duì)p>的控制,程序里面用了兩p>字段,可能在設(shè)置邊框或補(bǔ)白的時(shí)候出現(xiàn)分行的問題。
五、細(xì)節(jié)表現(xiàn)
5.1 Pjblog默認(rèn)模塊
我們知道Pjblog的很多功能是有模塊構(gòu)成的,而程序默認(rèn)的模塊我們在做Skin的時(shí)候?yàn)榱送ㄓ眯砸脖仨氁⒁舛x的。
5.1.1 日歷式樣
同樣我們要來了解它的結(jié)構(gòu)。
日歷它是一個(gè)側(cè)欄模塊。我們前面說了模塊是包含在側(cè)欄的sidepanel面板里的,然后給各自的模塊一個(gè)唯一的ID。在這里日歷的ID就是Side_Calenbar。那我們就可以對(duì)這class為sidepanel、ID為Side_Calendar的DIV進(jìn)行定義了。對(duì)于class、ID 是怎樣定義式樣的我們前面也說了在這里再復(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這里就是具體的日期了。

我們再來看看進(jìn)一步的結(jié)構(gòu),充分的了解結(jié)構(gòu)才能做好Skin。
Calendar_Top:除了內(nèi)容外還有ID為LeftB和RightB兩個(gè)DIV,分別控制兩個(gè)方向按鈕。我們可以自定義按鈕的圖片
Calendar_week:里面是一個(gè)ul>li>/ul>/li>的結(jié)構(gòu)其中第一個(gè)也就是星期天“日”外面套了一個(gè)font>程序默認(rèn)定義了紅色。我們通過導(dǎo)航的了解知道了這個(gè)結(jié)構(gòu)要使它橫向排列必須用Float,要不見點(diǎn)必須用liststyle:none;
Calendar_Day:這里面的結(jié)構(gòu)和Calendar_week是一樣的,不同的是li里面都包含超鏈接a>,對(duì)不同情況的日期做了不同的Class。日期選中(.click)、今天(.today)、非本月日期(.otherday)、本日存在日志(.haveD)、今天存在日志(.DayD)
那我們來看代碼,日歷的式樣表在模板的typography.css里面。因?yàn)镃SS有繼承的特性,因此我們最好按照默認(rèn)式樣的順序書寫代碼。
文本查看復(fù)制到剪貼板打印©
  1. /*日歷式樣---對(duì)整個(gè)框架進(jìn)行定義,這里定義的內(nèi)容是會(huì)繼承的下面的。也就是說如果下面的不另外聲明就表現(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ā)揮,不過要注意的是寬帶、高度不需要再定義了。*/  
  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 按鈕、信息框和輸入框
    都被指著鼻子說了,實(shí)在是不好意思再偷懶了。由于前段時(shí)間工作的變動(dòng),以及自己的懶惰 這文章一直沒續(xù),今天開始繼續(xù)來完成他。順便自己也對(duì)CSS也溫習(xí)一下。
   以后說的內(nèi)容可能影響的地方不大,都是對(duì)一些細(xì)節(jié)方面的表現(xiàn)。前一節(jié)我們說了默認(rèn)模塊日歷的編排,這最重要的就是要學(xué)習(xí)和了解CSS的繼承性,其他默認(rèn)模塊里面其實(shí)就是一些超鏈接,其他沒什么特別的。
    首先我們要了解這一節(jié)里面我們要對(duì)哪些地方的式樣進(jìn)行定義。內(nèi)容有文本輸入框(用戶名)、密碼輸入框(密碼)、按鈕、置頂日志按鈕、日志分類圖標(biāo)、信息框(確認(rèn)、報(bào)錯(cuò)等等)。而這些部位有些內(nèi)容是在特定的時(shí)候出現(xiàn)的往往一些朋友剛開始做Skin的時(shí)候不注意這些地方,使得模版不夠完美。這些內(nèi)容Pjblog一般都是用類選擇符來定義的,什么是類選擇符我們在第四章第一節(jié)里面做了簡短的說明。
    在CSS里面你只要選擇了一個(gè)元素那你可以把這個(gè)元素看成或認(rèn)為這個(gè)元素就是一個(gè)BOX。在第二章第二節(jié)里面有BOX的Flash模型,你可以盡情的對(duì)他們定義發(fā)揮你的創(chuàng)意。其中輸入框(.inputBox)、密碼輸入框(.userpass)、按鈕(.userbutton)、分類圖標(biāo)(.CateIcon)。這些我們可以定義他們的背景(background)、邊框等等。重要的是他們還具有偽類(什么是偽類,在上面提供下載的CSS2.0手冊里面有詳細(xì)的說明),這樣我們就可以做出鼠標(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-familyVerdanaArialHelveticasans-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ì)于信息框我們來看一下他的結(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è)注冊的表單和就只有一些文字。而需要定義的就是提示(.MessageIcon)、出錯(cuò)(.ErrorIcon)、警告(.WarningIcon)和詢問(.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無論是愿意提供給別人還是自己用建議都應(yīng)該定義一下。
文本查看復(fù)制到剪貼板打印©
  1. /*提示框CSS*/  
  2.    div.nicetitle {   
  3.     positionabsolute;   
  4.     padding4px !important;   
  5.     padding6px 4px 4px 4px;   
  6.     top: 0;   
  7.     left: 0;   
  8.     font-familyVerdanaHelveticaArialsans-serif;   
  9.     font-size12px;   
  10.     width: 15em;   
  11.     background#FFFBD1 url(nicetitlebg.jpg);   
  12.     color#3D2C05;   
  13.     border1px solid #715208;   
  14.     text-alignleft;   
  15. }   
  16.    div.nicetitle p {   
  17.     margin: 0; padding: 0 3px;   
  18. }   
  19.    div.nicetitle p.destination {   
  20.     font-size9px;   
  21.     text-alignleft;   
  22.     padding:3px 0px 0px 3px;   
  23.     color#715208;   
  24. }  

5.3 UBB編輯器以及內(nèi)容
    這應(yīng)該是全部模塊講述里面的最后一個(gè)部分了。有的時(shí)候我們使用UBB編輯器寫的內(nèi)容里包含一些代碼塊,說代碼塊可能不是很好理解。舉例子就像插入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è)置的過小哦,看代碼太小很累的。
說完內(nèi)容部分接下來就說說UBB編輯器的式樣。UBB式樣是包含在模版主目錄里的UBB文件夾里面,里面分別有一個(gè)editor.css的式樣文件、bar.gif的欄目分割圖片、和一個(gè)Icons的圖標(biāo)文件夾。我們可以替換這些圖片但不能改文件名(有的時(shí)候?yàn)榱撕湍0鎱f(xié)調(diào),需要更換UBB圖標(biāo))。這里重點(diǎn)看editor.css這個(gè)式樣文件。我們先開看看UBB編輯器的結(jié)構(gòu)

我們從圖中的結(jié)構(gòu)可以看出,.editorContent部分的內(nèi)容相對(duì)比較簡單就是一個(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。
    說到這里似乎要完了,但還有很重要的一個(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來定義這個(gè)面板的隱藏。這里要注意,隱藏一個(gè)元素有兩種方法visibility:hidden和display:none,這兩個(gè)不同的是display:none不為被隱藏的對(duì)象保留其物理空間。也就是說display:none這個(gè)隱藏了就不占地方了,如果有的時(shí)候你做了一個(gè)800px的模版,但是有時(shí)遇到有橫向滾動(dòng)條的情況,但找不到那里出了問題,那你就試試這里有問題沒有。
六、兼容調(diào)試
    兼容問題一直是設(shè)計(jì)制作模版最頭疼的問題。這里我們就目前主要流行的瀏覽器Firefox和IE6/7做為主要瀏覽器。在我們編寫CSS過程中我們要經(jīng)常的預(yù)覽觀看書寫的效果,這個(gè)預(yù)覽的過程最好使用一種瀏覽器或Firefox或IE,這里推薦使用Firefox。這里我就主要會(huì)出現(xiàn)的問題來進(jìn)行說明。
    居中的問題。我們在要使一個(gè)DIV居中的時(shí)候,首先要對(duì)這個(gè)DIV的父元素(就使這個(gè)BOX的外面一層)設(shè)置text-align為center,然后設(shè)置目標(biāo)DIV的margin為auto;
    尺寸問題。Firefox在設(shè)置padding后會(huì)加上這個(gè)BOX的高度和寬度,而IE就不加。由于Firefox和IE中的BOX模型解釋不一致導(dǎo)致margin相差2px,就是說Firefox下設(shè)置margin:30px,那IE下就顯示的尺寸為28px。margin還有個(gè)問題就是解決辦法在IE7沒出來前是用!important來解決的,IE出來了對(duì)!important認(rèn)識(shí)了那就要另外解決了,解決方法看這里。另外在計(jì)算BOX寬度的時(shí)候一定要記得算上邊框border的寬度。比如
程序代碼 程序代碼
div id="1">
div id="2">div>
/div>

這樣的結(jié)構(gòu)在Pjblog里隨處可見??词綐?BR>
程序代碼 程序代碼

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

這樣的式樣,由于1沒設(shè)置固定的高和寬,而2設(shè)定了高和寬都為100px并且邊框?yàn)?px,那1就被撐開到的高度和寬度尺寸為104px=100px+2px+2px。
    浮動(dòng)的問題,這個(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)的問題會(huì)根據(jù)不同的情況而出現(xiàn),所以在這里就講這些比較常見的問題。同時(shí)推薦一些調(diào)試工具,都是瀏覽器插件。一個(gè)是在IE下的由微軟自己出的Internet Explorer Developer Toolbar,就是英文版的。還有個(gè)就是Firefox的Web Developer Extension
七、打包
    如果你認(rèn)真看過Pjblog的官方文檔,這部分基本沒什么問題了。所謂的打包,就是我們所做的模版的一些文件按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)簽:晉中 云南 陽泉 北海 衢州 寧夏 來賓 鹽城

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Pjblog模板制作教程 超強(qiáng)推薦》,本文關(guān)鍵詞  Pjblog,模板,制作教程,超強(qiáng),;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Pjblog模板制作教程 超強(qiáng)推薦》相關(guān)的同類信息!
  • 本頁收集關(guān)于Pjblog模板制作教程 超強(qiáng)推薦的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章