标题：shopex模板
公司介绍
shopex模板[1]是上海商派科技有限公司开发的网上商店系统的外观控制文件。为了满足不同B2C行业对网站外观与设计的定制需求，shopex网店系统采用了程序和模板分离的解决方案，可以根据不同的行业制作出不同风格的网站外观，而不用修改程序。[2]
通常情况下一个完整的shopex模板包括下面六部分：　模板路径是ShopEx48安装目录/themes/　进入到某一套模板目录中后，就可以看到该模板的目录和文件结构了
  模板结构1 可重用部分，文件夹中存放着模板各页面的公用部分，扩展名为html，一般是模板的头部和尾部，这两个部分在整个站点中都是相同的，支持smarty语法　
2. 边框目录，扩展名为html，存放着边框文件，边框是版块的呈现样式，相当于版块的模板，支持smarty语法　
3 images目录，存放所有图片文件、css文件等　
4 *.html，框架文件，扩展名为html，决定了页面的布局和版块可摆放的区域，是页面的骨架 　
5 preview.jpg ，模板预览图片　
6 theme.xml，模板配置文件，包含模板信息、边框信息，版块配置信息等 　
theme.xml配置信息说明如下： 　
1 name， 模板名 　
2 id， 模板文件夹名 　
3 version， 模板版本 　
4 info， 模板描述 　
5 author， 模板作者 　
6 site， 模板网站 　
7 update_url， 模板升级地址 　
8 borders， 边框的描述，这里所列出的信息会被用在后台“修改版块”面板的“版块边框”下拉框中。borders的写法：key为显示在后台的下拉选项，tpl为各边框相对模板目录的边框路径。 　config， 模板中定义的参数，例如一套变色模板，它的颜色可以作为参数写在config中，方便用户在编辑模板时修改。　
9 config的参数可在后台“模板配置”中修改。 　
theme.xml是整个模板中最重要的部分，所有模板的配置信息都是存在这个xml中的，包括板块的位置、配置信息，边框的信息等等。第一次加载模板时，theme.xml中包含的信息被读入数据库，即模板的初始化，之后用户便可以在可视化界面中进行板块的增删改和对原有的板块进行配置。配置信息保存在数据库中，用户可以通过导出模板来下载到最新的带配置信息的theme.xml，通过“恢复默认”来应用新的theme.xml。　首页对于一个购物网站来说比较复杂，内页的话相对简单，在ShopEx4.8中，内页都可以用一个框架default.html来表示。　页面的头部和尾部都是公用的，所以将它们分离出去，作为独立的html引用到各个框架页面中。　注意，头部head内必须有<{header}>标签，尾部必须有<{footer}>标签，用来输出程序附带的资源，否则内页的一些功能会出现错误。　以上面这个模板来说，页面中部布局分为左中右三栏，各栏内部是一些小的功能板块，这些板块的内容和功能是预置的，通过后台可视化编辑来配置。也就是说，ShopEx48模板的制作实际上较少涉及这些功能板块的内容，更多关心的是框架和边框的表现样式。实际制作过程中我们可以将这板块内容以低保真的形式，如图片或文字占位，留待以后细调。　首页框架对应的是index.html，代码的写法和平常的html文件是相同的。框架同时也支持smarty语法，写法是 <{smarty语句}>。　如上图的index.html源码是：　<{require file="block/header.html"}>　<div id="AllWrap" class="clearfix">　<div class="span-5 cut">　<{widgets id="l1"}>　</div>　<div class="span-13 cut">　<{widgets id="m1"}>　</div>　<div class="span-6 trim cut">　<{widgets id="r1"}>　</div>　</div>　<{require file="block/footer.html"}>　代码中可以看到，框架的源码很简单，只做布局，头尾都做独立的html引用。
shopex模板制作流程
当然这里说的是模板开发的常规流程，如果您自认为胫骨奇特、天赋秉异，您亦可打破常规，经脉逆行:一边写一点静态页、一边套挂件效果、累了复制两个边框...等等
不过初学者请慎重，一般视自行功底，量力而行...
1.建立模板文件夹目录建立一个新模板，需要手工建立一个新文件夹，可以任意命名，模板里必须包含info.xml（模板信息配置文件）、 preview.jpg（模板缩略图）、theme.xml（模板信息记录文件，无需修改）。
完成之后系统将会自动判断此文件夹为新模板目录，在后台的模板列表中可看到此模板的名称以及模板缩略图。
再按需要建立images、block、border等文件夹。
2.静态页面嵌入shopex系统
这一步和通常的设计稿->页面的过程相同，需要制作者具备基本的html、css等知识，这时的页面代码规整，会给之后的制作带来很大的方便。
制作静态页面时需要划分好布局，做好边框的样式。
这个时候所做的页面可以是低保真的，即仅划分页面的布局，版块的内容可以用均可使用”widget（挂件）“代替，待页面制作完成后，通过后台板块功能嵌入功能后再写入样式。
使用HTML布局方式，将模板分为以下几个部分。每个部分内的元素无需细化，其中含有功能性以及广告、图片、文字等元素，均可使用”widget（挂件）“代替。
注意，头部head内必须有<{header}>标签，尾部必须有<{footer}>标签，用来输出程序附带的资源，否则内页的部分功能会出现错误。
3.添加挂件预览效果，并完善样式修改
通过板块功能调用出的内容，其表现形式和风格都是由系统内置CSS制定。而通常我们自己制作的模板往往与系统内置风格有着多多少少的区别。同时也是为了使模板更加独特而需要做的事情。
这一步的过程完全通过css的修改来完成。系统默认调用的是内置css，它的路径是statics文件夹下的framework.css、shop.css。
但是如果我们通过常规方法直接修改这2个系统内置CSS文件，很容易在升级时一并被修改，并无法将模板导出。
这里推荐使用“覆盖法”来更改css的属性，也就是将需要修改的css属性从系统内置CSS文件中，拿到模板目录文件夹内的css文件中，修改过后在页面显示时系统将优先显示此css属性。用此方法达到修改目的。
推荐使用firefox浏览器，和其中的firebug插件，可以快速查询到指定位置的CSS名称和关联情况。
4.根据情况制作模板的边框和挂件
选取可复用部分作为边框，这一步的工作可以放在模板布局时提前做好，因边框也属于外部调用的形式，shopex模板系统将每一个边框文件作为单独的文件以便重复调用。
如果有部分ShopEx本身没有的挂件，可以自行制作新挂件或在原有挂件基础上修改。注意新挂件或者修改后的挂件需改名，勿覆盖系统挂件，以免今后系统升级造成文件丢失。
5.制作内页
除了首页外，其他页面都可以用默认框架default.html。
默认框架输出业务区，承担所有业务流程的功能，也就是说只要一个默认框架 default.html就能表示所有功能内页，进入不同的功能内页时，业务区输出不同的预置内容。
default.html文件放置在模板目录下，与index.html层级相同。
如果某个页面需要与其他页面不同，这个时候就可以手工建立一个新的模板框架，这些框架是由系统已经预置好的，只需要选择想要添加的页面类型就可以了。
6.预览-调试各版本各浏览器兼容性-完成制作-维护
调试兼容性：通过CSS调整您的模板再各浏览器下保持一致。
维护：大神云："互联网飞速发展的时代，一个再好的产品，如果没有人去更新、去维护，这个好产品会迅速变成垃圾..."[3]
布局时可用的css
ShopEx48内置了一套css的框架blueprint，能够很方便的帮助我们进行布局。
1024px分辨率下满屏的页面宽度一般用960px或950px，以40px为一列可以将宽度分成24列，在css中用.span-1到.span-24来分别定义这些以40px倍增的宽度，这样就从40px到960px覆盖了常用的列宽,每列的实际宽度是宽度减10px，这10px是列与列之间的间隔，最后一列可以加.last，使间隔为0。
典型的三列布局例子：
<div class="span-24 clearfix">
<div class="span-5">左栏190px</div>
<div class="span-13">中栏510px</div>
<div class="span-6 last">右栏230px</div>
</div> 
上面这段代码是典型的3列布局，在最外层有一个clearfix用来清除浮动，三列的宽分别是190px，510px，230px，间隔10px。
板块和板块区
ShopEx48模板可以认为是布局和板块的组合，布局是骨骼，板块是内容。框架搭好后就是板块的配置。一套模板初始时是由制作者配置好了各种的板块，然后用户可以方便的在可视编辑更改板块的配置。
板块的功能和内容是预置的，它们可以理解为是在框架页面上可插拔的模块，那相应的，框架页面上就要有对应的插槽，这些可以容纳板块的插槽称为板块区，在框架的代码里的标签是<{widgets}>，一个板块区能容纳多个竖向排列的板块。
板块区默认是按照框架页html代码中的先后顺序和板块对应的，如果板块区的顺序变动，比如在某个板块区前增加了一个板块区，那么之后的板块都会顺序向前一位挂接在板块区上，导致页面错乱。解决这个问题的办法是给板块区加上特定的id，写法是<{widgets id=”用户自定的id”}>，这样插槽就能被准确的定位。
如果是通用性的模板，一般会在多列的布局上下各增加一个板块区，以便用户放置横幅广告等等。
其他页面的框架
除了首页外，其他页面都可以用默认框架default.html，默认框架输出业务区，承担所有业务流程的功能，也就是说只要一个默认框架default.html就能表示所有功能内页，进入不同的功能内页时，业务区输出不同的预置内容。业务区在html代码中的写法是<{main}>，default.html必须有这个标签。
当然某个功能页也能新建一个框架，框架文件名是系统预置好的，与某个功能页面相对应，只要新建出来一个框架，就自动应用在这个页面上，不同的框架可以带来不同的布局和板块配置。
会员中心和购物车页面需要更大的宽度，因此他们的框架一般与默认框架不同，因此模板一般需要4个框架页，首页index.html、默认页defaut.html、会员中心页member.html、购物车cart.html。