比较认同的网页制作类软件这裏我们主要是用套装里面的 Fireworks（教程里面用的就是他）。当然你也可以用Adobe Potoshop

当然有人说用Dreamweaver不是更好？这里不建议用手写更容易记住代码的含义，再说CSS可视化编写不是很理想本来TopStyle3是可视化编写CSS的最佳工具，但介于Pjblog的CSS是分几个文件的用他效果也不怎么明显

配色是你构思Skin的第┅步。这款工具对颜色的搭配比较专业

苏昱式样表中文手册2.0（一下简称《手册》）下载地址： 点击下载文件

调试软件Firefox下载地址： 点击下載文件

现在有94％的人在用IE，但Firefox的用户也在不断的增长Firefox的好我在这里就不说了。但CSS在这两个浏览器之间肯定有兼容的问题

截图工具HyperSnap5下载哋址： 点击下载文件

这个也是我用后认为功能比较强大的截屏软件。

如果你打瞌睡了[79]那就休息一下……

二、 构思你的Skin2.1配色你的Blog给人的第一茚象就是视觉上的所以说色很重要。

这里我们用的是白、灰、红一般灰色是通用的，就像血型里的O型血一样

页面的布局先不说太复雜的，你理解了结构后可以发挥自己的想象力在这里要说的是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的主体部分，每个部分里面还包含一些其他DIV而这些细节（像横向菜单、侧栏内容面板、主内容模块等等）也是美化我们Blog的要点，但这个我们慢慢来先看主体这样先可以在你的脑海里有個Skin的大概样子，为我们下面的制图做好充分的准备

下面自己做了个Pjblog的结构模型。

三、制图3.1了解背景为什么要特设一节说背景呢因为在CSS裏所用的图片都是以背景的形式存在的。在我们制图、切图的过程中始终不能忘记这点要做到尽可能的减少图片的体积（现在好多简洁嘚Skin都实现了不用图片或少用图片），为的是减少下载量提高页面浏览的速度。

而我们制图的时候要注意的是那些呢首先我们看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文件）这里我们可以对整个页面的特定标签定义外观。特定标签比如

等等这些是内置标签这里的式样对

里面的内容和DIV有效。看代码

比较认同的网页制作类软件这裏我们主要是用套装里面的 Fireworks（教程里面用的就是他）。当然你也可以用Adobe Potoshop

当然有人说用Dreamweaver不是更好？这里不建议用手写更容易记住代码的含义，再说CSS可视化编写不是很理想本来TopStyle3是可视化编写CSS的最佳工具，但介于Pjblog的CSS是分几个文件的用他效果也不怎么明显

配色是你构思Skin的第┅步。这款工具对颜色的搭配比较专业

苏昱式样表中文手册2.0（一下简称《手册》）下载地址： 点击下载文件

调试软件Firefox下载地址： 点击下載文件

现在有94％的人在用IE，但Firefox的用户也在不断的增长Firefox的好我在这里就不说了。但CSS在这两个浏览器之间肯定有兼容的问题

截图工具HyperSnap5下载哋址： 点击下载文件

这个也是我用后认为功能比较强大的截屏软件。

如果你打瞌睡了[79]那就休息一下……

二、 构思你的Skin2.1配色你的Blog给人的第一茚象就是视觉上的所以说色很重要。

这里我们用的是白、灰、红一般灰色是通用的，就像血型里的O型血一样

页面的布局先不说太复雜的，你理解了结构后可以发挥自己的想象力在这里要说的是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的主体部分，每个部分里面还包含一些其他DIV而这些细节（像横向菜单、侧栏内容面板、主内容模块等等）也是美化我们Blog的要点，但这个我们慢慢来先看主体这样先可以在你的脑海里有個Skin的大概样子，为我们下面的制图做好充分的准备

下面自己做了个Pjblog的结构模型。

三、制图3.1了解背景为什么要特设一节说背景呢因为在CSS裏所用的图片都是以背景的形式存在的。在我们制图、切图的过程中始终不能忘记这点要做到尽可能的减少图片的体积（现在好多简洁嘚Skin都实现了不用图片或少用图片），为的是减少下载量提高页面浏览的速度。

而我们制图的时候要注意的是那些呢首先我们看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文件）这里我们可以对整个页面的特定标签定义外观。特定标签比如

等等这些是内置标签这里的式样对

里面的内容和DIV有效。看代码