ECMall模板制作教程.pdf

ECMallECMallECMallECMall模板制作教程模板制作教程模板制作教程模板制作教程 前前前前言言言言 欢迎阅读 ECMall 模板制作教程 通过阅读本教程可快速上手 ECMall 模板的使用和制作 ECMall 模板制 作要求用户具备 XML XHTML 和 CSS 基础知识 至少掌握一种文本编辑器或网页制作工具 如 EditPlus Dreamweaver Textmate 等 本教程还将及一些模板代码 如从没有了解过 Smarty 建议阅读 Smarty 帮助手册 第一节第一节第一节第一节 ECMall ECMall ECMall ECMall 模板机制介绍模板机制介绍模板机制介绍模板机制介绍 通过阅读本节你将了解 1 ECMall 模板的组成和机构 2 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 文档 第二节第二节第二节第二节 布局文件制作方法布局文件制作方法布局文件制作方法布局文件制作方法 通过阅读本届你将了解 1 ECMall 模板布局描述语言的标签 2 ECMall 模板布局描述制作方法 上节简单的介绍了布局文件 本节将详细介绍布局文件的制作方法 布局文件的内容是布局描述语言 布 局描述语言是基于 XML 的 XML 是一种标记语言 ECMall 定义了 4 个简单的标签 row col library item 你只需要使用这四个简单的标签就能描述一个自己想要页面 row标签 标记一行 支持的属性包括 id class allowEdit col 标签 标记一列 支持的属性包括 id class allowEdit libray 标签 标记的是一个模块容器 item 标签 标记的是一个模块 支持的属性包括 id 和 src 下面介绍如何制作 ECMALL 的布局文件 以上是会员中心首页的布局文件的内容 该文件在根目录的 themes mall layout mc home default layout 所描述的布局如下图 代码的第一行 声明文档是一个 XML 文档 后面 是根 节点 XML 文档标准是必须存在一个根节点的 template 节点的子节点就是上面介绍的 4 个标签 用于描述页 面布局 这个页面分为上中下三行 中部分为两列 第一行代码 这段代码用 row标签标记一行 定义了一个 ID 为 region1 这里需要注意下每个标签都应该有一个唯一 ID 不能和其他标签的 ID 冲突 一旦冲突页面可能会无法正常显示 这里还定义了 allowEdit 属性为 false 这表示这个标签下的模块 在模板编辑模式下是无法拖拽的 其他模块也无法拖放到这里 这个标签下调用了 两个模块 所以必须有一个模块的容器标签 标记了调用一个模块 这里 ID 属性必须和 src属 性对应的模块文件中顶级元素 ID 相同 src是模块的相对路径 第二行代码 这一行分为两列 在 row标签里我们定义了两列 第一列的 ID 为 region2 第二列的 ID 为 region3 这 两列分别调用了一个模块 这和第一行讲解的是一样 这里需要注意的是 row标签可以包含多个 col row标 签 也可以包含一个 library 标签 但不能同时包含不同的标签 比如 1 2 上面的两段代码都是错误的 col 标签可以包含 row标签但不能再包含 col 标签 col 标签也不能同时包含 row 和 library 比如 这样也是错误的 最后讲解布局第三行的代码 这一行和第一行的代码几乎相同 只是调用的模块不同而已 allowEdit 为 false 禁止编辑这一行 第三节第三节第三节第三节 模块文件制作方法模块文件制作方法模块文件制作方法模块文件制作方法 ECMall 的模板机制中所有的内容都是在模块中来实现的 上一节中讲的布局文件仅仅是用于页面布局的描 述 其中没有任何页面内容 ECMall 的模块主要由 HTML 代码和模板语句 模板语句是兼容 smarty的语法 的 在后台模板管理用户可以可视化编辑页面的内容 任意拖拽模块 所以模块必须要按照 ECMall 模块规范 制作 商城的模块文件存放在根目录的 themes mall resource 店铺的模块文件存放在根目录的 themes store resource 下面举例讲解下 themes mall resource site news html 文件的内容 这个模块 是站内快讯的模块 article formated add time article title e scape page links from article list info url url format article content 这里面有一个 div id 为 site news content 这里需要注意的是每个模块的 ID 必须是唯一的 不能和其 他模块重命名 每个模块文件里面只能有一个根元素 如果存在一个以上根元素就无法正常操作了 如一下代 码 如果一个模块文件的内容是这样 存在两个根元素就是错误的 第四节第四节第四节第四节 皮肤文件制作方法 皮肤文件制作方法 皮肤文件制作方法 皮肤文件制作方法 皮肤是由 CSS和图片组成 商城的皮肤文件位于根目录的 themes mall skin 目录 商城的皮肤文件位于 根目录的 themes mall skin 目录 一个皮肤是一个目录 如默认皮肤 default 目录里包含多个 css文件 下面介绍下每个文件的作用 商城的 CSS文件说明 文件名作用 article css站内快讯 帮助中心页面的 CSS 样式文件 category css 商城搜索 团购列表 商品分类页面的 CSS 样式文件 global css整个商城包括店铺的全局 CSS 文件 mall css商城首页的 CSS 文件 mallbase css商城全局 CSS 文件 member css用户中心页面 CSS 文件 shopping css购物流程页面的 CSS 文件 storelist css店铺列表页面的 CSS 文件 店铺的 CSS 文件说明 文件名作用 goods css团购商品 商品页面的 CSS 文件 storebase css店铺页面的 CSS 文件 在 C