婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > Pjblog模板制作教程 超強推薦

Pjblog模板制作教程 超強推薦
熱門標簽：電銷智能機器人靠譜么 南通電話外呼系統開發 沸思外呼線路 北京銷售外呼系統線路 電銷機器人的宣傳語 400電話辦理安徽 南寧外呼電銷系統招商 江西防封卡外呼系統怎么安裝 石家莊電話機器人電話
2007.1.30更新……轉載自 http://www.dnxh.cn/blog/article.asp?id=155
Pjblog的用戶群越來越大，一個Blog就相當于一個Blogger網上的家。而現在追求個性的時代，給自己的Blog做過有個性的、符合自己特點的Skin是大家的一個愿望。但這個畢竟涉及到一些知識，我們需要通過自己的努力學習來完成我們的愿望。我將從零說起，大概是這樣的一個過程：準備工作→Skin的構思→制圖→切片→編寫CSS→預覽→調試兼容性→美化細節，預覽和編寫是個循環過程。我想通過本教程能夠使大家了解Skin制作，不需要再用別人做的Skin，靠自己的努力把自己的Blog裝飾的漂亮有個性。很振奮吧，那我們往下看……
一、準備工作
1.1 必需的一些基礎
你要有學習知識的欲望，這個是一切的前提。你對Pjblog的使用有一定的了解（如果你還不知道Skin是什么、怎么安裝，建議你不要往下看）。在做Skin的時候要細心，嚴格要求自己，有一定的審美觀。最好熟悉一些制圖軟件（Adobe Potoshop、Fireworks之類）。對CSS方面番茄做過很不錯的教程（需要注冊）。
2.2 涉及的工具
首先你要有太電腦，并且顯示器的色彩不是很差（我的本本的液晶顯示器讓我哭笑不得呀……）。制圖軟件Adobe Potoshop、Fireworks之類。CSS編寫工具，你當然用記事本也可以寫。色彩調配軟件，屏幕截圖軟件。這些基本在本站都有下載，為了防止站點流量過大被K，我只能加了下載級別，并隨機變換下載地址。請注冊后下載，謝謝你的合作！
Macromedia Studio 8.0 官方簡體中文正式版
電驢下載地址:http://lib.verycd.com/2005/10/14/0000069569.html
比較認同的網頁制作類軟件，這里我們主要是用套裝里面的 Fireworks（教程里面用的就是他）。當然你也可以用Adobe Potoshop。
CSS編寫工具EditPlus V2.1.2 Build 147 漢化版
下載地址：下載文件 點擊下載文件
當然有人說用Dreamweaver不是更好？這里不建議用，手寫更容易記住代碼的含義，再說CSS可視化編寫不是很理想。本來TopStyle3是可視化編寫CSS的最佳工具，但介于Pjblog的CSS是分幾個文件的用他效果也不怎么明顯。
Color Schemer Studio1.5配色工具
下載地址：下載文件 點擊下載文件
配色是你構思Skin的第一步。這款工具對顏色的搭配比較專業。
蘇昱式樣表中文手冊2.0（一下簡稱《手冊》）
下載地址：下載文件 點擊下載文件
調試軟件Firefox
下載地址：下載文件 點擊下載文件

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

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

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

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

我們看到的是兩條帶質感的半透明的橫條壓在主體上，
我們畫兩個矩形，寬度大于畫布（因為我們要這兩條自適應寬度）。通過調節漸變給矩形加點質感，調整透明度為80。

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

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

整體的PNG分層文件提供給大家研究。下載文件 點擊下載此文件
我們打開這個文件可以看到。如頭部、主體背景、底部他們的寬度不是我們剛開始的時候說的800px，那是因為我們在外面加了陰影。一定要把這個尺寸算進去（一般要求算，而不是看陰影和背景色差不大的時候容易搞錯，要做到仔細）。而全局背景并不需要拉的很高，因為下面的白色我們完全可以用CSS做，大了就浪費了。還有就是按鈕背景圖，如果你是有鼠標接觸式樣的建議你不要分兩張圖，我們做在一張圖上，通過CSS控制圖片的位置來實現不同的背景，這個等說到CSS的時候再詳細說。
四、編寫代碼
4.1全局式樣
終于進入了核心部分，我們將用CSS＋DIV美化我們的Blog。有好多朋友總是問這樣一個問題，我怎樣做Skin。我這里想說的是你先要了解CSS和DIV的關系。DIV就像房子的骨架（磚墻等等），而CSS就是室內外裝潢，你不了解骨架是怎么構成的你怎么去裝潢呢？還有要說的重要的一點是CSS的特點之一，后面定義的取代前面定義的。比如說我在全局式樣里定義了字體顏色是紅的，而在后面主體里面定義了顏色是藍的，那我們看到的就是藍的。
我們進入正題，先說全局式樣（在Pjblog里面是Skin文件夾下面的global.css文件）。這里我們可以對整個頁面的特定標簽定義外觀。特定標簽比如body、img、select、th等等這些是內置標簽。這里的式樣對body>/body>里面的內容和DIV有效。看代碼（style type="text/css">/style>里面為CSS代碼，/head>看作是DIV布局，以后都是用這種可運行代碼表示，不在重復）

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

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

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

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

       div id="tbody">內容
       /div>

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

/div>
我們先從#container加起（為什么要加個#號，不明白的去看手冊）。
#container{width:816px;寬度，應該和你切片的時候有所對應
             text-align:center;內容居中
             margin:0 auto;邊框為零。這里要注意的是，要#container居中我們必須設置margin為auto而且父元素（body）為text- align:center;
                    background:url(skins/dnxh10/cont_bg.jpg) repeat-y;背景路徑并以Y方向重復。
                    height:600px;
}
現在預覽一下看看，好像主體出來了。但頂部不是我們想象的那樣呀！在#container上不是有三個元素嗎，那我們再來定義一下#header和#foot就可以了。#tbody我們可以留空有更大的活動性。
HTML代碼


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

看到了，哈哈。整個結構是不是好像成型了。這里我們定義了#header。
#header {
                 width:816px;寬度，這里也就是圖片的寬度
                 height:110px;高度，這里也就是圖片的高度
                 text-align:left;內容左對齊，因為我們以后里面的Blog名字是要靠左的。
                 background:url(skins/dnxh10/top.jpg) no-repeat;背景路徑，不重復
}
底部的定義也一樣。就不在羅嗦了。
PS:這里的div id="tbody" style="height:500px">因為里面沒內容，而設置的高度做演示用的。
4.3頂部式樣
頂部的美化很重要，因為用戶打開你的Blog的時候首先進入眼簾的就是頂部。做頂部式樣的時候你要知道頂部式樣是在什么地方，他的結構是怎樣的。頂部式樣就是Header和他里面的內容，結構我們可以通過上面的Flash模型來了解。我們還是看代碼：
HTML代碼


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

不知道為什么這段不能加式樣，可能是和頁面的代碼一樣的緣故吧。那我們就不加，我們先來分析一下結構，看每個元素的作用是什么。我們先設置一下#header的式樣，上面我們已經說過了。
  #container #header{width:816px;height:110px;background: url(top.jpg) no-repeat;text-align:left;}
#blogname就是我們的Blog的名字，他包含了#blogtitle子元素。我們設置的時候先設置#blogname再設置#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}
在這里我們設置了#blogname的字體大小、顏色、粗體、和浮動左、補白的距離。而blogtitle設置了不顯示。
再往下看，看到了#left和#right兩個元素，看命名的意思我們就知道了。那是#header兩頭的式樣，我們可以靠float:left和float:right來實現，在這個式樣里我們不需要設置。這個主要可以實現圓角之類的#header。
#menu是菜單項，一般我們看這里的時候比較糊涂，再加上含有float屬性，運用起來比較難以駕驅。我們來分析一下：
#menu是個整體式樣。里面包含了一個ul>li>/li>/ul>的結構。關于項目列表,而li里面又有綁定了式樣，分別是menuL、menuA、menuDIV、menuR分別的作用就是menuL利用Float:left;控制菜單左端的式樣，menuDIV控制菜單項目之間的式樣也就是分隔符，而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;是實現橫向菜單的必要條件，list-style:none;是消除列表前的小圓點的。
僅僅就這些式樣頂部還是不完美的。我們要設置菜單的鏈接式樣。也就是我們剛才少一個沒說的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是鼠標接觸的式樣，其實還有個:active（在鼠標點擊與釋放之間發生的事件時的樣式）這里有個書寫的順序“LoVe/HAte”（愛/恨）鏈接規則：Link, Visited, Hover, Acitve。具體參數可以參照手冊。
4.4內容式樣
內容式樣里包含的元素比較多，變換也比較多，我們看看到底要做的是那些式樣。首先是內容#Tbody，這個里面在首頁的時候包含的是主內容#mainContent和工具條也就是側欄#sidebar。而在登陸頁的時候里面就是登陸框，注冊頁，還有信息提示出錯，恭喜通過什么這些就是消息框式樣#MsgContent。如果你看過以前的式樣文件里的Layout.css的你可能會發現一個問題，我上面說的這些標簽都是帶#號的也就是ID選擇符，而上面沒有提及是.開頭的是類選擇符，也就是class="*"。為什么會有這樣的命名方式，我們知道Pjblog是一個模塊化的程序。我們可以自己自定義側欄模塊和內容模塊，也就是說側欄工具條里的若干個工具箱里的ID（模塊標識）是可以自己定義名字的，內容里的模塊也是如此。這就為我們的模板創造了更多式樣的可能。你可以這樣理解，首先我們用了統一的類class，再個我們又給每個工具箱定義了唯一的一個ID，那我們通過這兩組合就可以定義每個工具箱的式樣了。形式如下：

我們從側欄開始，側欄的結構很清晰。一個#sidebar主元素，里面包含了#sidebar-topimg、#innersidebar、#sidebar-bottomimg三個子元素，很明顯#sidebar-topimg、#sidebar-bottomimg是側欄的頂部和底部的式樣，而#innersidebar里面是放工具箱.sidepanel的。工具箱.sidepanel又作為一個主元素，里面包含了.Ptitle標題、.Pcontent內容面板、.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就是我們自定義的模塊標識。這個在后臺模塊設置里可以自己定義。

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


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

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

然后我們看主內容的式樣。主內容的式樣比側欄要復雜一點，首先主內容的標簽是#innermainContent，這也是一個三欄（或說成是多欄，因為可以添加自定義模塊）的布局。包括了頭部#mainContent-topimg、中欄#Content_Contentlist和底部#mainContent-bottomimg。我們可以分別定義他們的式樣，頭部和底部已經是最基層的DIV了，不含有子元素了，你可以盡情的定義他們的式樣，不用考慮他里面還有什么式樣，這句話的含義就是定義完后就是最終式樣了。而#Content_Contentlist是程序的默認模塊，是不可以刪除的，在后臺設置模塊的最下面一個。如果你增加了內容模塊，那增加的那些內容模塊就像上面側欄說到的一樣，可以自由定義。這里也要注意的是：PJ內容模塊的ID命名規則：比如內容模塊標識是Contentlist那這個模塊的ID就是#Content_Contentlist，要在內容模塊標識前加Content_，這個很重要
自定義模塊因為具有不確定性，我在這里就不具體的說了，著重說說Contentlist這個默認模塊。這里面的內容和側欄一樣不再是用ID選擇符了，用的是類選擇符。首先#Content_Contentlist包含了兩欄，.pageContent和.Content，.pageContent是分頁式樣，這也是最終定義的式樣。具體的是那部分呢，我們看下圖：

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

再下面就是正文了.Content-body了。在單篇日志里因為【文章來自】【引用通告地址】【Tags】等內容也賦予了.Content-body這個類，為了和【文章來自】【引用通告地址】【Tags】區別還給這個ID加了#logPanel標簽，在首頁里是沒有的。其實在首頁里加個也可以，我在做Yahoo Weight這個式樣的時候，內容首字母式樣就在首頁加了個#logPanel標簽，可以單獨控制日志內容和首頁摘要的式樣。
內容里除了這些式樣外還有評論框式樣.comment和信息框式樣#MsgContent、UBB框.comment。
評論框式樣.comment一般是在單篇日志內容里，他是一個兩欄的布局。里面包含了.commenttop和.commentcontent兩個類。

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


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

從上面的代碼可以看到，我并不沒有用多少式樣，我只用了背景色和前景色來區別各個元素。看上去可能不是很漂亮，重要的是自己改。有些時候一個元素里沒有內容，我們就不容易了解這個元素的存在。我一些模塊里沒有文字等內容的元素添加了文字說明。你可以試著把CSS代碼刪掉或改動，來進一步了解沒個元素的作用。這里還有個小技巧，在首頁普通模式下Pjblog給每個日志摘要都給于了一個ID，單獨定義或批量定義式樣，命名規則是"log_"+"日志ID號"。我們從上面的代碼可以看到日志173和174的不同的地方。那日志的ID怎么知道？我們把鼠標挪到日志的鏈接那里，看到鏈接的最后有?id=***這樣的，就是日志的ID了。
單篇日志狀態
單篇日志狀態和首頁有很大的不同。里面包括的內容有自定義模塊、分類和上下篇（.pageContent）、標題作者日期（.ContentTitle.ContentAuthor）、自定義字體大小和日志等級天氣情況（.Content-Info）、內容、評論分頁（pageContent）、評論（comment）、發表評論框（MsgContent）等等。
看代碼
HTML代碼


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

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


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

很清楚，一個Foot標簽的DIV和兩個p>。通過前面的學習我想大家應該了解怎么做了。其實一般這個不需要我們設置，基本的字體大小什么的都默認已經定義了。但我們可以要在底部加一些圖片之類的，利用padding、margin等屬性控制文字的位置，文本的左對齊、右對齊等等。這里要了解的一點是對p>的控制，程序里面用了兩p>字段，可能在設置邊框或補白的時候出現分行的問題。
五、細節表現
5.1 Pjblog默認模塊
我們知道Pjblog的很多功能是有模塊構成的，而程序默認的模塊我們在做Skin的時候為了通用性也必須要注意定義的。
5.1.1 日歷式樣
同樣我們要來了解它的結構。
日歷它是一個側欄模塊。我們前面說了模塊是包含在側欄的sidepanel面板里的，然后給各自的模塊一個唯一的ID。在這里日歷的ID就是Side_Calenbar。那我們就可以對這class為sidepanel、ID為Side_Calendar的DIV進行定義了。對于class、ID 是怎樣定義式樣的我們前面也說了在這里再復習一下。前者是類選擇符，表現形式為：.類屬性。后者是ID選擇符，表現形式為：#ID名稱。以后就不再重復了。一般為了Skin的統一協調是對sidepanel進行統一定義的，只有特殊式樣的時候才定義這個ID為Side_Calendar的DIV。當然這個DIV里面和其他側欄面板一樣同樣有一個Class為Ptitle的H4標簽、一個Class為Pcontent的內容DIV和一個Class為Pfoot的底部DIV。
日歷的主要內容是在Pcontent里的一個ID為Calendar_Body的DIV。這里面一共保護了7行。一個ID為Calendar_Top的DIV里面顯示的就是XXXX年XX月和兩個方向按鈕，一個ID為Calendar_week的DIV里面顯示的是星期， 還有5個都是ID為Calendar_Day的DIV這里就是具體的日期了。

我們再來看看進一步的結構，充分的了解結構才能做好Skin。
Calendar_Top:除了內容外還有ID為LeftB和RightB兩個DIV，分別控制兩個方向按鈕。我們可以自定義按鈕的圖片
Calendar_week:里面是一個ul>li>/ul>/li>的結構其中第一個也就是星期天“日”外面套了一個font>程序默認定義了紅色。我們通過導航的了解知道了這個結構要使它橫向排列必須用Float，要不見點必須用liststyle:none;
Calendar_Day:這里面的結構和Calendar_week是一樣的，不同的是li里面都包含超鏈接a>,對不同情況的日期做了不同的Class。日期選中（.click）、今天（.today）、非本月日期（.otherday）、本日存在日志（.haveD）、今天存在日志（.DayD）
那我們來看代碼，日歷的式樣表在模板的typography.css里面。因為CSS有繼承的特性，因此我們最好按照默認式樣的順序書寫代碼。
文本查看復制到剪貼板打印©
  1. /*日歷式樣－－－對整個框架進行定義，這里定義的內容是會繼承的下面的。也就是說如果下面的不另外聲明就表現這里定義的內容*/  
  2.   #Calendar_Body{margin:5px 10px 5px 0px;font-family:arial;line-height:120%}   
  3. /*頂部－－－對頂部定義式樣，這里定義了一下文本居中*/  
  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.  /*星期－－－這里要注意的是浮動（float）和寬度（width），寬帶是用的%，這樣做是為了適應個個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使之橫向排列同時注意寬帶也是和上面一樣用的%*/  
  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.  /*日期超鏈接－－－可以定義鼠標式樣等等，包括下面的個個項完全可以自由發揮，不過要注意的是寬帶、高度不需要再定義了。*/  
  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 按鈕、信息框和輸入框
    都被指著鼻子說了，實在是不好意思再偷懶了。由于前段時間工作的變動，以及自己的懶惰 這文章一直沒續，今天開始繼續來完成他。順便自己也對CSS也溫習一下。
   以后說的內容可能影響的地方不大，都是對一些細節方面的表現。前一節我們說了默認模塊日歷的編排，這最重要的就是要學習和了解CSS的繼承性，其他默認模塊里面其實就是一些超鏈接，其他沒什么特別的。
    首先我們要了解這一節里面我們要對哪些地方的式樣進行定義。內容有文本輸入框（用戶名）、密碼輸入框（密碼）、按鈕、置頂日志按鈕、日志分類圖標、信息框（確認、報錯等等）。而這些部位有些內容是在特定的時候出現的往往一些朋友剛開始做Skin的時候不注意這些地方，使得模版不夠完美。這些內容Pjblog一般都是用類選擇符來定義的，什么是類選擇符我們在第四章第一節里面做了簡短的說明。
    在CSS里面你只要選擇了一個元素那你可以把這個元素看成或認為這個元素就是一個BOX。在第二章第二節里面有BOX的Flash模型，你可以盡情的對他們定義發揮你的創意。其中輸入框（.inputBox）、密碼輸入框（.userpass）、按鈕（.userbutton）、分類圖標（.CateIcon）。這些我們可以定義他們的背景（background）、邊框等等。重要的是他們還具有偽類（什么是偽類，在上面提供下載的CSS2.0手冊里面有詳細的說明），這樣我們就可以做出鼠標在和不在的時候的式樣。對于分類圖標你還可以利用BOX的display屬性定義他是否需要顯示。還有就是置頂按鈕，我們知道置頂按鈕有兩種狀態，一個就是打開的時候的狀態（.BttnC），還有一個就是關閉的狀態（.BttnE），這樣我們就可以給兩個不同的圖片作為按鈕了。在當前我的這個Skin上面做了以下定義：
文本查看復制到剪貼板打印©
  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}  

    對于信息框我們來看一下他的結構。

首先我們這個信息框（MsgContent）是包含在Tbody）里面的，這個也要了解的，因為Tbody里的定義一般會繼承到他的子元素里面。我們了解了結構就好辦了分別對這3個BOX定義就是了。
文本查看復制到剪貼板打印©
  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里面可能有一些不同的情況發生，比如包含一個注冊的表單和就只有一些文字。而需要定義的就是提示（.MessageIcon）、出錯（.ErrorIcon）、警告（.WarningIcon）和詢問（.QuestionIcon）的圖標和文字。
文本查看復制到剪貼板打印©
  1. /*信息框圖標以及文字*/  
  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;}  

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

這個只有在header.asp文件里面啟用一個JS文件的時候才有效，但是你做的Skin無論是愿意提供給別人還是自己用建議都應該定義一下。
文本查看復制到剪貼板打印©
  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編輯器以及內容
    這應該是全部模塊講述里面的最后一個部分了。有的時候我們使用UBB編輯器寫的內容里包含一些代碼塊，說代碼塊可能不是很好理解。舉例子就像插入Flash、視頻、代碼、可運行代碼等等。這些我們可以在定義完內容面板式樣后定義這些內容。這些內容就是包含在一個大的元素（.UBBPanel）里面的，同樣是類選擇符。

從上圖中可以看出這個結構很容易理解，同樣我們只要分別把里面的每個元素看成是一個BOX，然后對他們進行定義。而其中的.UBBContent TEXTAREA為文本框多數在可運行代碼里可以看到，里面的字體不要設置的過小哦，看代碼太小很累的。
說完內容部分接下來就說說UBB編輯器的式樣。UBB式樣是包含在模版主目錄里的UBB文件夾里面，里面分別有一個editor.css的式樣文件、bar.gif的欄目分割圖片、和一個Icons的圖標文件夾。我們可以替換這些圖片但不能改文件名（有的時候為了和模版協調，需要更換UBB圖標）。這里重點看editor.css這個式樣文件。我們先開看看UBB編輯器的結構

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

這樣的結構在Pjblog里隨處可見。看式樣
程序代碼 程序代碼

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

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

標簽：晉中 云南 陽泉 北海 衢州 寧夏 來賓 鹽城

巨人網絡通訊聲明：本文標題《Pjblog模板制作教程 超強推薦》，本文關鍵詞  Pjblog,模板,制作教程,超強,；如發現本文內容存在版權問題，煩請提供相關信息告之我們，我們將及時溝通與處理。本站內容系統采集于網絡，涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《Pjblog模板制作教程 超強推薦》相關的同類信息！
  • 本頁收集關于Pjblog模板制作教程 超強推薦的相關信息資訊供網民參考！
    • 推薦文章
    主站蜘蛛池模板： 若羌县| 白沙| 璧山县| 汝南县| 辰溪县| 阳江市| 屏南县| 南京市| 呼玛县| 麦盖提县| 宁海县| 浮山县| 平塘县| 陆川县| 旌德县| 永顺县| 开平市| 湟中县| 壤塘县| 内丘县| 呼伦贝尔市| 根河市| 广河县| 阿鲁科尔沁旗| 德昌县| 龙里县| 山东省| 自治县| 台东市| 普定县| 吉木萨尔县| 崇左市| 布拖县| 东兰县| 辰溪县| 贵德县| 栾城县| 嘉黎县| 大悟县| 凤庆县| 高安市|