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是怎么组成的呢？这里已经有高人Douglas做个个Flash模型，里面很明白的说明了margin，background-color，background-image，padding ，border 以及他们之间的关系。
当然这些是Pjblog的主体部分，每个部分里面还包含一些其他DIV，而这些细节（像横向菜单、侧栏内容面板、主内容模块等等）也是美化我们Blog的要点，但这个我们慢慢来。先看主体这样先可以在你的脑海里有个Skin的大概样子，为我们下面的制图做好充分的准备。
三、制图
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
等等这些是内置标签。这里的式样对
里面的内容和DIV有效。看代码（里面为CSS代码，看作是DIV布局，以后都是用这种可运行代码表示，不在重复）
复制内容到剪贴板
代码:
通过预览我们可以看到一个背景式样了，那其他的说怎么没提现呢。那是没有内容在里面，你可以试着在
之间添加代码或文字看看。你也可以改变式样里的属性看看起了些什么变化（如果你不知道属性是什么，建议你看看上面的《苏昱式样表中文手册2.0》）。你可以把
background-color:
的属性改成
#000
看看，背景是不是成黑色的了。是不是感觉有点成就感呢（我当时就感觉到了-_-!!）。千万不要拘束于这几个标签，你可以试着用更多标签和属性的组合来改变外观。这样你才有可能做出有个性的Skin。
4.2主体式样
我们把全局式样看作是
的话，那就把主体式样看作是
#container
。说到这里我们可能有点明白了CSS的编写其实是一个细化的过程。为什么这么说呢？你看
#container
其实是包含在
里的，而我们以后说的有都是包含在
#container
里的。
通过上面的模型可以看出，
#container
里包含了
#header、#Tbody、#foot
通过这几个的定义我们就可以实现上面所画的图了。我们在上面的代码上继续添加，看代码
复制内容到剪贴板
代码:
首先我们在里添加了需要的
主体
顶部
内容
底部
我们先从#container加起（为什么要加个#号，不明白的去看手册）。
#container{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我们可以留空有更大的活动性。
复制内容到剪贴板
代码:
看到了，哈哈。整个结构是不是好像成型了。这里我们定义了#header。
#header {
816px;
宽度，这里也就是图片的宽度
height:110px;
高度，这里也就是图片的高度
text-align:left;
内容左对齐，因为我们以后里面的Blog名字是要靠左的。
background:url(skins/dnxh10/top.jpg) no-repeat;
背景路径，不重复
}
底部的定义也一样。就不在罗嗦了。
PS:
这里的
因为里面没内容，而设置的高度做演示用的。
4.3顶部式样
顶部的美化很重要，因为用户打开你的Blog的时候首先进入眼帘的就是顶部。做顶部式样的时候你要知道顶部式样是在什么地方，他的结构是怎样的。顶部式样就是Header和他里面的内容，结构我们可以通过上面的Flash模型来了解。我们还是看代码：
复制内容到剪贴板
代码:
酷秀网络
dnxh:电脑绣花、电脑协会、电脑笑话、呆脑小孩、等你喜欢……
首页
聚合器
不知道为什么这段不能加式样，可能是和页面的代码一样的缘故吧。那我们就不加，我们先来分析一下结构，看每个元素的作用是什么。我们先设置一下#header的式样，上面我们已经说过了。
#container #header{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是个整体式样。里面包含了一个的结构。
关于项目列表
,而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{}
...