360Magento技术开发magento模板仿制实战（一）

前面几天我们讲了magento的安装，建立自己的模板，也熟悉了模板文件之间的调用关系，剩下的就是css和js样式没讲了，这个下去自己学，如 果你还不会制作html页面，建议你先把css学好，再来学习magento模板制作。一切准备就绪，大家期待已久的实战要开始了。这一节主要讲一些实战 前的准备工作。为了节省时间，快速学习css，我们找一个magento制作的网站来仿制。

1.找一个目标站，本课程我们将采用该magento网站（http://livedemo00.template-help.com/magento_47672/）

2.建立自己的主题模板，并在后台设置好，我建的主题名是theme001，用默认的package

3.将你的项目加载到php编译工具里面（Zend Studio）便于后面代码编写、查看。

4.将后台调为开发模式，就是讲索引刷新（System/Index Management），缓存关闭并刷新（System/Cache Management）,全选并选择Action类型。关闭缓存为了避免在修改代码中运行的还是缓存里面的，导致我们不能及时看到修改效果。

上面的步骤准备好了，由于我们仿的也是magento的站，万变不离其宗，也都是按照magento默认模板改的，我们需要做的把它的样式（css）文件，image文件，js文件下载下来，放到我们模板对应的位置并加载到我们magento项目主题的page.xml中

查看网站源码，找到截图，把红框里面的全部下载下来并保存到你相应的模板skin文件

在模板中加载css以及js

<action method=”addCss”><stylesheet>css/bootstrap.css</stylesheet></action>
<action method=”addCss”><stylesheet>css/styles.css</stylesheet></action>
<action method=”addCss”><stylesheet>css/responsive.css</stylesheet></action>
<action method=”addItem”><type>skin_js</type><name>js/jquery-1.10.2.min.js</name></action>
<action method=”addItem”><type>skin_js</type><name>js/scripts.js</name></action>

文章来源与magento建站：http://www.360magento.net/magentothemestudy005/