ECshop模板制作教程

ECshop模板制作教程

ECshop是PHP构建的

(亚马逊:,雅虎:,百度:淘宝:新浪:,腾讯:)都在用PHP

下列章节的适用于ECshop程序。同时这里许多内容和一些Smarty相关。假如您已经熟悉这些内容可跳过不阅读。假如您是ECshop新手并且想diy一下自己的店铺，那您应该认真详细地从头到尾读一遍这些章节。( ps: 大家不要紧张，我会尽量用人类的语言和大家交流，实在万不得已才会用机器语言展示给大家)

希望大家能够通过本教程，想要什么模板都能自己做出来。哈哈！一起加油吧！

第一章节：(ECShop中的smarty类是“include/cls_template.php”就这一个文件，

没smarty那么多的文件，非常强大的）

( 这对标记对应区域

这个是可编辑区域语法，name="" 为可编辑区域的名称，该名称出现在后台“模板管理”，“模板设置”的相关模板设置中，系统规定了一些模板文件的可编辑区域设置（在设置列表中有出现这些列表模板文件）。在可编辑区域中，你可以将其他模块加入到该模板文件中显示。这个是结束语句。)

(要使应用模板的页面其中某个部分与模板有区别的话，在DreamvawerMX以前版本，只能设置

可编辑区域，现在可以使用可编辑属性了！

以下例子是一个简单应用，就拿论坛的这个页面来说，比方说上面的广告条在各个栏目有不同图片表示

1。先创建一个模板文件

2。打开该模板文件，选中该图片，使用菜单modify->template下make attribute editable，出现设置面板，(dreamvawer中修改->模板->令属性可编辑)

3。因为我们的目的是改变图片地址，所以在attribute设置里选择src(注意：如果没有你要的属性，可以自行添加)，勾上make attribute editable

4。label是针对你当前的这个可编辑属性起个名字(以便DW查找要替换哪部分)

5。type选择参数的类型，我们要改变的是地址，那么就用url类型

6。最后是默认的地址，DW会把原先图片的地址取过来，除非你要改变默认的地址，否则就不要

动了，

7。OK确认，这样就创建好了可编辑属性

8。从模板创建文件，如果你要当前页面和模板里的这个广告条图片地址一致，就不用动了

9。如果要有区别，那么就要使用modify->template properties，这里会罗列页面使用的所有可编辑属性，

10。选择你要改变的这个label名，设置新的值，这样这个图片的地址就会相应改变了，即便这个图片是在不可编辑区域！

)

读取以下这些内容，您将了解：

每个前台页面所对应的模板页面,模板文件的目录结构。

一些最基本的ECshop模板修改方法。

模板的路径以及相关包含文件的方法(深入了解Dreamweaver模板制作)。

一些常用模板例子讲解.

模板存放路径：

ecshop/themes/xxxxx 其中的xxxxx就是某一套模板，如系统一般会

自带的模板文件名叫做default, (即：ecshop/themes/default )里面放的就是安装好时的默认模板,以下所有的说明都是针对默认模板来讲解. 操作前提，将您当前使用的模板调整为default模板,然后清空缓存。

接下来我们进入default目录,可以看到以下文件目录：

images/ (存放模板中用到的图片)

library/ ( 存放一些小模板文件及重复被用到的模板文件)

style.css (模板样式文件)

index.dwt (首页的模板index.php)

goods.dwt ( 商品显示页的模板goods.php)

*.dwt (表示其它.dwt文件)

你不相信这些就是模板吗？好，那我证明给你看看.

我们把把images里面的logo.gif文件的名字,改为logo2.gif,然后我们随便找一张gif图片，起名为logo.gif放到images目录中，然后我们刷新首页。看到没？首页logo被修改了。

如果你觉得大小不合适，那么我们打开library目录中的

page_header.lib查看源代码，然后搜索images/logo.gif 然后看它后面width="130" height="56" 把130和56改为相应的值就可以了，到前台刷新看看。

好接下来我们用dreamweaver打开index.dwt文件,在源代码中搜索{$page_title} ，找到后，将{$page_title} 修改为超级无敌的大卖场. 然后到到浏览器前台刷新，看看页面有什么变化。没有发现吗？看看浏览器头部啊，呵呵，是不是网站的标题被改变了？哈哈，对，{$page_title}就是网站标题的标签( 注：标签是从{开始，到}结束哦，

{和}属于标签的一部分). 整个ECshop的模板就是一个一个这样的标签组成了，控制网站内容和数据的动态显示。比如（{$keywords} )控制网站的关键字标签，{$description} :网站描述标签，( 这就是模板中的标签，每个标签都会对应程序里面的一个值，网站运行时模板引擎会来读取模板页面，然后把对应的标签用对应的值进行替换，就显示出我们看到的网站页面了,明白了吧。这一段内容对于新手来说，可能一下子不能完全消化)

很简单8,哈哈，大家真是冰雪聪明，孔明再世啊，这么快就学会了，如果你上一步你操作很超级非常very的简单的话，接下来的学习也时一样的哦.接下来要怎么改呢？

大家不要着急，欲速则不达，呵呵，下面我们真正开始做ECshop的模板了，( 不懂HTML的观众准备好Dreamweaver哦)

1. 我们到/themes/default目录中，把index.dwt改名为index_bak.dwt, 然后用Dreamweaver新建一个HTML文件,然后保存到/themes/default目录中，命名为index.dwt, 好，我们刷新前台看看，哈哈，什么也没有哦. 好，在我们新建的index.dwt中找到中间的内容替换为:{$page_title},在和之间也放入一个{$page_title},

刷新前台看看.嘿嘿，看到什么了？网站标题被打印出来了吧？

如有操作时候有弹出对话框，点击确定就可以了，:)