shopex模板制作流程

布局时可用的c

板块和板块区

其他页面的框架

shopex模板是上海商派科技有限公司开发的网上商店系统的外观控制文件。为了满足不同B2C行业对网站外观与设计的定制需求，shopex网店系统采用了程序和模板分离的解决方案，可以根据不同的行业制作出不同风格的网站外观，而不用修改程序。

通常情况下一个完整的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模板制作流程

基本上现在官方的shopex模板区有生成模板文件的工具，

1、你只要用div+css设计好框架就好了，css可以填充完内容再另行更改！

2、制作完框架就可以直接进入shopex，选择首页可视化编辑！

3、对相关位置放入相关挂件，至于相关位置的边框可以用css写，也可以在挂件里边设置边框！

4、如果相关挂件功能或者样式不满意，进入挂件文件夹修改 /plugins/widgets 具体哪个挂件对应哪个文件夹自己找！

5、基本内容页列表页等一些页面可以说不用大动，如果您的网站有个性需求，模板位置在/core/shop/view

布局时可用的c

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。