本文档分为Shopex4.85模板制作详解与ShopEx完全手册
Shopex4.85 模板制作详解，建议用大纲视图查看
ShopEx 完全手册，建议用web视图查看
Shopex4.85 模板制作详解 前言
作者: kulolo | 发布时间: 星期四, 04/01/2010 - 22:40
一直想写下shopex4.8系列模板的制作教程，但是一直没有时间定下心来写。
由于shopex模板的制作牵涉到过于多的页面调整，很难用很少的篇幅说清楚，所以一直拖到了4.85的出现。官方的模板教程简单，笼统，没有进阶性。学习起来困难。实例教程更是少之又少。我接下来写的教程 尽量图文配合，尽量简洁明了，按部就班的做下来就可以了。学习前需要准备的由如下几点。
1 HTML（XHTML）知识 （非常重要，重中之重）
2 CSS知识 （熟练即可）
3 初步了解Shopex系统（至少会安装吧）
4 有毅力和时间
网页制作、网站建设、dede ecshop 各类开源源码，插件\模板\修改\二次开发 qq112738102  www.jetee
Shopex4.85模板详细教程-工具篇
作者: kulolo | 发布时间: 星期一, 04/05/2010 - 19:21
工欲善其事，必先利其器。
马克思说：人类区别与其他动物的最根本的区别是制作和使用工具。当然马克思说的很多话不能相信。。。HOHO。。
这句话还是可以听一下的。
要做好shopex4.8系统的模板也要好工具来帮忙，接下来看下有哪些工具，可以使你做事事半功倍。
1 photoshop cs3版本。要做好效果图，这个工具必不可少。CS4版本比较考验机器性能，装个CS3版本，基本功能一个都不少，修修改改的用起来很顺手。
2 dreamweaver cs4版本，同样是ADOBE公司的一款工具，写前端代码非常方便，且可以设施2个浏览器进行调试。代码提示等诸多方便的功能。
3 FireFox浏览器，如果你作为一个前端开发人员，不装Firefox浏览器都不好意思和别人打招呼。基本完全符合W3C制定的规范运行的浏览器。并且配合FIREBUG等诸多插件，使你调试页面非常方便快速。
4 IETESTER 软件。是不是觉得对诸多IE版本调试起来非常痛苦。使用这个软件可以一次性调试IE5~IE8所有的版本。事半功倍的利器。
5 红蜻蜓截图软件。我个人用的截图软件，方便快速。
Shopex4.85模板详细教程-路径篇
作者: kulolo | 发布时间: 星期一, 04/12/2010 - 21:36
现在我们来学习下制作shopex4.8系统模板应该知道的文件夹路径。
1. themes 文件夹 里每个文件夹代表着一套独立完整的模板。
2.statics文件夹 里带有系统默认的一些图片 图标和一些CSS定义过的样式
<文件夹 shopex系统核心文件夹，做模板制作时不到必要建议不要修改这个文件夹中的任何文件。
4.plugins文件夹下的widgets文件夹下 放着所有的挂件（挂件以后会详细的谈）。
文件夹下放着shopex系统配置文件。没有安装的新系统内没有config.php文件。
制作模板时 主要研究 themes文件夹下的文件。其次是挂件目录下的文件。
themes下的各个文件都要熟悉。4.84与4.85有少许不同。下一次主要讲themes文件夹下的文件的作用。
Shopex4.85模板教程-模板XML文件（l与l）详解
作者: kulolo | 发布时间: 星期六, 04/17/2010 - 15:50
我们来看下shopex系统安装目录下的themes文件夹。打开该文件夹，会出现数量不一的文件夹，4.85默认安装后以后会自带一个purple(紫气东来)的模板文件夹。接下来就以purple(紫气东来)作为例子来详细介绍下模板路径下的文件的作用。
打开purple文件夹，有3个文件夹和2个xml文件还有一堆的html文件和一个preview.jpg文件。（如下图）
shopex4.85 紫气东来模板的模板文件说明
首先说明下的就是2个XML文件，l与l文件。是模板的核心配置文件。l是应用于4.8系统前的配置文件。l是应用于4.8版本后的配置文件。
用编辑器（dreamweaver或者editplus，有很多）打开这2个文件。来看下l，是一个典型的xml文件。简单说明下配置。
<name>紫气东来</name>????? 模板名 ，应用于后台模板管理中的名字。
<id>purple</id>??? 生成模板文件夹名，在模板包加载中生成该名字的文件夹。
<version>ShopEx4.8</version>??? 模板版本号
<info></info>???? 模板说明
<author>ShopEx</author>? 模板作者
<site>www.shopex</site>? 模板网站
<update_url></update_url>???? 模板升级地址
<borders></borders> 边框描述 这里所列出的信息会被用在后台“修改版块”面板的“版块边框”下拉框中。其中key为显示在后台的下拉选项，tpl为各边框相对模板目录的边框路径。
其他标记个人觉得无需配置。
现在手动作个做简单的模板测试下xml文件。在系统目录下的themes文件夹下新建立个文件夹名字test，配置下l与l，可以复制下purple的配置文件到你的目录下，然后打开后配置，修改<name>测试模板</name><id>test</id>，并将l中<widgets></widgets>中的代码删除，基本上是2个xml一致的,l多了个<widgets></widgets>的标记。然后保存。进入shopex后台，模
板列表内，是
否看到一个新的叫测试模板的新模板了。虽然应用时没用的，因为你还没有制作，但是第一步已经完成了。
网页制作、网站建设、dede ecshop 各类开源源码，插件\模板\修改\二次开发 qq112738102  www.jetee
Shopex4.85模板教程-模板文件详解
作者: kulolo | 发布时间: 星期三, 04/21/2010 - 20:48
接下来我们继续来看下purple（紫气东来）文件夹。
打开文件夹。看到3个文件夹和2个XML文件和若干html文件。xml配置文件已经在前2天说过了，如果还有朋友不知道的话，可以看下。
Shopex4.85模板教程-模板XML文件（l与l）详解
接下说下3个文件夹，block文件夹，放着公共的部分的html模板，比如一个网站的头部，紫气东来模
板里为header.html和底部信息footer.html，由于所有页面都调用这2个文件，所以独立出来。方便调用。
我们可以使用编辑器打开下header.html文件，在<head></head>标记内有个<{header}> ，切忌所有头部调用这个标记，他包含了一系列的Javascript，mootools框架。如果没有调用，会出现很多问题，购物车肯定是加不进了。切忌。
还要在<head></head>内调用自己的css，建议写相对路径。
当然底部文件footer.html 中也要有<{footer}>标记，包含着shopex的版权。去版权可是官方收费的，如果不放<{footer}>，页面肯定出问题。这是毫无疑问的。
然后看下borders文件夹，放着是挂件的边框样式（挂件会以后详细讲一下），挂件的边框样式有什么作用呢？就是后台添加挂件的时候可以选择不同样式，比如添加多个相似挂件时候，风格类似，写框架可以节约很多时间。不过我不习惯写，呵呵。
images文件夹放着模板所用图片，css，javascript文件。调用的时候写相对路径就OK了。
除了3个文件夹还有很多的html文件。这些就是所说的页面模板。index.html就是首页模板，当然shopex4.85可以给首页起不同的名字。shopex4.85可以给所有页面起不同的名字，例如列表页，商品
详细页都可以有很多个页面。
在后台新建立个列表页，名字可以随便起，然后就可以在文件夹中发现你新建的一个.html文件了。就是你刚才新建的文件。用编辑器打开，一般顶部和尾部会有调用头部信息和底部信息的代码。
<{require file=”block/header.html”}>和<{require file=”block/footer.html”}>
这样就调用到了公共头部和底部。4.85可以建立非常多的页面进行调整模板。
首页-index.html
商品列表页-gallery.html
商品详细页-product.html
商品评论/咨询页-comment.html
文章列表页-artical.html
赠品页-gift.html
捆绑商品页-package.html
品牌列表页-brandlist.html
品牌展示页-cart.html
购物车页-search.html
高级搜索页-passport.html
注册/登录页-passport.html
前端页面模板会员中心页-member.html
站点栏目单独页-page.html
订单详细页-order_detail.html
默认页-default.html
订单确认页-order_index.html
每个页面可以定义多个页面用来备份。4.85还有分类可以绑定不同的列表页和商品详细页。功能以后再提。
Shopex4.85模板教程-代码详解
作者: kulolo | 发布时间: 星期一, 04/26/2010 - 21:48
要做一套模板，首先自然是做个首页。首页需用XHTML+CSS的方式独立做一个静态页，内容全部用静态的方式输出。然后保证其浏览器的兼容性，例如兼容IE6,IE7,IE8,Firefox,opera,safari等浏览器。代码规范性，绝对会影响网站的SEO能力和后期维护的效率，良好的代码规范，是做好一个shopex模板的前提。很多模板商写法粗鲁，只要效果，甚至在HTML中定义id时，有相同的id，我每次读到这样的代码都恶心不已。尽可能写的代码语义化，如果你没有学会良好的HTML+CSS架构能力，建议先买本css的书籍啃一下。推荐 《精通 CSS-高级web标准解决方案》，适合有一定css基础的朋友看。
当你把首页静态页做完后，将公共头部黏贴在block/header.html中，将公共底部黏贴在block/footer.html中。将其他部分黏贴到index.html中，将css文件和图片文件copy至images中。由于index.html调用头部和底部文件，所以预览模板的时候就可以看到首页的整体效果了，虽然这个时候你没有任何功能，只是完整的静态页。
重申一点，就是HTML代码的合理性，语义化，前段的代码都是极其细致化的结果。没有最好，但是要向最好的代码靠近。其实4.85模板机制个人是觉得不友好的，当添加一个挂件的时候，会自动在挂件外添加一个<div>标记，首先他增加的页面的代码量，影响了页面输出或者搜索引擎爬虫的效率，其
次他还会破坏页面的布局，我们知道<div>是块状标记，本来我这个挂件想添加的是行内标记，现在莫名多出个<div>标记，破坏了本来的布局。希望4.86改善这一点。好的后端代码不能以牺牲前端代码为基础。
Shopex4.85模板教程-挂件(widgets)初识(上篇)
作者: kulolo | 发布时间: 星期三, 04/28/2010 - 18:38
shopex系统中的挂件机制是系统的一大亮点，可视化的操作对于一些想经营独立网店的用户操作更加得心应手。
接下来我们认识下shopex挂件（widgets）。
挂件（widgets）是插件的一种，一种封装好功能的版块。就好比shopex是windows，而挂件是一些应用软件（QQ,realplayer）。如果shopex模板想添加系统的一些功能，如要添加注册登录信息条，logo，图片广告等就要把本来做好的功能（挂件）添加到页面上。
如何添加一个挂件，首先要在页面的HTML上添加如下代码<{widgets id=”abc”}>，成为挂件位，是用来后台管理添加
挂件所用的。也就是说首先要有挂件位，才能添加挂件。一个挂件位可以添加多个挂件，但是强烈建议一个挂件位放一个挂件。挂件位的id的用处是保存在数据库中版块的位置。举个例子：多个<{widgets}>添加了多个挂件，没有id属性，当删除挂件位后就会出现挂件偏移的现象，因为删除的挂件位后，后面的挂件会自动补上。所以建议添加上id, 他的id是标示，是唯一的。每个挂件位的id都不能相同，相同的id的挂件位，会出现添加一个挂件位，另外一个同id的挂件位同时出现该挂件的现象。
当在页面中添加类似<{widgets id=”cart”}>的挂件位就可以添加挂件了。
打开后台可视化模板编辑状态。就可以看到类似这样的 空挂件位
然后点击顶部左侧的添加版块按钮就可以添加挂件了。
添加后保存，然后点击保存修改，就可以刷新页面来观看效果了。
本文链接:
Shopex4.85模板教程-挂件(widgets)初识(下篇)
作者: kulolo | 发布时间: 星期六, 05/01/2010 - 21:16
shopex挂件机制在后台是可视化编辑的，这点与其他的CMS模板编辑是有所区别的，优点是更利于普通操作，即使一个完全没有HTML经验的新手也能完成商品添加，购物车信息条添加的操作。这点优秀的智能化提升后台操作化，也带来了不利于高级个性化操作的困难。比如我要对商品挂件的HTML重新构造，甚至添加些特效变得比较困难。如何修改挂件文件呢？
我们来看下挂件的目录，是放在系统根目录plugins下的widgets文件下，其中每个文件夹代表一个挂件。任意打开一个文件夹，都可以看到一个挂件配置文件widgets.php，用编辑器打开，可以看到其在后台的添加路径和名字。还有挂件模板路径，挂件模板路径是一个数组，所以可以添加多个挂件模板，方便调用。这个有个小技巧，如何快速知道你添加的挂件是那个文件夹，添加这个挂件，在没有设定 版块标题时，出现如图：
可以看到他的标题显示为article，也就是文件夹名为article的文件夹。如需要修改进入该文件夹可以修改配置文件或者模板。
几乎所有的免费模板都不会修改挂件，也就是说只导出.tgz的文件包。没有挂件的修改，挂件只修改了css样式文件。有些特殊需要一定要修改挂件的HTML只能修改挂件模板了。建议修改前先做好备份，是个良好的习惯。
如果所有的挂件都不能满足你的需求，那只有用自定义挂件了，自定义挂件可以添加任意HTML代码，
js代码，css代码，比如要插入一个超绚的FLASH焦点图，那用自定义挂件是个明智之举，或者直接写入模板文件内，也是个不错的方法。
Shopex4.85模板教程-制作一个首页-实例（一）
作者: kulolo | 发布时间:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。