|
本教程转自http://www.oioj.net/blog/user1/1243/archives/2005/135178.shtml
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下测试。不敢保证都和看到的一样。之所以要用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型血一样。）
 500){this.resized=true;this.style.width=500;}">
2.2 布局
BLOG的布局很简单，不用考虑太多因素。最常见的无非是左右两列布局（我们不讲太个性的）。
 500){this.resized=true;this.style.width=500;}" border=0>
三、制图
在FW下面新建一个890*1344的图。优化设置里面选择PNG32格式（推荐使用PNG格式的图片，导出后画质最好，体积小。个人经验。）
3.1 背景
我们先考虑整个页面的背景色，使用#CCFF66颜色。
然后是中间部分的背景图片，我们设计一个圆角矩形，效果如下图。
 500){this.resized=true;this.style.width=500;}" border=0>
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
 500){this.resized=true;this.style.width=500;}" border=0>
每个分类挨的比较近，我们不需要改，因为根据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
 500){this.resized=true;this.style.width=500;}" border=0>
打几个带有连接的字，并且分别测试：连接字体字体色，鼠标拖过连接字体色，访问后的连接字体色。
点击这里预览
http://skin.midicn.cn/jc/mbjc/htm/index5.htm
 500){this.resized=true;this.style.width=500;}" border=0>
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
 500){this.resized=true;this.style.width=500;}" border=0>
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
 500){this.resized=true;this.style.width=500;}" border=0>
 500){this.resized=true;this.style.width=500;}" border=0>
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> </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> </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_$ © $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; <
以上所有观点仅代表网友个人观点，不代表武汉热线观点。
阅读全文 | 回复(3) | 引用通告 | 编辑 回首页 | 
