shopex4.8系列模板制作教程集合.doc

建议用大纲视图查看Shopex4.85 模板制作详解 前言作者: kulolo | 发布时间: 星期四, 04/01/2010 - 22:40 一直想写下shopex4.8系列模板的制作教程，但是一直没有时间定下心来写。由于shopex模板的制作牵涉到过于多的页面调整，很难用很少的篇幅说清楚，所以一直拖到了4.85的出现。官方的模板教程简单，笼统，没有进阶性。学习起来困难。实例教程更是少之又少。我接下来写的教程 尽量图文配合，尽量简洁明了，按部就班的做下来就可以了。学习前需要准备的由如下几点。1 HTML（XHTML）知识 （非常重要，重中之重）2 CSS知识 （熟练即可）3 初步了解Shopex系统（至少会安装吧）4 有毅力和时间网页制作、网站建设、dede ecshop 各类开源源码，插件模板修改二次开发 qq112738102 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版本调试起来非常痛苦。使用这个软件可以一次性调试IE5IE8所有的版本。事半功倍的利器。5 红蜻蜓截图软件。我个人用的截图软件，方便快速。Shopex4.85模板详细教程-路径篇作者: kulolo | 发布时间: 星期一, 04/12/2010 - 21:36 现在我们来学习下制作shopex4.8系统模板应该知道的文件夹路径。1. themes 文件夹 里每个文件夹代表着一套独立完整的模板。2.statics文件夹 里带有系统默认的一些图片 图标和一些CSS定义过的样式3.core文件夹 shopex系统核心文件夹，做模板制作时不到必要建议不要修改这个文件夹中的任何文件。4.plugins文件夹下的widgets文件夹下 放着所有的挂件（挂件以后会详细的谈）。5.config文件夹下放着shopex系统配置文件。没有安装的新系统内没有config.php文件。制作模板时 主要研究 themes文件夹下的文件。其次是挂件目录下的文件。themes下的各个文件都要熟悉。4.84与4.85有少许不同。下一次主要讲themes文件夹下的文件的作用。Shopex4.85模板教程-模板XML文件（theme.xml与info.xml）详解作者: kulolo | 发布时间: 星期六, 04/17/2010 - 15:50 我们来看下shopex系统安装目录下的themes文件夹。打开该文件夹，会出现数量不一的文件夹，4.85默认安装后以后会自带一个purple(紫气东来)的模板文件夹。接下来就以purple(紫气东来)作为例子来详细介绍下模板路径下的文件的作用。打开purple文件夹，有3个文件夹和2个xml文件还有一堆的html文件和一个preview.jpg文件。（如下图）shopex4.85 紫气东来模板的模板文件说明首先说明下的就是2个XML文件，info.xml与theme.xml文件。是模板的核心配置文件。info.xml是应用于4.8系统前的配置文件。theme.xml是应用于4.8版本后的配置文件。用编辑器（dreamweaver或者editplus，有很多）打开这2个文件。来看下info.xml，是一个典型的xml文件。简单说明下配置。紫气东来 模板名 ，应用于后台模板管理中的名字。purple 生成模板文件夹名，在模板包加载中生成该名字的文件夹。ShopEx4.8 模板版本号 模板说明ShopEx 模板作者 模板网站 模板升级地址 边框描述 这里所列出的信息会被用在后台“修改版块”面板的“版块边框”下拉框中。其中key为显示在后台的下拉选项，tpl为各边框相对模板目录的边框路径。其他标记个人觉得无需配置。theme.xml中大致和info.xml文件相同。会多出一个标记。内容无需记住，是系统生成出的。主要的功能是将你做好的模板挂件位置和布局相应写入xml中，在第一次加载或者恢复默认中，直接读取xml文件，无需再次手动添加挂件。非常好的功能。theme.xml在4.8系统中，如果没有这个文件后台不会读到该模板。这是4.8系统模板必要的文件。必须存在，所以在做一套模板时候，这个xml是必须配置完善的。现在手动作个做简单的模板测试下xml文件。在系统目录下的themes文件夹下新建立个文件夹名字test,配置下info.xml与theme.xml,可以复制下purple的配置文件到你的目录下，然后打开后配置，修改测试模板test，并将theme.xml中中的代码删除，基本上是2个xml一致的,theme.xml多了个的标记。然后保存。进入shopex后台，模板列表内，是否看到一个新的叫测试模板的新模板了。虽然应用时没用的，因为你还没有制作，但是第一步已经完成了。网页制作、网站建设、dede ecshop 各类开源源码，插件模板修改二次开发 qq112738102 Shopex4.85模板教程-模板文件详解作者: kulolo | 发布时间: 星期三, 04/21/2010 - 20:48 接下来我们继续来看下purple（紫气东来）文件夹。打开文件夹。看到3个文件夹和2个XML文件和若干html文件。xml配置文件已经在前2天说过了，如果还有朋友不知道的话，可以看下。Shopex4.85模板教程-模板XML文件（theme.xml与info.xml）详解接下说下3个文件夹，block文件夹，放着公共的部分的html模板，比如一个网站的头部,紫气东来模板里为header.html和底部信息footer.html，由于所有页面都调用这2个文件，所以独立出来。方便调用。我们可以使用编辑器打开下header.html文件，在标记内有个 ，切忌所有头部调用这个标记，他包含了一系列的Javascript，mootools框架。如果没有调用，会出现很多问题，购物车肯定是加不进了。切忌。还要在内调用自己的css，建议写相对路径。当然底部文件footer.html 中也要有标记，包含着shopex的版权。去版权可是官方收费的，如果不放，页面肯定出问题。这是毫无疑问的。然后看下borders文件夹，放着是挂件的边框样式（挂件会以后详细讲一下），挂件的边框样式有什么作用呢？就是后台添加挂件的时候可以选择不同样式，比如添加多个相似挂件时候，风格类似，写框架可以节约很多时间。不过我不习惯写，呵呵。images文件夹放着模板所用图片，css，javascript文件。调用的时候写相对路径就OK了。除了3个文件夹还有很多的html文件。这些就是所说的页面模板。index.html就是首页模板，当然shopex4.85可以给首页起不同的名字。shopex4.85可以给所有页面起不同的名字，例如列表页，商品详细页都可以有很多个页面。在后台新建立个列表页，名字可以随便起，然后就可以在文件夹中发现你新建的一个.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模板机制个人是觉得不友好的，当添加一个挂件的时候，会自动在挂件外添加一个标记，首先他增加的页面的代码量，影响了页面输出或者搜索引擎爬虫的效率，其次他还会破坏页面的布局，我们知道是块状标记，本来我这个挂件想添加的是行内标记，现在莫名多出个标记，破坏了本来的布局。希望4.86改善这一点。好的后端代码不能以牺牲前端代码为基础。Shopex4.85模板教程-挂件(widgets)初识(上篇)作者: kulolo | 发布时间: 星期三, 04/28/2010 - 18:38 shopex系统中的挂件机制是系统的一大亮点，可视化的操作对于一些想经营独立网店的用户操作更加得心应手。接下来我们认识下shopex挂件（widgets）。挂件（widgets）是插件的一种，一种封装好功能的版块。就好比shopex是windows，而挂件是一些应用软件（QQ,realplayer）。如果shopex模板想添加系统的一些功能，如要添加注册登录信息条，logo，图片广告等就要把本来做好的功能（挂件）添加到页面上。如何添加一个挂件，首先要在页面的HTML上添加如下代码,成为挂件位，是用来后台管理添加挂件所用的。也就是说首先要有挂件位，才能添加挂件。一个挂件位可以添加多个挂件，但是强烈建议一个挂件位放一个挂件。挂件位的id的用处是保存在数据库中版块的位置。举个例子：多个添加了多个挂件，没有id属性，当删除挂件位后就会出现挂件偏移的现象，因为删除的挂件位后，后面的挂件会自动补上。所以建议添加上id, 他的id是标示，是唯一的。每个挂件位的id都不能相同，相同的id的挂件位，会出现添加一个挂件位，另外一个同id的挂件位同时出现该挂件的现象。当在页面中添加类似的挂件位就可以添加挂件了。打开后台可视化模板编辑状态。就可以看到类似这样的 空挂件位然后点击顶部左侧的添加版块按钮就可以添加挂件了。添加后保存，然后点击保存修改，就可以刷新页面来观看效果了。本文链接: 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，删除所有文件。接下来修改配置文件。用编辑器打开info.xml,themes.xml文件，修改必要的标记（随便起个名字），为test，可以删除下的边框配置，放着也没什么大问题，删除themes.xml中下的标记。下的东西是挂件的添加位置和内容，由系统自动生成的，不需要手动配置。然后打开block/header.html文件。首先要确保你的标记内含有，非常重要。然后在标记下编写头部HTML，一般头部要添加如下的挂件（商店LOGO，商品搜索，会员注册/登录，商店导航菜单，购物车），给他们预留位置。但是布局一定要完成。我们来看下简单的布局架构（点击放大）添加不同的挂件位，并且含有不同的id属性商店LOGO 会员注册/登录 商品搜索 购物车 商店导航菜单这个时候可以去后台添加相应的挂件位，不过最好是修改底部footer.html以后才去添加。附上后台添加的挂件路径商店LOGO系统相关商店LOGO会员注册/登录系统相关会员注册/登录商品搜索系统相关商品搜索购物车系统相关购物车商店导航菜单导航相关商店导航菜单Shopex4.85模板教程-制作一个首页-实例（二）作者: kulolo | 发布时间: 星期四, 05/06/2010 - 20:30 接上篇，需要补充的是css路径和图片路径，打开block/header.html文件，在标记中调用你的模板css文件。例如: 路径尽量用相对路径。接下来打开block/footer.html文件，想要模范下京东商城的底部信息，如下图（点击放大）首先需要布局成5块，然后添加不同的挂件位，如下html代码设置li的CSS样式浮动float:left，ul的CSS 为overflow:hidden(清除浮动)。并添加5个挂件位。进入后台可视化编辑模板，添加版块导航相关站点目录树。这些信息是后台页面管理站点栏目中信息，可自行添加修改。确保底部footer.html中含有代码。完成footer.html文件编辑。布局HTML 详解 参考下图Shopex4.85商店顶部导航终极详解（一）作者: kulolo | 发布时间: 星期天, 05/16/2010 - 12:44 我们先来看下简单版本的顶部导航效果,点击看大图鼠标移动上去有高亮效果，但是有的朋友说能不能做，当前页面高亮效果，我只能说部分可以，由于shopex系统只支持伪静态，通过javascript很难定位当前页面的子页面。下面会详细讨论下，我们先看下这个效果。首先要在photoshop中切出黑色导航背景，高亮图的背景，这部分就不说了。顶部导航一般放在header.html中，所以在header.html放上一个标记，然后在这个添加一个挂件位，如：然后去商店后台添加挂件。添加版块 导航相关 商店导航菜单版块边框选择无边框。导航数量决定了顶部导航的版块数量，如写上6，代表超过6个版块将显示下面的文字。一般显示文字我填成空。超过的就隐藏了。但是这里有个诡异的问题，就是即使是隐藏了也会在页面写有一个的代码段。最好的解决方法是在后台的页面管理 站点栏目 只显示必要的栏目。我们可以保存后看下效果，这时的效果文字是竖排的，如下图：现在我们用firebug插件看下HTML代码，然后用css来修饰导航，让他变成我们想要的效果。对于初学者来说，尽量不要修改挂件的HTML代码。当然修改HTML代码带来的好处有很多。比如精简代码。css代码如下*margin:0;padding:0;#menubackground:url(nav.gif) no-repeat;padding:15px 30px;height:44px;#menu ul lifloat:left;#menu ul li acolor:#fff;padding:0 25px;height:44px;line-height:44px;display:block;float:left;/*float:left;是兼容IE6*/#menu ul li a:hoverbackground:url(a_bg.gif) repeat-x;color:#333;那么一个简单的商店顶部导航就做好了，它的管理是在 页面管理 站点栏目 中，当然简单的商品分类也能这样添加。下次讲的是商品分类多层的商店导航。Shopex4.85商店顶部导航终极详解（二）作者: kulolo | 发布时间: 星期二, 05/25/2010 - 20:43 顶部导航除了可以放置站点栏目挂件之外，还可以放上分类挂件，做出2级导航，甚至3级导航等比较绚丽的效果。如下图：（点击看大图）这是个比较绚丽的导航，鼠标放在一级分类上会显示二级分类。如何做一个类似上图的顶部导航呢。上图效果已经完全做出，我说下需要考虑的几个步骤。第一步，这是一个商品分类和站点栏目2个挂件共同实现的顶部导航，左边的是商店分类挂件，右边的是商店导航挂件。也就是童装后的都是商店导航挂件。首先需要HTML架构下，由于4.85的挂件机制有其诟病，就是添加一个挂件后会自动生成一个标记，这个会完全影响你的布局架构。至少站在前端开发来说，是个不小的毛病。怎么办呢，只能用2个浮动生成了。如下代码在CSS中定义2个层浮动。然后在第一个挂件位内放入商店分类挂件。选择2级分类。现在的样式其实非常难看，且HTML架构异常混乱。打开该挂件的HTML文件,路径为./plugins/widgets/goods_cat/default.html（建议重新做一个挂件模板，而不是直接修改其文件。）里面架构了非常多的HTML代码，分别对应后台设置的1级分类，2级分类和3级分类。由于我们不需要3级分类，可以把3级分类中的代码全部删除，只留下1级分类，2级分类。当鼠标不移动到1级分类的时候，2级分类不会显示。当鼠标移动到一级分类会显示2级分类，鼠标移走不会消失，只有到移动到其他的一级分类上才会将该一级分类下的二级分类显示出来。首先就要重新架构HTML，这个时候对于HTML架构有比较高的要求。我的HTML是外部架构是布局，内部是的架构。中放的是一级分类，中方的是二级分类，并且定义其css为display:none;其HTML代码下载：default2（文件需另存为）然后需要写下javascript 来判断鼠标的动作。shopex使用的是mootools框架，写法比原始的写法更加方便。js我就不卖弄了，只会一点皮毛，呵呵。然后贴下非常重要的css文件内容。menubarheight:86px;background:url(index_13.gif) no-repeat;position:relative;menubar .menu_sortfloat:left;menubar .menu_sitefloat:left;menubar .menu_sort ulpadding-left:50px;menubar ul lifloat:left;height:50px;line-height:50px;font-size:14px;background:url(index2_03.gif) no-repeat right 12px;menubar ul li acolor:#fff;display:block;padding:0 20px;menubar ul li.curr dddisplay:block;position:absolute;top:40px;left:140px;font-size:12px;menubar ul li.currbackground:url(menu_1.jpg) no-repeat left 7px;menubar ul li.curr dt abackground:url(menu2.jpg) no-repeat right 7px;menubar ul li.curr dd adisplay:inline;padding:0 5px;menubar ul li dddisplay:none;menubar .menu_site ul li.curr abackground:url(menu2.jpg) no-repeat right 7px;鼠标进入内会给这个标记添加一个.curr的class，直接会影响其效果和其地下的标记的显示。我只写下顶部分类导航的思路，大家可以试验下。纯css也可能写出这样的效果，但是写起来就比较复杂，因为兼容IE6是个大麻烦。如何添加和修改商品挂件作者: kulolo | 发布时间: 星期天, 05/30/2010 - 15:22 Shopex独立网店系统最重要的挂件之一就是商品挂件了，几乎所有的模板都会将其放在首页或者其他页面上。例如：最新商品，热卖商品，推荐商品。Shopex的商品挂件可以分别对分类，品牌和标签筛选你要的展示的商品，所以可以极方便的调用各种需要调用的商品。我们先简单的添加一个商品挂件，看下效果。添加挂件前，需要在HTML上添加挂件位，假设添加一个，然后去商店后台可视化模板编辑中添加版块，选择商品相关中的多功能商品展示或者商品展示挂件，我们只是简单的添加商品挂件，所以添加下商品展示挂件。如下图：对所需要的商品进行筛选，如果商品的要求无法达到需要的筛选条件，可以为你的需要的商品添加标签。比如给某些商品添加半价促销的标签（在商品添加或编辑的时候），那么标签选择半价促销，就会选中那些商品。显示设置的选项是对应网站前台的展示效果。可以选择设置下，看下效果。一般如下图所示那么如何美化和修改这个商品挂件呢。如果简单的修改可以通过css来进行调整，如把字体颜色修改和行间距的修改，都可以通过css来修改。如果你想将市场价移动到销售价下，那只有通过修改该挂件的HTML架构来完成了。修改之前先备份文件或者重新建立一个挂件模板，商品展示挂件的路径为：plugins/widgets/goods_show/。这块的HTML是布局的，布局的版块向来是代码冗余的代表作。直接把他改成布局，不仅代码精简利于SEO，后期维护也简便了不少。大家可以尝试下把这个挂件修改成xhtml+css的布局方式。多功能商品展示类似上面的商品展示，只是他多了很多展示方式和效果，例如多层展示就是类似TAB页的展示效果，还可以将图片的展示的方式放在文字的左边或者右边，多种展示方式可以展现出不同的页面效果。多功能的商品展示挂件的挂件路径为：plugins/widgets/go