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模板读到这样的代码都恶心不已。尽可能写的代码语义化，如果你没有学会良好的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 | 发布时间: 星期三, 05/05/2010 - 21:12
现在我们做一个简单的shopex首页模板。
现在使用一个简便方法来快速的制作一个模板，在themes文件夹下新建一个文件夹，起名为test。复制purple（紫气东来）模板下的所有文件，然后黏贴到test文件夹下，这样文件架构基本都完成了，打开test/images，删除所有文件。
接下来修改配置文件。用编辑器打开l文件，修改必要的<name>标记（随便起个名字），<id>为test，可以删除<borders>下的边框配置，放着也没什么大问题，删除l中<widgets>下的标记。<widgets>下的东西是挂件的添加位置和内容，由系统自动生成的，不需要手动配置。
然后打开block/header.html文件。首先要确保你的<head></head>标记内含有<{header}>，非常重要。然后在<body>标记
下编写头部HTML，一般头部要添加如下的挂件（商店LOGO，商品搜索，会员注册/登录，商店导航菜单，购物车），给他们预留位置。但是布局一定要完成。
我们来看下简单的布局架构（点击放大）
添加不同的挂件位，并且含有不同的id属性
商店LOGO <{widgets id=”logo”}>
会员注册/登录 <{widgets id=”member”}>
商品搜索 <{widgets id=”search”}>
购物车 <{widgets id=”cart”}>
商店导航菜单<{widgets id=”menu”}>
这个时候可以去后台添加相应的挂件位，不过最好是修改底部footer.html以后才去添加。
附上后台添加的挂件路径
商店LOGO——系统相关>商店LOGO
会员注册/登录——系统相关>会员注册/登录
商品搜索——系统相关>商品搜索
购物车——系统相关>购物车
商店导航菜单——导航相关>商店导航菜单
Shopex4.85模板教程-制作一个首页-实例（二）
作者: kulolo | 发布时间: 星期四, 05/06/2010 - 20:30
接上篇，需要补充的是css路径和图片路径，打开block/header.html文件，在<head></head>标记中调用你的模板css文件。
例如:<link rel=”stylesheet” href=”images/css.css” type=”text/css” /> 路径尽量用相对路径。
接下来打开block/footer.html文件，想要模范下京东商城的底部信息，如下图（点击放大）
首先需要布局成5块，然后添加不同的挂件位，如下html代码
<ul>
<li><{widgets id=”siteinfo1″}></li>
<li><{widgets id=”siteinfo2″}></li>
<li><{widgets id=”siteinfo3″}></li>
<li><{widgets id=”siteinfo4″}></li>
<li><{widgets id=”siteinfo5″}></li>
</ul>
设置li的CSS样式浮动float:left，ul的CSS 为overflow:hidden(清除浮动)。并添加5个挂件位。
进入后台可视化编辑模板，添加版块>导航相关>站点目录树。这些信息是后台>页面管理>站点栏目中信息，可自行添加修改。
确保底部footer.html中含有<{footer}>代码。完成footer.html文件编辑。
布局HTML 详解 参考下图
Shopex4.85商店顶部导航终极详解（一）
作者: kulolo | 发布时间: 星期天, 05/16/2010 - 12:44
我们先来看下简单版本的顶部导航效果，点击看大图
鼠标移动上去有高亮效果，但是有的朋友说能不能做，当前页面高亮效果，我只能说部分可以，由于shopex系统只支持伪静态，通过javascript很难定位当前页面的子页面。下面会详细讨论下，我们先看下这个效果。
首先要在photoshop中切出黑背景，高亮图的背景，这部分就不说了。
顶部导航一般放在header.html中，所以在header.html放上一个<div>标记，然后在这个<div>添加一个挂件位，如：
<div id=”menu”>
<{widgets id=”menu”}>
</div>
然后去商店后台添加挂件。添加版块 > 导航相关 > 商店导航菜单
版块边框选择无边框。导航数量决

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