blog编程

乐逍遥 · 发表于 2006-9-9 08:47

目录：
一、Bo-blog程序简介
二、HTML语言简明教程
三、CSS样式表
四、模板制作
1、前期准备工作
2、模版文件功能
3、clean模板分析
4、官方发布的模版制作参考
4-1、Bo-Blog V1.7 模板参考
4-2、parts.php文件说明
五、打包、安装
六、模版美化
七、FAQ
八、后记

一、Bo-blog程序简介

Bo-Blog日志程序（以下简称程序）是由Bob Shen开发的管理员和副管理员共同写作的blog程序，基于PHP脚本和文本数据库。
Bo-blog官方网站：http://www.bo-blog.com
Bo-blog官方论坛:http://www.bmforum.com/bmb/forums.php?forumid=81

二、HTML简明教程

高手请跳过此部分。

本段主要针对一些对HTML语言了解不多的朋友，结合模版制作中需要的HTML语法简单讲解

html 文件结构
<html>...</html>
<head>...</head>
<body>...</body>

<html>
<head>
<title>此处为网页的标题</title>
</head>
<body>
HTML 文件的正文写在这里... ...
<b>This text is bold</b>
</body>
</html>

例子解释
HTML文档中，第一个标签是<html>。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是</html>，这个标签告诉浏览器这是HTML文档的终止。

在<head>和</head>标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。
在<title>和</title>标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。
在<body>和</body>标签之间的文本是正文，会被显示在浏览器中。
在<b>和</b>标签之间的文本会以加粗字体显示。

表格
<table>.....</table> //*产生一个立体边框,包括在TABLE内的元素://
<tr>....</tr> //* 分行元素//
<td>....</td> //* 分格元素 //
<tr>与<td>常常结合在一起使用，如
<tr>
<td>......</td>
</tr>

超链接格式 <A HREF="链接方式地址文档">....</A> 如歪人歪语代码如下:
<a href="http://www.joyepp.com" target="_blank">歪人歪语</a>

图形插入元素 <IMG SRC= "图形文件名" 各种属性 >
各种属性:
WIDTH=图像的宽
HEIGHT=图像的高
ALT= ‘ 代替内容 ' 即用文本浏览器时用代替内容替代图像

快速入门 HTML参考

其他的语法请参阅网上相关教程或者去我的邮箱下载HTML语法教程
三、CSS样式表

关于CSS样式表，推荐到网页设计师网站学习。对制作模版而言，以下两篇文章基本上就够用了

循序渐进
常用CSS缩写语法总结
或者到我的GMAIL邮箱下载css2.0中文样式表手册 (ID: joyeep PASSWORD: joyepp.com )

四、模版制作

本指南模版制作均是以clean模版为参照（下载clean模版），通过对clean模版各个功能部分的剖析，让大家能在最短的时间学会如何修改模版和制作期望的模版

1、前期准备工作

对HTML和CSS有初步了解
安装软件
fhotoshop等图形制作软件
dreamwear mx等可视化网页编辑软件
editplus文本编辑软件
屏幕取色软件 ---从网页或图片上选取颜色,直接得到颜色代码
QQ-- 截图,发布模版时制作缩略图
为了方便模版制作，还需要安装本地blog程序运行环境
EasyAPM-Server EasyAPM-Server 是 Win2000/XP/2003 系统下的 Apache+PHP+MySQL 运行环境快速集成安装套件。
下载地址：http://www.micronsky.net/easyapm/
为防止下载地址出错,如果该地址不能下载,请在google中搜索关键字“微米天空”
firefox1.0.4 ---验证模版在firefox下的兼容性
安装firefox插件web developer，分析别人的网页参考学习

其中，editplus、屏幕取色软件、firefox1.0.4 在我的gmail邮箱有下载 (ID: joyeep PASSWORD: joyepp.com )
2、模版文件功能(按文件名排序)

说明:前面带# 表示可以修改，也可以不修改前面带* 表示必须修改

a.php //自动清除BOM信息//[程序自带的clean模版不存在该文件]
# addreply.htm //每篇blog文章下面添加评论的文本输入框和表情图标部分//
announcement.htm //公告//
* article.htm //blog全文显示//
error.htm //错误反馈页面//
fuc.htm //显示统计信息和用户列表// [程序自带的clean模版缺失该文件]
* gallery.htm //相册//
* guestbook.htm //留言本//
* index.htm //这是整个blog带侧边栏时页面的框架//
list.htm //分类下的blog标题显示//
* main.htm //首页blog文章摘要 //
# reply.htm //blog全文后的来访者留言//
* view.htm //后台关闭侧栏后的显示效果// 如果后台框架设置中关闭侧栏，则程序调用该文件而不调用index文件
* new42.css //模版的css样式表//
#colorsheme.txt // 色彩定义文件//
*installinfo.txt //安装时的信息//
# parts.php //请参见后文对该文件的专门介绍//

3、clean模板分析

一般来说，制作好了index文件，一个模版也就完成了一半以上了。所以，首先使用dearmwear 打开index.htm文件。但是，模版的制作对DW的依赖性并不强，使用DW主要是方便查看效果和使用代码提示功能以及编辑css。大部分工作是在代码窗口环境下完成的。

在设计窗口下，我们可以看见，展现在我们面前的是表格中的一些代码，我们完全不用理会这些代码，甚至不用理会它们到底代表着什么，不要被这些表格和代码吓退了。对于内似这些
{ catnav }
、{ mainbodyout }、{ langindex16 }以后再参照说明文档来了解。

模版自上而下是顶部的图片、横向导航条、主体部分左侧是blog文章摘要显示，右侧是公告、统计、最新文章、最新留言、友情链接等，最下面是版权信息等。为了方便以后介绍，对相关区域作统一命名，如图：

切换到代码窗口下，请在<head>...</head>中添加代码<link href="new42.css" rel="stylesheet" type="text/css">，链接外部css样式表，现在在设计窗口看看，是不是和刚才在设计窗口所见不一样了？模版的眉目有点清晰了。暂时只关心<body>......</body>这部分就可以了,<head>...</head>部分，在FAQ部分专门有讲解。用的html语法很简单，其中div是指div标签，table指表格，clean模版采取了div和table相结合的办法。注： //....//之间是注释

<div align="center">
<table border="0" cellpadding="0" cellspacing="0" class="maxbox">
<tr>
<td class="maxbox2">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="logo"><img border="0" src="blog/template/clean/header.jpg"></td> //显示顶部的图片//
</tr>
<tr>
<td class="topmenu">{ catnav }</td> //横向导航//
</tr>

<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content">{ mainbodyout }</td> //主体部分左侧blog摘要显示区域//
<td class="leftbar">
<DIV class=sidetitle onclick="toggle_collapse('bar1')">{ langindex14 }</DIV> //公告// ----〉侧栏子标题
<DIV class=side id=bar1 name=bar1>{ announcebar }</DIV><br/> //公告内容//
<DIV class=sidetitle onclick="toggle_collapse('bar2')">{ langindex15 }</DIV> //统计//----〉侧栏子标题
<DIV class=side id=bar2 name=bar2>{ langindex0 }{ articlenum }<br/>{ langindex1 }{ reply }<br/>{ langindex2 }{ visitorcounter } { stat }<br/>{ langindex3 }{ todayvisit }<br/>{ regusers }<br/>{ currentonline }</DIV><br/> //统计内容//
<DIV class=sidetitle onclick="toggle_collapse('bar3')">{ langindex4 }</DIV> //日历// ----〉侧栏子标题
<DIV class=calendar id=bar3 name=bar3>{ calendar }</DIV><br/> //日历内容//
<DIV class=sidetitle onclick="toggle_collapse('bar4')">{ langindex5 }</DIV> //最新日志// ----〉侧栏子标题
<DIV class=side id=bar4 name=bar4>{ allnew }</DIV><br/> //最新日志列表//
<DIV class=sidetitle onclick="toggle_collapse('bar5')">{ langindex6 }</DIV> //最新评论//----〉侧栏子标题
<DIV class=side id=bar5 name=bar5>{ newreply }</DIV><br/> //最新评论列表//
<DIV class=sidetitle onclick="toggle_collapse('bar6')">{ langindex16 }</DIV> //最新引用//----〉侧栏子标题
<DIV class=side id=bar6 name=bar6>{ tbshow }</DIV><br/> // 最新引用列表//
<DIV class=sidetitle onclick="toggle_collapse('bar7')">{ langindex7 }</DIV> // 搜索//----〉侧栏子标题
<DIV class=side id=bar7 name=bar7><form action="index.php" method="post"><input type="hidden" value="showsearch" name="job" /><input onclick="this.value=''" size="15" value="{ langindex8 }" name="keywords" /> <input type="submit" value="{ langindex9 }"/><a href="index.php?job=showsearch&mode=advance">{ langindex10 }</a></form></DIV><br/> //搜索框//
<DIV class=sidetitle onclick="toggle_collapse('bar8')">{ langindex13 }</DIV> //归档//----〉侧栏子标题
<DIV class=side id=bar8 name=bar8>{ archives }</DIV><br/> //归档列表//
<DIV class=sidetitle onclick="toggle_collapse('bar9')">{ langindex12 }</DIV> //友情链接// ----〉侧栏子标题
<DIV class=side id=bar9 name=bar9>{ links }</DIV><br/> //友情链接列表//
<DIV class=sidetitle onclick="toggle_collapse('bar10')">{ langindex11 }</DIV> //杂项//----〉侧栏子标题
<DIV class=side id=bar10 name=bar10>{ xml2 }<br>{ xml3 }<br>{ encodeinfo }<br><a href="http://www.creativecommons.cn/licenses/by-nc-sa/1.0/" target="_blank"><img src="img/cc.png" alt="Creative Commons" border="0" /></a><br><a href="http://www.getfirefox.com" target="_blank"><img src="img/firefox.gif" alt="Best viewed in Firefox" border="0" /></a><br><a href="index.php?job=about" target="_blank"><img src="img/boblog.png" alt="{ versioninfo }" border="0" /></a></DIV> //杂项内容//

</td>
</tr> //主体部分右侧栏显示区域//
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="footer"> { versioninfo } &line; <b><a target="_blank" href="mblog_edit.php?action=write">Post</a></b> &line; <b><a target="_blank" href="admin.php">Admin</a></b>
</div> //版权信息等//
</div>

下面，结合实例来说明一下。初学制作模版，最大的困难就是不知道那些表格中显示的代码和实际上展现的效果之间的关系。

<tr>
<td class="topmenu">{ catnav }</td> //横向导航//
</tr>

<tr>...</tr> 是在table表格中产生一个分行
<td>.....</td>是在tr产生的行中形成一个单元格，而这个单元格的属性是如何定义的呢？看这句class="topmenu", 这句表明，td的属性是通过css样式表中的topmenu来定义的。在css样式表中，找到topmenu，内容如下；这段css样式表我就不解释了，超出了本指南的范围，主要是定义了文字填充、背景图像、背景颜色、文字颜色、超链接效果等。

.topmenu {
padding-left: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-top: 5px;
color: #666;
vertical-align: middle;
background-image: url(new1.jpg);
background-repeat: repeat;
display: block;
}

.topmenu A {
/* padding-left: 10px;
padding-right: 10px;*/
color: #333;
text-decoration: none;
border: #EFEFEF 1px solid;
padding: 2px;
font-size: 14px;
}

.topmenu A:hover {
text-decoration: none;
border: #ccc 1px solid;
background-color: #666;
color: #fff;
}

继续看{ catnav },后台数据和前台模板相分离,因此,{ catnav }就是后台数据在前台显示的标签.从字面上我们也可以看出，cat是分类（category），nav是导航（navigator），{ catnav }就是后台的用户自定义的分类信息在前台的标签。每个用户的分类信息是不相同的，但是通过{ catnav }就将其在前台摸板统一起来。

再分析一段代码

<DIV class=sidetitle onclick="toggle_collapse('bar4')">{ langindex5 }</DIV>
<DIV class=side id=bar4 name=bar4>{ allnew }</DIV><br/>

<div>.....</div>之间是一个div容器
第一个div容器的属性由css样式表中sidetitle来控制.{ langindex5 }对应"最新日志"小标题,之所以用{ langindex5 }而不用" 最新日志"四个字,主要是因为模版要考虑通用性,用{ langindex5 }可以表示不同语言下的"最新日志".当然,也可以直接把{ langindex5 } 替换成"最新日志"四个字或者图片.

由于{ langindex5 } 对应"最新日志",自然第二个div容器就对应{ allnew }最新记录列表;可以在代码中看见,一共有10对这样的小标题+子内容组合。

其他的文件也类似如此。页面布局中添加后台数据代码，我们可以根据自己的需要移动它们的位置（将{ ... }添加到认为合适的地方）或者放弃一些自己觉得不重要的功能（删除{ ... } ）。譬如，我不想显示“导航条”，很简单。在index文件中，删除
<tr>
<td class="topmenu">{ catnav }</td>
</tr>
就不会显示“导航条”。或者，不想显示“杂项”，觉得那些乱七八糟的图片不好看，我们知道index文件中， { langindex11 } 代表“杂项”，找到这部分，删除
<DIV class=sidetitle onclick="toggle_collapse('bar10')">{ langindex11 }</DIV> //杂项//----〉侧栏子标题
<DIV class=side id=bar10 name=bar10>{ xml2 }<br>{ xml3 }<br>{ encodeinfo }<br><a href="http://www.creativecommons.cn/licenses/by-nc-sa/1.0/" target="_blank"><img src="img/cc.png" alt="Creative Commons" border="0" /></a><br><a href="http://www.getfirefox.com" target="_blank"><img src="img/firefox.gif" alt="Best viewed in Firefox" border="0" /></a><br><a href="index.php?job=about" target="_blank"><img src="img/boblog.png" alt="{ versioninfo }" border="0" /></a></DIV> //杂项内容//
这部分,"杂项"就不会显示了.其他的类似如此

如果不对页面的布局有所修改的话，大部分的模版制作工作将集中于制作图片修饰美化模版、在html文件中添加css样式、修改css样式表中的相关属性完成图片显示和配色。

下面我们重点分析clean模版的css样式表new42.css

BODY { //页面属性//
margin: 0px; //网页紧贴浏览器窗口，没有这句，网页和浏览器窗口上下会留出空白//
background-color: #999; //定义页面背景色//
color: #333; //定义文本颜色//
}
BODY, TD, TABLE, INPUT, TEXTAREA { //页面、单元格、表格、输入、文本框属性//
/* font-family: Verdana, Arial, Helvetica, sans-serif; */ //在css中，/*...*/表示注释,放在这里是垃圾代码//
font-family: tahoma, arial, sans-serif; //定义字体//
font-size: 12px; //定义字体大小//
/* line-height: 17px;*/ //注释or垃圾代码//
background-repeat:repeat; //垃圾代码，除非和background-image一起使用//
}

INPUT, TEXTAREA, SELECT { //输入、文本框、选择//
background-color: #FFF; //定义背景色//
border: #E8E8E8 1px solid; //定义边框颜色、宽度、形式//
}

.riqi, .riqi a { //定义日期和日期的超链接//
background-color: #646464;
color: #fff;
}
.calendartitle { //定义日历中星期的背景色//
background-color: #f5f5f5;
}
.calendar td, .calendar a { //定义日历的单元格//
font-size: 12px;
font-family: Georgia;
}
BODY {
scrollbar-base-color:#EEEEEE; //定义滚动条。在FF下无效//
margin-right: auto; margin-left: auto; //在FF中页面居中，在IE下无效//
background-image: url(new3.jpg); //定义new3.jpg做背景图片。模版的立体效果//
background-repeat:repeat-y;//背景图片纵向重复//
background-position: center; //背景图片位置居中//
}

PRE { //文本预处理//
BORDER-RIGHT: #ccc 1px dotted; PADDING-RIGHT: 2px; BORDER-TOP: #ccc 1px dotted; PADDING-LEFT: 2px; BACKGROUND: #eeeeee; PADDING-BOTTOM: 2px; BORDER-LEFT: #ccc 1px dotted; PADDING-TOP: 2px; BORDER-BOTTOM: #ccc 1px dotted
}
A { //控制整个blog的超链接，除非其他地方另外有定义//
FONT-SIZE: 12px; COLOR: #666; FONT-FAMILY: tahoma, arial, sans-serif; TEXT-DECORATION: none
}
A:hover { //全文超链接鼠标放上去的效果//
COLOR: #333; TEXT-DECORATION: underline
}

.comments-title { //留言本guestbok.htm访问者留言标题如 snow (2005年7月3日16:40) 和文章评论者信息reply.htm 如sarah在 2005年7月2日05:05星期六评论://
padding: 2px;
font-weight: bold;
color: #333;
border-bottom: #E8E8E8 1px solid;
}
.comments-title A { //文章评论者信息。管理员登陆后的“删除”“回复”两个字的超链接属性//
text-decoration: none;
}
.comments-title A:hover { //同上，超链接的鼠标移上去的效果//
text-decoration: none;
}

.comments-body { //留言本访客留言和文章评论//
padding: 10px;
color: #666;
}
/* stariver */ //注释//
.maxbox //在index.htm的<body>...</body>之间，最开始有这么一段代码
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" class="maxbox">，这是在div标签中最外面的表格//
{
width: 770px; //定义宽度770像素，确定了宽度，两边留出一定空白，目的是兼顾800x600分别率下全屏幕显示//
height: 100%;
background-color: White;
padding-left: 5px;
padding-right:8px;
background-image: url(new3.jpg);
}

.maxbox2 { //在index.htm中，定义了第二个表格//
vertical-align: top;
}

.logo { //模版最顶部的banner区域//
background-color: #fff;
vertical-align: top;
padding: 0px;
}

.topmenu { //导航条//
padding-left: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-top: 5px;
color: #666;
vertical-align: middle;
background-image: url(new1.jpg);
background-repeat: repeat;
display: block;
}
.topmenu A { //导航条超链接效果//
/* padding-left: 10px;
padding-right: 10px;*/
color: #333;
text-decoration: none;
border: #EFEFEF 1px solid;
padding: 2px;
font-size: 14px;
}

.topmenu A:hover { //导航条鼠标移动到上面的效果//
text-decoration: none;
border: #ccc 1px solid;
background-color: #666;
color: #fff;
}

.leftbar { //右侧侧栏表格的属性//
padding-right: 5px;
padding-left: 5px;
padding-bottom: 0px;
width: 190px;//定义右侧侧栏表格的宽度是190px//
vertical-align: top;
background-color: #fff;//定义侧栏的背景色为白色//
}

.side { //侧栏小标题下的子内容，如公告、最新日志列表、归档列表、友情链接列表等//
padding: 2px;
color: #000;
line-height: 17px;
font-size: 12px;
border-left: #E8E8E8 1px solid;
border-bottom: #E8E8E8 1px solid;
border-right: #E8E8E8 1px solid;
}

.side A {
text-decoration: none;
color: #000;
}

.side A:hover {
color: #333;
}

.sidetitle { // 在index中定义，侧栏中小标题，如“公告”两个字，这里定义了“公告”两个字的填充宽度、颜色、字体大小、边框颜色、背景图像等//
padding-top: 2px;
padding-left: 2px;
padding-right: 2px;
padding-bottom: 2px;
font-weight: bold;
color: #000; //字体颜色//
text-align: left;//文字对齐方式：左对齐 //
border: #ccc 1px solid; //边框为1像素的灰色实线//
background-image: url(new2.jpg);
cursor: hand;
}

.content { //在index中有这行代码<td class="content">{ mainbodyout }</td>，{ mainbodyout }是首页显示的blog文章摘要，此处定义了index中主体部分右边blog摘要区的表格属性//
padding-top: 7px;
padding-right: 10px;
padding-left: 10px;
width: 100%;
vertical-align: top;
overflow: hiddem; //错误，属性应该是hidden//
}

.content2 { //在view.htm中，关闭侧栏后主体部分的效果//
padding-top: 7px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 5px;
vertical-align: top;
}

.entry { //在article和main.htm中都定义过，里面显示文章或摘要//
padding: 2px;
color: #333;
line-height: 17px;
font-size: 12px;
}

.title { //主体部分的blog文章标题、留言本的标题//
padding-top: 2px;
padding-bottom: 2px;
text-indent: 3px;
font-weight: bold;
font-size: 12px;
color: #333;
text-align: left;
background-color: #F5F5F5;
background-image: url(new1.jpg);
border-left: #E8E8E8 5px solid;
border-right: #E8E8E8 1px solid;
border-top: #E8E8E8 1px solid;
border-bottom: #E8E8E8 1px solid;
width: 100%;
display: block;
}

.title A {
font-weight: bold;
font-size: 12px;
color: #333;
text-decoration: none;
}

.title A:hover {
font-weight: bold;
font-size: 12px;
color: #333;
text-decoration: none;
}

.date { //blog文章的时间、分页、留言本相关部分//
padding-bottom: 10px;
text-align: right;
color: #999;
display: block;

}
.date A {
text-decoration: none;
}
.date A:hover {
text-decoration: none;
}

.data { //list.htm文件中有定义，分类的描述和分类下文章全部题目的显示//
padding-bottom: 10px;
color: #999;
display: block;
}

.data A {
text-decoration: none;
}
.data A:hover {
text-decoration: none;
}

.posted { //在aritcle和main.htm中定义在摘要和全文下面显示相关信息的如 Posted by 小歪 &line; 评论 (2) &line; 引用 (0) &line; 阅读28次 &line; 编辑 &line; 删除 &line; 清空回复 &line; 置顶 //
border-top: #E8E8E8 1px solid;
padding-bottom: 15px;
color: #333;
text-align: right;
}
.posted A {
text-decoration: none;
}
.posted A:hover {
text-decoration: none;
}

.footer { //底部相关信息//
text-align: center;
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
clear: both;
background-image: url(new1.jpg);
background-repeat: repeat;
display: block;
width: 750px;
text-align: center;
}

.footer A {
text-decoration: none;
}
.footer A:hover {
text-decoration: none;
}

.entrycontent { //仅在main.htm中定义过，摘要的显示//
line-height: 19px;
letter-spacing: 1px;
}

clean模板还有很多不完善的地方，包括官方发布的clean模板安装包，譬如使用表格和div混合使用、重复定义，但是这并不影响它的安装、使用和兼容性。所以我们做模板的时候，要大胆的尝试，不要气馁。先从clean模板入手，可以说clean摸板是最简单的摸板了，慢慢修改模板的各个地方，大胆的改动，然后观察效果。在改动中熟悉模板，熟悉css语法，掌握一些小窍门。这些小窍门不是我不愿意和大家分享，而是难以用文字来叙述，时间长了自然而然就有了。遇到不懂的地方，google是最好的老师，还可以安装别人的模板揣摩、学习。我开始是修改别人的摸板，替换个图片、修改点文字、在侧栏添加个小功能等等，最后把nicky的osxcn-blue摸板改成msn风格的，正式学习模板制作也不过两天的工夫，用了一天的时间学习css，第二天就参照hoo的simple.夏模板，把它移植到bo-blog上来，修修补补，就弄出来了。

很多朋友感到页面布局比较困难，有时候需要数据显示的地方不是超出表格太多，就是留出大片的空白，要么按下葫芦浮起了瓢，这边显示效果对了，那边有错了，要么是在IE下正常，在firefox下却是惨不忍睹，我个人的经验来看是由于css定义的重复、自相矛盾的关系，才开始做模板，确实不容易搞明白css各部分和页面显示效果之间的关联关系，出问题后不太容易找到可能出错的地方。不要紧，做上一两个模板就明白了。大胆地改动就行了，在错误中获取经验和教训。

clean模板的先天不足，使它在一些复杂的模板制作中，很难解决上面所提到的问题。所以，我们最好使用div+css布局的办法，除了在模板中的诸多好处外，页面加载速度快，兼容性好，代码清晰易读也是它的优点。所以，我在制作wp模板的时候就采用了这种布局。模板制作到一定阶段，div+css布局就显示它的威力了，尤其是在解决IE和firefox的兼容性方面。但初学者还是先立足clean模板。

强烈推荐一篇div+css布局方面的文章，相信看了这篇文章后，在div+css布局blog方面的大部分问题都会迎刃而解

典型的三行二列居中高度自适应布局

4、官方发布的模版制作参考

Bo-Blog V1.7 模板参考

Bo-Blog V1.7 模板参考（Updated）
1:14 2005-7-5 [模板]

A. 模板采用PHPLib，只要在页面中加入以 { }符号括起的变量名就可以得到相应的部分。
（花括号与里面的文字没有空格）

B. 文件中注释到是设定了一个区块，不可删除。关于区块的更多信息可以参考PHPLIB的有关文档。

C. 模板组件－htm页面

index.htm
这是整个blog带侧边栏时页面的框架，内含以下组件：
{ blogname } blog名字
{ blogdc } blog的描述语
{ announcebar } 公告栏，仅占据位置，具体样式修改announcement.htm。
{ owner } 所有者
{ calendar } 日历
{ allnew } 最新记录列表
{ catnav } 分类
{ newreply } 最新回复列表
{ links } 友情链接
{ articlenum } 文章数
{ reply } 回复数
{ visitorcounter } 到访次数
{ currentonline } 当前在线信息
{ todayvisit } 今日到访次数
{ regusers } 注册用户数
{ icon } 头像
{ archives } 归档显示
{ xml } xml标记处
{ versioninfo } 版权标记处
{ mainbodyout } 主体部分
{ encodeinfo } 编码图示
{ adminurl } 管理入口
以下是这个模板文件中仅用作显示文字的标签（建议使用这些标签而不是直接写汉字，以更好支持多语言）
{ langindex0 } 日志：
{ langindex1 } 评论：
{ langindex2 } 到访：
{ langindex3 } 今日：
{ langindex4 } 日历
{ langindex5 } 最新日志
{ langindex6 } 最新评论
{ langindex7 } 搜索
{ langindex8 } 输入标题关键字
{ langindex9 } 搜索
{ langindex10 } 高级
{ langindex11 } 杂项
{ langindex12 } 友情链接
{ langindex13 } 归档
{ langindex14 } 公告
{ langindex15 } 统计信息
{ langindex16 } 最新引用

main.htm
摘要阅读，主体部分。
{ articlename } 文章名
{ articletime } 发布时间
{ article } 内容
{ reurl } 回复链接
{ seereply } 阅读全文
{ editurl } 编辑此文的链接
{ delurl } 删除此文的链接
{ noreplyurl } 清空评论的链接
{ previousandnext } 上一篇和下一篇的链接栏
{ thiscat } 当前文章所属的栏目
{ stickinfo } 置顶与取消置顶链接
{ trackback } Trackback链接
{ thiscatimg } 分类的图标
{ pages } 分页显示位置
{ articleviews } 阅读次数

reply.htm
回复框架/一些简单页面的框架。
{ replyinfo } 回复人信息/本页标题
{ delreply } 删除回复的链接/本页其他标题信息
{ reply } 回复内容/本页主体内容

list.htm
分类的列表显示页面，搜索和列表页的框架。
{ articlenumbar } 显示分类名和查找到的条目数量
{ listdescription } 分类的描述
{ alllist } 列表内容

announcement.htm
公告部分框架。
{ announce } 公告内容

view.htm
简洁模式阅读和trackback页的框架。
{ blogname } blog名字
{ catnav } 分类
{ xml } xml标记处
{ versioninfo } 版权标记处
{ mainbodyout } 主体部分
{ encodeinfo } 编码图示
{ announcebar } 公告栏

error.htm
出错页。
{ info } 出错信息。

article.htm
阅读文章内页的模板，可以完全拷贝main.htm，也可以定制这一页
{ articlename } 文章名
{ articletime } 发布时间
{ article } 内容
{ reurl } 字体属性：大中小
{ seereply } 阅读全文
{ editurl } 编辑此文的链接
{ delurl } 删除此文的链接
{ noreplyurl } 清空评论的链接
{ previousandnext } 上一篇和下一篇的链接栏
{ thiscat } 当前文章所属的栏目
{ stickinfo } 置顶与取消置顶链接
{ trackback } Trackback链接
{ thiscatimg } 分类的图标
{ pages } 分页显示位置
{ articleviews } 阅读次数
{ permanantshow } 永久地址
{ tblinkshow } 引用地址

gallery.htm
相册框架。

相册的总框架
{ galleryname } xx的相册
{ gallerymain } 相册主体部分



相册首页分相册名称和说明部分
{ name } 相册名称
{ description } 相册描述
{ dir } 相册所在目录名



相册内页每张图片的名称和说明部分
{ url } 图片可识别id
{ img } 图片真实地址
{ pic_des } 图片描述
{ pic_name } 图片名称



相册内页的工具条
{ galname } 相册名称
{ gal_des } 相册描述
{ langup } 文字：向上一层
{ fid } 相册所在文件夹名
{ langslide } 文字：幻灯片



单图查看模式
{ trueurl } 图片真实地址
{ pic_des } 图片描述
{ previousone } 上一张图片
{ nextone } 下一张图片
{ return } 返回相册


以下两个模板文件修改错误可能造成无法发表评论和留言，可采用默认。
guestbook.htm
留言本的模板。请参考默认模板bluetality，此

留言本整体的框架
{ gbtitle } 留言本名
{ submitformpart } 留言填写表单
{ gbmainpart } 留言显示主体
{ pagepart1 } 分页
{ pagepart2 } 翻页链接



内嵌于整体框架 { submitformpart } 部分，留言填写表单
{ gbaction } 表单提交的目标地址
{ gbname } 文字：姓名
{ nowuserid } 登陆者的id
{ gbpage } 文字：主页
{ nowuserhomepage } 登陆者的网站
{ gbmail } 文字：邮件
{ nowuseremail } 登陆者的mail
{ gbcontent } 文字框
{ gbonly } 文字：仅主人可见
{ submit } 文字：提交
{ clear } 文字：清除
{ validation } 验证码



内嵌于整体框架 { gbmainpart } 部分，留言本主体
{ whoandwhen } 发表者和发表时间
{ gemail } 发表者的mail
{ altmail } 文字：给用户发邮件
{ ghomepage } 发表者的主页
{ altpage }文字：访问用户主页
{ urlreply } 链接地址：回复此留言
{ altreply } 文字：回复
{ urldel } 链接地址：删除此留言
{ altdel } 文字：删除
{ gip } 文字：留言者的ip
{ gsubmessage } 留言内容
{ ifshow } 显示还是隐藏的css属性： display: block/none 用于控制站长回复的隐藏和显示
{ replytimeinfo } 回复时间
{ greplymessage } 回复内容


addreply.htm
交评论的模板。不建议修改这个模板，您可以修改cols的宽度。

D. 模板组件－定义文档：

installinfo.txt 安装时的信息
写法如下：
<?
$thistemname="天空"; //名称
$thisauthor="Bob Shen"; //作者
$thisdesc="蓝色系的淡雅模板。"; //描述
$thisthumb="sky.gif"; //缩略图名

temname.txt 模板名文件
直接将模板名字写入即可

colosheme.txt 色彩定义文件
$color1="#FFFFFF";
$color2="#D1E9F8"; //察看用户资料页面里表格第一行和第二行的背景颜色。
$font1="#000000";
$font2="#000000"; //对应这两个区域的字体颜色。
$border="#EBF5FC"; //全局表格的边框色
$bgcolor="#FFFFFF"; //页面的背景色
$color3="#EBF5FC"; //？？不清楚
$color4="#EBF5FC"; //？？
$calendarwidth="200"; //日历表格的宽度，可使用百分比（要带上百分号）或实际数值。
$columnstring=""; //？？

E. 模板必须包括图片：
noimg.gif 分类没有分类图标时显示的默认图标。
缩略图放置在blog/template/temthunmbs 下，名字在installinfo.txt下定义。

F. 模板组件－其他
必要css：
.riqi 当前日期的css
.calendar 日历的内表格样式（请修改background-color用于设置日历表格背景色）
.calendarborder 日历的外表格样式（请修改background-color用于设置日历表格边框色）
.calendartitle 日历的标题行样式（请修改background-color用于设置星期显示栏的背景色）
必须引用的css文件：
img/span.css

必须在模板中引入的js文件：
img/module.js

parts.php文件说明

1.7.0095起增加的模板part文件。如果您的模板想自定义以下部分，请将include/parts.php文件复制到该模板的文件夹下，然后修改其中各项的值。程序会自动寻找模板文件夹下的part文件，找不到的情况下就载入默认的part文件。

注：这些部件很可能不是最终的构成，还存在变更和增删的可能性。
中括号的部分与内里的文字之间是没有空格的。中括号括起的部分会被自动替换为相应的值。一般而言，{ chr }代表文字，{ url }代表链接，{ num }代表数值。
注意引号问题。双引号中的双引号请使用 \" ，每一语句结束请勿遗忘分号; 。否则会造成文件无法打开。推荐Editplus编辑器，可以一眼看出引号是否配对。
以下双斜杠 // 之后的内容为对前一句的注释。

最后更新：2005-03-07 21:21

<?
//php文件开始，不用修改
$parts['mobile']="<img src=\"img/mp.gif\" alt=\"{ chr }\"/>";
//手机发表的日志名和回复之前的修饰图片。
//{ chr }会被替换为（以下用=>表示）“该日志由手机发布”。
//示例：仅用文字wap体现手机发表的特征：$parts['mobile']="[WAP]";

$parts['editurl']="&line; <a href=\"{ url }\">{ chr }</a>";
//编辑日志的链接。
//{ chr }=>“编辑” { url }=>链接地址
//示例：用一个图片体现编辑日志的链接： $parts['editurl']="<a href=\"{ url }\"><img src=\"图片地址\" alt=\"{ chr }\" border=\"0\" /></a>";

$parts['delurl']="&line; <a href=\"{ url }\">{ chr }</a>";
//删除日志的链接。
//{ chr }=>“删除” { url }=>链接地址

$parts['noreplyurl']="&line; <a href=\"{ url }\">{ chr }</a>";
//清空回复的链接。
//{ chr }=>“清空回复” { url }=>链接地址

$parts['stickinfo']=" &line; <a href=\"{ url }\">{ chr }</a>";
//置顶、取消置顶的链接。
//{ chr }=>“置顶、取消置顶” { url }=>链接地址

$parts['reurl']="<a href=\"{ url }\">{ chr }</a>({ num })";
//回复日志的链接。
//{ chr }=>“回复” { url }=>链接地址

$parts['trackback']="&line; <a href=\"{ url }\">{ chr }</a>({ num })";
//查看引用的链接。
//{ chr }=>“引用” { url }=>链接地址 { num }=>已有引用条数

$parts['ishidden1']= "<p align=\"center\"><span class=\"red\"><strong>{ chr }</strong></span></p>";
//隐藏日志不可查看的提示语
//{ chr }=>提示语

$parts['ishidden3']= "<p align=\"center\"><span class=\"red\"><strong>{ chr }</strong></span></p>";
//需要回复日志不可查看的提示语
//{ chr }=>提示语

$parts['previousandnext']="<table width=\"100%\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\"><tr><td align=\"left\">{ url1 }</td><td align=\"right\">{ url2 }</td></tr></table>";
//前后文链接栏
//{ url1 }=>前一篇日志的标题+链接 { url2 }=>后一篇日志的标题+链接
//示例：将前后文链接拆成两行：$parts['previousandnext']="{ url1 }<br/>{ url2 }";

$parts['adminreply']="<br/><table width='90%'><tr><td width='30'><td style='background-color:$color2; color:$font2'> { chr1 } </td></tr><tr><td width='30'><td>{ chr2 }</td></tr></table>";
//管理员回复某篇评论栏
//{ chr1 }=>xxx回复于xxx时间 { chr2 }=>回复的内容

$parts['listpic']="·";
//所有列表项目前的前导符号
//示例：用一个图片作为所有列表项目的前导符号： $parts['listpic']="<img src=\"图片地址\" alt=\"\" />";

$parts['pagevol']=5;
//分页每组显示几个页面

$parts['eachpage']=" <a href=\"{ url }\">[{ num }]</a> ";
//每个分页链接的显示样式
//{ url }=>链接 { num }=>页数
//示例：每个分页链接只显示链接，不显示中括号： $parts['eachpage']=" <a href=\"{ url }\">{ num }</a> ";

$parts['currentpage']=" [{ num }] ";
//当前分页的显示样式
//{ num }=>页数

$parts['gravatar']="<table width=\"100%\"><tr><td valign=\"top\">{ chr1 }</td><td width=\"55\" align=\"right\" valign=\"top\">{ chr2 }</td></tr></table>";
//Gravatar开启时，评论或者留言与gravatar的位置关系
//{ chr1 }=>留言或评论正文 { chr2 }=>Gravatar头像
//示例：将Gravatar放在左边： $parts['gravatar']="<table width=\"100%\"><tr><td width=\"55\" align=\"right\" valign=\"top\">{ chr2 }</td><td valign=\"top\">{ chr1 }</td></tr></table>";

$parts['showcatrss']="<a href=\"{ url }\"><img src=\"img/xml2.gif\" alt=\"{ chr }\" border=\"0\"/></a>";
//查看该分类的rss feed
//{ url }=>该分类rss的地址 { chr }=>“查看该分类的rss feed”
//示例：仅用RSS字样代替这个图片： $parts['showcatrss']="<a href=\"{ url }\">RSS</a>";

$location['weather']="img/weather";
//天气图标所在路径

$location['rss']="img";
//rss2.0 atom UTF-8编码等小图标的路径

五、打包、安装

1、打包

模版制作好以后就要准备发布了，假如命名模版名称为AAA，以下工作需要做：

更改模版文件夹名称为AAA
更改模版文件中的相关链接地址为AAA，假如以clean模版修改的，只要把代码中clean替换成AAA
修改installinfo.txt和temname.txt，将clean替换成AAA，AAA就是模版的安装名
截缩略图，高宽大概160px比较恰当，将缩略图放在temthumbs文件夹中和模版文件一起发布
查毒
2、安装

一般步骤：使用FTP软件将模版安装文件上传到blog/template目录下，然后在后台管理界面中，添加新模版并且选中确认即可
详细步骤：(第4、5两步并非必要)
1>解压缩后上传到您的网站URL/blog/blog/template/BlackStorm/下;
2>把模版文件中里的a.php文件复制一份到您的网站URL/blog/include文件夹下;
3>把模版缩略图剪切到temthumbs里,到后台模板管理里添加模板安装名;
4>先执行a.php,在浏览器地址栏输入:您的URL/blog/blog/include/a.php,消除bom;
5>再次执行a.php,在浏览器地址栏输入:您的URL/blog/blog/template/模版名称/a.php,消除bom!
6>其它设置请到后台相对应修改;

六、模版美化

相册 imageVue gallery使用指南或者相册SimpleViewer
在线及时交流 chatango
添加365key
添加天气预报
添加flash音乐播放器
添加韩国exobud音乐播放器
美化blog的小图标生成和 80x15 Brilliant Button maker
添加漂亮的flash时钟去这里获取flash时钟代码
添加办法：在clean模版的index.htm文件的<td class="leftbar">....<td>之间合适位置，添加代码
<DIV class=sidetitle onclick="toggle_collapse('bar1')">现在时间</DIV>
<DIV class=side id=bar1 name=bar1>此处放置flash时钟的java代码</DIV><br/>
其他的在侧栏添加的功能和这个做法相同
七、FAQ

问：请问怎么在首页每个日志底部的“阅读全文”前面添加图标的？我找了很多地方都找不到。。是在模板里修改的吗？哪个文件？
答：修改blog/language/zh_cn/main.lang.php，将12=>'阅读全文',修改为
12=>'<img src="blog/template/ss-clean/readmore.gif" border=0 align="absmiddle">阅读全文',
问：我想把首页左边评论、文章前的小圆点换成一个小图片，改修改什么地方呢？应该是某个php文件吧？
答：把首页左边评论、文章前的小圆点换成一个小图片：修改模板文件夹中， part.php 里面的 $parts['listpic']="·"; 把那个点改成你的那个图片地址就行了。
如：$parts['listpic']="<img src=\"img/dot.gif\" border=0/>";
问：如何实现页面渐变效果？
答：将一下代码加入<head></head>中即可。
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.5)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.5)" charset="utf-8">
问：如何在地址栏显示个性化小图标?
答：将以下语句加入<head>与</head>之间
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
同时，制作一个ico文件上传到blog根目录。
问:为什么别人的阅读全文是没有侧栏,而我的有侧栏?
答：请在后台设置中，设置阅读blog关闭侧栏。其他类似
问：如何在网页中添加音乐播放器
答：音乐播放器有两种形式的。一种是内嵌在网页中，缺点是每次打开页面都要重新播放，优点是安装简单。另一种是采用框架内嵌，优点是音乐不会因为浏览blog而停顿重播，缺点是比较费事。关于这方面的问题，各个播放器的安装方式不同，请查阅相关文档。
问：如何采取树形导航栏？
答：树列式的分类导航
语法如下：
--------------------------------------------------------------------------------
<img src="img/dot.gif"><a target="_self" href="index.php">首页</a><br/>
<img src="img/dot.gif"><a target="_self" href="index.php?job=showcat&cat=0" title="****">+分类一</a> <a href="rss2.php?catid=0" target="_self"><img src="img/xml2.gif" title="得到些分类的RSS Feed" border="0" /></a><br/>
<img src="img/dot.gif"><a target="_self" href="index.php?job=showcat&cat=1" title="****">+分类二</a> <a href="rss2.php?catid=1" target="_self"><img src="img/xml2.gif" alt="得到些分类的RSS Feed" border="0" /></a><br/>
<img src="img/dot.gif"><a target="_self" href="index.php?job=showcat&cat=2" title="****">+分类三</a> <a href="rss2.php?catid=2" target="_self"><img src="img/xml2.gif" alt="得到些分类的RSS Feed" border="0" /></a><br/>
<img src="img/dot.gif"><a target="_self" href="index.php?job=showcat&cat=3" title="****">+分类四</a> <a href="rss2.php?catid=3" target="_self"><img src="img/xml2.gif" title="得到些分类的RSS Feed" border="0" /></a><br/>
<a target="_self" href="index.php?job=guestbook">留言簿</a><br/><a target="_self" href="login.php">登陆</a><br/>
<a target="_self" href="login.php?action=logout">登出</a><br/><a target="_self" href="index.php?job=register">注册</a><br/>
--------------------------------------------------------------------------------

说明: 1. "****"为该分类说明。 2. 如有更多分类，可按照分类一二三四方式再增加。 3. xml2.gif 为blog程序自带的。4.<img src="img/dot.gif">分类前面的小图片，可以自己选择图片和修改路径。5. 由于本blog未采用默认相册，相册路径为href="gallery"，请修改成您的相册的路径，安装模板前请先修改该项。
感谢 http://www.upwave.net/ 升浪投资·博客
问：如何更新表情图片？
答：如果想使用新表情，又不想使以前写的日志中用的表情变成红叉叉，解决的办法是：先打上自定义表情出错补丁，备份imge/emot里面的所有默认表情，然后全部删除，上传本模板中的表情，后台刷新表情，最后上传备份的所有默认表情，以后不要在后台使用刷新表情功能。当然如果你使用其他非32*32大小的表情图标，出现对不齐，错位等问题我无法解决。注意，只能在emot文件中最多放32张图片刷新表情，否则发生什么我没有试过。刷新后可以把备份的表情图片上传。(来自 http://www.guimod.com 布罗特的Blog )
如果觉得上面这个方法难，教一个笨但是简单的办法。把所有的表情图片名字改成和原来的emot图片名字一样，然后覆盖即可。但是别把一张笑脸的图片命一个哭的名字，尽管这不碍事。
问：我的“查看全部连接”是一个表格形式的，而你的还有bob的“查看全部链接”是一行一行的，这是什么原因？修改什么地方呢？
答：在include/listlinks.php改，估计你用过Nicky's Template，^_^，他改过那里
问：为什么我的表情图库显示的是16x2的样式，而别人的显示的是8x4的样式？
答：打开blog程序目录下的admin文件夹下的maintain.php
查找 $parts['emotnum']=
后面的数字默认是16，修改为你想要单行表情数，比如你上面的为8
推荐使用EmEditor编辑
问: 为什么我的模版总是不能和浏览器顶部紧贴,上面留出一行空白?
答: 这是bom存在的原因.运行a.php即可消除bom。要避免bom，推荐使用editplus编辑php文档和htm文档
问：为什么我在DW中修改htm，添加汉字后，打开是乱码？而英文却正常？
答：这是编码出错或混乱引起的。解决的办法是在editplus中打开文档，输入汉字，然后选择“另存为”，在编码中选择utf-8，覆盖原文件即可解决问题。
问：模板安装已解决，可是如何把新设置的模板设为默认呢？
答：装完了在模板前面勾上选为默认模板，确定提交不就可以了吗？
问：为什么别人的侧栏在左边，我的侧栏在右边？我如何才能把侧栏改到左边？
答：这个很简单就可以实现。打开index.htm文件，找到<td class="content">{ mainbodyout }</td>，把这段代码剪切到<td class="leftbar">...</td> 后面就可以了。
问：为什么打开“全部链接”后，我所有的友情链接都看不见？
答：使用ctr+A看看是什么效果。如果把背景色设置的和文字的颜色一样，自然看不见了。友情链接的颜色在side A { ..... }中设置color属性，而打开“全部链接”后，背景颜色在colosheme.txt 中的$color1=" "处设置。
问：如何才能实现网页立体化？我看见许多网页都好象在背景上凸出来似的？
答：clean模板就实现了这个效果。做到这点不难，在clean模板的安装包内有一个new3.jpg的图片，在css样式表中maxbox处定义了背景图片为该图片。打开new3.jpg，可以看见中间是空白，两端是5px宽的灰色渐变效果。立体效果就是通过这张图片实现的。不妨多找一些类似的背景图片加以研究，看看人家是怎样做的以及如何和背景融合的。
问：如何加插 gif / png 到Bo-Blog 的杂项裡去?
答：在index.htm文件中的“杂项”内容div标签内，在</div>前添加代码<a href="图片链接地址" target="_blank"><img src="图片地址(相对地址或绝对地址)" alt="鼠标放在图片上的提示信息(可选)" border="0" /></a><br>
问：网页的滚动条颜色怎么设置?
答：推荐看这篇blog日志玩转网页滚动条
问：模版的作者为什么不尊重用户,搜索引擎搜索到的关键字全是模版作者的信息?
答：模版作者并不是不尊重用户，而是为了方便用户修改。任何一个模版，最起码需要模版的用户对它的关键字部分进行修改，以利于搜索引擎的robots对blog搜索。用户需要修改index和view两个文件中<head>...</head>之间的部分。关于这部分的知识，请参阅这篇blog日志：网页中META标签的使用
问：我的日志的字太小/太大了怎么调整？
答：修改css文件中相关部分的font-size属性，一般设置为12px比较合适，blog日志标题设置为14px，具体根据个人喜好和模版的风格调整
问：我安装了bo-blog，打开gravatar功能后，默认的“大头贴”图像不好看，我想使用个性化的“大头贴”怎么办？
答：做一张 80x80大小的jpg格式的图片，将其命名为gravatar.jpg，上传到img/文件夹下，覆盖原来的文件
问：我想知道如何在回复这里能显示头像，另外我想换个头像，不用狗狗的～怎么换呢？
答：你先需要去http://www.gravatar.com/议....或者关闭这个功能。
问：我想修改blog管理员回复时的标题栏颜色
答：修改colorsheme.txt 中 $color2=" "的色彩代码
问：<br>和<br/>有什么区别？
答：<br>换行不空格，<br/>换行空格
问:我自己配的颜色很难看,有没有好的配色工具?
答: 在web站点设计中，对网页进行配色通常是设计师的直觉感受或者多次反复实验：例如对网页颜色主色彩的选择，考虑各种颜色的色调、饱和度，等等...，最终才能达到比较好的配色效果。现在，网络上有一些专用于配色设计的调色板工具，对网页配色设计都很有价值。
个人觉得，比较好用、非常专业、同时对于网页设计师（更专注于网页配色）非常有帮助的一个在线免费工具http://wellstyled.com/tools/colorscheme2/index-en.html
问：日志部分加密的代码是什么？
答：日志部分加密，仅管理员可见，代码是

--------------------------------------------------------------------------------
这部分内容只有管理员才能查看。
--------------------------------------------------------------------------------

,部分隐藏的代码是

--------------------------------------------------------------------------------
这部分内容必须登陆后才能查看。
--------------------------------------------------------------------------------

八、后记

这个模板指南我已经筹划了很久了。从第一款修改的仿照MSN风格的模板，到目前的classic模板，我已经制作了十套模板。不敢说精通，但是制作模板的方方面面已摸透了。

现在回头想起，制作模板其实很简单，只是在一开始，观念的难以转变。传统上我们制作网页，都是内容和页面在一起，我们做网页的同时内容也做好了，而blog模版的制作，对绝大多数的人来说都是新的概念，以前所没有接触过的，尽管能跃跃欲试想做模版的人都是有些网页设计基础的人。想比传统的网页制作，模版的制作更简单，就是那几个页面和css样式表的修改，我们只需要知道这个文件是做什么的，显示在什么情况下，每一个部分显示的是什么就够了，然后不管用表格或者div标签或者混合使用，总之不管用什么方式，让数据在需要它显示的地方显示就行了。

曾经有人在我的blog上留言，觉得不满，认为这样做模版仅仅是对clean模版的翻版，很不屑，很生气地、愤愤然地写下“简直服了你”。我也毫不客气地请他滚蛋，少在我的blog上放屁。撇开技术含量不说，即使是同样的模版，图片、配色的不同就是完全两种不同的风格，譬如我的mentholatum模版，在梦雪柔的手中就成了完全不同的风格，想比而言，她那个更加清新典雅，色彩搭配的也很明快。而且，blog美观重要，但更重要的是为访问者服务，不管clean模版，还是其他blog程序的模版都是这种布局，为什么使用这种布局呢？因为它是最符合用户的使用习惯、最方便阅读、最快速地传达消息的布局，所以就引起一些“白痴”的不满了，到处乱放屁.觉得仅仅是更换了个图片、修改个颜色，是抄袭、是不动脑筋，是粗制滥造．．．

我曾经在一篇blog中写道过，这是一个设计理念的问题。“疯狗”们认为的技术含量，无非是使用图片切割制作模版，采用不规则布局，难吗？无非是在fhotoshop中做好图、精确地切割，整点flash之类，然后放入适当的位置，把网页设计提升到美工的高度而已。那又能怎么样呢？还不是需要导航条、公告、blog摘要等等必要的要素，顶多也是改变个位置而已，页面无非花哨一些或者漂亮一些，这就是疯狗们到处放屁的支撑和倚靠。而且99%的疯狗甚至连htm都读不懂呢

模版要美观、有创新，但是模版还需要有通用性和易用性，须知大部分的用户只想把模版安装上使用，不想去看大段的使用须知，不愿意去修改flash源文件、photoshop或者fireworks源文件，所以除非是定制模版，所以“疯狗”们所提倡的，就是不打算把模版给别人用。

本指南里的提到的部分相关说明，采用了其他人的劳动成果，本人无意侵犯你们的权利。如果有什么不妥或侵犯了您的权利，请联系歪人歪语或者发电子邮件aiwho at hotmail dot com

感谢曾经帮助过我的朋友,你们对我的支持,才使我一步步地深入学习模版的制作,你们对我的鼓励,才使我下定决心写这个模版制作指南.感谢你们测试我那些不成熟的作品,并提出宝贵的意见.

我TMD的怎么没有早点找到这个贴子.在BAIDU花了两个小时.真的很喜欢SIMPLE夏这个模板.自己也想学学.非常感谢小歪.HOO.和BOBLOG的作者~!

[s:69]

海院の水水 · 发表于 2006-9-9 13:14

感谢您的付出```希望能发表一些好的原创文章``

blog编程

相关帖子

浏览过的版块