前面已经提到过了模板制作流程，这里，我们将一些问题细化，辅以实例制作，让制作来个更快更直接！
嗯，这张首页图还是比较有代表性的！
建立模板文件夹目录首先建立好模板文件夹还有一系列相关文件，如theme.xml、info.xml、block文件夹、border文件夹、images文件夹（其实呢，最简单的方法是:从您系统中的已有模板复制一份过来，然后诸如修改模板id、模板名称、版本什么的您就可以轻松搞定了！）
静态页面嵌入shopex系统使用HTML布局方式，将模板分为以下几个部分。每个部分内的元素无需细化，其中含有功能性以及广告、图片、文字等元素，均可使用挂件代替：
在这里还需要提醒大家，需要多熟悉ShopEx48系列的各种挂件，这样在制作模板的时候，您会有更多的选择空间！这样一个index.html就诞生了！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><{
header}
><link rel="stylesheet" type="text/css" href="images/css.css" /></head><body><!-- 头部开始 --><div class="header"> <div class="logo"><{
widgets id="logo"}
></div> <div class="toplink"><{
widgets id="toplink"}
</div> <div class="toptel"><{
widgets id="toptel"}
</div></div><!-- 主要内容区域 --><div class="main clearfix"> <div class="span-5"><{
widgets id="left_sidebar"}
</div> <div class="span-13"><{
widgets id="main"}
</div> <div class="span-6"><{
widgets id="right_sidebar"}
</div></div><!-- 主要内容区域 结束 --><!-- 底部开始 --><div class="footer"> <div class="footlinks"><{
widgets id="footlinks"}
></div> <{
footer}
></div></body></html>
- 头部head内必须有<{header}>标签，建议紧随"<header>"之后
- 尾部必须有<{footer}>标签，位置放在"</body>"之前
- 注意空板块区域的写法<{widgets id="****"}>
- 留意为什么用span-5、span-13、和clearfix这几个class
<{header}>和<{footer}>这2个标签用于输出ShopEx程序附带的资源，如果您忘记添加，内页的部分功能会出现错误，也有可能导致可视化编辑无法正常编辑。
ShopEx系统会自动识别每一个div里的"<{widgets id="****"}>"，其实这些widgets代表着在后台可视化编辑里的空板块区域。widgets里的id无实际含义，ShopEx仅以id记录板块的参数和数据，还是建议语义化命名id，注意id绝对不能重复；而该空板块区域的大小，可以由父层级的div决定。
在一个空板块区域里，我们可以添加一个或多个挂件，在这里，建议大家在一个widgets里仅添加相同宽度的挂件，尽量减少因宽度而导致出错的可能性。
span-5、span-13、clearfix这几个class是ShopEx Css Framework中定义css的一部分，在ShopEz48.4和ShopEx48.5的前台页面均会渲染该样式表(该样式表位置为：static/framework.css)，可以有效的利用系统已有的样式，减少自身css文件的大小,提前页面前端性能。
HTML制作完成后，因为页面的头部和尾部都是公用的，所以我们将它们分离出去，作为独立的html引用到各个框架页面中。这里我们用到类似普通asp文件引用的方式，加入smarty标签：
这时只需要在block里建立好对应文件，将对应代码复制进header.html即可；footer.html同理！<{
require file="block/header.html"}
>
我们来看改造后的index.html
<{
require file="block/header.html"}
><!-- 主要内容区域 --><div class="main clearfix"> <div class="span-5"><{
widgets id="left_sidebar"}
</div> <div class="span-13"><{
widgets id="main"}
</div> <div class="span-6"><{
widgets id="right_sidebar"}
</div></div><!-- 主要内容区域 结束 --><{
require file="block/footer.html"}
>
对比框架划分前后的代码：
添加挂件预览效果，并完善样式修改
用挂件这一特殊的模板制作方式，使shopex与其他程序的模板制作上有着根本的不同。
通俗的理解，一个空板块区域就是一个USB接口一样，USB接口接鼠标、接键盘、接移动硬盘等等...挂件也是一样，你可以添加系统自带的一些挂件，也可以添加自己制作的挂件，而在新的Ec-store系统中，还将开放传说中的"模板级挂件"（即挂件存放于模板目录，而非plugins目录）
因为上一步在HTML中添加的板块（widget）信息，在这一步骤中可将它转化为各种功能类型（如商品列表，文章列表，商品分类，导航菜单、各种形式广告、以及注册登录等等，甚至包括静态HTML都可以通过这一步加入进去），免去了修改代码、熟悉调用规则、和后期修改的大量宝贵时间。
添加挂件后，需要自行调整样式。
在这里ShopEx程序设计的非常人性化，将前台页面模板级CSS样式优先级设置到了最高，将系统默认css样式设到了最低。
然后用到firebug或者google的开发人员调试工具，通过CSS覆盖法则，来实现设计稿的实际效果。
根据情况制作模板的边框和挂件
这里的详细篇章，下文会详细介绍。
制作内页
除了首页外，其他页面都可以用默认框架default.html，默认框架输出业务区，承担所有业务流程的功能，也就是说只要一个默认框架 default.html就能表示所有功能内页，进入不同的功能内页时，业务区输出不同的预置内容。default.html文件放置在模板目录下，与 index.html相同。
这里忘记说了，在ShopEx48系列中，在模板文件目录里的部分规则命名的文件，系统会自动识别成对应的页面模板文件，对应表格如下:
| 文件名称 | 页面名称 |
|---|---|
| index.html | 首页模板 |
| gallery.html | 列表页模板 |
| product.html | 商品详细页模板 |
| cart.html | 购物车页模板 |
| gift.html | 赠品页模板 |
| search.html | 搜索页模板 |
| page.html | 站点栏目单独页模板 |
| member.html | 会员中心页模板 |
| brandlist.html | 品牌列表页模板 |
| brand.html | 品牌展示页模板 |
| article.html | 文章列表页 |
| default.html | 默认页模板 |
可能细心的人士会发现...怎么我的模板里，很多页面都没有？
这样会不会有问题？
没有关系，ShopEx的模板引擎非常强大，只要有default.html，系统在访问到没有模板的页面时，会自动套用default.html作为当前页面的模板页。
一般来讲，只要有index.html和default.html就能凑成一个模板了，这当然是最简单的做法...
现在我们来看一下default.html的通常构造：
<{
require file="block/header.html"}
><div class="main clearfix"> <div class="main_left"> <div class="category btm10"><{
widgets id="category01"}
></div> <div class="left_ad01 btm10"><{
widgets id="left_ad01"}
></div> <div class="toplist"><{
widgets id="toplist"}
></div> </div> <div class="main_right"> <{
main}
> </div></div><{
require file="block/footer.html"}
>
咦？？？ "<{main}>"？？？
不错，default.html必须有这个标签，这就是传说中的"系统流程区域，无法可视化编辑"。
而且"<{main}>"里面的内容输出完全由程序进行，与模板无关。
预览-调试各版本各浏览器兼容性-完成制作-维护
神功初成，诸多细节问题，需要不断的反馈，不断的调整提高。
