ECMall模板制作教程.doc

ECMall模板制作教程

前言

欢迎阅读ECMall模板制作教程，通过阅读本教程可快速上手ECMall模板的使用和制作。ECMall模板制作要求用户具备XML、XHTML和CSS基础知识；至少掌握一种文本编辑器或网页制作工具(如：EditPlus,Dreamweaver,Textmate等)；本教程还将及一些模板代码，如从没有了解过Smarty建议阅读Smarty帮助手册。
第一节-ECMall模板机制介绍
通过阅读本节你将了解：
ECMall模板的组成和机构
ECMall模板机制工作原理

ECMall页面模板由布局(layout)、模块(module)、皮肤(skin)组成，所有模板文件都保存在ECMall根目录的themes目录下，其中两个目录mall和store，mall目录包含了商城的所有布局、模块、皮肤，store目录包含了店铺所有布局、模块、皮肤，两个目录的结构是完全一样。下面首先介绍mall目录下的结构。
mall目录包括layout、resource、skin三个目录，其用途分别为：
Layout目录-用于存放layout文件。layout目录下的每个子目录里存放的是某一个页面的layout文件（layout目录介绍请见附表1），如homepage目录就是商城首页的布局目录,里面有一个default.layout文件这就是商城首页的布局文件，在这个目录里可以存在多个布局文件，布局文件是一个标准的XML文档，你只需要写简单的几个标签（以下称为布局描述语言）描述整个页面的布局架构，在以后的章节会详细介绍布局文件的制作方法。
resource目录-用于存放内容模块文件。模块是由布局文件调用的，内容是HTML或模板代码组成，在以后的章节会详细介绍模块制作方法。
skin目录-存放皮肤，目录中每个目录对应一个skin，如default是ECMall默认皮肤，其中包括了CSS文件，和图片以及JS文件，在以后的章节会详细介绍皮肤制作方法。
ECMall的每一个页面的模板都包含以上介绍的元素，原理是模板引擎将布局文件中的布局描述语言解析，将文件中描述的页面布局和模块部署位置输出一个标准的XHTML文档。
第二节-布局文件制作方法
通过阅读本届你将了解：
ECMall模板布局描述语言的标签
ECMall模板布局描述制作方法
上节简单的介绍了布局文件，本节将详细介绍布局文件的制作方法。布局文件的内容是布局描述语言，布局描述语言是基于XML的，XML是一种标记语言，ECMall定义了4个简单的标签row、col、library、item，你只需要使用这四个简单的标签就能描述一个自己想要页面:
row标签-标记一行，支持的属性包括id、class、allowEdit
col标签-标记一列，支持的属性包括id、class、allowEdit
libray标签-标记的是一个模块容器
item标签-标记的是一个模块，支持的属性包括id和src。

下面介绍如何制作ECMALL的布局文件
<?xmlversion="1.0"?><template><rowid="region1"allowEdit="false"><library><itemid="header"src="themes/mall/resource/page_header.html"/><itemid="search_form"src="themes/mall/resource/search_form.html"/></library></row><rowid="mc_home"><colid="region2"class="column1"><library><itemid="mc_menu"src="themes/mall/resource/mc_menu.html"/></library></col><colid="region3"class="column2"><library><itemid="mc_home"src="themes/mall/resource/mc_home.html"/></library></col></row><rowid="footer"allowEdit="false"><library><itemid="page_footer"src="themes/mall/resource/page_footer.html"/></library></row></template>

以上是会员中心首页的布局文件的内容，该文件在根目录的themes/mall/layout/mc_home/default.layout，所描述的布局如下图：
代码的第一行“<?xmlversion="1.0"?>”声明文档是一个XML文档。后面<template