以下内容转自：
http://www.tyx75.cn
在设计新的模板前，我们总是会先参考一下别人设计好的模板，了解一下结构，然后根据自己的需要去找素材来设计自己想要的模板。
我在采用mambo建立这个小站时，也是这样做的。安装好后，系统本身已经自带了二套模板（一套是800窄屏的，另一套是900适合宽屏的）。因本人使用的是宽屏本本，所以就先拿900的那套来开刀了。
在详细的步骤还没有整理出来前，先说几点小细节吧。
一、新加组件或模块后如何调用，组件和模块以及模板可以在曼波中国网站下载到，本站在整理后也会提供下载（深度修改，全支持
中文GB2312或ISO-8859-1），本站所使用的模板组件等也是从曼波中国下载的，在这里先向曼波中国的站长及管理小组的人员说声谢谢了。
组件(模块、模板)的安装很简单，一般都不大，几百KB左右。进入到你的网站后台，然后点安装/卸载组件(模块、模板)就可以安装上去了。安装好了以后，组件部分的内容，可以在通过在菜单里增加新菜单项来调用。步骤如下：
1、后台---->菜单--->主菜单--->新增--->在选项栏里选择“组件”然后"下一步"--->取一个名字，这个名字就是在主页菜单上要显示出来的，然后选择对应的组件，最后点保存就OK了。组件添加好了以后记得要在组件选项里设置好各个选项。
2、模块的调用，在调用只前我们先分析一下模板目录里CSS目录下的template_css.css文件和模板目录下的index.php文件。通过对这二个文件的分析，我们会发现DIV+CSS的特点，先在CSS里为其设置好，然后在index.php里通过DIV来直接调用就OK了。这样一来就简捷了很多，网页打开的速度也快了很多。（去看了一些门户网站，发现他们现在也都是在采用这种网页设计模式，看来真是大势所趋啊。^_^）
举例：下面插入一段template_css.css文件里的原代码后面有中文标识（E文水平有限）
/** div container for top menu. position:top [顶部菜单] **/
#topmenu {
position:relative;
float:left;
clear:left;
background-color:#336699;
width: 100%;
}
/** div container for image header [顶部图片] **/
#imgheader {
position:relative;
float:left;
clear:left;
width:100%;
height:99px;
background-color: #FFFFFF;
}
#container_inner {
position:relative;
float:left;
clear:left;
width:730px;
}
/** div container for left column [左边专栏] **/
#leftcol {
position:relative;
float:left;
clear:left;
width:172px;
background:transparent url(../images/bg_leftcol.jpg) repeat-y left top;
}
#leftcolmenu {
position:relative;
background:transparent url(../images/bg_leftcol.jpg) repeat-y left top;
overflow:auto;
}
/** div wrapper for user2 & user3 [最新文章和热门文章]**/
#content_top_wrapper {
position:relative;
float:right;
clear:right;
width:542px;
display:inline;
margin: 4px 8px 0 0;
}
/** div container for position:user2 [最新文章] **/
#content_top1 {
position:relative;
float:left;
clear:left;
width:269px;
}
/** div container for position:user3 [热门文章] **/
#content_top2 {
position:relative;
float:right;
clear:right;
width:269px;
}
/** div container for mainbody [正文部分] **/
#content_main {
position:relative;
float:left;
width:520px;
margin:15px 0 20px 20px;
background-color:#FFFFFF;
}
/** div container for right column [右边专栏] **/
#rightcol_top,
#rightcol {
float:left;
clear:left;
width:168px;
margin:0 0 0 1px;
display:inline;
overflow:auto;
}
/** div container for right column position:header [右边专栏上部] **/
#rightcol_top {
height:70px;
min-height:70px;
background:transparent url(../images/bg_topright.jpg) no-repeat center top;
}
/** div container for banner position:banner [横栏广告] **/
#banner {
position:relative;
clear:left;
float:left;
width:515px;
height:65px;
min-height:65px;
color:#FFFFFF;
font-size:10px;
padding: 20px 0 0 215px;
}
#blackline {
position:relative;
clear:left;
float:left;
width:730px;;
height:10px;
min-height:10px;
background-color: #000000;
color:#FFFFFF;
font-size:10px;
}
/** copyright [footer 底部]**/
#copyright {
position:relative;
width:900px;
display:block;
clear:both;
float:left;
}
#copyright div {
color:#666666;
font-size:12px;
font-weight:normal;
display:block!important;
width:900px;
float:left;
clear:left;
margin:-6px 0 0 0;
text-align:left;
}
我们会发现，每一段只前都会有形如“/** div container for top menu. position:top [顶部菜单] **/”这样的一句标识，然后再看index.php文件
<div id="topmenu">
<?php mosLoadModules('top',-1); ?>
</div>
<!-- end top menu. -->
？？？ 发现了没有，CSS文件里定义的topmenu在这里通过DIV调用了。打开你的首页，看看是不是这个情况，为了区别，你可以试着改一下CSS文件里的设置，比如把原来的background-color:#336699;改为background-color:#000000;然后保存，刷新首页，你就会发现，顶部菜单的背景色变成了黑色。 ：）
知道了上面的这些，我们就可以任意添加我们自己的了。
系统已经为我们设定了一些模板位置，如下：
left
right
top
bottom
inset
banner
header
footer
newsflash
legals
pathway
toolbar
cpanel
user1
user2
user3
user4
user5
user6
user7
user8
user9
advert1
advert2
advert3
icon
debug
在这些基础上，我们就可以自己来增加我们自己的了。步骤如下：
1、后台--->网站--->模板位置--->设定一个新位置名
2、后台--->模板--->网站模板--->选择一个模块，把其位置改为在我们第一步新加的位置上。然后保存。
3、第三步，修改index.php文件，把新加好的位置名通过DIV来调用可以了。
通过这种方法，我们既可以增加新的，也可以修改原来的。如改变位置等。
有兴趣的朋友可以一起研究一下。
