OBLog 3.0 用户模版制作教程

　　现在的BLOGER越来越多，挡都挡不住，是什么时候大家都开始写BLOG了呢？BLOG就相当于自己在网上的一个家，既然是家就要有自己的个性，每个人都希望自己的BLOG与众不同，在这里SNAKE就为大家讲一下BLOG模版的怎样做成的。以“沉静青春 youth CSS系列 12”模版为示例，在http://skin.midicn.cn/jc/mbjc/htm/youth.rar可以下载到，内有PNG（Fireworks MX 2004修改）源文件。

　　本教程都是在2000系统IE6.0，Mozilla Firefox 1.0下测试。不敢保证都和SNAKE看到的一样。之所以要用Mozilla Firefox测试是因为那5%的用户。不过说真的，尽管有时候我很想抛弃他们……

一、基本必要条件

1.1 做模版需要什么能力吗？

　　做OBLog的模版你需要了解HTML和CSS还有美工基础，当然这不是很难，甚至可以说很简单，不会的朋友马上学，买书一个星期就可以学会。另外就是细心、耐心，毕竟我们也是在做设计，严格要求是当然的。

1.2 准备工具

　　一台电脑，制作网页的工具Macromedia Dreamweaver MX 2004和做图工具Macromedia Fireworks MX 2004（PS也可以）。测试浏览器Mozilla irefox，IE6.0在XP下自带。截图工具HprSnap5，论坛里有使用方法（滚屏截图）。这几个工具可以在天空下载站下载到。

Macromedia Dreamweaver MX 2004：
http://www2.skycn.com/soft/860.html
Macromedia Fireworks MX 2004：
http://www2.skycn.com/soft/1824.html
Mozilla Firefox V1.0.6 中文增强版
http://www2.skycn.com/soft/20595.html
SN:
Macromedia Dreamweaver MX 2004:
WPD700-52206-61494-40475
Macromedia Fireworks MX 2004：
WPD700-52206-61494-40475
Macromedia Studio 8正式版序列号
flash：WPD800-53933-19632-12307
dreamweaver：WPD800-52430-29332-35254
fireworks：WPD800-59537-39432-12200
　　这里还要推荐一款很好用的CSS编写软件：TopStyle3。你可能用不到。下载地址：http://skin.midicn.cn/soft/TopStyle3.rar
　　以及《样式表中文手册css2》是CHM格式的，可直接打开。你一定要用到。下载地址：http://skin.midicn.cn/soft/css2.rar
　　屏幕滚动截图工具HprSnap5。做好模版后截图工具，可能用到。下载地址：http://skin.midicn.cn/soft/HyperSnap-DX.rar

二、构思

2.1 色调

　　首先要考虑BLOG的基本色系是什么颜色，然后是基本布局，这里我们不做太复杂的，只做最简单的考虑。这里我考虑绿色，而且只考虑绿色和灰色搭配。（传说中灰色是万能色，就好象O型血一样。）

2.2 布局

　　BLOG的布局很简单，不用考虑太多因素。最常见的无非是左右两列布局（我们不讲太个性的）。

三、制图

　　在FW下面新建一个890*1344的图。优化设置里面选择PNG32格式（推荐使用PNG格式的图片，导出后画质最好，体积小。个人经验。）

3.1 背景

　　我们先考虑整个页面的背景色，使用#CCFF66颜色。

　　然后是中间部分的背景图片，我们设计一个圆角矩形，效果如下图。

3.2 HEAD的设计

　　再把刚才的大圆角矩形复制粘贴一遍，并且把修改高度到150，注意使用鼠标拖放修改，直接修改数字会变形。（汽车人）

　　从网上随便找个风景图，然后使用魔术棒随便扣，再填充成灰色，再“平面化所选”，再把尺寸对齐，多余的削掉，位图属性设置成“屏幕”。
　　在合适的地方画个矩形，特效是阴影。这样看起来会和背景和谐。

3.3 FOOTER的设计

　　再复制圆角矩形，和刚才的HEAD修改一样，颜色改成黑色。注意细节。

　　现在整个背景就OK了，新建一个图层，并且把这个图层锁定。

3.4 公告烂的设计

　　公告栏简单，看图。

3.5 内容页的设计

　　我是这么设计的。

3.6 RIGHT的的设计

　　做一个标题文字的背景。

3.7 BLOG分类背景图的设计

　　两个矩形，一个色浅，用做连接色，一个色深，用做鼠标拖过。左边加个小箭头点缀。矩形的宽尽量宽，因为没准哪个BLOGGER的分类名字很长。（切图的时候把这两个图切成一个。）

四、切图

　　终于，我们把BLOG的基本外观设计完成，这个过程不像本教程似的一气呵成，而是经过了几天的时间才设计出来的，而且，这还不是我们BLOG的最终形态，这只是一张只能看的图，接下来的步骤就是把这个基本结构设计图切成一小块一小块的，以便于我们做成模版。
　　按照下面的图切就没有问题了。背景图一定要居中。一共是8个图片。每个切片的名字就是图片上红色的字。

　　不会的请下载源文件参考。http://skin.midicn.cn/jc/mbjc/htm/youth.rar

五、制作模版

　　这里主要是HTML和CSS的代码编写。

5.1 布局（我不直接全部写进去，循序渐进的慢慢来。）

　　终于，可以开始进入正题了，所谓“难者不会，会者不难”，我们使用的是CSS DIV来制作，优点是显示速度很快，设计灵活，而且W3C重点推荐，希望大家也能这样制作模版，代码简单容易看懂。
　　打开Dreamweaver MX 2004，文件--新建--HTML页面，把兼容XHTML勾上，进入代码界面，把里面的代码全部删除掉。然后我们可以快乐健康的做网页了~
　　首先先建五个层，并且分别给他们一个ID。代码如下：

<link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css"><!-- CSS连接代码 -->
<div id="head"></div><!-- HEAD是最上面的层 -->

<div id="content"><!-- CENTENT包括LEFT和RIGHT两个层 -->
<div id="left"></div><!-- LEFT是BLOG内容的层 -->
<div id="right"></div><!-- RIGHT是“登陆信息，最新BLOG”等的层 -->
</div>

<div id="footer"></div><!-- FOOTER是最下面版权的层 -->

　　这样，基本的布局层就出来了，我们开始着手制作CSS文件，新建一个CSS文件，开始定义样式。
　　先是BODY的定义：（注意书写格式，下面的是国际标准格式......汗）

body {
color: #333;  /* 本模版所有文字的颜色，我们使用略深的灰色 */
background: #CF6;  /* 本模版的背景色，就是做图时的背景色，浅绿色 */
text-align: center;  /* 本模版内所有属性居中 */
margin: 0;  /* 外边距，默认好象是10，我们设置成0，因为是0所以可以不要单位。 */
font-family: 'Century Gothic', Arial, Helvetica, sans-serif;  /* 本模版所有使用的字体，我觉得Century Gothic英文字体很好看，所以一直在用这个字体。 */
font-size: 12px;  /* 本模版所有字体的大小，12px是FIREFOX下最小的显示字体，IE是11px，为了兼容性，我们选择12px。 */
line-height: 150%;  /* 所有字的行高，这里设置的是150%，习惯。 */
}

a {
color: #749A23;  /* 所有连接文字的颜色，我们使用深一些的绿色。 */
text-decoration: none;  /* 所有连接文字的去掉下划线，默认是有的。 */
}
a:hover {
color:#CF6;  /* 所有鼠标拖过连接文字的颜色，我们使用浅一些的绿色。 */
}

　　接下来就是HEAD的样式了~

#head {
height: 135px;  /* HEAD的高。 */
width: 780px;  /* HEAD的宽，780是在800*600下的推荐宽度。 */
text-align: left;  /* HEAD层内所有所有属性居左。 */
background: url("header.png") no-repeat top center;  /* HEAD的背景属性，分别是：背景图URL，背景图不重复，在层的位置：上 中。 */
}

　　我们这回用IE打开刚才的页面看看，怎么样？？？是不是最上面的层出来了？是不是很兴奋？（好兴奋，好兴奋哦~~）

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index1.htm

　　我们继续CONTENT层的制作~

#content {
padding:10px;  /* CONTENT层内边距10px。 */
width:780px;  /* CONTENT的宽，780px，和上面的HEAD层对齐。 */
text-align:left;  /* CONTENT层内容居左。 */
background: url("bg.png") repeat-y center;  /* CONTENT的背景属性，分别是：背景图URL，背景图重复在Y轴上（纵向重复显示），在层的位置：中。 */
}

　　然后是FOOTER层。

#footer {
width:780px;  /* FOTTER层宽780px。 */
height: 43px;  /* FOTTER层高43px，根据切出来的图的大小定义。 */
color: #fff;  /* FOTTER层内字体颜色，因为背景是黑色，我们选择白色，而且这个地方只准备放版权。 */
text-align: left;  /*  FOTTER层内容居左。 */
padding:13px 0px 0px 30px;  /* FOTTER层的内边距定义，分别是 上 右 下 左。 */
background: url("footer.png") no-repeat;  /* FOTTER的背景属性（我们省略掉一部分属性，因为是浏览器默认的），分别是：背景图URL，背景图不重复。 */
}

　　OK！！我们在HEAD，CONTENT，FOOTER每个层分别随便打几个字上去测试！效果如下：

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index2.htm

 　　如果你明白我们为什么这么定义层属性的话，那么恭喜你，你已经基本学会XHTML CSS制作网页了（理论）。怎么样？是不是Too Easy？

5.2 我的分类

　　我们开始制作“我的分类”的属性。
　　因为OBLog3.0的分类是标签是用li属性的，所以我们要复制“我的分类”HTML源代码到模版页面测试，只是测试，测试完了要删除的。
　　加入“我的分类”代码的模版HTML如下：（这是SNAKE的，每个人的都不一样。）
　　我们使用红色的粗体表示。

<link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css">

<div id="head">

<ul>
<li><a href="/blog/user1/1243/index.shtml">首页</a></li>
<li><a href="/blog/user1/1243/archives/photo/index.shtml">相册</a></li><li><a href="/blog/user1/1243/subject/2337.shtml">记日(44)</a></li>
<li><a href="/blog/user1/1243/subject/2413.shtml">乐音(2)</a></li>
<li><a href="/blog/user1/1243/subject/2338.shtml">作工(10)</a></li>
<li><a href="/blog/user1/1243/subject/2345.shtml">戏游(2)</a></li>
<li><a href="/blog/user1/1243/subject/2454.shtml">计设(9)</a></li>
<li><a href="/blog/user1/1243/subject/671.shtml">静和(13)</a></li>
</ul>

</div>

<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>

<div id="footer"></div>

　　然后是“我的分类”CSS样式的制作。
　　我说明一下，写CSS的习惯每个人都不一样，有的人喜欢先写大布局代码，然后是其他的代码，SNAKE喜欢按照顺序写，也就是从上到下的方式，下面就按照SNAKE喜欢的方式写。
　　在#head的类下面插入下面的代码：

#head ul, #head li {   /* HEAD层内UL标签和LI标签的样式属性。 */
float:left;  /* 内容居左，就是横向显示，LI标签默认是竖向显示。 */
margin:0;  /* 外边距，默认的不是0，所以我们要给它个值。 */
display:block;  /* 块级元素，必须有。这个比较难解释，书上是这么写的：块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行。汗~~ */
}
#head li a{   /* HEAD LI标签内连接样式。 */
height: 26px;   /* 高度26。 */
padding:3px 5px 0px 20px;   /* 内边距，定义连接文字在LI标签的位置。 */
color: #666;   /* 连接色。 */
background:url("mainli.png") no-repeat left top;   /* 连接的背景，连接到我们设计的背景图片上去，从左上开始显示，并且不重复。 */
border: 1px solid #999;   /* 连接的边框，使用灰色。 */
}
#head li a:hover{   /* HEAD LI标签内连接之鼠标拖过样式。 */
color:#333;   /* 拖过之颜色。 */
background:url("mainli.png") no-repeat 0px -26px;   /* 拖过后的背景，我们使用的图片和连接的背景图片是同一张，这样做的好处是节省带宽。要搞清楚位置，-26是从高位-26的地方开始显示图片，设计的时候要明白为什么这么做。 */
}

　　刷新页面，看看我们网页。效果如下图：

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index3.htm

　　每个分类挨的比较近，我们不需要改，因为根据SNAKE的经验：OBLog3.0的分类，系统默认会分开一些。所以最终效果不是这样的。

5.3 LEFT的制作

　　左边是显示文章标题、内容等的位置，我们要根据图片的设计来完成它。
　　先是定位。因为LEFT在CONTENT层内，所以代码写在#CONTENT样式下面。因为内容比较重要，所以要做的细一些，我们连接字的色，拖过，访问后都要定义，区别文章内颜色。

#left {
float: left;  /* LEFT层在CONTENT中的位置，要居左。 */
width: 520px;  /* LEFT层宽度。 */
padding: 0px 20px 0px 20px;  /* 内边距，左右要留下间隙。 */
color: #333;  /* LEFT层内所有字体的颜色，SNAKE使用深灰色，比纯黑色要舒服。 */
text-align: justify;  /* LEFT层内容的文字两端对齐，这在OFFICE里面经常用到，是细节，不要也可以。 */
border-right: 1px dotted #999;  /* LEFT层右侧加一条灰色的虚线，LEFT和RIGHT的分界线。 */
}

#left a{
color:#749A23;  /* LEFT层内连接字体色。 */
text-decoration: none;  /* LEFT层内连接字体去掉下划线。 */
}
#left a:hover {
color:#C1E27D;  /* LEFT层内鼠标拖过连接字体色。 */
text-decoration:underline;  /* LEFT层内鼠标拖过连接字带有下划线。 */
}
#left a:visited {
color:#666;  /* LEFT层访问后的连接字体色。 */
}

　　在LEFT内随便打几个字，测试，效果如下：

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index4.htm

 　　打几个带有连接的字，并且分别测试：连接字体字体色，鼠标拖过连接字体色，访问后的连接字体色。

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index5.htm

 5.4 公告栏

　　进展好快！已经到公告栏了！这个比较简单~先在模版页面LEFT层内新建一个公告栏的层，和LEFT一样，也要测试连接字体色等等。

　　现在的HTML如下：
<link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css">

<div id="head"></div>

<div id="content">
<div id="left">
<!-- 下面的就是公告栏的层 -->
<div id="placard">涡虫我草<a href="3">敌素活圣诞节</a>巴斯德看<a href="4">见发表苦不管</a>客观内<a href="7">可是地方</a>病感反对看见</div>

</div>
<div id="right"></div>
</div>

<div id="footer"></div>

　　我们开始定义公告栏的CSS：

#placard {
margin: 10px 10px 10px 10px;  /* 公告层外边距。 */
padding: 10px 5px;  /* 公告层内边距。 */
color: #3A5014;  /* 公告层内字体色。 */
background: #C1E27D url("placard.png") no-repeat top right;  /* 公告层内背景色，背景图，背景图从右上开始显示，不重复。就是哪个双引号。 */
border-top: 1px solid #666;  /* 公告层上面的灰黑色实线。 */
border-bottom: 1px solid #666;  /* 公告层下面的灰黑色实线。个人觉得上下各一条线比较有个性，当然也可以是灰黑色边框。 */
}
#placard:first-letter {  /* 公告层内第一个字样式定义。 */
margin: 0pt 5pt 0pt 0pt;  /* 公告层内第一个字的外边距。 */
padding: 3px;  /* 公告层内第一个字的内边距。 */
font: 20px bold;  /* 公告层内第一个字的字体大小，粗体。 */
float: left;  /* 公告层内第一个字居左对齐，排版的人知道，至于为什么加你可以把这个样式属性去掉试试。 */
border : 1px dotted #fff;  /* 公告层内第一个字的边框，1象素，虚线（好象是虚点），线颜色。 */
}
#placard p:first-letter {  /* 和上面的定义是一样的，但是这个段落的定义（注意多了个P），因为有的人在加公告的时候弄成段落格式的了，所以也需要定义一下。 */
margin: 0pt 5pt 0pt 0pt;  /* 公告层内第一个字的外边距。 */
padding: 3px;  /* 公告层内第一个字的内边距。 */
font: 20px bold;  /* 公告层内第一个字的字体大小，粗体。 */
float: left;  /* 公告层内第一个字居左对齐，排版的人知道，至于为什么加你可以把这个样式属性去掉试试。 */
border : 1px dotted #fff;  /* 公告层内第一个字的边框，1象素，虚线（好象是虚点），线颜色。 */
}
#placard a{
color: #666;  /* 公告层内连接字体颜色。 */
}
#placard a:hover {
color: #698B23;  /* 公告层内连接字体鼠标拖过的颜色。 */
}

　　因为背景是浅绿色，所以我们不能使用LEFT的CSS定义了，需要另外定义。需要说明的是#placard:first-letter（#placard p:first-letter）属性要不要都行，只要您觉得漂亮。
　　完成效果图如下：

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index6.htm

 5.5 BLOG内容

　　这部分也不简单，根据需要我们要考虑四点因素，文章标题，发表日期（发表人），文章内容，阅读全文(次数)这四点。
　　文章标题我们使用.contenttitle，发表日期使用.contenttime，文章内容不使用CSS定义，因为LEFT已经定义过了，阅读全文(次数)使用类.contentcomments。（我以前是使用H3，H4直接定义的，好处是省几个字节。坏处是当用户在后台表表文章设定字体时很有可能定义成H3或H4，造成布局混乱，很显然这是不可取的。）

　　HTML代码如下：

<link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css">

<div id="head"></div>

<div id="content">
<div id="left">

<div class="contenttitle"><a href="1">怒吗</a></div>
<div class="contenttime">SNAKE - by - 2005-9-6 17:06:00</div>
话说Numa Numa Dance：<br>
　　 紐澤西的十九歲小胖子，有一天突發奇想，把羅馬尼亞的一首流行歌曲 Dragostea Din Tei（他自己也不懂羅馬尼亞文）拿來對嘴唱，自己再加上舞蹈動作，他自己發明的Numa Numa Dance，製作了上面的MV，從頭到尾他都沒離開書桌前的椅子喲，真的笑到肚子痛，他的表演精辟令人叫绝，此FLASH始发于newgrounds网站，浏览量竟然超过8百万。
<div class="contentcomments"><a href="/blog/514651654645">阅读全文(106) | 回复(7)</a> | 引用通告(0)</div>

</div>
<div id="right"></div>
</div>

<div id="footer"></div>

　　CSS代码加到刚才公告的后面吧，代码如下：

.contenttitle {  /* 博客文章的标题定义。 */
height: 40px;  /* 博客文章标题的高度。 */
padding:3px 0px 0px 25px;  /* 标题的内边距，同样是上右下左的顺序，左边25象素是为了和左边拉开距离，谁说的了？距离产生美么~ */
background:url("content.png") no-repeat left;  /* 标题的背景，就是哪个像盾牌似的小图标了，为了好看，没别的。图片不重复，左对齐。 */
font-size: 15px;  /* 标题的字体大小，15象素看着还凑合。 */
color: #060;  /* 标题的字体颜色，这个一般用不到，因为文章标题都是连接文字，不过我发现“置顶”这两个字是没有连接的~所以加上吧，为了和标题字色配套。 */
}
.contenttime {  /* 博客文章的作者，发表时间定义。 */
width:450px;  /* 时间的宽度，因为我们要文字上面有“上划线”，而且要右对齐所以定义这个。 */
margin:-18px 0px 0px 20px;  /* 时间的外边距，也就是定位，上-18px是为了挨着标题显示，不信你去掉试试，20px是左边距，要不然“上划线”就盖住那标题图片了。 */
font: 9px 'Tahoma', sans-serif;  /* 时间文字的大小，字体。我发现英文Tahoma字体最小的能显示的字就是9px了。 */
color: #666;  /* 时间文字的颜色。 */
border-top: 1px dotted #999;  /* 传说中的上划线，1象素，虚线（应该是虚点），浅灰色。 */
text-align:right;  /* 时间文字右对齐，同样为了好看。 */
}
.contentcomments {  /* 阅读全文数，回复数等信息的CSS定义。 */
text-align: center;  /* 文字居中显示。 */
border-top: 1px solid #C2C2C2;  /* 一个上划线。 */
border-bottom: 2px solid #C2C2C2;  /* 一个2px的下划线，注意这两定义个不能缩写的。 */
margin:15px 0px 35px 0px;  /* 外边距。 */
font: bold 12px;  /* 字体粗细，大小。 */
}

　　完成效果如下：

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index7.htm

5.6 RIGHT的定义（最后一块的定义，布局终于快要完成了，哭~~~）

　　先是RIGHT的位置。CSS如下：

#right {  /* RIGHT的CSS定义。 */
float: right;  /* 位置，居右，相对LEFT层而言。 */
width:230px;  /* 宽度，一点一点测试得出来的数字。 */
padding: 0px 20px 0px 5px;  /* 内边距，右边距和LEFT的左边距一样，是20px，对称。 */
}

　　在RIGHT里面打几个字测试效果。

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index8.htm

　　然后是大标题字的美化。我们使用.bigtitle标签。CSS代码如下：

.bigtitle {  /* 大标题字层的CSS定义。 */
text-align: center;  /* 字体居中。 */
width:200px;  /* 层宽。 */
height: 24px;  /* 层高。 */
font: 14px;  /* 字体定义，14象素。 */
color: #333;  /* 字体颜色。 */
padding: 2px 0px 0px 0px;  /* 层内边距，距离上面是2px。 */
background: url("sidebartitle.png") no-repeat top center;  /* 本层的背景定义，不重复，位置：上 中。 */
}

　　写几个字（Calendar | 日　历），看效果：

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index9.htm

　　然后就是这些栏目的内容定义了。(下面的标签我都在$前面加了个"_",要不和本BLog标记起冲突了.)

日历（$show_calendar_$）
最新日志（$show_newblog_$）
最新回复（$show_comment_$）
最新留言（$show_newmessage_$）
登陆口（$show_login_$）
搜索（$show_search_$）
BLOG信息（$show_info_$）
友情连接（$show_links_$）

　　能用的几乎都在上面了。顺序就这么排吧，无所谓的。

　　接下来的事情就是定义这些小模块了~~~

1.日历的定义：

　　先随便找个BLOG查看其源文件得知日历的代码如下：

<div id="calendar"><table width='100%'>
<caption>August 2005</caption><tr>
<th abbr=Sunday>日</th>
<th abbr=Monday>一</th>
<th abbr=Tuesday>二</th>
<th abbr=Wednesday>三</th>
<th abbr=Thursday>四</th>
<th abbr=Friday>五</th>
<th abbr=Saturday>六</th></tr><tr>
<td align=center>&nbsp;</td>
<td align=center>1</td>
<td align=center><a href="/blog/user1/1243/archives/2005/118466.shtml">2</a></td>
<td align=center>3</td>
<td align=center>4</td>
<td align=center>5</td>
<td align=center>6</td>
</tr><tr>
<td align=center><a href="/blog/user1/1243/archives/2005/120832.shtml">7</a></td>
<td align=center>8</td>
<td align=center>9</td>
<td align=center><a href="/blog/user1/1243/archives/2005/122376.shtml">10</a></td>
<td align=center>11</td>
<td align=center>12</td>
<td align=center>13</td>
</tr><tr>
<td align=center>14</td>
<td align=center>15</td>
<td align=center>16</td>
<td align=center><a href="/blog/user1/1243/archives/2005/126279.shtml">17</a></td>
<td align=center><a href="/blog/user1/1243/archives/2005/126831.shtml">18</a></td>
<td align=center>19</td>
<td align=center>20</td>
</tr><tr>
<td align=center>21</td>
<td align=center><a href="/blog/user1/1243/archives/2005/128795.shtml">22</a></td>
<td align=center>23</td>
<td align=center>24</td>
<td align=center>25</td>
<td align=center><a href="/blog/user1/1243/archives/2005/131991.shtml">26</a></td>
<td align=center>27</td>
</tr><tr>
<td align=center>28</td>
<td align=center>29</td>
<td align=center><a href="/blog/user1/1243/archives/2005/135178.shtml">30</a></td>
<td align=center>31</td>
<td align=center></td>
<td align=center></td>
<td align=center></td>
</tr>
</table>
</div>

　　分析出日历是一个大表格，放在#calendar层里面，月份使用caption定义，星期几使用#calendar th定义，而日期使用#calendar td定义，写过日记的日期是连接。遗憾的是没有当前日期的定义。
　　这样，我们就可以设计出各种的样式类美化这个日历表格了~把上面的代码考到网页里bigtitle层的下面，现在的模版代码是：

<link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css">

<div id="head"></div>

<div id="content">

<div id="left"></div>
<div id="right">

<div class="bigtitle">Calendar | 日　历</div>

<div id="calendar"><table width='100%'>
<caption>August 2005</caption><tr>
<th abbr=Sunday>日</th>
<th abbr=Monday>一</th>
<th abbr=Tuesday>二</th>
<th abbr=Wednesday>三</th>
<th abbr=Thursday>四</th>
<th abbr=Friday>五</th>
<th abbr=Saturday>六</th></tr><tr>
<td align=center>&nbsp;</td>
<td align=center>1</td>
<td align=center><a href="/blog/user1/1243/archives/2005/118466.shtml">2</a></td>
<td align=center>3</td>
<td align=center>4</td>
<td align=center>5</td>
<td align=center>6</td>
</tr><tr>
<td align=center><a href="/blog/user1/1243/archives/2005/120832.shtml">7</a></td>
<td align=center>8</td>
<td align=center>9</td>
<td align=center><a href="/blog/user1/1243/archives/2005/122376.shtml">10</a></td>
<td align=center>11</td>
<td align=center>12</td>
<td align=center>13</td>
</tr><tr>
<td align=center>14</td>
<td align=center>15</td>
<td align=center>16</td>
<td align=center><a href="/blog/user1/1243/archives/2005/126279.shtml">17</a></td>
<td align=center><a href="/blog/user1/1243/archives/2005/126831.shtml">18</a></td>
<td align=center>19</td>
<td align=center>20</td>
</tr><tr>
<td align=center>21</td>
<td align=center><a href="/blog/user1/1243/archives/2005/128795.shtml">22</a></td>
<td align=center>23</td>
<td align=center>24</td>
<td align=center>25</td>
<td align=center><a href="/blog/user1/1243/archives/2005/131991.shtml">26</a></td>
<td align=center>27</td>
</tr><tr>
<td align=center>28</td>
<td align=center>29</td>
<td align=center><a href="/blog/user1/1243/archives/2005/135178.shtml">30</a></td>
<td align=center>31</td>
<td align=center></td>
<td align=center></td>
<td align=center></td>
</tr>
</table>
</div>

<div class="bigtitle">New BLog | 日　志</div>
<div class="bigtitle">New Reply | 回　复</div>
<div class="bigtitle">New message | 留　言</div>
<div class="bigtitle">User Login | 登　陆</div>
<div class="bigtitle">Search | 搜　索</div>
<div class="bigtitle">BLog Info | 信　息</div>
<div class="bigtitle">My Links | 收　藏</div>
</div>

</div>

<div id="footer"></div>

　　我们开始设计CSS代码：

#calendar{  /* 日历层定义。 */
width:195px;  /* 日历层宽。 */
}
#calendar caption {   /* 定义日历顶部月份。 */
font:11px 'Century Gothic', Arial, Helvetica, sans-serif;  /* 日历顶部月份的字体大小，字体。 */
}
#calendar table {
border-collapse: collapse; /*合并表格相临边框*/
}
#calendar th{   /* 定义星期 */
font: normal 12px;   /* 字体正常显示，OBLog系统默认显示粗体，大小12象素，中文字最小12象素。 */
}
#calendar td {  /* 定义日期 */
font-size: 10px;   /* 字体10px。 */
}
#calendar td a {   /* 日历内日期链接样式 */
display:block;  /* 日历内日期呈块级元素 */
background-color: #C1E27D;  /* 日历内日期背景色 */
width:16px;  /* 日历内日期宽 */
height:10px;  /* 日历内日期高 */
}
#calendar td a:hover{   /* 鼠标拖过日期的链接样式 */
background-color: #CF6;  /* 背景色 */
color: #333;  /* 字体色 */
}

　　完成，看看效果：

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index10.htm

 2.最新日志

　　接下来是最新日志的样式定义，查看代码知道最新日志是使用UL标签的，而且和最新留言，最新回复一样使用UL标签。（其实他们每个都有单独的标签，可以进一步个性化~我们做简单的~~）这样的话我们就设计一个UL定义的层类就可以了。我们使用.sidebar标签类。

　　CSS代码如下：

.sidebar ul{  /* 字体色 */
margin: 0 0 0 -5px;  /* 外边距 */
}
.sidebar li a{  /* LI连接样式 */
padding: 0 0 0 20px;  /* 内边距，左20px的距离。 */
color:#749A23;  /* 连接字体色，使用稍微有些深的绿颜色 */
background: url("liimage.png") no-repeat left top;  /* 左边的小圆圈，是图片。本来LI属性自带圆圈这个设置，但是本地测试OK用做模版就不可以了。使用图片的话还可以改成别的小图标，设计灵活。 */
}
.sidebar li a:hover{  /* 连接字鼠标拖过 */
padding: 0 0 0 20px;  /* 和上面的一样，也是左边内边距20px，这个不能省略。 */
color:#C1E27D;  /* 鼠标拖过时字体颜色，使用较浅的绿色，相对于上面的连接色，这样的话色彩变换比较柔和。 */
text-decoration:underline;  /* 鼠标拖过时有下划线，在英文网页里面连接一般都有下划线，但是汉字这样做就不好看了，要改。 */
}
.sidebar li a:visited {  /* 连接访问后样式 */
text-decoration:underline;  /* 有下划线 */
color:#060;  /* 更深的绿色，本来是要用更浅的色凋的，但是发现那样的话字就看不清了，使用灰色就不好看了~所以使用深色绿色。 */
}

　　由于“日志”,“回复”,“留言”是一样的,所以一个栏目测试OK,其他的就都解决了.
　　哈哈！又完成了！看效果！！！

点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index11.htm

3.登陆口

　　接下来是登陆窗口的定义，这个比较简单，开始的登陆表单是用表格做的所以定义表格，登陆后有个小菜单，查看代码得知这是个层，让它居中就可以了，思路是，表单和表格的样式设计。我们设计开始。

　　HTML代码是这样的：（就是居中）
<div align="center">$show_login_$</div>

　　CSS代码：

table {  /* 所有表格定义 */
font-size: 12px;  /* 字体12px */
}
input {  /* 输入框文本字段的定义 */
background-color: #C1E27D;  /* 背景色 */
border: 1px #333 solid;  /* 边框，1象素，灰黑色，实线。 */
font-size: 12px;  /* 字体12px */
color: #666;  /* 字体色 */
}
select {  /* 列表框文本字段的定义 */
background-color: #C1E27D;  /* 背景色 */
border: 1px solid #333;  /* 边框，1象素，灰黑色，实线。 */
font-size: 12px;  /* 字体12px */
color: #666;  /* 字体色 */
}

　　登陆窗口测试不了，就不测试了。登陆口和“BLOG搜索”是一样的，都是表单。下面给个设计好的截图：

　　后面的BLOG信息，以及我的连接样式就不用设计了。前面已经打好基础了。

5.7 完成后的代码

　　OK！，现在，我们的模版已经设计完成了！现在把OBLOG提供的相应的代码复制到模版里面。需要做的就是把主模版和副模版分开。

　　主模版HTML代码：(注意,所有模版代码都在$的前面加了个"_",为的是不和我的BLog冲突.)

<link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css">
<div id="head">$show_subject_l_$</div>
<div id="content">
<div id="left">
$show_placard_$
$show_log_$
</div>
<div id="right">
<div class="bigtitle">Calendar | 日　历</div>
$show_calendar_$
<div class="bigtitle">New BLog | 日　志</div>
<div class="sidebar">$show_newblog_$</div>
<div class="bigtitle">New Reply | 回　复</div>
<div class="sidebar">$show_comment_$</div>
<div class="bigtitle">New message | 留　言</div>
<div class="sidebar">$show_newmessage_$</div>
<div class="bigtitle">User Login | 登　陆</div>
<div align="center">$show_login_$</div>
<div class="bigtitle">Search | 搜　索</div>
$show_search_$
<div class="bigtitle">BLog Info | 信　息</div>
$show_info_$
<div class="bigtitle">My Links | 收　藏</div>
$show_links_$
</div>
<br style="clear: both;">
</div>
<div id="footer">$show_xml_$ &copy; $show_blogname_$  All rights reserved.</div>

　　副模版HTML代码：(注意,所有模版代码都在$的前面加了个"_",为的是不和我的BLog冲突.)

<div class="contenttitle">$show_topictxt_$</div>
<div class="contenttime">$show_author_$ - BY - $show_addtime_$</div>
$show_logtext_$
<div class="contentcomments">$show_more_$</div>

　　管理员进入OBLog3.0的后台把相应的代码复制进去就可以了。（可能你注意到主模版里面多了<br style="clear: both;">代码，是为了在FIREXFOX下显示的。现在先不管，反正模版代码就是这么多了，再改就是CSS的事情了。）

5.8  完成后的问题

　　以后，然后就是实际的测试了。问题当然发现不少，首先是BLOG主人回复那，问题如下图所示：

　　看代码知道这同样是表格，修改CSS填加如下代码：

table p{  /* 表格内段落的定义，这里一般针对单个文章的“BLOG主人回复”设置 */
padding: 10px 10px 10px 10px;  /* 内边距 */
font-size: 12px;  /* 字体大小 */
color: #749A23;  /* 字体色，为了配合模版，使用绿色 */
border: 1px solid #C2C2C2;  /* 1px的边框。 */
}

看完成效果：

　　接下来的问题是这里：（其实这里并不重要，关键是一种改页面思路，要是明白了这点，这个模版的几乎任何地方都可以改。）

　　找到定义它的CSS属性，#oblog_edit层，还有它里面的这个类.oblog_Btn。
在CSS里面填加代码：

#oblog_edit {  /* 编辑窗口的定义。 */
background-color: #fff;  /* 背景色为白色，以前是灰色。 */
border: 0px  /* 边框为0，以前是1px，灰色。 */
}
#oblog_edit .oblog_Btn {  /* 加粗，斜体等小图的设置。 */
background-color: #fff;  /* 背景为白色，原来是灰色。 */
}

　　完成效果如图：

　　看到了吧？其实有好多东西都可以自定义设置的。关键是我们得找到它的CSS定义名。至此，我们的模版已经设计完成了。多注意一些小的细节是很重要的，精致的东西才有人喜欢么~~~

　　如果你只用IE浏览器，并且不在乎使用Mozilla Firefox 浏览器的观众的话，你的模版做到这里也就结束了，如果你在乎那5%的话就继续往下看。

六、在Mozilla Firefox下测试

　　好了，打开Mozilla Firefox，浏览我们已经设置好模版的BLOG。
　　……
　　……
　　……
　　你是不是要问，这TM是我费尽辛苦做出来的模版吗？怎么变成这么个甩样了？这也是我为什么想抛弃那5%的原因了。为什么IE和FF就不能把CSS标准统一一下呢？害我折寿。我告诉你们，改成适合Mozilla Firefox的模版不亚于重新写一遍CSS……有心理准备了么？ 来吧.

6.1 如何兼容

　　首先明确我们的目的，目的很简单，就是如何在适合IE的情况下同样适合Mozilla Firefox？经过无数次的实验发现一种方法，那就是在CSS里面给不适合Mozilla Firefox的CSS标签再加一个标签，一个对应IE，而另外一个对应Mozilla Firefox。（这只是SNAKE发现的方法，如果谁要是还有更好的方法请告诉我，并且我提示你，这肯定不是最好的方法。）

　　我们看一个例子：

* html #head {  /* 对应IE浏览器。 */
height: 200px;
}
#head {  /* 对应Mozilla Firefox浏览器。 */
height: 100px;
}

　　上面的代码中，* html #head是对应IE浏览器的，而#head是对应Mozilla Firefox浏览器的，这样我们就知道如何对应每个浏览器写CSS的方法了。

6.2 HEAD层的问题

　　然后看Mozilla Firefox中我们的BLOG，从上到下，把发现的问题一个一个的修改。

　　先是HEAD层。找到4个问题。

　　我们对原CSS做出修改，修改后代码如下：

* html #head {  /* 对应IE的HEAD层。 */
height: 135px;  /* HEAD的高。 */
width: 780px;  /* HEAD的宽，780是在800*600下的推荐宽度。 */
padding:99px 0px 0px 18px;  /* HEAD的内边距，“我的分类”位置取决于此。 */
text-align: left;  /* HEAD层内所有所有属性居左。 */
background: url("header.png") no-repeat top center;  /* HEAD的背景属性，分别是：背景图URL，背景图不重复，在层的位置：上 中。 */
}
#head {  /* 对应Mozilla Firefox浏览器的HEAD层。 */
width: 780px;  /* HEAD的宽，780是在800*600下的推荐宽度。 */
margin: 0 auto;  /* HEAD层居中。 */
padding:105px 0px 30px 40px;  /* HEAD的内边距，“我的分类”位置取决于此。 */
text-align: left;  /* HEAD层内所有所有属性居左。 */
background: url("header.png") no-repeat top center;  /* HEAD的背景属性，分别是：背景图URL，背景图不重复，在层的位置：上 中。 */
}

#head ul, #head li {   /* HEAD层内UL标签和LI标签的样式属性。 */
float:left;  /* 内容居左，就是横向显示，LI标签默认是竖向显示。 */
margin:0;  /* 外边距，默认的不是0，所以我们要给它个值。 */
display:block;  /* 块级元素，必须有。这个比较难解释，书上是这么写的：块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行。汗~~ */
}
* html #head li a{   /* HEAD LI标签内连接样式。（对应IE浏览器） */
height: 26px;   /* 高度26。 */
padding:3px 5px 0px 20px;   /* 内边距，定义连接文字在LI标签的位置。 */
color: #666;   /* 连接色。 */
background:url("mainli.png") no-repeat left top;   /* 连接的背景，连接到我们设计的背景图片上去，从左上开始显示，并且不重复。 */
border: 1px solid #999;   /* 连接的边框，使用灰色。 */
}
#head li a{   /* HEAD LI标签内连接样式。（对应Mozilla Firefox浏览器） */
padding:5px 5px 2px 20px;   /* 内边距，定义连接文字在LI标签的位置。 */
color: #666;   /* 连接色。 */
background:url("mainli.png") no-repeat left top;   /* 连接的背景，连接到我们设计的背景图片上去，从左上开始显示，并且不重复。 */
border: 1px solid #999;   /* 连接的边框，使用灰色。 */
}
#head li a:hover{   /* HEAD LI标签内连接之鼠标拖过样式。 */
color:#333;   /* 拖过之颜色。 */
background:url("mainli.png") no-repeat 0px -26px;   /* 拖过后的背景，我们使用的图片和连接的背景图片是同一张，这样做的好处是节省带宽。要搞清楚位置，-26是从高位-26的地方开始显示图片，设计的时候要明白为什么这么做。 */
}

　　修改后的效果图：

　　仔细看上面的CSS代码，我们根据BLog在Mozilla Firefox浏览器中显示的结果判断出需要修改#head和#head li a这两个属性（你问我怎么判断出来的？根据原来的CSS代码，哪段代码定义什么，都写的很清楚了，仔细找的话不难，实在不行一个一个测试。），那么在原来的#head和#head li a前面都加上* html（前面提到过，加上* html就对应IE了），在他们的后面分别复制粘贴这两段代码，并且做出修改（只修改#head和#head li a）。

　　在Mozilla Firefox浏览器中，不推荐使用内边距（padding）的同时使用高（height）的定义，因为这样的话Mozilla Firefox会同时把内边距（padding）和高（height）算进去，这样表现出来的结果就比原来高上很多。所以我们去掉它的高（height），去掉高（height）的同时我们要对内边距（padding）进行修改，改成合适的象素为止，这就需要你如炬的眼睛了。

　　另外在IE中它本身是居中对齐的，但是在Mozilla Firefox中却居左显示（在800*600也许看不出什么区别，但是在1024*768 or 1204*1024的分辨率下却很让人不爽，现在液晶普及这么快，大分辨率是趋势 ），我们在#head层中新加入了margin: 0 auto;标签（0代表上下外边距，auto是自动，CSS布局居中都是这么做的），为的是使#head层在屏幕中居中显示。

　　这里出现的问题主要是布局上的，所以其他的标签我们并未做出修改。

6.3 #content的问题 

　　两个问题，一是居中问题，二是背景重复显示。

　　问题需要一点一点的解决。我们来修改CSS代码。先修改#content部分。
　　代码如下：

#content {
padding:10px;  /* CONTENT层内边距10px。 */
margin: 0px auto;   /* CONTENT层居中显示。 */
width:780px;  /* CONTENT的宽，780px，和上面的HEAD层对齐。 */
text-align:left;  /* CONTENT层内容居左。 */
background: url("bg.png") repeat-y center;  /* CONTENT的背景属性，分别是：背景图URL，背景图重复在Y轴上（纵向重复显示），在层的位置：中。 */
}

　　大家看到了，我在#content层里面心加了margin: 0px auto;代码，这是层居中对齐的代码。（其实在IE也应该加的，不过我追求代码最简，就去掉了。）
　　然后是背景纵向重复显示，不知是OBLog程序本身的问题还是Mozilla Firefox的问题，CSS代码居然无效，我发现一种方法，就是在#content层的最后加<br style="clear: both;">（是HTML代码）这样背景看起来就正常了。
　　注意这是主模版的代码，下面红色粗体部分是多出来的代码：

<link rel="stylesheet" type="text/css" href="/blog/skin/snake/css/youth/css.css">
<div id="head">$show_subject_l_$</div>
<div id="content">
<div id="left">
$show_placard_$
$show_log_$
</div>
<div id="right">
<div class="bigtitle">Calendar | 日　历</div>
$show_calendar_$
<div class="bigtitle">New BLog | 日　志</div>
<div class="sidebar">$show_newblog_$</div>
<div class="bigtitle">New Reply | 回　复</div>
<div class="sidebar">$show_comment_$</div>
<div class="bigtitle">New message | 留　言</div>
<div class="sidebar">$show_newmessage_$</div>
<div class="bigtitle">User Login | 登　陆</div>
<div align="center">$show_login_$</div>
<div class="bigtitle">Search | 搜　索</div>
$show_search_$
<div class="bigtitle">BLog Info | 信　息</div>
$show_info_$
<div class="bigtitle">My Links | 收　藏</div>
$show_links_$
</div>
<br style="clear: both;">
</div>
<div id="footer">$show_xml_$ &copy; $show_blogname_$  All rights reserved.</div>

　　解决问题后的效果图：

6.4 #footer的问题

　　我们要先把同级别的层的问题解决。#footer层问题如下：

　　解决这两个问题很简单。CSS代码如下

*html #footer {
width:780px;  /* FOTTER层宽780px。 */
height: 43px;  /* FOTTER层高43px，根据切出来的图的大小定义。 */
color: #fff;  /* FOTTER层内字体颜色，因为背景是黑色，我们选择白色，而且这个地方只准备放版权。 */
text-align: left;  /*  FOTTER层内容居左。 */
padding:13px 0px 0px 30px;  /* FOTTER层的内边距定义，分别是 上 右 下 左。 */
background: url("footer.png") no-repeat;  /* FOTTER的背景属性（我们省略掉一部分属性，因为是浏览器默认的），分别是：背景图URL，背景图不重复。 */
}
#footer {
margin:0px auto;  /* FOTTER层居中显示。 */
clear: both;  /* FOTTER 不悬挂在其他层之上。 */
width:740px;  /* FOTTER层宽740px。 */
height: 30px;  /* FOTTER层高30px，根据切出来的图的大小定义。 */
color: #fff;  /* FOTTER层内字体颜色，因为背景是黑色，我们选择白色，而且这个地方只准备放版权。 */
text-align: left;  /*  FOTTER层内容居左。 */
padding:13px 0px 0px 30px;  /* FOTTER层的内边距定义，分别是 上 右 下 左。 */
background: url("footer.png") no-repeat bottom center;;  /* FOTTER的背景属性（我们省略掉一部分属性，因为是浏览器默认的），分别是：背景图URL，背景图不重复。 */
}

　　修改后的效果图：

6.5 #left的问题

未完待续........