首先提示一点，编辑默认框架的方式是不推荐的，因为这样做好的模板，每次再更换新模板时，都需要重新生成一下老的文件。
考虑到一般用户已经习惯于用 Table 方式进行排版，所以这里介绍一下如何使用 Dreamweaver 制作博客模版。
阅读本文的同时，可同时参考：白皮书（1）：5DBlog 框架设计指南、用 HTML 制作模板（1）：通过编辑框架制作博客模版两篇文章。
一、设计页面
在大部分正规的网页制作流程中，第一步都是设计页面，关于设计的创意和规则可以查看相关资料，在这里就不详述。根据Blog的特点，在这个模板设计中，我把Blog的标题和简介都放在一个表格里，通过表格的分割来明显区别每条Blog，在采用MT（http://www.movabletype.org）程序制作的Blog中，这种方式非常普遍。我们设计完成的效果如下图所示：
设计完成的效果
接下来在Dreamweaver或者其他软件中完成HTML制作，类似于这种简单的设计，也可以在设计的时候就使用Dreamweaver等软件，一步达到最后的网页制作。完成后的Dreamweaver文件如下：
在Dreamweaver完成网页制作
二、替换标签
1、首先，在HTML代码中，删除<html></html>标签，删除<head></head>标签及head标签中的所有内容，删除<body></body>标签，这些标签不能出现在模板设计中，否则模板将自动清空。去处这些标签后，CSS的定义以及Body部分的定义怎么写呢？直接写在代码开头就可以了，如图：
把CSS直接写到HTML的开头
2、仔细查看所有的动态内容，把出现的文字替换成标签，首先替换简单标签，例如原来的Blog标题：Lakesea's Blog，替换为{Title}。如图：
把动态内容替换为标签
3、进行高级标签的替换，所谓高级标签，是让Blog的各部分内容，如标题、简介、文章显示、评论等，有更多的可控制性。
首先进行首页列表部分的替换，在设计中，每个Blog列表都在一个表格中，其中文章标题在第1行，简介在第2行，评论链接在第3行，然后就是下一篇Blog，最后部分是显示全部Blog的信息。
高级模板的标签和HTML标签一样，是成对出现的，例如控制每页显示Blog个数的标签是：<BLOG:LOG PageSize="6"></BLOG:LOG>，这个标签是最大跨度标签，第一项在高级模板的开头，最后一项在结尾。
由于在列表和内容中，我们没有需要显示共同的东西，所以<Blog:Top>标签可以不要，日志列表部分的标签是<blog:ListEntry>，中间出现所用到的属性，在这个设计中，我们用到{LogUrl} 、{LogTitle}、{LogSummary} 、{CommentCount}、{ViewCount}，每个Blog通过<br>标签来分割，所以用<BLOG:LISTSEPARATOR> <BR> </BLOG:LISTSEPARATOR>的形式表示，当然，也可以用横线、图片等各种方式来分割。在最下面部分，显示列表的总数和导航信息，用：<BLOG:LISTFOOTER>
<DIV align=right><BR><FONT size=2>全部分类中有 {Count} 篇日志 | 每页显示 {PageSize} 篇 {PageNav}</FONT><BR></DIV></BLOG:LISTFOOTER>来表示。整个列表部分的可视化效果以及代码如下所示：
列表部分的可视化制作效果
<BLOG:LISTENTRY>
<TABLE cellSpacing=1 cellPadding=1 width="100%" bgColor=#000000 border=0>
<TBODY>
<TR>
<TD bgColor=#996699 height=30>
<SPAN class=loglistTitle>{LogTitle}</SPAN>
<FONT color=#999999 size=2> [{PublishTime Format="yyyy-mm-dd"}]</FONT>
</TD></TR>
<TR>
<TD bgColor=#669999>
<BLOCKQUOTE><BR>
<P><FONT color=#666666 size=2><A class=txtlink href="{LogUrl}" target=_blank>
{LogSummary}</A></FONT></P></BLOCKQUOTE></TD></TR>
<TR>
<TD bgColor=#999999>
<DIV align=right><FONT color=#666666 size=2>
<A class=txtlink href="{CommentUrl}">评论</A>({CommentCount}) |
<A class=txtlink href="{LogUrl}">阅读</A>({ViewCount}) </FONT>
</DIV></TD></TR></TBODY></TABLE>
</BLOG:LISTENTRY>
<BLOG:LISTSEPARATOR><BR></BLOG:LISTSEPARATOR>
<BR><BLOG:LISTFOOTER>
<DIV align=right><BR><FONT size=2>全部分类中有 {Count} 篇日志 |
每页显示 {PageSize} 篇 {PageNav}</FONT><BR></DIV>
</BLOG:LISTFOOTER>
4、在列表的标签完毕后，下面写内容显示部分的标签，由于现在所有设置都是通过一个页面实现的，所以在列表下的标签接着写内容的就可以，实际上它的效果出现在blog内容页，而不是首页。
内容显示部分是以<BLOG:DETAILCONTENT>开头和</BLOG:DETAILCONTENT>为结尾，中间部分是日志内容的的控制，有{LogContent}、/vip/abc/upload/profile.gif、ABC、、<blog:DetailFooter>标签，通过标签的名字很容易理解标签的含义，内容部分的效果和标签如下所示：
Blog内容部分制作效果
<BLOG:DETAILCONTENT>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR vAlign=top>
<TD class=info height=20>
<TABLE cellSpacing=1 cellPadding=10 width="100%" bgColor=#000000 border=0>
<TBODY>
<TR>
<TD bgColor=#996699 height=30>
<DIV align=center><FONT color=#333333 size=3><STRONG>{LogTitle}</STRONG>
</FONT></DIV></TD></TR>
<TR>
<TD bgColor=#669999 height=50>
<DIV align=center><FONT color=#666666>作者：</FONT>
<A title=返回作者主页 href="{AuthorUrl}">
<FONT color=#666666 size=2>{LogAuthor}</FONT></A>
<FONT color=#666666> 发表时间：</FONT>
<FONT color=#666666 size=2><SPAN class=digital>
{PublishTime Format="yyyy-mm-dd"}</SPAN></FONT>
<BR></DIV>
<P class=content>{LogContent}</P></TD></TR>
<TR>
<TD bgColor=#999999>
<DIV align=right><FONT color=#666666 size=2>所属栏目：
<A title=返回这个分类 href="{ClassUrl}">{Class}</A>
</FONT></DIV></TD></TR></TBODY></TABLE><BR>
<HR align=center width="95%" noShade SIZE=1>
</TD></TR>
<TR>
<TD class=content> </TD></TR></TBODY>
</TABLE>
</BLOG:DETAILCONTENT>
<BLOG:DETAILFOOTER></BLOG:DETAILFOOTER>
5、接下来是评论部分，在理解了内容部分，对评论部分的标签也不难掌握了，所显示效果和标签如下所示：
评论部分制作效果
<BLOG:COMMENTHEADER>
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#333333
cellSpacing=0 cellPadding=0 width="100%" bgColor=#669999 border=1>
<TBODY>
<TR>
<TD height=25>
<DIV align=center>评论内容<FONT color=#666666 size=2>
</FONT></DIV></TD></TR></TBODY>
</TABLE>
</BLOG:COMMENTHEADER>
<BLOG:COMMENTENTRY>
<TABLE style="BORDER-COLLAPSE: collapse" borderColor=#333333
cellSpacing=0 cellPadding=0 width="100%" bgColor=#999999 border=1>
<TBODY>
<TR>
<TD bgColor=#999999>
<DIV align=left>
<BLOCKQUOTE>
<P><BR><FONT color=#333333>{CommentAuthor}：</FONT>
<BR><SPAN class=content>{CommentContent}</SPAN> </P>
<P align=right>---<FONT color=#333333> {CommentTime} |
{CommentUrl} </FONT></P>
</BLOCKQUOTE>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</BLOG:COMMENTENTRY>
<BLOG:COMMENTSEPARATOR><BR></BLOG:COMMENTSEPARATOR>
6、框架的设计还必须加上图片博客列表的设置，设计大体和普通列表相似，只是注意要显示图片的大小，比较适合用div的方式。
<blog:listphotoEntry>
<div class="photolog">
<div class="smallimages">
<a href="{logurl}" target='blank'><img src="{photourl}" alt="{phototitle}"/></a>
</div>
<h3>{phototitle}</h3>
<ul>
<li class="Hits"><span class="cn">点击:</span><span class="en">Hits</span>{viewcount}</li>
<li class="Comments"><span class="cn">回复:</span><span class="en">Comments</span>{commentcount}</li>
<li class="PostTime"><span class="cn">发表:</span><span class="en">PostTime</span>{posttime}</li>
</ul>
<p><span>{logtitle}</span></p>
</div>
</blog:listphotoEntry>
7、至此就完成所有的标签替换工作。
三、修改CSS
在标签部分替换完成，基本上就完成了大部分的工作，接下来是美化文字显示部分，用CSS来实现。其实在每个模板的最前面已经定义了每部分的CSS，并在注释里对每个样式出现的地方做了注释，如下表：
<STYLE type=text/css>
<!--
/******* 全局样式定义 *******/
body,td,p,div,input,select,textarea
{font-family: "Verdana","Arial"; font-size:12px}
BODY {MARGIN: 0px;BACKGROUND-COLOR: #336666}
img {border:none;}
.fitimg{display:block;width:90%;overflow-x:auto;}
.rss,.rss_c{background:url(/images/rss.gif) no-repeat;
width:23px;height:10px;display:list-item;float:left;margin:3px 0 0 ;}
.loading{background:url(/images/array.gif) no-repeat;width:12px;}
a {color: #cccccc; text-decoration: none}
a:visited {color: #cccccc; text-decoration: none}
a:hover {color: #cc6600}
a:active {color: #cc6600; text-decoration: underline}
table.pan {text-align:center}
/*******
td.pantitle {font:bold 12px;letter-spacing:2px;color:#cccccc;
background-color:#666666;line-height:normal;padding:4 2 2 2}
td.pancontent {border:1px solid #666666;background-color:#cccccc}
td.pansplit {height:10px}
.digital {font-family:Georgia}
*******/
/******* 日历样式定义 *******/
#calendar table{width:100%;margin:auto;}
#calendar input {font-size:12px;border:#BBB solid 1px;margin:0;padding:0;text-align:center;}
#calendar table td,#calendar table th {text-align:center;}
#today {background:#EFE;}
#pifu {width:99%;}
#pifu td {text-align:center;cursor:pointer;border:#BBB solid 1px;font-size:9px;font-family:sans-serif;}
/******* 分类样式定义 *******/
#menu {border:0;position:absolute;top:122px;margin:0 0 0 210px;padding:5px;width:500px;}
#menu a:link {text-decoration : none;color:#1A8BC8;}
#menu a:visited {text-decoration : none;color:#1A8BC8;}
#menu a:hover {text-decoration : underline;color:#56B6E9;}
#menu a:active {text-decoration : none;color: #1A8BC8;}
#menu h3, #menu li span{display:none;}
#menu ul {padding:0;margin:5px;}
#menu li {list-style:none;float:left;padding:0 10px 0 10px;margin:0;}
/******* 友情链接样式定义 *******/
#links {line-height:15px;text-align:center;color: #333333; text-decoration: none}
#links a {color: #333333; text-decoration: none}
#links a:visited {color: #333333; text-decoration: none}
#links a:hover {color: #cccccc}
#links a:active {color: #cc6600; text-decoration: underline}
#links .textlinks {height:normal} /*仅用于文字链接*/
/******* 最新评论样式定义 *******/
#commentt {line-height:15px;color: #333333; text-decoration: none}
#commentt a {color: #333333; text-decoration: none}
#commentt a:visited {color: #333333; text-decoration: none}
#commentt a:hover {color: #cccccc}
#commentt a:active {color: #cc6600; text-decoration: underline}
/******* 搜索表单样式定义 *******/
#search_c{width:90%;margin:auto;}
#search_c input{width:100%;border:1px dashed #909090;margin:3px;}
#search_c form {text-align:right;}
#search_c select{width:60%}
#search_c .ibt{width:auto;border:3px double #909090;height:20px;}
/******* 计数器样式定义 *******/
#total {line-height:15px;text-align:center;color: #333333; text-decoration: none}
/******* 本模板样式自定义 *******/
.styleblogtitle {
font-size: 32px;
color: #ffffff;
}
.styleremark {
color: #666666;
font-size: 12px;
font-weight: bold;
}
.styleconlist {color: #666666}
-->
</STYLE>
例如，想把网页背景修改为灰色，只需要在BODY {MARGIN: 0px;BACKGROUND-COLOR: #336666}中，把#336666修改为#666666即可，想修改日志标题的颜色和大小，可以在这句话中修改：.loglistTitle {color: #333333;font-size: 10.5pt;font-weight: bold} /*日志标题*/。
除了对已有的CSS进行修改外，还可以增加自己定义的CSS，例如这个设计我们就新增了Blog名称和Blog介绍两部分的CSS：
/******* 本模板样式自定义 *******/
.styleblogtitle {
font-size: 32px;
color: #ffffff;
}
.styleremark {
color: #666666;
font-size: 12px;
font-weight: bold;
}
.styleconlist {color: #666666}
-->
当所有制作完成时，就可以递交框架了.
小技巧：如果在网页设计中对某文字直接定义了大小和颜色，在CSS中也有对它的定义，两者之间可能产生冲突，没有出现预期效果，此时可以通过查看自己的博客页面的源文件，找出问题所在。
回复Comments
{commenttime}{commentauthor}
{CommentUrl}
{commentcontent}