flyingleaf's blog

Joomla & Mambo页面布局教程

coolbean | 21 三月, 2008 22:56

(图一)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 -->

(查看全文)