magnetom模板制作

我个人认为Magento模板制作的难点在于不了解Magento的架构，不会调动block。Magento的block调动几乎都是靠xml。在下面的内容会提及如何操作。

制作Magento模板的前提是：你要会Html，div+css。不管你想做什么模板，这个都是基础。如果想要做出个精致的Magento，还必须精通div+css。因为涉及到一个浏览器的兼容问题，当你在Firefox下打开你的Magento商城看着感觉是很完美，但是到了IE6下完全变形，而且中国还有50%左右的人用IE6。

在制作Magento模板之前，首先要选一个比较简单的模板，然后在此基础上做。我个人推荐使用Blank模板，这个模板比较干净，图片除了必须的 几乎没有，而且css也很精简。我刚开始做Magento模板的时候用的是Default的模板，这个模板的css文件很大，而且等模板完成后，会有很多无用图片。曾经做一个项目的时候，客户死死的抓住网站的css文件太大，让我相当的头疼。废话有点多，现在开始正题。

Magento模板最主要的地方是首页，首页完成，Magento模板就完成30%左右了。我个人习惯是先改头部和尾部，这两个地方是所有页面都有的。头部的东西都在app\design\frontend\default\你的主题\template\page\html\header.phtml里面。底部的东西都在app\design\frontend\default\你的主题\template\page\html\footer.phtml里面。这两块的话都是靠css修改的，没什么好说的。我重点讲下中间部分的布局等。

Magento的布局对于新手来说，是比较困难的。如果英语好的话建议去看看官方的介绍http://www.magentocommerce.com/design_guide/articles/intro-to-layouts，现在网上也有很多翻译好的了，想要的可以去找找。我个人认为布局就是把已有的block放到应该的地方，一般都是在xml里面调动。我介绍下catalog.xml，其他的就不说了，原理都一样，而且大部分的布局都可以在catalog里面实现。app\design\frontend\default\你的主题\layout\catalog.xml,进入后你可以看到类似的注释“Default layout, loads most of the pages”，这些注释的意思就是你所改的是什么地方的布局，例如：“Default layout, loads most of the pages”这句说的就是网站默认布局。接着往下看，会看到很多的<reference >标签，这些都是需要在page.xml里定义过后，这里才能用，这里先不详细介绍了。这些“name”有“left”，“right”，“header”等等，从字面上我们就能看出来他们所指的位置，“left”是指左边栏，“right”指右边栏，“header”指头部。各个<reference >标签里会包含多个<block>block就是我要调用的功能模块了。例如经常会有人问怎样把左边的什么移到右边，这个问题很好解决，在“left”里找到对应的block放到右边，这样就成功了。是不是觉得很简单，这篇就先讲到这，没写过这样的教程，可能讲的不详细，如果有不懂的可以留言。

转载请注明：转载自Magento及Web前端开发，谢谢！
原文链接地址：http://www.magentofront-end.com/magentomuban/51