Pjblog範本製作教學 超強推薦_經驗交流
- WBOY原創
- 2016-05-16 12:09:132172瀏覽
2007.1.30更新…轉載自http://www.dnxh.cn/blog/article.asp?id=155
Pjblog的用戶群越來越大，一個Blog就相當於一個Blogger網路上的家。而現在追求個性的時代，給自己的Blog做過有個性的、符合自己特質的Skin是大家的一個願望。但這畢竟牽涉到一些知識，我們需要透過自己的努力學習來完成我們的願望。我將從零說起，大概是這樣的一個過程：準備工作→Skin的構思→製圖→切片→寫CSS→預覽→調試兼容性→美化細節，預覽和編寫是個循環過程。我想透過本教學能夠讓大家了解Skin製作，不需要再用別人做的Skin，靠自己的努力把自己的Blog裝飾的漂亮有個性。很振奮吧，那我們往下看…
一、準備工作
1.1 必需的一些基礎
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-image 圖像
background-repeat 重複方式
background-attachment 是否滾動
background-position 位置
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等等這些是內建標籤。這裡的式樣對裡面的內容和DIV都有效。看程式碼（裡面為CSS程式碼，看成是DIV佈局，以後都是用這種可運行程式碼表示，不在重複）
Pjblog的用戶群越來越大，一個Blog就相當於一個Blogger網路上的家。而現在追求個性的時代，給自己的Blog做過有個性的、符合自己特質的Skin是大家的一個願望。但這畢竟牽涉到一些知識，我們需要透過自己的努力學習來完成我們的願望。我將從零說起，大概是這樣的一個過程：準備工作→Skin的構思→製圖→切片→寫CSS→預覽→調試兼容性→美化細節，預覽和編寫是個循環過程。我想透過本教學能夠讓大家了解Skin製作，不需要再用別人做的Skin，靠自己的努力把自己的Blog裝飾的漂亮有個性。很振奮吧，那我們往下看…
一、準備工作
1.1 必需的一些基礎
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-image 圖像
background-repeat 重複方式
background-attachment 是否滾動
background-position 位置
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等等這些是內建標籤。這裡的式樣對裡面的內容和DIV都有效。看程式碼（裡面為CSS程式碼，看成是DIV佈局，以後都是用這種可運行程式碼表示，不在重複）
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：一個css 的小問題_基礎教程下一篇：一個css 的小問題_基礎教程