dearmwear和PHP和HtmL_BO-BLOG模板制作指南(上）

一、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 文件的正文写在这里... ...

This text is bold

例子解释

HTML文档中，第一个标签是。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是，这个标签告诉浏览器这是HTML文档的终止。

在和标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。

在和标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。

在和标签之间的文本是正文，会被显示在浏览器中。

在和标签之间的文本会以加粗字体显示。

表格

.....

//*产生一个立体边框,包括在TABLE内的元素://

....

//* 分行元素//

....

//* 分格元素 //

与

常常结合在一起使用，如

......

超链接格式 .... 如 歪人歪语 代码如下:

歪人歪语

图形插入元素

各种属性:

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 运行环境快速集成安装套件。

下载地址：

为防止下载地址出错,如果该地址不能下载,请在google中搜索关键字“微米天空” http://www.micronsky.net/easyapm/

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文章摘要显示，右侧是公告、统计、最新文章、最新留言、友情链接等，最下面是版权信息等。为了方便以后介绍，对相关区域作统一命名，如图：

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

//显示顶部的图片//

{ catnav } //横向导航//

{ mainbodyout } //主体部分左侧blog摘要显示区域//

{ langindex14 } //公告// ----〉侧栏子标题

{ announcebar }

//公告内容//

{ langindex15 } //统计//----〉侧栏子标题

{ langindex0 }{ articlenum }

{ langindex1 }{ reply }

{ langindex2 }{ visitorcounter } { stat }

{ langindex3 }{ todayvisit }

{ regusers }

{ currentonline }

//统计内容//

{ langindex4 } //日历// ----〉侧栏子标题

{ calendar }

//日历内容//

{ langindex5 } //最新日志// ----〉侧栏子标题

{ allnew }

//最新日志列表//

{ langindex6 } //最新评论//----〉侧栏子标题

{ newreply }

//最新评论列表//

{ langindex16 } //最新引用//----〉侧栏子标题

{ tbshow }

// 最新引用列表//

{ langindex7 } // 搜索//----〉侧栏子标题

{ langindex13 } //归档//----〉侧栏子标题

{ archives }

//归档列表//

{ langindex12 } //友情链接// ----〉侧栏子标题

{ links }

//友情链接列表//

{ langindex11 } //杂项//----〉侧栏子标题

{ xml2 }

{ xml3 }

{ encodeinfo }

//杂项内容// //主体部分右侧栏显示区域//

{ versioninfo } &line; //版权信息等//

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

{ catnav } //横向导航//

...

是在table表格中产生一个分行

.....

是在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;

}