准备篇：
1.懂得使用PS软件或相关制图工具。在制作之前要把设计风格在自己脑中形成一个整体的概念，建议保存图片的时候都留一份PSD源文 档，方便日后多添少补的修改工作。
2.完全不懂HTML语言和CSS怎么办？没关系，只要按照教程一步步耐心的去做，看起来很难的代码其实也会变得很有趣。
3.善用网络搜索工具，先尽自己的努力去解决困难，再去询问他人，只有这样才能让你学得更深刻。有时候，仅仅是一个标点的格式问题可能就够你折腾半天的，所以千万要细心和耐心哦！
学习篇：
进入你的博客后台----选用模板----我的模板----建立新的模板：
整体结构图：
先加入以下代码：
@import url("/fbui/share/global_1.css");
@import url("/fbui/share/comment_1.css");
@import url("/fbui/share/search_1.css");
@import url("/fbui/share/calendar_1.css");
body（窗体）的设置：
body {font-size:12px;font-family:"Verdana", "Arial","Tahoma";background:url(图片地址); color:#705778;}
总体字体大小；总体字体类型；图片地址（把括号内的内容更换为图片的http地址）若没有图片也可以使用背景颜色，此时代码变为background:#******(下文背景设置同此处）；blog普通状态下字体的颜色，默认为黑色；
tips：建议背景图片使用100×100或者更小的无接缝图片
-------------------------------------------------------------------------------------------------------
wrapper（总页面）的设置：
#wrapper {background:url(图片地址);width:800px;margin-left:auto; margin-right:auto;}
内背景的图片地址，可把图片裁剪成一无接缝的小横条，可以加快显示速度；背景图片的宽度，可以根据顶部banner的宽度来设计；总页面自动居中的代码，即上下左右都留有body背景；
tips：此处可自定义设置margin:*px *px *px *px 的位置，使得总页面背景按照你所要的效果显示。
-------------------------------------------------------------------------------------------------------
head（头部）的设置：
#head {background:url(图片地址) no-repeat;height:165px;width:765px;}
头部banner的地址；头部图片的高度；头部图片的宽度；此处的px为象素，具体值可以根据实际图片来调整
#menu {position:absolute;width:734px;top:310px;background:none;}
这条是设置分类栏的代码：红色部分为分类栏的位置---绝对；黄色部分为从顶部开始距离分类栏的位置；蓝色部分为分类栏的宽度；
#menu h3, #menu li span{display:none;}
#menu ul {padding:0;margin:5px;}
#menu li {list-style:none;float:left;margin:0 18px 0 18px;}
第一条代码是指每个分类栏不显示文章数，若把display:none改为font-size:8px就代表把文章数定义为8号字体，当然也可以设置其他属性。
第二条不太清楚
第三条指增大分类字体之间左右补白。
tips:我们在设计的时候可以把分类栏和顶图合在一个banner里面设计，然后在通过menu代码调整分类栏字体的位置。
-------------------------------------------------------------------------------------------------------
footer（底部）的设置：
#footer {clear:both;background:url(图片地址);no-repeat top;height:56px;margin:0px 0 0 0;}
红色部分为footer图片地址；黄色部分为图片高度；蓝色部分为图片距离上右下左的位置；
-------------------------------------------------------------------------------------------------------
main（主体）中间部分的设置：
#main {margin:0px 8px 0px 8px;}
#inner {float:left;width:100%;}
个人理解main和inner应该是一个意思，都是包括了sidebar和content2个部分的。
这里引用希儿的话：#main说白了控制的就是这个主体wrapper的内部位置，因为wrapper是一个两边有些阴影的图案，我们的内容总不可能完全顶到两边的头上显示吧？总会留有一定的距离，main就控制了这个距离。我这里定义的是距左右都有8px的距离。
这里引用Evan的话:这里有一个名叫inner 的div设置，此div是包含content和sidebar的框架。这里的float:left表示的是对其方式是左，可以根据你的需要改成你想要的。
sidebar(侧边栏）的设置：
首先我们先来看一下侧边栏的结构图：
#sidebar {float:left;width:188px;margin:13px 0 0 7px;background:none;}
红色部分是边栏的位置；绿色部分是边栏的宽度；蓝色是边栏与main页面边之间的距离；黄色部分是边栏的背景，可设置为有背景图片/背景颜色/无背景
#sidebar h3 {margin:0;cursor:pointer;no-repeat right;font-size:12px;height:23px;background:#86d1d1;padding:0 0 0 13px;color:#ffffff;}
这段代码是设置边栏头部的代码。红色是设置边栏头部的颜色代码，也可以自定义图片，紫色是设置边栏头部字体的颜色，绿色是设置高度，蓝色是设置边栏头部字体到边部的距离。
tips：此处padding是调整字体距离边栏头部上右下左的距离，其中上/下的象素值＋height的象素值为边栏头部图片本身的高度值，若两者相加超出边栏头部本身的高度值时，会出现错位的现象。
#sidebar ul {margin:0 0 30px 0;padding:5px 0 0 5px}
利用这里面的值调整一下分类之间的距离和每个分类里内容的距离
#comment li{white-space:nowrap;overflow:hidden;width:156px;margin:0;padding:3px 0 3px 0px;}
这句是定义最新回复那里字体不换行，并且把多出来的字体隐藏掉；另外还可以调整内外补白，来定下字体间的距离。这里是指最新回复里面所有字体占的宽度
content（日志）的设置：
.normallog {float:left;background:#EB9699;margin:10px 0 0 0px;padding:0 0px 0 0px;filter:Alph(Opacity=80);} 这句是定义整个日志content块的。橙色的是日志内容背景的颜色，也可以自定义图片；蓝色为日志背景块距离上右下左的位置；绿色为背景色块的透明度设置，这里的80指不透明度80％，具体数值自己调。
.normallog h4 {background:#e7e6e6;no-repeat;padding:5px 5px 5px 5px;margin:13px 5px 18px 0px;font-size:11px;font-weight:normal;color:#cccc33}
红色是设置日志标题的背景的颜色，可以自定义图片。绿色是设置日志标题背景色块的大小，具体设置可以自己调试。蓝色是设置日志标题后面时间的颜色。
.normallog h5 {font-size:9px;font-weight:normal;text-align:right;padding:0px 0px 0px 0px;height:0px;display:none}
这句是定义题目下面的作者名字和分类的。
.normallog .text{width:600px;padding:0 0 0 8px;color:#381402;font-size:12px;}
定义日志摘要文字的属性。橙色部分为摘要文字的宽度，亦可把600px设置为宽？％多少；蓝色部分为摘要文字总体距离上右下左的距离；黄色部分为摘要文字的颜色；紫色部分为摘要文字的大小。
.normallog h6 {color:#A36062;}
定义下面那个回复、引用、评论的字体
这里引用希儿的话：如果用英文，这里可以设置字体小一些会比较好看，可以加个font-size:10px;这里还有个小细节就是计数默认为斜体，如果看着不顺眼需要加这样一句变成非斜体。em {font-style:normal;}当然，它不是写在normallog h6{}里面的，而是单分出来的。
tips:此处关键的是h4的设置，特别是内外补白的设置，弄不好会出现错位的现象，所以只能一次次修改数值，然后刷新察看了。
-------------------------------------------------------------------------------------------------------
关于字体的一些设置：
普通状态下的字体：
body {font-size:12px;font-family:"Tahoma";background:url(http://www.whoyoo.com/back.gif); color:#705778;}
a:link {text-decoration : none;color:#A3F63E;font-weight: bold;}
a:visited {text-decoration : none;color:#A3F63E;font-weight: bold;}
a:hover {text-decoration:none;color:#94B5D7;cursor: crosshair;}
分类栏上的字体：
#menu {position:absolute;width:765px;top:128px;}
#menu a:link {color:#3C6749;font-weight:normal}
#menu a:visited {color:#674349;font-weight:normal} #menu a:hover {color:#A33F3E;}
日志标题栏的字体：
.normallog h4 {font-size:10px;font-weight:normal;color:#9468D7}
.normallog h4 a:link {color:#A37F3E;font-weight:bold;font-size:12px;}
.normallog h4 a:visited {color:#A37F3E;font-weight:bold;font-size:12px;}
.normallog h4 a:hover {color:#9468D7;font-size:12px;}
tips：
#XXX{定义普通状态字体和这块儿区域的样式} -------这个#XXX{}是本身存在的，下面的三个是后添加的
#XXX a:link{定义链接字体样式}
#XXX a:hover{定义鼠标移到链接时的字体字体样式}
#XXX a:visited{定义已访问过的链接}
-------------------------------------------------------------------------------------------------------
去掉一些不美观的信息：
去掉RSS图标加这句： .rss,.rss_c{display:none;}
去掉顶图上的名字和blog名加这两句： #head h1 {display:none;}和 #head p {display:none;}
页面全部显示英文，可添加如下代码.cn {display:none;}
页面全部显示中文，可添加如下代码.en {display:none;}
.category,.z_close,.z_list,.z_normal,.link_c,.z_post,.z_admin {display:none;}去掉日志上方＋－PA那4个按钮！
-------------------------------------------------------------------------------------------------------
到此为止，一个blog的主页面基本显示出来了。每次弄新的模板，都主要参考VAL和希儿的教程，此文算是我在看了她们教程之后的一个总结，希望为自己日后做模板整理一个清晰点的头绪出来。下面给出一些教程的地址。
5D模版制作傻瓜版：http://blog.5d.cn/user18/Val/200607/286056.html
5D模板制作傻瓜版（二）：http://blog.5d.cn/user18/Val/200611/335552.html
5D新界面制作攻略--希儿白话版^__^：http://blog.5d.cn/vip/silver/200512/188084.html
白皮书（2）：5DBlog CSS 框架参考：http://blog.5d.cn/vip/abc/200511/185943.html
博客模板修改备忘 ：http://blog.5d.cn/user2/skyline-moon/200512/186101.html
blog小教程 ---- 基本解析和css部分的字体设置（罗嗦了好多）：http://blog.5d.cn/vip/silver/200507/128688.html
5dblog『超合金功略』：http://blog.5d.cn/vip/evannan/200608/297960.html
回复Comments
{commenttime}{commentauthor}
{CommentUrl}
{commentcontent}