收藏

下载资源 加入VIP,免费下载

第1页 / 共17页

第2页 / 共17页

第3页 / 共17页

第4页 / 共17页

第5页 / 共17页

边框的html代码都是类似的，一般是由头、中、尾三部分组成：

∙<{$title}>是版块的标题，在版块配置面板中填写

∙<{$body}>是由程序输出的版块的具体内容

∙<{$widgets_id}>是版块的id，每个版块都会有唯一的id作为标识，默认由程序生成，用户也可在版块配置面板中填写

∙<{$widgets_classname}>为版块配置面板可选填的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"?

>

Cn00020

48rc

shopex

对应项说明

∙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，一般把它做成内页的结构，默认框架中须包含业务区<{main}>。

首页一般不涉及到业务流程，并且表现形式复杂，因此模板中需要有首页框架index.html与之对应。

需要做的几个模板框架

∙首页框架：

index.html

∙默认框架：

default.html

∙会员中心框架：

member.html

∙购物流程框架：

member.html

∙赠品框架：

gift.html

例：

默认框架源码

<{requirefile="block/header.html"}>

<{widgetsid="il1"}>

<{widgetsid="ir1"}>

<{main}>

<{widgetsid="ir2"}>

<{requirefile="block/footer.html"}>

例：

默认框架可视化编辑视图

制作首页框架

静态页面完成之后需要将其转成ShopEx48的框架。

通常模板的头部和尾部是公用的，可以将它们分离出去，引用到各框架之中，这样不同框架都能使用同一套头尾，后台配置版块时仅需对头尾做一次编辑。

静态页面中各版块位置以<{widgets}>版块区替代，<{widgets}>版块区可以放置竖向的多个版块，因此如边栏这样的区域，只需放置一个<{widgets}>版块区。

<{widgets}>版块区有自己的id标识，这样版块就能和版块区结合的更紧密，即使<{widgets}>版块区位置变动，其中的版块也能随之变动。

不同框架中的<{widgets}>版块区的id都应该是唯一的，避免冲突。

例：

首页框架源码

<{requirefile="block/header.html"}>

<{widgetsid="l1"}>

<{widgetsid="m1"}>

<{widgetsid="r1"}>

<{requirefile="block/footer.html"}>

例：

头部公用部分源码

<{header}>标签输出所有ShopEx48程序自带的资源，源码中必须写入，位置紧跟在标签之后。

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

<{header}>

<{widgets}>

<{widgets}>

<{widgets}>

<{widgets}>

<{widgets}>

例：

尾部公用部分源码

<{footer}>标签和<{header}>标签一样也是必须要有的，位置放在模板末尾，用于输出一些js代码。

<{widgets}>

<{widgets}>

<{widgets}>

1pxsolid#999999;margin-top:

20px;">

1pxsolid#DDDDDD;"><{footer}>

<{widgets}>

制作边框

边框文件存放在模板borders文件夹下，边框决定了版块的表现样式，一套模板需要有多套边框可供用户选择。

为了方便管理，边框的class和文件名都是以border+数字的形式命名。

边框的描述信息写在theme.xml中。

例：

边框源码

"id="<{$widgets_id}>">

<{$title}>

<{$body}>

边框的html代码都是类似的，由头、中、尾三部分组成。

∙<{$title}>是版块的标题，在版块配置面板中填写

∙<{$body}>是由程序输出的版块的具体内容

∙<{$widgets_id}>是版块的id，每个版块都会有唯一的id作为标识，默认由程序生成，用户也可在版块配置面板中填写

∙<{$widgets_classname}>为版块配置面板可选填的class，可以应用在如边框样式相同但内部版块样式不同等等的情形下

建立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中，方便用户在编辑模板时修改。

config的参数可在后台“模板配置”中修改。

例：

theme.xml

xmlversion="1.0"encoding="UTF-8"?

>

一缕木香

ylmx

ShopEx4.8

ShopEx

边框

边框决定了版块的表现样式，边框文件存放在borders文件夹下，一套模板需要有多套边框可供用户选择。

后台配置版块

当一切就绪，剩下的便是后台拖放版块和对版块进行配置。

将版块拖放到各个框架中，选择合适的边框，配置参数，保存模板，模板的制作就完成了。

点击模板编辑中的下载按钮，就能下载到打包好的模板。

这个包是tgz格式的，包含所有版块的配置信息，可以直接上传应用。