此教程是以DIV+CSS制作模板为例，主要针对中级用户对象，比较简单，高手路过吧：
一、工具
绘图工具PHOTOSHOP或FIREWORKS 制作页面工具 DREAMWEAVER或记事本、EDITPLUS 初级用户最好选用DEREAMWEAVER，因为这款软件有可视化窗口，方便大家制作。
二、测试
到OBLOG官方站下载OBLOG程序，然后再安装IIS，把本地机器架设成一个服务器，这样来预览我们制作后模板效果。
三、模板准备工作
新建一个文件夹
oblog，在新建一文件index.html。将文件保存到这个文件夹下。路径是这样：oblog/index.html 在oblog文件夹里建一个文件夹image,这个文件夹是用来放图片和样式表的。也可以不用这样，随个人喜好。
四、模板分析
下面我们以这个模板为例子进行讲解： 看大图地址：http://www.oblog.cn/mobanjiaocheng/oblog.jpg 
在PHOTOSHOP里把图做好，然后对它进行切割。这个模板是左右结构。宽度为1003PX满屏显示。 进入DREAMWEAVER进行编辑 我们在index.html里进行编辑，也就是主模板 不会手写代码，我们来用DREAMWEAVER进行帮助。 1． 我们先建一个样式表，扩展名为
.css的文件，保存到oblog/image路径下．
保存完样式文件，我们来制作头部部分
这是一个单独的图片，做为头部背景图片，把图片保存为headbg.jpg，宽度为1003px，高度为65px. 
ＣＳＳ样式表定义
定义宽度、高度、边距、间距等都要加单位，为0时可以不用加 '">
主体定义
Body {margin:0;padding:0;height:100%;}/**主窗口定义为边距、间距为0，因为窗口会自带10个像素的宽度，高度为100%显示。 Input,Select,Ul,Li,p {margin:0;padding:0}/**表单，li标签进行定义为边距、间距为0，因为它们会自带10个像素的宽度**/ img { border: 0; }/**针对图像进行定义，因为有的时候图片会出现边框。**/ li { list-style: none; }/**做模板时加LI时会出现列表图案，我们将它显示为无。**/ div{ font-size: 12px; }/**将文字定义为12像素，减少以后重复定义。**/ input { font-size: 12px; } /**'">总链接定义**/ a:link{ text-decoration: none; color: #8E8E8E; } a:visited { text-decoration: none; color: #8E8E8E; } a:hover { text-decoration: underline; color: #FFf000; } a:active { text-decoration: underline; color: #8E8E8E; } /**'">头部定义。**/ #head{background:no-repeat url(headbg.jpg) left top;width:1003px;height:65px;}/**将背景图像headbg.jpg 居左居顶 宽度为1003像素，高度为65像素，不重复显示。 /**'">背景图像定义完后，我们来定义用户名以及用户地址**/ #head #headleft{float:left;width30%;line-height:65px;font-size:20px;font-weight:bold;color:#fff;text-align:center;}/**定义宽度为总宽度的30%左对齐的层，字体为20像素，加粗，颜色为白色，文字居中显示。**/ #head #headright{width:30%;float:right; padding:20px 0 0 0;height:30px;}/**宽为总宽度的30%，居右对齐的层，距上边距为20像素，因为我们要用户地址垂直居中显示。**/ : 提示: ：此行样式的意思是：在ID: 为head: 的块中，ID: n: gray-15 auto">的块的样式（嵌套）。这样可以避免重复的ID: 因样式的不同而导致页面混乱，例如：在ID: 为head2: 的块中也有一个名字为#headright: 的块，我们可以定义为：#head2 #headright{: ……}: ，这样，ID: 相同而互不影响。 #head #headright .blogurl{width:90%;height:25px;border:1px solid #ccc;background-color:333; color:#fff;line-height:25px;} '">定义导航部分 
#dao {background-color:#333;width:1003px;padding:0 20px 0 ;color:#fff;world-spacing:10px;text-align:right;height:25px;line-height:25px;border-bottom:1px solid #666;} #dao a{text-decoration:none;color:#fff;} #dao a:hover{text-decoration:underline;color:#fff;} /**'">主体内容部分**/ 重点讲解
#main #mainleft{float:left;width:195px; margin:0; background-color:#23282E;padding:0 10px 0 10px;}/**左层宽为215像素，因为间距离左右有10像素，将宽度+间距总共为215像素 居左对齐。**/ #main #mainright{float:left;width:765px;background-color:#F3F3F3; }/**右层宽为765像素，定背景色为浅灰，居右对齐。**/ '">定义左层样式 MAINLEFT
标题定义 #main #mainleft .tiao{height:40px;color:# A6A6A6;border-bottom:1px dotted # 808186;text-align:left; padding:10px 0 0 0;}/**定义高度为25像素，字颜色为淡灰，文字居左对齐，加下边线为1像素，虚线显示。**/ 内容列表定义 #main #mainleft .text li{color:# 808186;line-height:25px;list-style:none;width:99%px;border-bottom:1px solid #333; text-align:left;} /**定义文字显示样式，用LI是因为我们要来定义文字标题下面有一个下划线，是列表内行的样式。行距为25像素，列表显示无**/ #main #mainleft .text li a{color:# 808186;text-decoration:none;display:block;height:25px;} /**内容链接显示效果，将它设为块级显示，因为我们要定义鼠标经过效果。在给它一个高度。**/ #main #mainleft .text li a:hover{color:# fff;background-color:#000000;} /**鼠标经过效果**/ 日历定义
#calendar{width:180px; }/**定义总宽度**/ #calendar caption {font:12px 'Century Gothic', Arial, Helvetica, sans-serif; }/**内容定义**/ #calendar table { border-collapse: collapse; color: #ccc;} /**大表格定义**/ #calendar th{ font: normal 12px; } #calendar td {
text-align:center;font-size: 12px; color: #ccc; height: 15px; width: 15px;} /**单元格定义**/ #calendar td a {display:block;width:15px;height:15px;color: #426873;text-decoration:none;} /**链接日期是一个块级元素，定义高宽度以及颜色。**/ #calendar td a:hover{ color: #FFF000;} **可以查一下日历那源代码，就知道为什么这样定义了 '">右层定义 **这里定义的就是副模板** 
日志标题定义 #main #mainright #topic{background-color:# E2E2E2 ;border-bottom:1px dotted #CDCDCD;font-size:16px;font-weight:bold;color:# 316E83 ; height:30px;line-height:30px;padding:0 0 0 10px;text-align:left;} #main #mainright #topic a{ color:# 316E83 ; font-size:16px;text-decoration:none; } #main #mainright #topic a:hover{ color:# 316E83 ; font-size:16px;text-decoration:underline; } /**日志标题定义**/ #main #mainright #topic span{font-size:12px;color:#999;}/**日期作者进行定义**/ 文章内容定义 #main #mainright .logtext{padding:7px;line-height:20px;font-size:14px;color:#666;text-align:left; overflow: hidden;width:100%;} /**距上下左右间距为7像素，行高为20像素，14像素灰色的字。添加图片太大会撑开页面，所以加overflow: hidden;width:100%;来定义，让多余部分给裁切**/ 回复、阅读定义 #main #mainright #com{border-top:1px dotted #999;text-align:right;color:# 346A82 ;padding:5px;height:30px;} /**文字居右显示，间距为5像素，高度为30像素。**/ #main #mainright #com a{ color:# 346A82 ;text-decoration:none;} #main #mainright #com a:hover{ color:# 346A82 ;text-decoration:underline;} 定义翻页效果 
#showpage{text-align:left;padding:5px;} **CSS我们定义完，接下我们在主模板里进行制作 进入Index.html文件
即
主模板 到index.html文件中进行调用这个样式表．代码如下： <link href="/image/css.css" rel="stylesheet" type="text/css" /> 然后用DIV套样式 <div align=”center”> <div id=”head”> <div id=”headleft”>$ show_blogname$ </div> <div id=”headright”> <div class=”blogurl”>$ show_blogurl$ </div> </div> </head> <div id=”dao”>$ show_subject_l$</div> <div id=”main”> <div id=”mainleft”> <div class=”tiao”>用户公告</div> <div class=”text”>$ show_placard$ </div> <div class=”tiao”>日历</div> <div class=”text”>$ show_calendar$ </div> <div class=”tiao”>最新日志</div> <div class=”text”>$ show_newblog$</div> <div class=”tiao”>最新评论</div> <div class=”text”>$ show_newmessage$</div> <div class=”tiao”>最新回复</div> <div class=”text”>$ show_comment$</div> <div class=”tiao”>友情链接</div> <div class=”text”>$ show_links$</div> <div class=”tiao”>站点信息</div> <div class=”text”>$ show_info$</div> </div> <div id=”mainright”>$ show_log$</div> </div> </div> 主模板定义完，在定义一下副模板 新建一文件fu.html <div id=”topic”>$ show_topictxt$ <span>$ show_addtime$$ show_author$</span></div> <div class=”logtext”> $ show_logtext$</div> <div id=”com”>$ show_more$</div> OK,用户模板制作完成 测试一下在IE6下好用 模板可能在FIREFOX下看错位，可以这样定义。 找到出错的地位,然后进行一下更正 . FIREFOX'">浏览器 导航
*html #main{margin:0;width:1003px;margin:0 20px 0 0; background-color:#23282E;height:auto;padding:0;} *html #main #mainleft{float:left;width:195px; padding:0; background-color:#23282E;margin:0 10px 0 10px;}
