[教程] [Bo-Blog 2.1+] Marshalv8 模板制作教程。

Marshal

写在前面：
    教程发布已经有段时间了。很多网友提问，为什么根据此教程制作的模板都相差很大，或者根本做不出来呢？
    在此教程中我一再写到，您，首先要懂得html的基本语法，xhtml的标签规则，css的语法等等。如果您这些都不会的话，那继续按此做下去也只是枉费心机。正所谓巧妇难为无米之炊。
    如果你是第一次接触修改bo-blog模板，且具备一定的xhtml+css的基本知识。您可以对下载一副和你需求的模板整体框架相同的模板，对styles.css中每个变量进行修改。甚至微调elements.php来进行修改。以达到您所需要的要求。
   此教程并非新手教程。我也不会制作新手教程，因为制作每个模板的方式，方法和过程，代码等等都大相径庭。虽有异曲同工之处，但是对于新手来说，并不能完全满足其要求，在此请各位新手海涵。
   再次要提出的是，请勿发email或者pm我说要学做模板。那样我实在会太累了，换位思考，您也会这么做，是吧。如果您急需要模板的话，可以在模板下载区选择一副您还看得过去的，或者付费请人定制吧。


另外,很多人问我IE6下浏览模板很正常,IE7,Firefox下错位怎么办?
那就请你们多用用搜索引擎,类似http://www.google.cn/search?sour ... h-CN&q=ie6+hack
推荐大家在firefox下制作模板,因为其浏览器比较标准化.

-----------------下面开始制作教程----------------

[Bo-Blog 2.1+] Marshalv8 模板制作教程。

模板我还未制作，今天我边写边做。
可以让大家学习一下。
请大家注意，一般制作bo-blog模板使用的工具有：
网页3剑客：photoshop,Dreamweaver,flash等。
但是，这些工具，只是为了较高难度的模板制作的。比如，自己画图，切图，然后在dw中调整代码。一般切好的图都是table代码，虽然符合XHTML标准，但是在bo-blog中不推荐。
flash推荐高级用户使用，并具有一定flash基础。
其他常用软件有：Editplus3本人制作模板只用这个。需要调整的浏览器有ie6.0/7.0+ Firefox2+ sarfia opera等。
大家需要注意，一般制作模板都在ie中制作，由于标准不同。会导致firefox和opera等错位。
作为一个模板制作者，必须安装的浏览器有IE6，7以及firefox。IE6可以使用绿色版，这个网上自己找吧。

-----------华丽的分割线----------
制作bo-blog代码需要php调试，手动书写代码。
一般需要安装一个php环境，这里Marshal推荐大家使用phpnow 官方地址为phpnow.org
按其官方网站指导在本地安装完毕后，大家可以在其中安装bo-blog了，具体细节不再累述。

[ 本帖最后由 Marshal 于 2009-1-15 17:34 编辑 ]

Marshal

2.0 准备事项：
有了以上软件，我们可以着手制作模板了。
首先，选定一款自己中意的模板，Marshal本次制作的模板是仿制模板。
而非原创，那么现在可以先找到一款自己喜欢的模板，此次Marshalv8找到的是taobaoUED team的官方博客模板。
此程序经检查代码，使用的是WordPress，现在我们动手做吧

2008-7-30 09:37

Marshal

首先我们找到bo-blog目录的template文件夹。
一般来说，我们可以找到default文件夹。我门把他复制一份。
重命名为Marshalv8

2008-7-30 09:49

我们对每个文件名进行解释。image文件是存放模板图片的文件夹
elements.php是存放于模板代码的文件。
styles.css是存放css代码的文件。
而info.php是记录模板信息的。
剩下的thumb.jpg是提供模板缩略图的。

现在我们来修改info.php
如图中所示，把default替换成Marshalv8
其他稍作修改即可。
然后进入后台，把安装Marshalv8 再把默认模板替换掉即可。

Marshal

安装后我们就可以调整css的代码了，其效果，在浏览器中刷新即可展现。
具体的CSS ID对应的哪项，请参阅：Bo-Blog 2.0风格制作手册+经验分享专贴！
新手请勿盲目制作模板，制作出来的会很难看，也不河蟹。
请至www.w3school.com.cn 或者其他css网站先学习下XHTML和css的基本知识。做做小练习，在进行模板制作，那样会好很多。
大家常会用到的比如margin:0 auto;这是居中
float:left；这是居左；
添加个display:inline;或者display:block；属性，可以使li横排。
这些都是必须基本得学会的。
实在不会怎么办呢，提供大家一个方法，就是找在线css的网站，你可以使用其来配合制作模板。
-------------------------
您必须了解bo-blog的整体框架，又得了解body是什么。
大家先来看。
把taobao UED网站（以后称源网站）粗粗的看下，做下准备工作，先复制你觉得需要的图片，然后保存到image文件夹。
然后找到源网站的源文件（别告诉我你不会看源文件）
偷出来这句

1. <link rel="stylesheet" href="http://ued.taobao.com/blog/wp-content/themes/TaobaoUED/style.css" type="text/css" media="screen" />

复制代码

这是css咯，我们下载下来，参考用，(*^__^*) 嘻嘻……
TIPs：从现在开始，Marshal稍稍偷偷懒，把Marshalv8的大多数文件替换成原来Marshalv7的文件。
因为每次我做模板，都会改进些css代码，以及删除些没用的功能。优化后的代码可以减少以后的调试。
当然，Marshalv7的模板官方可是有下载的。
我们继续吧!
--------------------------------------------
这个算我修改过的还不错的默认elements.php你们按自己的需求修改吧
elements.rar (3.81 KB)

这个算我修改过的还不错的默认elements.php你们按自己的需求修改吧
下载次数: 285

2008-7-30 10:36

[ 本帖最后由 Marshal 于 2008-7-30 10:36 编辑 ]

Marshal

然后，我们截图来着，对，先定义body背景嘛！
这里要用到photoshop也就是ps 截图后用滴管工具，截取到颜色代码为#eaeaea
body中就可以这么：

1. body {
   
2.         margin: 0;
   
3.         padding: 0;
   
4.         font:80% 'Lucida Grande', Verdana, Arial, Sans-Serif; /* Resets 1em to 10px */
   
5.         line-height:150%;
   
6.         color: #333;
   
7.         background:#eaeaea;
   
8.         }

复制代码

我现在可是按Marshalv7改的哦，不是按default改的，按理第一代模板都是default改的，大家别抽我！
找到这段代码

1.    <div id="navigation">
   
2.         <div class="panel">
   
3.          <div class="innerpanel">
   
4.          <h5 style="cursor: pointer">Navigation</h5>
   
5.          <div class="panel-content2">
   
6.         <ul> <!--global:{section_head_components}--> </ul>
   
7.          </div>
   
8.          </div>
   
9.          </div>
   
10.          <div class="panelshadow"></div>

复制代码

我说你们抽代码仔细点别多个div少个div的。要一一对应啊！
<!--global:{section_head_components}-->
有global的就是外部调用了。
这个要注意了哦，原来这段代码在sidebar部分的，默认是在menu的。我们把他还原。
找

1. <div class="blog-header">
   
2. <h1 class="blog-title"><a href="index.php">{blogname}</a></h1>
   
3. <div class="blog-desc">{blogdesc}</div>
   
4. </div>

复制代码

后面插入

1. <div id="menu">
   
2. <ul>
   
3. {section_head_components}
   
4. </ul>
   
5. </div>

复制代码

每个<li>都要<ul>包裹，这是必须的。
我制作教程只是讲讲要点，并不会每句修改方法都说，那要死人的，再说了，这个模板完成了，你们也不会做这个模板了呀！

Marshal

经过简单的排版和制作后，效果如图。

2008-7-30 14:51

现在还有很多细节地方未进行修饰。
TIPs：关于<div>检查，大家可以对对应的层进行排版。这样就可以检查出些小错误。
如图

2008-7-30 14:51

很多地方的css代码写不来，就可以按照如上说说的下载的css进行研究并修改，说白了就是抄袭，
要注意按照源网站的源文件中div的class或者id一一对应。
做这个模板的menu，也就是css滑动门的源js至今没有找到代码，说实话，我也有点头疼。

Marshal

经研究，由于使用原效果的menu需要每页相关<li>都设置<li class="current">的属性，由于bo-blog的设计不同。
所以无法使用yahoo-yui2.5.2设计给WP的js滑动门特效。
只能用如下css代替：

1. #menu {
   
2.     position:relative; height:30px;
   
3.     width:900px;
   
4.         margin:0 auto;
   
5.         border-bottom: 1px solid #f60;
   
6.         height: 27px;
   
7. }
   
8. 
   
9. #menu ul {
   
10.     list-style:none;
    
11.     overflow: hidden;
    
12.     padding: 0px;
    
13.     margin: 0px;
    
14.        
    
15. }
    
16. 
    
17. #menu li {
    
18.     float:left;
    
19.     line-height: 20px;
    
20.     padding: 5px 12px 5px 12px;
    
21. }
    
22. 
    
23. #menu a, #menu a:active, #menu a:visited {
    
24.     text-decoration:none;
    
25.     color:#6b6b6b;
    
26.     font-family:微软雅黑,Arial;
    
27.     font-size:13px;
    
28.     display: block;
    
29.         padding: 0px 5px 0px 5px;
    
30. }
    
31. 
    
32. #menu a:hover, #menu .activepage a {
    
33.     color:#f60;
    
34.         border-bottom:5px solid #f60;}

复制代码

Marshal

IE下基本框架出来了，但是FF下效果还是不好，有背景没出来，还有空出一块白的地方，需要慢慢调试。
像空出白的地方，尽量找出问题，不要草率的用margin:-10px;

2008-7-31 10:43

Marshal

经过努力修整，模板制作完毕。
其中，遇到不少问题，大家可以来模板区发帖求助。
比如我遇到的这2个div在FF中不起作用，但是IE下有效。
                <div id="innerwrapperout">
                <div id="innerWrapper">
经过反复研究，图片没设置高度，那怎么会显示。
于是，把收尾的div放到最后。
但是footer就被限制了宽度，不能满屏显示了。
那怎么办，于是增加了个fix。

1. #fix {
   
2. width:100%;
   
3. line-height:0px;
   
4. font-size: 0px;
   
5. margin:0px;
   
6. padding:0px;
   
7. clear:both;
   
8. }

复制代码

等于把图片都拉下来了，然后FF测试下，通过，之后大家可以按自己的喜好进行细节的优化和修改。
这可是很费时间的哦。

Marshal

最后，几个浏览器测试完毕，上传到服务器，截图，保存为thumb.jpg要和info.php中的对应哦！

2008-7-31 15:23

一切完毕后，先别急着发布，先去论坛发帖预览，让大家提出宝贵意见哦！
经过自己一番测试后，可以正式发布了！
TIPs：发布之前，可以去w3的网站验证XHTML和css。
保证模板的完整性，无瑕疵。以及符合w3标准。
比如http://jigsaw.w3.org/css-validator/
http://validator.w3.org/
至此，教程完毕！