5DBlog高级模板设计三部曲[2004-7-7]
abc 发表在 “我的博客”ABC
5DBlog提供了初级模板和高级模板两种制作Blog模板的方式，在初级模板中，通过{ListLog}一个标签来表示Blog列表和正文，然后通过CSS来控制文本样式。在高级模板中，Blog里的所有元素（标题、简介、正文、评论等）都独立出来，可以任意应用在网页中，使用高级模板可以让Blog的设计更加自由，给设计者更多的发挥空间。
虽然我们把这种应用更多标记的方式称为“高级模板”，实际上如果熟悉HTML标签和CSS知识，使用高级模板并不复杂，更多需要的是耐心和细心。只需按照下面三部曲进行，就可以完成高级模板的制作。
阅读本文的同时，可同时参考：5DBlog 高级模板设计指南、5DBlog模板高级标记编写实例两篇文章。
一、设计页面
在大部分正规的网页制作流程中，第一步都是设计页面，关于设计的创意和规则可以查看相关资料，在这里就不详述。根据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>来表示。整个列表部分的可视化效果以及代码如下所示：
列表部分的可视化制作效果
4、在列表的标签完毕后，下面写内容显示部分的标签，由于现在所有设置都是通过一个页面实现的，所以在列表下的标签接着写内容的就可以，实际上它的效果出现在blog内容页，而不是首页。
内容显示部分是以<BLOG:DETAILCONTENT>开头和</BLOG:DETAILCONTENT>为结尾，中间部分是日志内容的的控制，有{LogContent}、/user1/august/upload/profile.gif、左手拿牌、、<blog:DetailFooter>标签，通过标签的名字很容易理解标签的含义，内容部分的效果和标签如下所示：
Blog内容部分制作效果
5、接下来是评论部分，在理解了内容部分，对评论部分的标签也不难掌握了，所显示效果和标签如下所示：
评论部分制作效果
6、至此就完成所有的标签替换工作，关于高级模板的标签详细介绍可以参考用户指南中的：5DBlog 高级模板设计指南。
三、修改CSS
在标签部分替换完成，基本上就完成了大部分的工作，接下来是美化文字显示部分，用CSS来实现。其实在每个模板的最前面已经定义了每部分的CSS，并在注释里对每个样式出现的地方做了注释，如下表：
例如，想把网页背景修改为灰色，只需要在BODY {MARGIN: 0px;BACKGROUND-COLOR: #336666}中，把#336666修改为#666666即可，想修改日志标题的颜色和大小，可以在这句话中修改：.loglistTitle {color: #333333;font-size: 10.5pt;font-weight: bold} /*日志标题*/。
除了对已有的CSS进行修改外，还可以增加自己定义的CSS，例如这个设计我们就新增了Blog名称和Blog介绍两部分的CSS：
关于所有CSS的含义，可以查看用户指南中的：5DBlog 设置模板 CSS 区域指南。
当所有制作完成时，就可以递交模版了，特别提醒的是，在递交模版时，应该把模板设计模式转换到可视化模式，否则提交的修改是无效的。
小技巧：如果在网页设计中对某文字直接定义了大小和颜色，在CSS中也有对它的定义，两者之间可能产生冲突，没有出现预期效果，此时可以通过查看自己的博客页面的源文件，找出问题所在。
四、最后把这个模板的所有代码贴出来，供各位在模板制作中参考。
模板源文件下载
abc 发表在 “我的博客”ABC
虽然我们把这种应用更多标记的方式称为“高级模板”，实际上如果熟悉HTML标签和CSS知识，使用高级模板并不复杂，更多需要的是耐心和细心。只需按照下面三部曲进行，就可以完成高级模板的制作。
阅读本文的同时，可同时参考：5DBlog 高级模板设计指南、5DBlog模板高级标记编写实例两篇文章。
一、设计页面
在大部分正规的网页制作流程中，第一步都是设计页面，关于设计的创意和规则可以查看相关资料，在这里就不详述。根据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}、/user1/august/upload/profile.gif、左手拿牌、、<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>（共有{Count}条）
</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} |
{CommentEmail} {CommentUrl} {CommentIp}</FONT></P>
</BLOCKQUOTE>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</BLOG:COMMENTENTRY>
<BLOG:COMMENTSEPARATOR><BR></BLOG:COMMENTSEPARATOR>
6、至此就完成所有的标签替换工作，关于高级模板的标签详细介绍可以参考用户指南中的：5DBlog 高级模板设计指南。
三、修改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}
a {color: #cccccc; text-decoration: none}
a:visited {color: #cccccc; text-decoration: none}
a:hover {color: #cc6600}
a:active {color: #cc6600; text-decoration: underline}
a.txtlink {color: #666666; text-decoration: none}
a.txtlink:visited {color: #666666; text-decoration: none}
a.txtlink:hover {color: #cccccc}
a.txtlink:active {color: #cccccc; 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}
*******/
/******* 日志样式定义 *******/
.lognav {font-size: 9pt;color: #cccccc} /*日志导航区域*/
.loglist {font-size: 9pt;color: #000000} /*日志列表区域*/
.loglistTitle {color: #333333;font-size: 10.5pt;font-weight: bold} /*日志标题*/
.loglistInfo {font-size: 9pt;color: #bbbbbb} /*日志其他信息*/
.loglist .separator {font-size: 9pt;color: #999999} /*日志分隔行*/
/******* 日志内容样式定义 *******/
.info {font-size: 9pt;color: #bbbbbb} /*日志文章信息区域*/
.infoTitle {font-size: 12pt;font-weight: bold;color: #cc6600} /*日志文章题目*/
.content {font-size: 10.5pt;line-height: 150%;color: #000000} /*日志文章内容*/
/******* 日历样式定义 *******/
.calendar table {border:0}
.calendar td {border:0}
.calendar tr {border:0}
.calendar {color:#669999;font-family:Verdana;text-align:center;cursor:default;
border:0}
.calendar tr.weekname {color:#669999;font-weight:bold}
.calendar td.navYear {color:#cccccc}
.calendar td.navToday {color:#cccccc}
.calendar td.navMonth {color:#cccccc}
.calendar td.havelog {background-color:#cccccc;color:#006666;font-weight:bold;
cursor:hand}
.calendar td.today {color:red}
/******* 分类样式定义 *******/
.classes {}
/******* 友情链接样式定义 *******/
.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} /*仅用于文字链接*/
/******* 最新评论样式定义 *******/
.newcomment {line-height:15px;color: #333333; text-decoration: none}
.newcomment a {color: #333333; text-decoration: none}
.newcomment a:visited {color: #333333; text-decoration: none}
.newcomment a:hover {color: #cccccc}
.newcomment a:active {color: #cc6600; text-decoration: underline}
/******* 搜索表单样式定义 *******/
.search {line-height:15px;text-align:center;color: #333333; text-decoration: none}
/******* 计数器样式定义 *******/
.counter {line-height:15px;text-align:center;color: #333333; text-decoration: none}
/******* RSS 样式定义 *******/
.rss {}
/******* 本模板样式自定义 *******/
.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的含义，可以查看用户指南中的：5DBlog 设置模板 CSS 区域指南。
当所有制作完成时，就可以递交模版了，特别提醒的是，在递交模版时，应该把模板设计模式转换到可视化模式，否则提交的修改是无效的。
小技巧：如果在网页设计中对某文字直接定义了大小和颜色，在CSS中也有对它的定义，两者之间可能产生冲突，没有出现预期效果，此时可以通过查看自己的博客页面的源文件，找出问题所在。
四、最后把这个模板的所有代码贴出来，供各位在模板制作中参考。
模板源文件下载
回复Comments
作者:
{commentrecontent}