JavaShop 模板制作手册
Version: 1.0
Public date: 2010-06-21
All right reserved
Javamall.com.cn
第一章 模板制作指南
1 模板目录规范
在开始制作之前，先来了解下 JavaShoop 的模板路径和构成模板的文件。
模板路径是 JavaShop 安装目录/themes/
进入到某一套模板目录中后，就可以看到该模板的目录和文件结构了:
1. 可重用部分，文件夹中存放着模板各页面的公用部分，扩展名为 html，一般是模板的头部和尾部，这
两个部分在整个站点中都是相同的，支持 freemarker 语法
2. 边框目录，扩展名为 html，存放着边框文件，边框是版块的呈现样式，相当于版块的模板，支持
freemarker 语法
3. images 目录，存放所有图片文件、css 文件等
4. *.html，框架文件，扩展名为 html，决定了页面的布局和版块可摆放的区域，是页面的骨架
5. preview.jpg ，模板预览
6. widgets.xml 是整个模板中最重要的部分，所有模板的配置信息都是存在这个 xml 中的，包括板块的位
置、配置信息，边框的信息等等。
2 划分页面结构，建立框架
首页对于一个网站来说比较复杂，内页的话相对简单，内页都可以用一个框架 default.html 来表示。
以首页为例，如图，这是一张做好了的 psd 页面，现在我们要把它制作成模板。这个过程其实和一般页
面的制作过程是一样的。先将页面做大致的划分，搭建框架，剩下的部分通过配置 widges.xml 来完成。
我们将页面划分如下：
页面的头部和尾部都是公用的，所以将它们分离出去，作为独立的 html 引用到各个框架页面中。
以上面这个模板来说，页面中部布局分为左中右三栏，各栏内部是一些小的功能板块，这些板块的内容
和功能是预置的，通过编辑 widgets.xml 来配置。也就是说，JavaShop 模板的制作实际上较少涉及这些功能
板块的内容，更多关心的是框架和边框的表现样式。实际制作过程中我们可以将这板块内容以低保真的形
式，如图片或文字占位，留待以后细调。
3建立框架，划分板块区
首页框架对应的是 index.html，代码的写法和平常的 html 文件是相同的。框架同时也支持 freemarker
语法。
如上图的 index.html 源码是：
<#include 'common/header.html' />
<div id="banner"></div>
<div id="MainWrap">
<div id="LeftColumn">
${widget_1!''}
</div>
<div id="CenterColumn">
${widget_2!''}
</div>
<div id="RightColumn">
${widget_3!''}
</div>
<div id="Main">
${widget_4!''}
</div>
</div>
<div class="clear"></div>
<#include 'common/footer.html' />
代码中可以看到，框架的源码很简单，只做布局，头尾都做独立的 html 引用。
4其他页面的框架
除了首页外，其他页面都可以用默认框架 default.html，默认框架输出业务区，承担所有业务流程的功
能，也就是说只要一个默认框架 default.html 就能表示所有功能内页，进入不同的功能内页时，业务区输出
不同的预置内容。业务区在 html 代码中的写法是${widget_main}，default.html 必须有这个标签，参见【挂
件配置说明】。
当然某个功能页也能新建一个框架，框架文件名是系统预置好的，与某个功能页面相对应，只要新建
出来一个框架，就自动应用在这个页面上，不同的框架可以带来不同的布局和板块配置。
- 1
- 2
前往页