Pjblog皮肤制作循序渐进教程

如果遇到有文件要下载的请到上面的地址下载，谢谢！！
论坛不支持可运行代码，相关代码可以自己调试，也可以到我的站上运行调试
配合番茄的视频教程我想大家会对Skin制作有个更新的认识。
因为个人水平有限，有不对的地方请大家指出。

Pjblog的用户群越来越大，一个Blog就相当于一个Blogger网上的家。而在现在追求个性的时代，给自己的Blog做过有个性的、符合自己特点的Skin是大家的一个愿望。但这个毕竟涉及到一些知识，我们需要通过自己的努力学习来完成我们的愿望。我将从零说起，大概是这样的一个过程：准备工作→Skin的构思→制图→切片→编写CSS→预览→调试兼容性→美化细节，预览和编写是个循环过程。我想通过本教程能够使大家了解Skin制作，不需要再用别人做的Skin，靠自己的努力把自己的Blog装饰的漂亮有个性。很振奋吧，那我们往下看……
一、准备工作
1.1 必需的一些基础
你要有学习知识的欲望，这个是一切的前提。你对Pjblog的使用有一定的了解（如果你还不知道Skin是什么、怎么安装，建议你不要往下看）。在做Skin的时候要细心，严格要求自己，有一定的审美观。最好熟悉一些制图软件（Adobe Potoshop、Fireworks之类）。
2.2 涉及的工具
首先你要有太电脑，并且显示器的色彩不是很差（我的本本的液晶显示器让我哭笑不得呀……）。制图软件Adobe Potoshop、Fireworks之类。CSS编写工具，你当然用记事本也可以写。色彩调配软件，屏幕截图软件。Macromedia Studio 8.0 官方简体中文正式版
比较认同的网页制作类软件，这里我们主要是用套装里面的 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是怎