?
第一步：关闭系统缓存(Disable your system cache)
为了让Magento系统执行一个完整的过程，需要在后台先禁用系统缓存（http://yourhost.com/admin）和System -> Cache Management。在All Cache中选择Disable，然后点击保存。这样做将确保您可以在网店中看到实时更改的反映。
第二步：确定你网店可能使用的所有结构类型
甚至在你开始创建的商店的标记之前，您首先需要问一下自己要为你的网店的每个页面结构定义好一个页面类型。你自己可能会列一个类似于下面的清单：
? 主页将使用三栏结构three column structure。
? 分类列表页面使用两栏结构并带一个有侧栏two column structure that includes a right column。
? 客户页面使用两栏结构并带一个左侧栏two column structure that includes a left column.
骨架模板（Skeleton template）
当你完成了这个清单之后，你会为每个结构类型建立(X)HTML并在app/design/frontend/your_interface/your_theme/template/page/下 保存这些骨架模板。一个骨架模板就是包含一个页面的总体结构（除的块），是为每个结块区块定义好了总体结构。
骨架模板例子：
?浏览上面的简单骨架模板，你会注意到每个表现的标记中有一个PHP方法getChildHtml()?>。这就是 Magento将结构区块加载到骨架模板中的方法，并且决定了内容区块在商店页面中的显示位置。
每个getChildHtml都会调用一个名称<div
class="header"><?=$this->getChildHtml('header')?></div>， 这些名称是在布局中结 构区块的唯一标识。骨架模板通过布 局应用到商店中。
?
第三步： 根据功能性修剪你的(X)HTML
一旦您建立您的骨架模板，您现在需要创建的模板每个内容块。
Magento喜欢有意义模板
您将需要削减你的页面的(X)HTML标记，并根据每个标记为页面提供功能。举例来说，如果你有mini-cart区的设计，此区域的标记将有用于 这个区域的自己的模板文件。同时产品标签，newsletter，注册等...所有这些功能Magento都已经配备了，因此您可以参考现有的模板标记来 建立您的标记逻辑。
?
哪里保存模板
?
图 5
商店中的每个页面的所有标记（包含一系列的模板）都是表示一个模块的功能。当你想修改一个页面调用的模板，可以他开Template
Path提示。要打开这个功能，按下面操作：
1. 进入后台，到System ->
Configuration
2. 在右上角的Website/Store选择器中选择你的商店
3. 然后选择左侧栏的Developer标签，并在Template Path Hints中选择Yes
当您完成后，回到商店前台，重新加载您的网页，您将会看到所有模板块的路径。要更改标记的话，根据显示的路径找到并修改 响应的模板。
?
第四步：改变布局以适应你的设计
一旦您修改一些标记，你可能想移动一下这些模板看看这些模板修改的效果是什么样的。
如何找到布局文件
要访问布局文件，可以在app/design/frontend/your_interface/your_theme/layout/找 到。就像模板文件一样, 布局文件也是基于每个模块的方式存储的，这样你就可以方便的按模板提示来进行修改。首先，激活模板提示，刷新要修改的页面，找寻模板提示的模板路径。比如 你想移动mini cart，参考模板路径(例如:app/design/frontend/default/default/checkout/cart/sidebar.phtml)， 用主题文件夹里第一个文件夹名（字体加重的那个）来寻找相关布局文件。在这个例子里，我们要寻找'checkout.xml' 来修改mini cart的位置。
?
默认布局（Default Layout）和布局更新（Layout Updates）
一共有两种布局：默认（default）和更新（updates）。一个默认布局(例如page.xml)是默认应用到网店每个页面的布局。所有其 他的布局文件都是更新布局，也就是在默认布局基础上进行响应的更新布局。
让我们举例说明一下骨架模板（skeleton
template):
在默认布局里，你已经设置为三栏结构，就是说，默认几乎所有的页面都是三栏结构。但是在产品页面并不需要三栏，对产品页面来说，你需要一个包括右侧栏的两 栏结构布局。为了实现这一点，你不用理默认布局，只要打开catalog.xml文件，你可以在里面修改一些你要实现包含右侧栏的两栏布局命令。这就是所 谓更新了一个布局（updating a layout）。
<reference name="root">
????? <action method="setTemplate"><template>page/2columns-right.phtml</template></action>
</reference>
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->
让我们看看另外一个例子：
默认情况下，你想订阅newsletter区块显示在有侧栏，但在客户的帐户页面不显示它。在这种情况下，你可以需要打开customer.xml 文件，在里面你可以删除了newsletter内容区块，这就让此页面不包括此newsletter功能。
布局介绍（Intro to Layouts）
布局（Layout），由其组建的表现形式来说很容易让你以为要使用它你首先必须学习广泛的编程逻辑知识。但是事实上，布局只是由一些很容易学习的XML 标记组成的。通过学习一些关键的概念和布局的命令，你很快就会建立了相关的信心和知识，以方便地为你的店铺设计结构。
图1：<!--[if !supportLineBreakNewLine]-->
? <!--[endif]-->