ECshop模板制作教程

1、ECshop模板制作教程ECshop是PHP构建的（亚马逊:,雅虎:,百度:淘宝:新浪:,腾讯:）都在用PHP下列章节的适用于ECshop程序。同时这里许多内容和一些Smarty相关。假如您已经熟悉这些内容可跳过不阅读。假如您是ECshop新手并且想diy一下自己的店铺，那您应该认真详细地从头到尾读一遍这些章节。（ps:大家不要紧张，我会尽量用人类的语言和大家交流，实在万不得已才会用机器语言展示给大家）希望大家能够通过本教程，想要什么模板都能自己做出来。哈哈！一起加油吧！第早节：（ECShop中的smarty类疋include/cls_template.php”就这一个文件,没smarty那么

2、多的文件，非常强大的）（v!-TemplateBeginEditablename=doctitle-这对标记对应区域这个是可编辑区域语法，name=为可编辑区域的名称，该名称出现在后台“模板管理”，“模板设置”的相关模板设置中，系统规定了一些模板文件的可编辑区域设置（在设置列表中有出现这些列表模板文件）。在可编辑区域中，你可以将其他模块加入到该模板文件中显示。这个是结束语句。）（要使应用模板的页面其中某个部分与模板有区别的话，在DreamvawerMX以前版本，只能设置可编辑区域，现在可以使用可编辑属性了！以下例子是一个简单应用，就拿论坛的这个页面来说，比方说上面的广告条在各个栏目有不同图片表

3、示1。先创建一个模板文件2。打开该模板文件，选中该图片，使用菜单modify-template下makeattributeeditable出现设置面板，（dreamvawer中修改-模板-令属性可编辑）3。因为我们的目的是改变图片地址，所以在attribute设置里选择src（注意：如果没有你要的属性，可以自行添加），勾上makeattributeeditable40label是针对你当前的这个可编辑属性起个名字（以便DW查找要替换哪部分）5。type选择参数的类型，我们要改变的是地址，那么就用url类型6。最后是默认的地址，DW会把原先图片的地址取过来，除非你要改变默认的地址，否则就不要动了

4、，7。OK确认，这样就创建好了可编辑属性8。从模板创建文件，如果你要当前页面和模板里的这个广告条图片地址一致，就不用动了9。如果要有区别，那么就要使用modify-templateproperties，这里会罗列页面使用的所有可编辑属性，10。选择你要改变的这个label名，设置新的值，这样这个图片的地址就会相应改变了，即便这个图片是在不可编辑区域！）读取以下这些内容，您将了解：每个前台页面所对应的模板页面，模板文件的目录结构。一些最基本的ECshop模板修改方法。模板的路径以及相关包含文件的方法（深入了解Dreamweaver模板制作）。一些常用模板例子讲解.模板存放路径：ecshop/th

5、emes/XXXXX其中的XXXXX就是某一套模板，如系统一般会自带的模板文件名叫做default,（即:ecshop/themes/default）里面放的就是安装好时的默认模板，以下所有的说明都是针对默认模板来讲解.操作前提，将您当前使用的模板调整为default模板，然后清空缓存。接下来我们进入default目录，可以看到以下文件目录：images/（存放模板中用到的图片）library/（存放一些小模板文件及重复被用到的模板文件）style.css（模板样式文件）indexdwt（首页的模板indexphp）goodsdwt（商品显示页的模板goodsphp）*dwt（表示其它dwt文

6、件）你不相信这些就是模板吗？好，那我证明给你看看.我们把把images里面的logo.gif文件的名字，改为Iogo2.gif,然后我们随便找一张gif图片，起名为logo.gif放到images目录中，然后我们刷新首页。看到没？首页logo被修改了。如果你觉得大小不合适，那么我们打开library目录中的page_header.lib查看源代码，然后搜索images/logo.gif然后看它后面width=130height=56把130和56改为相应的值就可以了，到前台刷新看看。好接下来我们用dreamweaver打开index.dwt文件，在源代码中搜索$page_title，找到后，将

7、$page_title修改为超级无敌的大卖场.然后到到浏览器前台刷新，看看页面有什么变化。没有发现吗？看看浏览器头部啊，呵呵，是不是网站的标题被改变了？哈哈，对，$page_title就是网站标题的标签（注：标签是从开始，至U结束哦,和属于标签的一部分）.整个ECshop的模板就是一个一个这样的标签组成了，控制网站内容和数据的动态显示。比如（$keywords）控制网站的关键字标签，$description:网站描述标签，（这就是模板中的标签，每个标签都会对应程序里面的一个值，网站运行时模板引擎会来读取模板页面，然后把对应的标签用对应的值进行替换，就显示出我们看到的网站页面了，明白了吧。这一段

8、内容对于新手来说，可能一下子不能完全消化）很简单8,哈哈，大家真是冰雪聪明，孔明再世啊，这么快就学会了，如果你上一步你操作很超级非常very的简单的话，接下来的学习也时一样的哦接下来要怎么改呢？大家不要着急，欲速则不达，呵呵，下面我们真正开始做ECshop的模板了，（不懂HTML的观众准备好Dreamweaver哦）1.我们到/themes/default目录中，把index.dwt改名为index_bak.dwt,然后用Dreamweaver新建一个HTML文件，然后保存到/themes/default目录中，命名为index.dwt,好，我们刷新前台看看，哈哈，什么也没有哦.好,在我们新建

9、的index.dwt中找到title,我们把vtitle和/title中间的内容替换为:$page_title,在vbody和/body之间也放入一个$page_title,刷新前台看看.嘿嘿，看到什么了？网站标题被打印出来了吧？如有操作时候有弹出对话框，点击确定就可以了，：）接下来我们选择可视化界面编辑：然后在$page_title后面按Enter键换行，然后输入：商店公告：$shop_notice到浏览器刷新首页刷新看看，呵呵。商店公告被调出来了，可以去网站后台系统设置-商店设置-网店信息-商店公告修改内容，然后到浏览器再刷新网站首页看看，呵呵，商店公告是被动态掉出来的哦.好继续在$sho

10、p_notice后面按Enter键换行，然后输入1网站快讯：foreachfrom=$new_articlesitem=article$article.short_title/foreach注：换行的地方按Enter键哦，好刷新前台看看，呵呵，网站快讯被调出来了哦。好我们再到网站后台-文章管理-网站列表-添加文章，选择网站快讯这个分类，随便添加一篇内容，完成后前台刷新看看。两篇文章都被动态掉出来了哦。注释：foreachfrom=$new_articlesitem=article:循环的开始，/foreach:循环的结束$new_articles:为要循环的东西，这里为网站快讯$article

11、.short_title:快讯标题的标签模式为：foreachfrom=$postitem=namecontent/foreachforeachfrom=$postitem=name和/foreach标签中间可以任意添加要循环的内容content（可以为任意的东西），循环的次数受到$post的限制（这里要填什么我都会告诉大家的.）name为当前这个循环的对象。方便调用数据。以后这个循环我们会经常的用到哦.还是不懂也没有关系，每次遇到我都会讲哪里要怎么设置的，多用就会了。我们也可以这么写哦，注意：在代码编辑的视图里面编辑vtable6foreachfrom=$new_articlesitem=a

12、rticlevtrvtd$article.short_titleio/foreach哈哈，保存，刷新首页看看，表格被一行一行的循环出来了哦下章预告：19产品列表调用，还有产品缩略图哦，呵呵!产品分类调用呢！模板教程继续啦!不知道大家是学会用循环了呢，还是我的言语实在有问题，大家实在无法完成阅读哦，居然大家都没有问题，暂时心里安慰，把他当做好事情，大家都会调用了，呵呵，那我们继续循环调用商品了！好，继续在我们昨天的基础上，我们在网站快讯的循环后面，按Enter键，输入:商品列表,接着建立一个2行3列的表格，宽度为70%,表格边框为1（为了让大家看清楚），起HTML代码如下12商品列表141511

13、6vtd2v/td17vtd3v/td1813vtablewidth=70%border=120vtd4v/td2122vtd5v/tdvtd6v/tdv/table复制代码注:（1,2,3,4,5,6这些个是序号，方便跟大家讲解呢）在这里，我们暂时先把下面这一行去掉（为了大家操作简单），变成25p商品列表/p2728129vtd2v/td30vtd3v/td313226vtablewidth=70%border=1我们要循环的是列，也就是td，因此我们的循环标签应该在td和/td的外面，而2,和3应该是循环出来的东西，也就时我模板里面只用保留1这个td就可以了，2和3都要去掉,于是就变成了下

14、面的样子33vp商品列表/p35361373834vtablewidth=70%border=1好，现在我们开始加循环标签，我们要调用的是精品推荐商品，代码如下:39P商品列表/P41vtr40vtablewidth=70%border=1424344/foreach4546foreachfrom=$best_goodsitem=goods$goodsshort_style_name注意了：foreach表示下面的内容属于要进行循环，from=$best_goods表示循环的内容来自$best_goods,（$best_goods是精品商品推荐的标签）,item=goods表示当前循环这一次的

15、对象叫goods，你也可以改为其它的东东，当然$goods.short_style_name这个地方的goods也要相应的改了哦,$goods.short_style_name表示goods这个对象的商品名称.好了，我们保存，前台刷新看一下啊。呵呵，精品商品被循环出来了吧?接着，为了大家应用方便，我们把goods改为jingpinshangpin，代码如下:47P商品列表/p4948vtablewidth=70%border=152/foreach535450foreachfrom=$best_goodsitem=jingpinshangpin51$jingpinshangpin.short_

16、style_name57vtr好前台刷新看看哦，呵呵，夷？如果你有很多的精品商品你会发现商品变了，因为精品商品是随机调取出来的.好我们继续完善他，给它加上链接对应商品的链接，也就是添加a属性,代码如下：55p商品列表/p56vtablewidth=70%border=158foreachfrom=$best_goodsitem=jingpinshangpin59vtdvahref=$jingpinshangpin.url$jingpinshangpin.short_style_namev/av/td60/foreach6162v/table刷新浏览器，点击链接看看链接到什么地方去了哦。呵呵！链

17、接到了每个产品自己的页面了呢。说明：标签$jingpinshangpin.url就是精品商品的商品链接的标签了，但是要记得哦，$jingpinshangpin是你起的名字哦，item=$jingpinshangpin的这个$jingpinshangpin改变了的话,这里也要跟着改变。接下来我们添加上商品的图片哦，也就是增加一个img属性，代码如下:63p商品列表/p6564vtablewidth=70%border=167vbr$jingpinshangpin.short_style_name68/foreach6970到前台刷新浏览器看看看，呵呵，商品缩略图也被调出来了。说明：标签$jing

18、pinshangpin.thumb就是精品商品的缩略图的标签了，但是要记得哦，$jingpinshangpin是你起的名字哦，item=$jingpinshangpin的这个$jingpinshangpin改变了的话,这里也要跟着改变。如果你已经熟练理解和掌握了以上的步骤，那么下面就越来越清晰和容易了。接下来我们调取新品上市（标签为：$new_goods）和热卖商品（标签为:$hot_goods），接着在刚才的代码后面加上去就是了。我就不多讲了哦,代码如下7i新品上市7273vtablewidth=70%border=174foreachfrom=$new_goodsitem=xinpinsh

19、angshi75vimgsrc=$xinpinshangshi.thumbborder=0/vbr$xinpinshangshi.short_style_name/foreach8081热卖商品8382vtablewidth=70%border=184foreachfrom=$hot_goodsitem=remaishangpin85vbr$remaishangpin.short_style_name/foreach89接着我们要一个Menu菜单，也就是做一个产品的分类列表出来。相信你现在至少知道分类的标签是什么，就知道要怎么做了吧，呵呵.分类的标签是：$categories代码如下：分类列表

20、foreachfrom=$categoriesitem=fenlei$/foreach到前台刷新看看哦，呵呵，分类列表被调取出来了，我们试着在后台多添加几个一级分类，然后到首页刷新看看。F面继续写如何把子分类调用出来，大家有问题多问哦,子分类的标签是对应在父分类标签来调用的.代码如下:94分类列表95foreachfrom=$categoriesitem=fenlei9697$98vbr-$childname|escape:htmlv/A/foreach/foreach保存以后前台刷新看看呢。呵呵，怎么样？子分类也被调用出来了吧，当然可以根据自己的需要，加上不同的表格或者图片的修饰哦，子分类是

21、放在了父分类标签的基础上来调用的呢。不过如果你的分类已经固定了很少改动，我建议还是做成死的，这样可以做的更漂亮一些，比如每个分类直接是用图片来代替。呵呵，我一般就是这么处理的，我除了商品和新闻是动态调用出来的以外，其它的都是做成固定的死的，这样就能够设计的很漂亮，因为有时候受到代码的限制，做出来不是很好看。（说的好模糊，您能理解吗？不能的话就告诉我）.本来教程已经写了好多了，但是很多地方写的有点让新手不是那么容易接受，所以就一直在想办法，如何讲解的更简单一些，能让每个人都学会做模板。思考中啊，今天的章节就算是结束啦，明天预告：如何调用某个分类里面的商品如何制作商品展示页面的模板完善前面讲的章节

22、，并对大家提出的问题做出解答今天我们来学习如何掉用某一个分类里面的产品。首先把default文件夹中的category.dwt的名字改为category_bak.dwt，然后新建一个category.dwt文件.然后插入下面的代码：miforeachfrom=$goods_listitem=goodsio?vbr$goods.goods_name/foreach注：$goods_list表示商品标签接着我们访问这个页面：（Ecshop的访问网址/category.php?id=1）例如： HYPERLINK http:/localhost/ecshop/category.php?id=1 ht

23、tp:/localhost/ecshop/category.php?id=1这样我们就访问到了分类id为1的商品了，我们也可以让id=2就访问到id=2商品了，那如何看某个分类的id呢？我们看后台：商品管理-商品分类-就可以看到商品分类的列表，然后把鼠标指上去选择新窗口打开，就能在地址来里面看到goods.php?act=list&cat_id=l这样子的信息，cat_id所等于的值就是这个分类的id了，然后就可以拿来调取了，呵呵。好每次都把商品的列表调取出来了，那么如何调取某一个商品的页面呢？首先把default文件夹中的goods.dwt的名字改为goods_bak.dwt，然后新建一个g

24、oods.dwt文件.然后插入下面的代码：商品图片：vbrvbr商品名称：$goods.goods_style_namevbr商品货号：$goods.goods_snvbrvbr商品品牌：$goodsgoods_brandvbr商品数量：$goods.goods_number单位:$goods.measure_unitvbrvbr添加时间：$goodsadd_timevbrvbr市场价格：$goodsmarket_pricevbrvbr本店价格：$goods.shop_price_formatedvbr注册用户价格：$rank_price.pricevbrvbr接着我们访问这个页面:（Ecsh

25、op的访问网址/goods.php?id=l）例如： HYPERLINK http:/localhost/ecshop/goods.php?id=l http:/localhost/ecshop/goods.php?id=l这样我们就访问到了商品id为1的商品了，我们也可以让id=2就访问到id=2商品了，那如何看某个商品的id呢？我们看后台：商品管理-商品列表-就可以看到商品品的列表，最前面那一栏就是商品的id了，然后就可以拿来调取了，呵呵。还有人在问品牌的，某一个品牌的商品怎么调用，呵呵，下次有时间再讲今天我们学习一下如何在首页调取某个分类的商品：注意了，这里的修改有一些麻烦了哦：首先你需

26、要下载一套新的模板，比如blueksy上传到模板目录/themes/也就是/themes/bluesky,然后进入网站后台-模板管理-模板选择，选择bluesky,选择OK,然后到网站后台-模板管理-设置模板-分类下的商品（点击分类下的商品前面的+号，然后选择“主区域中间“，序号默认，商品分类随便选择一个就可以了，然后填写显示的条数，填写好后点击确定提交，（注意：有的朋友可能会遇到提交不了，是因为权限问题，需要把bluesky的模板权限改，然后再重新提交一次）。这里我增加了两个数据是：主区域空间0手机6主区域空间0手机6我们在这里增加了多少条记录，对应首页就可以调取多少个分类。好接下来我们恢复

27、模板为原来我们改过的default模板在我们以前做的基础上增加如下代码(也就是在原来代码的下面加上):第一个分类的v?php$this-assign(cat_goods,$this-_varcat_goods_1);?v?php$this-assign(goods_cat,$this-_vargoods_cat_1);?v?phpecho$this-fetch(library/cat_goods.lbi);?第二个分类的v?php$this-assign(cat_goods,$this-_varcat_goods_3);?assign(goods_cat,$this-_vargoods_cat

28、_3);?v?phpecho$this-fetch(library/cat_goods.lbi);?这里要注意了代表你要显示分类的分类的ID,将它改为你需要的刚才添加的ID就可以了_3代表你要显示分类的分类的ID,将它改为你需要的刚才添加的ID就可以了好了，保存，前台刷新看看啊，呵呵.是不是我们要的分类就出来了，看样子改起来很简单哦,不过每次都是这样要操作两个模板才能改还是有些麻烦，呵呵，等到高手进阶的时候再来讲怎么做。仔细一看还是有点不好的地方哦，就是样子不好看啊，对不对？是默认模板的样子，没有关系啦，我们打开librasy目录中的cat_goods.lbi文件修改就可以了。修改要注意的地方

29、上回讲过了，不过这里还是要再说明一些小问题cat_goods.lbi的代码如下：vmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8vdivclass=title-divvimgsrc=./images/green_arrow.gifwidth=37height=37alt=border=0style=vertica卜align:middle/vahref=$goods_cat.url$goods_|escape:htmlv/av/divvdivclass=content-divv!-foreachfrom=$cat_goods

30、item=goods-vtableborder=0cellpadding=3cellspacing=1class=goods-tablestyle=float:leftvtrvtdalign=centervahref=$goods.urlvimgsrc=$goods.thumbborder=0alt=$|escape:htmlclass=thumb/v/av/tdv/trvtrvtdvahref=$goods.urltitle=$|escape:html$goods.short_name|escape:htmlv/avbr/v!-if$mote_priceneq-$mote_pricevspa

31、nclass=goods-price$mote_pricev/spanv!-else-$lang.shop_pricevspanclass=goods-price$goods.shop_pricev/spanv!-/if-v/tdv/trv/tablev!-/foreach-vbrstyle=clear:both/v/div这里有一些奇怪的地方就是在标签两边多了符号，这个是没有关系的.删除掉也没有关系的啦常见问题解答：怎么让首页显示的每行3个商品能够按照普通屏或者宽屏，自动的缩放。答：把表格宽度设置为百分比，或者在Css中设置为百分比就好了。修改后:又或者改成每行固定4个显示？答：到网站后台-

32、模板管理-设置模板3.首页图片大小是多少？图片点击放大后为什么失真这么厉害？怎么让图片自动调节大小？答：有两种方法哦，第一种就是到网站后台，重新设置缩略图的大小，然后再批量重新生成缩略图第二中方法就是把图片显示的高和宽都去掉（即：把width=*,height=*删除掉），它就显示原始的大小了.淘宝模板制作教程之移花接木法新手看开了一个网店，迫不及待的把自己的商品上架，正准备开店营业的时候，这个新手发现了个棘手的问题：为什么我的商品就没人家的看起漂亮呢？找了几个钻石皇冠研究了许久，新手得出了结论：我的商品咱没有介绍模版呢？于是新手到处去搜索免费模版，结果找了一大堆，但就没真正适合自己的店点的，这可怎么办？新手突发奇想，何不利用现成的模版，来个移花接木做成适合自己店店的模版呢？想到，还要做到才行！首先挑选一个自己认为稍微适合自己店店的模版，打包下载到自己电脑上，用FRONTPAGE或dreamvawer打开,要的不是这个模版的图片,只是他的布局，因为做模版，最让人头疼的是怎么布置格局