ShopEx V48模板制作手册Word文档下载推荐.docx
《ShopEx V48模板制作手册Word文档下载推荐.docx》由会员分享，可在线阅读，更多相关《ShopEx V48模板制作手册Word文档下载推荐.docx（20页珍藏版）》请在冰点文库上搜索。
进入后台“模板管理”，点击“上传新模板”，将模板包上传后，新模板会在模板列表最末出现，点击“设为默认”便能加载为当前模板。
∙模板下载，点击相应模板下的“下载”便可，模板包是一个打包好的tgz文件。
∙恢复默认状态，以theme.xml为依据，还原到模板默认的样子，点击相应模板下的“恢复默认状态”。
∙模板配置，后台关于模板的可视化操作都是在“编辑模板”中进行的。
编辑模板
“编辑模板”中，所列出的页面实际上是框架页，“可视编辑”是对此框架下的版块进行修改，“源码编辑”是编辑框架的源码，“创建”是给此功能页新建一个框架，默认所有页面使用的都是默认框架default.html。
可视编辑
所见即所得的编辑方式，用户可以在此进行添加、删除、修改版块的操作。
框架介绍
框架概述
框架是页面的骨架，位于模板根目录下，它决定了页面大体的布局（如两栏、三栏等）和版块可摆放的区域。
框架通常都是比较简单的html文件，它的作用是将页面划分区隔，在适当的位置放置板块区（代码中的<
{widgets}>
），以便可视化编辑时摆放和配置版块。
版块区是能放置版块的区域，一个框架页至少要有一个版块区才能放置版块，一个版块区能竖向摆放一个或更多的版块。
以下是一个首页的框架，其中的蓝色虚框部分为版块区
公用部分
框架是html代码，模板的头尾在所有页面中一般都是一致的，所以模板的头尾会被做成相应的html文件引用到各个框架中来，引用的部分也是能放置版块区的，这样可以免去重复的版块配置。
框架与业务区
框架页的名称是系统定义的，关联相应的功能页面，。
一套模板有许多功能页面，但不是每个页面都必须有与之对应的框架，在没有与之对应的框架存在时，页面使用默认框架default.html。
它包含核心业务区，核心业务区因涉及到以后的升级，完全由程序输出，与模板无关，用户不能更改源码。
对某一个功能页面也可以建立特定的框架，放置不同的版块做成新的新的页面。
以下是一个默认框架的例子，其中的<
{main}>
是核心业务区
版块介绍
版块概述
版块是具备某项功能的小区块，是组成页面的基本元素，用户可以通过配置版块的参数来达到修改模板的目的。
版块本身只包含功能不包含样式，它的编辑是在后台可视化编辑里完成的，用户可以任意拖动版块位置、编辑版块参数等。
编辑好的版块配置信息存放在数据库中，可由后台导出。
板块操作
用户放置版块的过程非常简便，只需在后台版块编辑中选定需要的版块，再点击希望放置的版块区便可。
当用户将鼠标移动到某个版块上时会出现相应的工具条，点住“移动”，能拖动此版块的位置；
点击“修改”按钮，能编辑版块的配置。
版块的增删及位置变动需要点击工具条上的“保存模板修改”按钮才能看到效果，版块本身的配置编辑直接点击面板中的“保存修改”钮便可。
*按住键盘上的ctrl键点击版块上的工具条，能复制出一个带有原版块配置信息的新版块。
版块的目录结构
版块是模板重要的组成部分，具有很强的扩展性，用户可以自行编写版块来实现新的功能。
版块的路径是ShopEx48安装目录/plugins/widgets，每个目录对应一个特定功能的版块，目录下有这样几个文件
∙widget_search.php，版块的执行程序
∙widgets.php，版块的描述信息
∙default.html，版块默认的模板，一个版块可以有多个模板，默认是default.html
∙_config.html，版块的配置文件
∙_preview.html，版块在后台可视化编辑时的预览
边框介绍
边框概述
版块本身只包含功能，样式的定义完全由边框来决定，理论上边框能应用在任意版块上，是通用的。
边框是在版块外围包了一层html，它相当于版块的模板风格。
边框样式由css定义，一套模板会有许多个边框，供用户选择、自行搭配，这样用户仅在后台操作也能做出截然不同的页面。
边框的路径是模板路径下的borders目录，每个html对应一个边框，边框的描述信息在模板目录下的theme.xml中定义。
打开版块编辑面板便能给版块选择边框
边框结构
以下是边框的html代码样例
divclass="
border1<
{$widgets_classname}>
"
id="
{$widgets_id}>
>
border-top"
h3>
span>
{$title}>
/span>
/h3>
/div>
border-body"
{$body}>
divclass=”border-foot”>
边框的html代码都是类似的，一般是由头、中、尾三部分组成：
∙<
是版块的标题，在版块配置面板中填写
是由程序输出的版块的具体内容
是版块的id，每个版块都会有唯一的id作为标识，默认由程序生成，用户也可在版块配置面板中填写
为版块配置面板可选填的class，可以应用在如边框样式相同但内部版块样式不同等等的情形下
边框的编辑
边框样式的修改通过修改css完成，对应的css在模板目录images下的border.css中，当然也可以修改边框的html。
边框的描述信息在theme.xml中，在初次加载模板时读入到数据库，而theme.xml在模板配置改变时不做变动，因此新增、删除边框的操作要下载最新的theme.xml进行编辑，“恢复默认状态”模板之后才能实现。
配置信息theme.xml
theme.xml保存着模板的配置信息，包括模板名称、目录、边框信息、版块配置信息等等，模板最终要形成一个整体以来它的作用。
theme.xml中的项除了版块配置需要手动编写，版块配置是由程序序列化输出的，记录着后台用户对于版块的操作配置。
例：
边框源码
?
xmlversion="
1.0"
encoding="
UTF-8"
?
theme>
name>
Cn00020<
/name>
version>
48rc<
/version>
info>
/info>
author>
shopex<
/author>
site>
/site>
update_url>
/update_url>
borders>
setkey="
默认样式"
tpl="
borders/border1.html"
/>
边栏样式"
borders/border2.html"
促销信息"
borders/border3.html"
商品条目"
borders/border4.html"
热卖商品"
borders/border5.html"
最新商品"
borders/border6.html"
底部文章"
borders/border7.html"
/borders>
config>
color_1"
value="
#ffdd00"
label="
label_1"
label_2"
bgpic_1"
label_3"
/config>
widgets>
/widgets>
对应项说明
∙name，模板名
∙version，模板版本
∙info，模板描述
∙author，模板作者
∙site，模板网站
∙update_url，模板升级地址
∙borders，边框的描述，这里所列出的信息会被用在后台“修改版块”面板的“版块边框”下拉框中。
borders的写法：
key为显示在后台的下拉选项，tpl为各边框相对模板目录的边框路径。
∙config，模板中定义的参数，例如一套变色模板，它的颜色可以作为参数写在config中，方便用户在编辑模板时修改。
config的参数可在后台“模板配置”中修改。
制作静态页面
建立模板文件夹
模板的制作过程都是在本地完成的，在本地安装完一套ShopEx48软件之后，在模板目录：
安装目录\themes，建立要制作的模板文件夹，在此路径下制作静态页面。
在模板文件夹下建立theme.xml之后，这套模板就能出现在后台模板列表中，并能对其进行编辑。
这一步和通常的设计稿->
页面的过程相同，需要制作者具备基本的html、css等知识，这时的页面代码规整，会给之后的制作带来很大的方便。
制作静态页面时需要划分好布局，做好边框的样式。
版块内部的源代码可以从其他模板的源码中复制过来。
这个时候所做的页面可以是低保真的，即仅划分页面的布局，版块的内容可以用图片来替代，待下一步深入制作时再写入样式。
默认模板页面->
html
建立框架
框架
模板的框架负责功能页面的布局，框架是html文件，位于模板目录下，名称按照系统规定来命名。
如首页框架：
index.html，默认框架：
default.html
功能页面、业务区
ShopEx48有不同的功能页面，分别负责购物、会员登录注册、文章等等内容，这些使得网店能够正常运行的功能区域称为业务区，因涉及到版本升级，由程序统一输出。
框架和功能页面的对应关系
框架和功能页面有对应关系，一个框架可以对应功能类似的多个功能页面。
各功能页面默认的框架是默认框架，即default.html，一般把它做成内页的结构，默认框架中须包含业务区<
。
首页一般不涉及到业务流程，并且表现形式复杂，因此模板中需要有首页框架index.html与之对应。
需要做的几个模板框架
∙首页框架：
index.html
∙默认框架：
default.html
∙会员中心框架：
member.html
∙购物流程框架：
∙赠品框架：
gift.html
默认框架源码
{requirefile="
block/header.html"
}>
divid="
AllWrap"
LeftColumn"
{widgetsid="
il1"
InnerRightColumn"
ir1"
ir2"
block/footer.html"
默认框架可视化编辑视图
制作首页框架
静态页面完成之后需要将其转成ShopEx48的框架。
通常模板的头部和尾部是公用的，可以将它们分离出去，引用到各框架之中，这样不同框架都能使用同一套头尾，后台配置版块时仅需对头尾做一次编辑。
静态页面中各版块位置以<
版块区替代，<
版块区可以放置竖向的多个版块，因此如边栏这样的区域，只需放置一个<
版块区。
版块区有自己的id标识，这样版块就能和版块区结合的更紧密，即使<
版块区位置变动，其中的版块也能随之变动。
不同框架中的<
版块区的id都应该是唯一的，避免冲突。
首页框架源码
l1"
Main"
m1"
RightColumn"
r1"
头部公用部分源码
{header}>
标签输出所有ShopEx48程序自带的资源，源码中必须写入，位置紧跟在<
head>
标签之后。
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
linkrel="
stylesheet"
type="
text/css"
href="
images/css.css"
/head>
body>
Top"
Logo"
Menu"
right"
left"
mainmenu"
TopMenu"
SearchBar"
SearchWrap"
SubMenu"
spanclass="
rt"
尾部公用部分源码
{footer}>
标签和<
标签一样也是必须要有的，位置放在模板末尾，用于输出一些js代码。
clear"
Foot"
title"
body"
foot"
tablewidth="
100%"
cellpadding="
5"
style="
border-top:
1pxsolid#999999;
margin-top:
20px;
tr>
tdwidth="
200"
border-right:
1pxsolid#DDDDDD;
/td>
td>
/tr>
/table>
/body>
/html>
制作边框
边框文件存放在模板borders文件夹下，边框决定了版块的表现样式，一套模板需要有多套边框可供用户选择。
为了方便管理，边框的class和文件名都是以border+数字的形式命名。
边框的描述信息写在theme.xml中。
边框的html代码都是类似的，由头、中、尾三部分组成。
建立theme.xml
初始状态的theme.xml
框架建立完毕，需要有一个初始的theme.xml将模板的初始数据导入到数据库中。
theme.xml是模板的配置文件，包含了模板名称、模板描述、边框信息、版块配置等信息。
可以从官方模板中复制一个theme.xml修改，也可以点此下载。
初始的theme.xml中，版块的部分是不需要的，所以将widgets部分删除，编辑其他部分。
theme.xml中的各项信息：
∙name:
模板名
∙version:
模板版本
∙info:
模板描述
∙author:
模板作者
∙site:
模板网站
∙update_url:
模板升级地址
∙borders:
边框的描述，这里所列出的信息会被用在后台“修改版块”面板的“版块边框”下拉框中。
其中key为显示在后台的下拉选项，tpl为各边框相对模板目录的边框路径。
∙config:
模板中定义的参数，例如一套变色模板，它的颜色可以作为参数写在config中，方便用户在编辑模板时修改。
theme.xml
一缕木香<
id>
ylmx<
/id>
ShopEx4.8<
ShopEx<
首页主区域样式1"
首页主区域样式2"
搜索栏样式"
边栏带头部样式"
商品分类"
帮助中心"
borders/border8.html"
views>
/views>
/theme>
边框
边框决定了版块的表现样式，边框文件存放在borders文件夹下，一套模板需要有多套边框可供用户选择。
后台配置版块
当一切就绪，剩下的便是后台拖放版块和对版块进行配置。
将版块拖放到各个框架中，选择合适的边框，配置参数，保存模板，模板的制作就完成了。
点击模板编辑中的下载按钮，就能下载到打包好的模板。
这个包是tgz格式的，包含所有版块的配置信息，可以直接上传应用。
升级会员 