页面布局教程

1． mambo页面的基本布局
2． 组织和编排mambo模块的技巧

准备好了吗？现在开始！

(图一)Mambo页面布局

 

1．Mambo页面布局说明

这里我们使用mambo自带的模板来举例说明，参考上图。
作为架设网站的工具mambo页面基本分为以下几个区域：
<1> 顶部：<pathway>, <user3> and <user4> 模块
<2> 左侧栏：<left>模块
<3> 中间： <banner>，<user1>, <user2> 和 <mainbody>模块
<4> 右侧栏：<right>模块
<5> 底部：<footer>模块

这些只是默认的mambo模块布局，所有模块的位置都可以通过修改模板文件index.php来定义和调整到任意位置。载入模块的php语句是：

mosLoadModules($position_name [, $style] )

例如：

mosLoadModules( “left”, -1 )

在Mambo4.5.2以前的版本中，对于$style的定义有0（默认），-1，1，-2, Mambo4.5.2.1版本新增了”-3”的定义。（见图1 (c)）使用他们会有什么不同的效果呢。我们一起来看看吧！

I. $style=0 (默认)时，模块纵向单独显示，实例如下：

 <!-- Individual module -->
<table cellpadding="0" cellspacing="0" class="moduletable[suffix]">
  <tr>
    <th valign="top">Module Title</th>
  </tr>
  <tr>
    <td>
      Module output
    </td>
  </tr>
</table>
<!-- Individual module end -->
 

II. $style=1时，模块横向显示。每个模块显示在一个表格栏cell内。实例如下：

 <!-- Module wrapper -->
<table cellspacing="1" cellpadding="0" border="0" width="100%">
  <tr>
    <td align="top">
      <!-- Individual module -->
      <table cellpadding="0" cellspacing="0" class="moduletable[suffix]">
        <tr>
          <th valign="top">Module Title</th>
        </tr>
        <tr>
          <td>
            Module output
          </td>
        </tr>
      </table>
      <!-- Individual module end -->
    </td>
    <td align="top">
      <!-- ...the next module... -->
    </td>
  </tr>
</table> 

III. $style=-1时，模块外部没有任何边框修饰而且也没有模块标题（名称）。效果如下（本来面目）：

模块1  模块2  模块3

IV. $style=-2时，模块显示格式如下：

<!-- Individual module -->
<div class="moduletable[suffix]">
 <h3>Module Title</h3>
  Module output
</div>
<!-- Individual module end -->

V. $style=-3时，模块全部用div来修饰，有利于给网页减肥，另外还可以实现圆角边框。

<!-- Individual module -->
<div class="module[suffix]">
  <div>
    <div>
      <div>
        <h3>Module Title</h3>
        Module output
      </div>
    </div>
  </div>
</div>
<!-- Individual module end -->

相信很多mambo fans一定喜欢 “-3”效果（圆角，cool!），现在你也可以创建自己的可爱圆角mambo模板了！如何作出圆角模块显示效果？我们将在以后的教程里介绍～，所以敬请关注！

<2> 模块的显示/隐藏技巧

在制作mambo模板时，必须为每个模块留出显示的区域，我们经常会使用例如table,td,div标签把模块包装起来定义这个区域的宽度。所以，当模块在某些页面被设置成为隐藏状态时，包装模块的这些table或div还在，而且会显示为空白，很影响页面的美观。而一个简单的php语句就可以解决这个问题，if {} condition ＋ mosCountModules （见图1 （b） ）

下面的例子告诉我们如何使用 if {} 语句达到更好的效果，同时去掉了不必要的html代码。举例：

<!-- START set the width for td of user1 and user2  -->
<?php 
  $numblock = 0;
  if (mosCountModules( "user1" )>0 && mosCountModules( "user2" )>0) {
    $numblock = 2;
    $blockwidth = 50;
  }else if (mosCountModules( "user1" )>0 || mosCountModules( "user2" )>0) {
    $numblock = 1;
    $blockwidth = 100;
  }
?>
<!-- END set the width for td of user1 and user2  -->
<!-- START load module user1 and user2  -->
<?php if ($numblock > 0) { ?>
  <tr>
  <?php if (mosCountModules( "user1" )) { ?>
    <td width="<?php echo $blockwidth; ?>%" valign="top">
    <div class="colorbox"> 
    <div id="user1" class="roundblock">
    <?php mosLoadModules ( "user1", -3 ); ?>
    </div>
    </div>    
    </td>
<?php } ?>
<?php if (mosCountModules( "user2" )) { ?>
  <td width="<?php echo $blockwidth; ?>%">
  <div id="user2" class="roundblock">
  <div class="colorbox"> 
  <?php mosLoadModules ( "user2", -3 ); ?>
  </div>
  </div>
  <?php } ?>
  </tr>
<?php } ?>
<!-- END load module user1 and user2  -->

上面代码非常有用，你一定会用到，它的效果是使uer1和user2的显示区域宽度相等，如图2，而且当其中一个（user1或user2）模块被隐藏时，另一个模块的宽度会自动变成内容页宽度，如图3，当user1和user2都不发布时，这些区域的修饰代码都会被自动去除。

（图2）user1,user2同时发布

____

（图3）user1或user2发布

 

这个技巧可以用于所有模块（尤其是left,right,top,users）, 但对于那些一般必须具备的模块例如查询（user4），顶部菜单(user3), 当前路径(pathway)，主体内容 （mosMainBody）, 只使用一个if{} 就足够了（参考图1(b)）

<3> $mosConfig_sitename的使用

用来显示网站的名称，你可以把此代码放在页面顶部/网站标志的位置。php语句为：

<?php echo "$mosConfig_sitename!";?>

<4> $mosCurrentDate: 用来显示当前时间

<?php echo mosCurrentDate();?>

或者

<?php echo mosFormatDate(‘2005-01-01 10:00:00‘);?>

Mambo每天都在改进，会有更多令你惊喜的功能和效果出炉，我们也会为大家不断更新教程！