shopex4.85模板制作完全教程

合集下载

shopex模板文件

shopex模板文件

shopex模板文件竭诚为您提供优质文档/双击可除shopex模板文件篇一:shopex_完全开发手册_[4.8.5]shopex完全手册author:shopex开发团队since:20xx-12-03$Rev:308$1.前言和导读本手册对应版本shopex4.8.5本手册部分内容由shopex系统源代码直接生成,因此会持续保持更新html版本:pdf版本:相关文档模板手册:本手册适合谁来阅读:网店店主:查看包括怎样获取shopex。

如何选择主机。

怎样安装和调优你的网店系统。

开发者:希望扩展shopex功能的朋友,本手册将为你展示多种扩展系统的方法,你将发现shopex已经为你很多准备工作。

手册后面的附录里包含了shopex系统的数据对象和数据库的定义细节。

2.安装和使用shopexV4.8网店系统是一套基于网上快速建店的标准化b2c电子商务系统。

系统集成了最基本最普通最常用的电子商务运作流程及使用功能,可以满足正常的开店需求。

2.1.安装shopex2.1.1.如何选择主机shopex提供了一个服务器性能检测探针文件,位于install/svinfo.php。

你可以单独上传这个文件到被测的服务器环境上。

这个探针所探测的数据和你在系统安装时或者后台看到的服务器状态是完全一样的。

下面就是个典型的服务器检测报告:$Rev:308$shopex服务器测评=================================================== =============服务器基本信息=================================================== =============操作系统winnt服务器软件apache/2.0.59(win32)daV/2sVn/1.4.0php/5.2.3php运行方式apache2handler============================ =========。

ECshop模板开发与优化教程

ECshop模板开发与优化教程

ecshop首页调用文章分类思路及方法最近群里朋友问ecshop首页调用分类文章怎么加的,写篇文章来说下。

在ecshop论坛上有朋友说的方法之前自己试过,没有成功。

现在介绍一种成功的方法,适用各种模板。

修改ecshop不要注重技巧,注重一个思路。

ecshop模板一般分为三栏或者两栏,两栏是left和right,三栏的left,center,right之类的。

现在以两栏的为例,现在一个思路就是在你想调用文章的地方加一个可编辑区域,可编辑区域在后台模板设置里是可以设置的,然后在后台把文章调用在这个可编辑区域里就是了。

明白了原理就可以动手了。

在模板index.dwt里找到右边模块结束的地方,也就是<!--right end-->,在<!-- TemplateEndEditable -->之后加上<!-- TemplateBeginEditable name="文章区域" --><!-- TemplateEndEditable -->,其中“文章区域”这个名字是可以修改的,和你在后台看到的名字是一致的。

然后修改模板里的库文件cat_articles.lbi,替换成下面的代码<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><div style="width:243px; float:left; margin-right:3px;"><div class="box"><div class="box_1"><h3><span><ahref="{$articles_cat.url}">{$articles_|escape:html}</a></span ><a href="{$articles_cat.url}"><img src="../images/more.gif"alt="more" /></a></h3><div class="boxCenterList RelaArticle"><!--{foreach from=$articles item=article}--><a href="{$article.url}"title="{$article.title|escape:html}">{$article.short_title}</a><br /><!--{/foreach}--></div></div></div></div>其中需要注意编码,用GBK的自行替换成GBK,其中的宽度自己控制,自己多试下就知道大小了。

网店模板制作及设计全流程-参考模板

网店模板制作及设计全流程-参考模板

网店模板制作及设计全流程(一)制作模版这里面有很多复杂的问题的,作为启蒙性的教程,我这里只介绍最简单的方法和形式,其他的大家可以在此基础上自己开发、研究,如有问题欢迎赐教。

准备工具和素材:Photoshop 7.0和Frontpage 2003和相应图片(也可以自己创作)下面进入正题吧1. 打开Photoshop,点击上方的“文件—新建”,新建一张800*1200的画布,这里把底色设置为白色。

2. 然后点击“文件—打开”,找到自己想要用于模版上的图片,打开(大家可以事先把图片的大小调整好,以适合于模版使用)。

接着,先在图片上按下“Ctrl+A”(全选),注意这时候图片四周会出现一个虚线框,然后再按下"Ctrl+C"(复制)。

3. 然后回到我们最开始建立的那张800*1200的画布上,按下“Ctrl+V”(粘贴),图片就被粘贴到画布上了。

如果位置不合适的话,可以点击左边的“移动工具”,将图案拖动到合适的位置上。

4. 可以根据图案对模版做些装饰,比如我这里面就用椭圆工具画出几个圆圈,并用与图案相近的蓝色填充。

然后再点击椭圆工具,画一个大一点的椭圆出来,用来放置店铺公告。

可以把“不透明度”设置为60%,这样看起来效果更好些。

5. 接下来在模版上写上自己的店铺名称。

点击左边的“文字工具”,在店铺公告的上方写上店铺名称,注意可以在窗口上方的地方调整字体、字号以及文字颜色。

然后可以点击右边的“添加图层样式”,根据个人喜好选择诸如阴影、描边、外发光等效果,使文字更好看。

6. 可以对模版进行些装饰,最简单的办法就是选择“自定形状工具”,画出一些喜欢的图形来。

然后用“文字工具”把要做链接的内容写上,比如“逛逛小店”、“店铺介绍”、“信用评价”和“收藏店铺”等。

7. 下边就要来处理模版的主体部分了。

首先我们用一个方框把主体部分框起来。

点击“自定形状工具”,在窗口上方“形状”右边的下箭头上点一下,选一个合适的形状,这里我用的是Check Box,用这个形状把模版余下的部分框起来。

[转]一整套WordPress模板制作的教程

[转]一整套WordPress模板制作的教程

[转]⼀整套WordPress模板制作的教程WordPress基本模板⽂件⼀套完整的WordPress模板应⾄少具有如下⽂件:style.css: CSS(样式表)⽂件index.PHP : 主页模板archive.php : Archive/Category模板404.php : Not Found 错误页模板comments.php : 留⾔/回复模板footer.php : Footer模板header.php : Header模板sidebar.php : 侧栏模板page.php : 内容页(Page)模板single.php : 内容页(Post)模板searchform.php : 搜索表单模板search.php : 搜索结果模板当然,具体到特定的某款模板,可能不⽌这些⽂件,但⼀般⽽⾔,这些⽂件是每套模板所必备的。

基本条件判断Tagis_home() : 是否为主页is_single() : 是否为内容页(Post)is_page() : 是否为内容页(Page)is_category() : 是否为Category/Archive页is_tag() : 是否为Tag存档页is_date() : 是否为指定⽇期存档页is_year() : 是否为指定年份存档页is_month() : 是否为指定⽉份存档页is_day() : 是否为指定⽇存档页is_time() : 是否为指定时间存档页is_archive() : 是否为存档页is_search() : 是否为搜索结果页is_404() : 是否为 “HTTP 404: Not Found” 错误页is_paged() : 主页/Category/Archive页是否以多页显⽰Header部分常⽤到的PHP函数<?php bloginfo(’name’); ?> : 博客名称(Title)<?php bloginfo(’stylesheet_url’); ?> : CSS⽂件路径<?php bloginfo(’pingback_url’); ?> : PingBack Url<?php bloginfo(’template_url’); ?> : 模板⽂件路径<?php bloginfo(’version’); ?> : WordPress版本<?php bloginfo(’atom_url’); ?> : Atom Url<?php bloginfo(’rss2_url’); ?> : RSS 2.o Url<?php bloginfo(’url’); ?> : 博客 Url<?php bloginfo(’html_type’); ?> : 博客⽹页Html类型<?php bloginfo(’charset’); ?> : 博客⽹页编码<?php bloginfo(’description’); ?> : 博客描述<?php wp_title(); ?> : 特定内容页(Post/Page)的标题模板常⽤的PHP函数及命令<?php get_header(); ?> : 调⽤Header模板<?php get_sidebar(); ?> : 调⽤Sidebar模板<?php get_footer(); ?> : 调⽤Footer模板<?php the_content(); ?> : 显⽰内容(Post/Page)<?php if(have_posts()) : ?> : 检查是否存在Post/Page<?php while(have_posts()) : the_post(); ?> : 如果存在Post/Page则予以显⽰<?php endwhile; ?> : While 结束<?php endif; ?> : If 结束<?php the_time(’字符串’) ?> : 显⽰时间,时间格式由“字符串”参数决定,具体参考PHP⼿册<?php comments_popup_link(); ?> : 正⽂中的留⾔链接。

网店管理软件:ShopEx4.8.4网站内容管理-管理资料

网店管理软件:ShopEx4.8.4网站内容管理-管理资料

网店管理软件:ShopEx4.8.4网站内容管理-管理资料一款好的购物软件,除了强大的购物功能、快速有效的管理后台和安全的数据保障机制外,良好的网站内容管理也是必不可少的,。

ShopEx4.8.4网站内容管理就设计的非常友好,下面我们就来介绍这一模块的使用方法及特点。

首先来介绍站点栏目管理,ShopEx软件一直秉承了后台自动管理前台站点栏目的理念,使用者可以在后台动态管理网站前台的所有栏目,增加和删减网站的栏目以及对已有网站栏目显示顺序的排列,ShopEx4.8.4还支持无限级的子栏目添加,方便有多级子栏目的用户使用。

添加新的顶级栏目,这里可以选择新添加的栏目类型有四种,分别是:单独页面、文章栏目、商品分类链接、链接地址等类型,现在以单独页面为例来演示。

在文本编辑器内为新建的单独页面添加内容,单独页面默认为左右分栏的模式,可以键入文字和插入板块,管理资料《网店管理软件:ShopEx4.8.4网站内容管理》(https://www.)。

编辑完成后前台显示如下:新建一个栏目从开始到上线只要几分钟,操作起来快速简单。

下面介绍友情链接的添加,友情链接对于购物网站来说非常重要,也是SEO的一个功能组成部分,高质量的友情链接可以给网站带来很多的访问量,有助于网站的营销情况,也有助于网站的PR值提升。

ShopEx4.8.4前台有专设的友情链接频道,符合目前主流的友情链接模式,并且有利于前后台相互结合管理网站的友情链接。

ShopEx4.8.4系统以其强大的网站内容管理功能为我们增添网站栏目和内容来了巨大的便利,全程可视化的界面使操作更加简便,完全打破了技术门槛,让不懂网页制作的朋友也可以做出个性化的界面。

专业的电子商务软件在内容管理上也能如此人性化,让我们不得不感叹ShopEx软件的强大,希望今后版本的软件可以继续延续这一风格,给我们带来更多更好的功能模块。

第三课:ShopEX程序模板可视化编辑演示

第三课:ShopEX程序模板可视化编辑演示

第三课:ShopEX程序模板可视化编辑演示
讲师:李开坤(Monkey)
时间:2012年3月18日(周日) 课程要点:
1.可视化编辑介绍
2.可视化编辑演示操作
3.Index And Default构成网站
1.可视化编辑介绍
可以通过ShopEX的后台的模版管理里面进行可视化的页面布局编辑和修改。

要点说明:
ShopEX缓存文件的清空
关于→缓存系统→清空缓存
2.可视化编辑演示操作
✧可以拖动改变页面布局
演示:拖动方法
✧修改布局里面的内容
演示:幻灯片的修改
✧修改某个布局位置的边框
演示:边框修改
延伸理解 info.xml文件
3.Index And Default 构成网站
为什么说通过Index.html 和Default 两个页面模版就可以构成一个网站?Index.html 是网站的首页,千姿百态各不相同。

Default.html 是默认页模版提供“服务流程”叫做系统功能区块。

系统功能区块会根据不同的条件显示不同的页面效果。

网页制作中的模板如何创建-模板常见方式-怎么做

网页制作中的模板如何创建-模板常见方式-怎么做

网页制作中的模板如何创建-模板常见方式-怎么做网页制作中模板的创建主要是有这些方法:利用Dreamweaver 创建空白模板;从现有文档创建模板;从模板面板创建模板;其从模板面板创建模板操作为:在"模板"面板中通过"新建模板"和"编辑"按钮即可创建。

1、创建空白模板在Dreamweaver在创建空白模板的过程如下:①在命令菜单中,选择"文件"→"新建",打开"新建文档"对话框。

②在"新建文档"对话框中选择"空模板",在"模板类型"中选择"PHP模板",在"布局"列表中选择必须要的布局框架,在"文档类型"的弹出菜单中选择 "HTML5"。

然后点击"创建"按钮即可空白模板,模板文档生成后,还要创建可编辑区域,为以后填写不同的网页内容做准备。

③在文档窗口中选择想设置为可编辑区域的文字或内容,如拖动鼠标将部分区域选为可编辑区域,然后在"插入"→"常用"面板中单击"模板"按钮,在弹出的菜单中选择"可编辑区域"。

在出现的对话框中为"可编辑区域"输入一个名称(不能使用特别字符),然后点击 "确定"即可创建一个可编辑的区域;也可以通过菜单命令"插入"→"模板对象"来实现创建可编辑区域。

④重复③的操作,创建不同的"可编辑区域"。

⑤在"文件"菜单中点击"储存",并命名模板文件,模板就做好了。

注意:为了方便使用模板,系统会将模板文件储存在网站根目录下的Templates文件夹中,模板文件的扩大名为".dwt"。

ShopEx 完全手册

ShopEx 完全手册

ShopEx完全手册author:ShopEx开发团队since:2009-11-20Rev1前言和导读本手册尚未完成,持续更新中...本手册对应版本shopex4.8.5本手册部分内容由shopex系统源代码直接生成html版本:/shopex-b2c/pdf版本:/shopex-b2c/index.pdf本手册适合谁来阅读:网店店主:查看包括怎样获取shopex。

如何选择主机。

怎样安装和调优你的网店系统。

开发者:希望扩展shopex功能的朋友,本手册将为你展示多种扩展系统的方法,你将发现shopex已经为你很多准备工作。

手册后面的附录里包含了shopex 系统的数据对象和数据库的定义细节。

安装和使用ShopExV4.8网店系统是一套基于网上快速建店的标准化B2C电子商务系统。

系统集成了最基本最普通最常用的电子商务运作流程及使用功能,可以满足正常的开店需求。

安装shopex如何选择主机shopex提供了一个服务器性能检测探针文件,位于install/svinfo.php。

你可以单独上传这个文件到被测的服务器环境上。

这个探针所探测的数据和你在系统安2装时或者后台看到的服务器状态是完全一样的。

下面就是个典型的服务器检测报告:$Rev:27155$ShopEx服务器测评================================================================服务器基本信息================================================================操作系统WINNT服务器软件Apache/2.0.59(Win32)DAV/2SVN/1.4.0PHP/5.2.3php运行方式apache2handler================================================================ php基本信息================================================================ php版本5.2.3程序最多允许使用内存量memory_limit128MPOST最大字节数post_max_size8M允许最大上传文件upload_max_filesize2M程序最长运行时间max_execution_time30被禁用的函数disable_functions无================================================================基本需求================================================================ PHP4以上5.2.3zend.ze1_compatibility_mode关闭Off支持文件锁(flock)支持php可以解析xml文件支持MySQL函数库可用5.0.373数据库Mysql3.2.23以上127.0.0.1:3306ZEND Optimizer2.5.7以上未安装DNS配置完成,本机上能通过域名访问网络成功================================================================推荐配置================================================================ unix/linux主机WINNTphp版本5.2.0以上5.2.3MySQL版本4.1.2以上5.0.27GD支持freetype,gif,jpg,png,bmpZlib支持支持Json支持支持mbstring支持支持fsockopen支持支持iconv支持支持register_globals关闭已关闭allow_url_include关闭(php5.2.0以上)已关闭高速缓存模块(apc,memcached)Memcached小技巧:你可以在ie浏览器里直接ctrl+a,ctrl+c复制出来,不需要担心格式问题这是个独立的文件,同时也会检测php环境和zend opt。

ECshop模板制作教程

ECshop模板制作教程

ECshop模板制作教程我是一个EC新手,EC就算做再多的模板,肯定也满足不了我们的需要,更何况各行有各行的门道,EC统一做出来的模板也不一定合适于我们这个行业用,因此,只有我们真正掌握了自己做模板,修改模板的功夫,才能真正的打造适合自己的电子商务平台,真正打造符合自己行业内的客户习惯的电子商务平台。

首先欢迎各位浏览本教程,恭喜大家使用ECshop,!EC有多好,ECshop是PHP 构建的,PHP的应用我也不想多说了(亚马逊:,雅虎:,百度:淘宝:新浪:,腾讯:,(ps: ECshop成功了!在这一刻,他是伟大电子商务的传承,他不是一个人在战斗,他不是一个人-_-!!! ) 我也不多讲了大家都知道,不过有时候热爱潜水的我真的时是实在忍不住要跳出来说两句.本教程适用于了解ECshop 和ECshop模板DIY 以及它们的日常使用,在查看前阁下需要至少会使用一种编辑器(exp:Dreamweaver, editplus, emacs, vi, ee …意思就是可视化的HTML编辑器或者直接文本编辑器,我在讲的时候用Dreamwaver来讲,这样比较适合初学者和设计师)。

这个教程目前由我一个人维护,但我相信,过不了多久就会有多人持续地维护。

其中的内容需要不断地更新。

如果您有兴趣参加,嘿嘿,PM我。

我们一起为大家服务啊.通过对本教程的学习,只要您边看边跟着做,一定能够学会自己做模板的。

:)下列章节的适用于ECshop程序。

同时这里许多内容和一些Smarty相关。

假如您已经熟悉这些内容可跳过不阅读。

假如您是ECshop新手并且想diy一下自己的店铺,那您应该认真详细地从头到尾读一遍这些章节。

( ps: 大家不要紧张,我会尽量用人类的语言和大家交流,实在万不得已才会用机器语言展示给大家)希望大家能够通过本教程,想要什么模板都能自己做出来。

哈哈!一起加油吧!第一章节:读取这些内容,您将了解:每个前台页面所对应的模板页面,模板文件的目录结构。

ECshop模板制作教程

ECshop模板制作教程

ECshop模板制作教程ECshop是一款开源的电商平台系统,具有功能强大、操作简便等特点,被广泛应用于各类电商网站。

然而,ECshop系统默认的模板可能无法满足网站主题的需求,因此,学会ECshop模板制作成为了很多网站运营者的必备技能。

本篇文章将介绍ECshop模板制作的基本步骤和技巧,希望对您有所帮助。

一、准备工作在开始ECshop模板制作之前,我们需要准备以下工具和资源:1. ECshop系统:确保已经成功安装并且可以正常运行ECshop系统。

2. 模板编辑工具:可以选择Dreamweaver、Sublime Text等专业的编辑软件,或者使用简单的文本编辑器。

3. 图片处理软件:如Photoshop或者GIMP,用于编辑和处理模板中的图片。

4. 网页浏览器:用于预览和测试模板效果。

二、模板文件结构ECshop模板由多个文件组成,以下是一个基本的ECshop模板文件结构:1. header.html:网页头部,通常包含网站的Logo、导航菜单等。

2. footer.html:网页底部,通常包含版权信息、联系方式等。

3. index.html:网站首页,展示商品分类、推荐商品等信息。

4. category.html:商品分类页面,展示各个分类的商品列表。

5. goods.html:商品详情页面,展示单个商品的详细信息。

6. cart.html:购物车页面,展示用户加入购物车的商品列表。

7. order.html:订单页面,展示用户的订单信息、支付方式等。

8. user.html:用户中心页面,展示用户的个人信息、订单记录等。

9. css文件夹:存放模板的样式表文件,如style.css。

10. images文件夹:存放模板中使用的图片文件。

11. js文件夹:存放模板中使用的JavaScript文件。

三、模板制作步骤1. 分析需求:仔细分析网站的需求和主题,确定设计和布局风格,例如是简约风格还是复古风格。

ECSHOP自定义模板

ECSHOP自定义模板

ECSHOP自定义模板篇一:ecshop自定义分类模板的方法Ecshop自定义分类模板的方法ECSHOP开发中心(68ecshop)ecshop是一个功能方面比较完善的商城的程序,但是毕竟不同于一般的cms类系统。

无法自定义每个分类的模板,这样就造成了分类模板一成不变的样式,对于美观以及个性方面可能要差点。

不过ec的开源给了php开发者一个很大的diy空间,ecshop的二次开发性也是蛮强大的。

下面是我实现的ecshop自定义分类模板的方法,子类可以继承最顶级的模板。

好处是不用修改数据库,可以在后台分类自定义模板。

功能比较简单,代码也很少,只是一个小技巧,用ecshop的朋友可以来尝试一下。

ecshop 自定义分类模板的方法实现步骤打开根目录的category.php文件(不要问我根目录在哪里),找到大概401行“$smarty->display('category.dwt', $cache_id);”,将此行注释掉或者删除。

在其下面添加下面代码$cat_arr = get_parent_cats($cat_id);foreach ($cat_arr AS $val){$cats['style']=$val['style'];}if(empty($cat['style'])){if(!empty($cats['style'])){else $smarty->display($cats['style'], $cache_id); }{$smarty->display('category.dwt', $cache_id);}}else{}代码工作完成,然后进入后台,商品分类,找到你要添加自定义模板的那个分类。

在分类的样式表文件后面的输入框中,输入你想要应用的模板文件的名称,比如“category_shoes.dwt”(前提是你的主题文件中要存在此模板文件,必须是完整的模板文件名称)ok,工作完成,更新缓存去前台参观一下吧。

PS超详细店铺首页模板制作教程

PS超详细店铺首页模板制作教程

先做准备!今天我们做这个模板要用到的软件!有两个一个是大家都知道的PS还有一个就是Dreamweaver8.0如果没有安装着两个软件的大家可以去百度搜索!很多!不要钱的!必备软件介绍完了那我们就开始吧~!这个是我们这次模板的效果图片O(∩_∩)O首先我们要准备7个店铺里面比较漂亮的宝贝图片!你也不一定按照我这个排列也以根据自己的宝贝自己排列!下一步打开PS 点击新建然后会出来一个对话框宽度是750像素长度703像素(也可以根据自己的图片大小自己设定)!设置完以后点确定!接下了就是先给图片排版!不大会PS的注意啦!!先按一下Ctrl+R把标尺找出来方便等一下的排版标尺出来以后 然后点击PS 右边的直线选项 按住Shift 不要放点击鼠标左键在编辑框中画出模板边框 本模板分为两排 上一排是250X404像素一个 下一排是188X299一个 不会的照着下面图片尺寸做也行!等边框画好以后在PS右下角找到你画的图层点右键然后点像素画图层点完以后我们的模板边框就做好啦!!等边框做好以后我们就可以把准备好的图片放到模板里面去了!!点找到你准备好的图片然后直接拖到PS里面去调整图片大小点击图像下面的画布大小第一排三个大图片尺寸是240x242像素下面拍四个图片是175X248像素画布大小调整好以后找到编辑选项然后点击自由变换把宝贝图片调整到和画布边框一样大的位置!调整好后安一下回车键确认等图片调整好大小以后点选择按钮直接把调整好以后的图片拖到模板里面!!调整好相应位置OK把图片放到相应的位置以后效果就是这样啦!!接下来我们就把标题和价格给它添加上去吧!!(*^__^*) ……我们先用矩形选框工具框出一个长方形来!!然后点选到背景选项找到左边的渐变工具选好颜色按住键盘Shift 键点鼠标左键从左往右拉!!上面是效果拉好以后找到选择工具点一下选择框按住Ctrl+C 复制然后再按住Ctrl+V粘贴粘贴完以后点点击鼠标左键不要放把复制的渐变条做到相应的格子下面!哈哈这一步完成以后我们就可以在粉红色的渐变格子上面添加文字勒!找到文字按钮选好颜色我选的是白色接下来就打字(ˇ?ˇ) ~!!记得每个长方形上面都要打上喔!哈哈(*^__^*) 嘻嘻……有点像那么一回事儿了喔!!!继续我们在添加一个价格上去!!吧!!先选好字的颜色咋找一个人民币的符号!后面打上价格!当然如果童鞋你卖宝贝用的的是美元也可以用美元的符号的!O(∩_∩)O~价格打好以后找到右下角这个按钮选到描边!把颜色换成浅灰色、点确认就可以啦!等设置好以后把价格图层复制一下然后拖到每个宝贝右下角就可以了效果出来啦!O(∩_∩)O哈哈~!接下来我们在添加一个宝贝标题就快完工啦!!继续加油!!\(^o^)/~ 找到文字编辑按钮好颜色把宝贝标题打上去哈哈标题打上去以后就完成一半啦!!!(*^__^*) 嘻嘻……下面是效果!!好我们再来下一步吧!!等上面都完成以后找到切片工具然后按住鼠标左键从左上角往右下角拉!!把每个格子分开切片!!切片好以后如下图等切片完成以后找到文件选项选择保存为Web格式然后会出现这个!!里面就不用调了直接点击确定就好!!确定以后新建一个文件夹然后保存在里面接下来会出现一个对话筐不用管它点确定就好!!OK PS这部分就算完了!把源文件保存以后就可以关掉PS了!!关掉PS以后找到你刚刚保存的Web文件打开!里面有一个网页文件 一个图片文件夹把图片文件夹里面的图片全部上传到 你的 网络空间里面去!!然后打开 把HTML 文件 拖到 里面去!!如下图接下来就要把每个图片的本地地址!换成你图片空间的地址!!第一个填写图片地址第二个填写宝贝连接地址等把所有图片地址和宝贝连接都转换和添加完以后模板就制作成功啦!(ˇ?ˇ) ~模板做好了以后!!只要把代码框里面的代码全部复制到店铺之定义框里面点保存就可以啦!!!!汗终于完成勒!!头都搞的晕晕!的!!%>_<%!!也不知道有没有搞漏的!!!。

shopex 教程

shopex 教程

/shopex4-85%e9%a1%b6%e9%83%a8%e5%af%bc%e8%88%aa%e7 %bb%88%e6%9e%81%e8%af%a6%e8%a7%a3%ef%bc%88%e4%b8%80%ef%bc%89.html Shopex4.85商店顶部导航终极详解(一)我们先来看下简单版本的顶部导航效果,点击看大图鼠标移动上去有高亮效果,但是有的朋友说能不能做,当前页面高亮效果,我只能说部分可以,由于shopex系统只支持伪静态,通过javascript很难定位当前页面的子页面。

下面会详细讨论下,我们先看下这个效果。

首先要在photoshop中切出黑色导航背景,高亮图的背景,这部分就不说了。

顶部导航一般放在header.html中,所以在header.html放上一个<div>标记,然后在这个<div>添加一个挂件位,如:<div id=”menu”><{widgets id=”menu”}></div>然后去商店后台添加挂件。

添加版块 > 导航相关 > 商店导航菜单版块边框选择无边框。

导航数量决定了顶部导航的版块数量,如写上6,代表超过6个版块将显示下面的文字。

一般显示文字我填成空。

超过的就隐藏了。

但是这里有个诡异的问题,就是即使是隐藏了也会在页面写有一个<li>的代码段。

最好的解决方法是在后台的页面管理 > 站点栏目只显示必要的栏目。

我们可以保存后看下效果,这时的效果文字是竖排的,如下图:现在我们用firebug插件看下HTML代码,然后用css来修饰导航,让他变成我们想要的效果。

对于初学者来说,尽量不要修改挂件的HTML代码。

当然修改HTML代码带来的好处有很多。

比如精简代码。

css代码如下*{margin:0;padding:0;}#menu{background:url(nav.gif) no-repeat;padding:15px30px;height:44px;}#menu ul li{float:left;}#menu ul li a{color:#fff;padding:025px;height:44px;line-height:44px;display:block;float:left;}/*float:left;是兼容IE6*/ #menu ul li a:hover{background:url(a_bg.gif) repeat-x;color:#333;}那么一个简单的商店顶部导航就做好了,它的管理是在页面管理 > 站点栏目中,当然简单的商品分类也能这样添加。

ECshop 模版制作手册

ECshop 模版制作手册

E - Commerce Online Shop 网上商店系统模板制作引导手册by Lu Hengqi16- Nov - 07E - Commerce Online Shop 网上商店系统2目录关于ECSHOP................................ ................................ ................................ (3)产品特点:................................ ................................ ................................ ................................ (3)1. 前言................................ ................................ ................................ (5)1.1. 模板系统介绍................................ ................................ ................................ ................................ .. (5)1.2. 涵盖内容................................ ................................ ................................ ................................ .. (5)1.3. 适用版本................................ ................................ ................................ ................................ .. (5)1.4. ECShop 团队主要成员................................ ................................ ................................ .. (5)2. 模板结构说明................................ ................................ ................................ .. (6)2.1. 模板目录结构................................ ................................ ................................ ................................ .. (6)2.2. 链接模板文件使用例子................................ ................................ ................................ (6)2.3. 模板文件结构................................ ................................ ................................ ................................ .. (6)3. 模板系统标签说明................................ ................................ . (9)3.1. 变量调节标签................................ ................................ ................................ ................................ .. (9)3.1.1. escape [ 编码] ................................ ................................ ................................ ................................ .. (9)3.1.2. nl2br [换行符替换成<br />] ................................ ................................ ................................ (9)3.1.3. default [ 默认值] ................................ ................................ ................................ ................................ (9)3.1.4. truncate [ 截取] ................................ ................................ ................................ ................................ .. (10)3.1.5. strip_tags [去除html标签] ................................ ................................ ................................ .. (10)3.2. 控制标签................................ ................................ ................................ ................................ .. (11)3.2.1. if,elseif,else ................................ ................................ ................................ .......................... ...... (11)3.2.2. foreach,foreachelse ................................ ................................ ................................ ............... .. (12)3.3. 显示标签................................ ................................ ................................ ................................ .. (14)3.3.1. cycle ................................ ................................ ................................ ................................ ....... (14)3.3.2. html_options................................ ................................ ................................ .......................... ...... .. (15)3.3.3. html_select_date................................ ................................ ................................ .................... ............ (16)3.3.4. html_radios ................................ ................................ ................................ ........................... ..... .. (19)3.3.5. html_select_time................................ ................................ ................................ ................... ............. (21)3.4. 辅助标签................................ ................................ ................................ ................................ .. (25)3.4.1. assign................................ ................................ ................................ ................................ .... . (25)3.4.2. Include ................................ ................................ ................................ ................................ . . (25)E - Commerce Online Shop 网上商店系统3关于ECSHOPECShop 是Comsenz公司推出的一款B2C 独立网店系统,适合企业及个人快速构建个性化网上商店。

ECshop 模板设计教程

ECshop 模板设计教程

大家好,在论坛泡了也有一段时间了,今天把EC模板制作修改方面的一些东西整理下,算是一个教程吧,希望对大家有点帮助想对EC模板进行修改、美化,前提是你必须对EC的文件结构有一定的了解,有DIV+CSS方面的基础,还有smarty方面的基础。

建立在这些基础上,经过一定时间的尝试才可以对EC 模板的修改得心应手,OK,下面我们开始一、EC模板修改基础篇1.EC模板的文件结构(以2.71为范例)ECSHOP 模板结构说明.rar (650.32 KB)2.DIV+CSS基础知识如果你连这个什么都不懂的话模板基本是没办法改的,因为EC采用的是DIV+CSS布局,所以对这方面必须有所了解,给大家推荐我的CSS站点里面有一些基本的CSS 教程,可以边学边尝试,其实就是在不断地尝试中进步的3.smarty方面的基础想做模板你可以不用精通PHP,但smarty引擎的东西必须有所了解,不然库文件里很多相关代码看起来会觉得头痛,都是一些基础的语法,下面就来做个了解吧smarty中文手册.chm (358.39 KB)二、EC模板修改提升篇OK,有了以上的基础,可以来学习这一篇章,但前提是上面给出的三个基础必须搞明白,就跟建房子一样,不建好地基,建出来的房子也不会结实1.下载并安装专业的测试工具一般我测试都是在IE 6 7 8 FF下测试,因为其他的一些浏览器基本都是用的IE内核(1)火狐下用firebug进行测试,可以下一个火狐,然后在工具》附加组件里搜索firebug,出来后选择安装即可,安装好后按F12可以调出(2)IE 我一般用IE TESTER进行测试,因为可以在你的电脑中同时开启IE各种版本的环境先安装IE TESTER ,然后安装DEBUGBAR调试工具[local]4[/local]关于以上2个调试工具怎么使用我就不在这里累赘了,大家可以去网上看一些基本的教程2.安装代码编辑工具EC采用DWT模板和LBI库文件结合写成模板,这类文件需要专业的编辑工具进行编辑,切记不可用记事本编辑,特别是UTF8用记事本编辑会出错,在这里推荐DRM,即Dreamweaver 或者Editplus也可以=====================================================第一篇章:如何删除首页品牌空白区域《见20楼》第二篇章:如何设计、美化和调用底部帮助文章列表《见24楼》第三章:商品分类模块的美化与设计《见35楼》第四章讲解预告:导航模块的美化与设计OK,经过了这么长时间大家如果对一楼的介绍有过基础后可以来看这一篇章《模板修改实例操作》1.如何删除首页主广告下方空白区域这个问题很有可能是品牌区模块的问题,CSS将品牌区的高度写好了,而你又没在后台添加品牌,所以会看到空白区域,当然也有可能是广告区域预先写死了在模板中,各模板不同,我们以官方默认模板2.71为例步骤一:我们查看2.71默认模板页面,如下发现图中今日特价右侧有空白区域,在火狐按F12调出FIREBUG工具*****注意:FIREBUG中深蓝色区域的代码仅仅是商品品牌模块的内层,外层包含的才是整个模块***1.<div class="box f_r brandsIe6">2. <div id="brands" class="box_1 clearfix">3. </div>4. </div>复制代码步骤二:查看商品品牌模块外框架内的所有模块结构我们发现品牌模块左侧是ID为sales的特价模块层,外层框架是class为clearfix的层步骤三,用DRM打开index.dwt模板文件CTRL+F搜索brands跳到如下行很明显发现了特价和品牌区域都是引用的库文件如果用不到品牌模块并且想不显示这个空白区域,解决方案:》在模板中删除对应的品牌模块,注意是整个品牌模块区删除,不是只是库文件删了就可以的!1. <!--品牌-->2. <div class="box f_r brandsIe6">3. <div class="box_1 clearfix" id="brands">4. <!-- #BeginLibraryItem "/library/brands.lbi" --><!--#EndLibraryItem -->5. </div>6. </div>复制代码》删除后我们发现右侧的空白区域仍然存在这是因为前面的特价模块的CSS宽度写死了,需要修改CSS》按照上图右边提示打开style.css找到第205行,把width改为750px》改好后刷新页面,发现右边空白区域已经没有,但模块顶部的背景图片短》这也是因为背景图片本身就只有500px宽,制作的死的,需要重新作图images/salesTitBg.gif》重新作图覆盖后刷新页面,效果如下OK,大功告成!=========下节讲解预告:如何设计、美化并调用底部帮助系统文章列表===========进入实例教程2:如何设计、美化并调用底部帮助系统文章列表很多人发现自己的网店底部信息没有帮助文章列表,只有底部导航,那么这个有2种可能1:你的系统根本不存在这个调用的对应代码 2:你没有在后台中对应的文章分类中加上文章废话不多说如果是第一种情况,需要重写一个help库文件,然后在对应页面中引用即可,如果是第二种情况只需在后台文章分类添加文章即可引用代码如下(以官方默认模板为例)1.<!--帮助-->2.<div class="block">3. <div class="box">4. <div class="helpTitBg clearfix">5. <!-- #BeginLibraryItem "/library/help.lbi" --><!--#EndLibraryItem -->6. </div>7. </div>8.</div>复制代码重写help库文件1.<meta http-equiv="Content-Type" content="text/html;charset=utf-8">2.<!--{if $helps}-->3.<!-- {foreach from=$helps item=help_cat} -->4.<dl>5. <dt><a href='{$help_cat.cat_id}'title="{$help_cat.cat_name}">{$help_cat.cat_name}</a></dt>6. <!-- {foreach from=$help_cat.article item=item} -->7. <dd><a href="{$item.url}"title="{$item.title|escape:html}">{$item.short_title}</a></dd>8. <!-- {/foreach} -->9.</dl>10.<!-- {/foreach} -->11.<!--{/if}-->复制代码然后在后台系统帮助分类下添加分类,再在分类下添加文章即可当然这里的外观样式需要你自己去设计,因为每个人的审美观不同我贡献一个女人街底部的帮助模块吧这是CSS1..helpTitBg{text-align:left; background-color:#fff;2.3. padding:15px 0 15px 0;border:1px solid #ccc;4.5. }6.7. .helpTitBg .f_l{ width:135px; padding:0px 25px 0 10px;}8.9. .helpTitBg .f_l img{ border-bottom:1px solid #ebebeb}10.11. .helpTitBg dl{float:left; width:140px; padding:0 10px;border-left:1px solid #e2e2e2; height:170px;}12.13. .helpTitBg dt{width:auto; height:40px; line-height:40px;text-align:left;14.15. color:#a7a7a7; padding-left:5px; margin-bottom:4px;font-size:14px; font-weight:bold; border-bottom:1px solid#ebebeb;}16.17. .helpTitBg dt img{ vertical-align:middle;margin-right:5px;}18.19. .helpTitBg dt a{font-weight:bold; color:#555;text-decoration:none;}20.21. .helpTitBg dd{ padding:5px 0 5px 10px;background:url(images/biao17.gif) 10px centerno-repeat;border-bottom:1px solid #ebebeb;}22.23. .helpTitBg dd a{color:#555; text-decoration:none; padding:0px0px 0px 10px;}复制代码help.lbi中内容1.<meta http-equiv="Content-Type" content="text/html;charset=utf-8">2.<div class="helpTitBg clearfix">3. <div class="f_l">4. <img src="../images/left_fot1.gif">5. <img src="../images/left_fot2.gif">6. <img src="../images/left_fot3.gif">7. </div>8.<!-- {foreach from=$helps item=help_cat name=num} -->9.<dl>10. <dt><imgsrc="../images/help_{$smarty.foreach.num.iteration}.gif" /><ahref='{$help_cat.cat_id}'title="{$help_cat.cat_name}">{$help_cat.cat_name}</a></dt>11. <!-- {foreach from=$help_cat.article item=item} -->12. <dd><a href="{$item.url}"title="{$item.title|escape:html}">{$item.short_title}</a></dd>13. <!-- {/foreach} -->14.</dl>15.<!-- {/foreach} -->16. </div>复制代码用到的图片素材----------------下节讲解预告:商品分类模块的美化与设计-------------------------------------biao17.gif(50 Bytes)help_1.gif(1.47 KB)help_2.gif(1.38 KB)help_3.gif(1.41 KB)help_4.gif(1.33 KB)help_5.gif(1.38 KB)left_fot1.gif(2.06 KB)left_fot2.gif(2.29 KB)left_fot3.gif(2.07 KB)今天,我们来讲商品分类模块的设计与美化首先要知道,商品分类模块引用的文件是category_tree.lbi,我们可以修改这里面的内容再配合CSS和一些图片素材做到一个很好的美化,少部分页面需要修改程序来看一下官方默认模板的分类树库文件1.<meta http-equiv="Content-Type" content="text/html;charset=utf-8">2.<div class="box">3.<div class="box_1">4. <div id="category_tree">5. <!--{foreach from=$categories item=cat}-->6. <dl>7. <dt><a href="{$cat.url}">{$|escape:html}</a></dt>8. <!--{foreach from=$cat.cat_id item=child}-->9. <dd><ahref="{$child.url}">{$|escape:html}</a></dd>10. <!--{foreach from=$child.cat_id item=childer}-->11. <dd>&nbsp;&nbsp;<ahref="{$childer.url}">{$|escape:html}</a></dd>12. <!--{/foreach}-->13. <!--{/foreach}-->14.15. </dl>16. <!--{/foreach}-->17. </div>18.</div>19.</div>20.<div class="blank5"></div>复制代码再看一下效果个人认为这个一般人都不大喜欢,我们就以实例对它进行重新设计下,我们的效果图OK,切图,切出四个图,如下1.<meta http-equiv="Content-Type" content="text/html;charset=utf-8">2.<div id="tree">3.<div class="tree_h"></div>4. <!--{foreach from=$categories item=cat}-->5.6. <div class="cat1"><ahref="{$cat.url}">{$|escape:html}</a></div>7. <!--{foreach from=$cat.cat_id item=child}-->8. <div class="cat2"><ahref="{$child.url}">{$|escape:html}</a></div>9. <!--{foreach from=$child.cat_id item=childer}-->10. <!-- <dd>&nbsp;&nbsp;<ahref="{$childer.url}">{$|escape:html}</a></dd>-->11. <!--{/foreach}-->12. <!--{/foreach}-->13. <!--{/foreach}-->14. </div>15.<div class="blank5"></div>复制代码CSS代码如下:1.#tree {2. width:215px;3. height:641px;4. background-image: url(images/time/tree_bg.gif);5. background-repeat: no-repeat;6. padding-top:11px;7.}8.#tree .cat1 {9. width:177px;10. height:32px;11. background-image:url(images/time/tree_cat1.gif);12. background-repeat: no-repeat;13. padding-left:38px;14. line-height:32px;15.16.}17.#tree .cat1 a {18.font-size:16px;19.color:#FFFFFF;20.text-decoration:none;21.font-family:Arial, Helvetica, sans-serif;22.font-weight:bold;23.}24.#tree .cat2 {25. width:165px;26. height:32px;27. padding-left:50px;28. background-image:url(images/time/tree_cat2.gif);29. background-repeat: no-repeat;30. line-height:32px;31.32.}33.#tree .cat2 a {34.font-size:13px;35.color:#FFFFFF;36.text-decoration:none;37.font-family:Arial, Helvetica, sans-serif;38.font-weight:bold;39.}40.#tree .tree_h {41. padding-left:15px;42. width:107px;43. height:49px;44. background-image:url(images/time/tree_h.gif);45. background-repeat: no-repeat;46.}复制代码将切出来的四张图放到images目录下,前台预览,大功告成预览地址:分类美化设计实例预览大家经常问的是怎样把分类一行2列,其实这个是要去除官方默认的代码属性,写上自己的,加上漂浮即可,以官方默认模板2.71的category_tree.lbi 为例<!--{foreach from=$categories item=cat}--><dl><dt><a href="{$cat.url}">{$|escape:html}</a></dt> <!--{foreach from=$cat.cat_id item=child}--><dd><a href="{$child.url}">{$|escape:html}</a></dd><!--{foreach from=$child.cat_id item=childer}--><dd>&nbsp;&nbsp;<a href="{$childer.url}">{$|escape:html}</a></dd><!--{/foreach}--><!--{/foreach}--></dl><!--{/foreach}-->将其中红色标注的部分代码改为<dd class="clearfix"><!--{foreach from=$cat.cat_id item=child}--><p><a href="{$child.url}">{$|escape:html}</a></p><!--{foreach from=$child.cat_id item=childer}--><dd>&nbsp;&nbsp;<a href="{$childer.url}">{$|escape:html}</a></dd><!--{/foreach}--><!--{/foreach}--></dd>CSS代码:#category_tree dl dd p {display:block;float:left;height:17px;margin:1px 2px;overflow:hidden;width:90px;}=======================================这次的篇章就到这里,下一篇章讲解预告:导航模板的美化与设计。

网站模板制作教程

网站模板制作教程

网站模板制作教程网站模板制作教程是一种指导用户如何自己制作网站模板的教学教程。

在互联网时代,网站已经成为企业展示自己和与用户互动的重要渠道,而网站模板则是搭建网站的基础。

以下是一份500字网站模板制作教程:网站模板制作教程第一步:确定网站需求在开始制作网站模板之前,首先需要确定网站的需求。

您需要思考您的网站用途是什么,是展示产品,销售商品,还是提供信息服务等。

在明确需求后,您可以更有效地规划和制作网站模板。

第二步:选择合适的技术和工具选择合适的技术和工具对于网站模板的制作非常重要。

目前常用的网站模板制作技术包括HTML、CSS、JavaScript等。

同时,您还可以选择使用一些网页制作工具,如Dreamweaver、WordPress等。

根据您的技术水平和需求,选择合适的技术和工具来制作网站模板。

第三步:设计网站布局网站的布局决定了网站的整体结构和页面的呈现方式。

您可以通过绘制草图或使用设计软件来设计网站的布局。

在设计布局时,需要考虑网站的导航栏、内容区域、侧边栏、页脚等,并确保它们相互协调和整体美观。

第四步:编写网页代码在网站模板制作中,编写网页代码是关键步骤。

首先,您需要创建一个基本的HTML文件,定义整个网页的结构和内容。

然后,使用CSS来为网页添加样式和布局。

您还可以使用JavaScript来增加页面的动态交互效果。

通过合理编写网页代码,您可以实现对网站模板的自定义和个性化。

第五步:测试和优化在完成网站模板制作后,您需要对其进行测试和优化。

测试包括在不同浏览器和设备上测试网站的兼容性和响应性,确保网站在各种环境下都能正常运行。

同时,您还需要进行性能优化,如优化页面加载速度、优化代码结构等,以提升网站的用户体验。

第六步:上线和维护当网站模板制作完成并通过测试后,您可以将其上线。

在上线之前,您需要购买和配置域名和服务器,并将网站模板上传至服务器。

此后,您需要定期维护和更新网站,保持其安全性和稳定性,并根据用户的反馈和需求进行相应的改进和优化。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
制作模板时 主要研究 themes文件夹下的文件。其次是挂件目录下的文件。
themes下的各个文件都要熟悉。4.84与4.85有少许不同。下一次主要讲themes文件夹下的文件的作用。
Shopex4.85模板教程-模板XML文件(theme.xml与info.xml)详解
作者: kulolo | 发布时间: 星期六, 04/17/2010 - 15:50
<author>ShopEx</author>? 模板作者
<site></site>? 模板网站
<update_url></update_url>???? 模板升级地址
<borders></borders> 边框描述 这里所列出的信息会被用在后台“修改版块”面板的“版块边框”下拉框中。其中key为显示在后台的下拉选项,tpl为各边框相对模板目录的边框路径。
theme.xml在4.8系统中,如果没有这个文件后台不会读到该模板。这是4.8系统模板必要的文件。必须存在,所以在做一套模板时候,这个xml是必须配置完善的。
现在手动作个做简单的模板测试下xml文件。在系统目录下的themes文件夹下新建立个文件夹名字test,配置下info.xml与theme.xml,可以复制下purple的配置文件到你的目录下,然后打开后配置,修改<name>测试模板</name><id>test</id>,并将theme.xml中<widgets></widgets>中的代码删除,基本上是2个xml一致的,theme.xml多了个<widgets></widgets>的标记。然后保存。进入shopex后台,模板列表内,是否看到一个新的叫测试模板的新模板了。虽然应用时没用的,因为你还没有制作,但是第一步已经完成了。
本文档分为Shopex4.85模板制作详解与ShopEx完全手册
Shopex4.85 模板制作详解,建议用大纲视图查看
ShopEx 完全手册,建议用web视图查看
Shopex4.85 模板制作详解 前言
作者: kulolo | 发布时间: 星期四, 04/01/2010 - 22:40
在后台新建立个列表页,名字可以随便起,然后就可以在文件夹中发现你新建的一个.html文件了。就是你刚才新建的文件。用编辑器打开,一般顶部和尾部会有调用头部信息和底部信息的代码。
<{require file=”block/header.html”}>和<{require file=”block/footer.html”}>
作者: kulolo | 发布时间: 星期一, 04/05/2010 - 19:21
工欲善其事,必先利其器。
马克思说:人类区别与其他动物的最根本的区别是制作和使用工具。当然马克思说的很多话不能相信。。。HOHO。。
这句话还是可以听一下的。
要做好shopex4.8系统的模板也要好工具来帮忙,接下来看下有哪些工具,可以使你做事事半功倍。
一直想写下shopex4.8系列模板的制作教程,但是一直没有时间定下心来写。
由于shopex模板的制作牵涉到过于多的页面调整,很难用很少的篇幅说清楚,所以一直拖到了4.85的出现。官方的模板教程简单,笼统,没有进阶性。学习起来困难。实例教程更是少之又少。我接下来写的教程 尽量图文配合,尽量简洁明了,按部就班的做下来就可以了。学习前需要准备的由如下几点。
1 HTML(XHTML)知识 (非常重要,重中之重)
2 CSS知识 (熟练即可)
3 初步了解Shopex系统(至少会安装吧)
4 有毅力和时间
网页制作、网站建设、dede ecshop 各类开源源码,插件\模板\修改\二次开发 qq112738102
Shopex4.85模板详细教程-工具篇
当然底部文件footer.html 中也要有<{footer}>标记,包含着shopex的版权。去版权可是官方收费的,如果不放<{footer}>,页面肯定出问题。这是毫无疑问的。
然后看下borders文件夹,放着是挂件的边框样式(挂件会以后详细讲一下),挂件的边框样式有什么作用呢?就是后台添加挂件的时候可以选择不同样式,比如添加多个相似挂件时候,风格类似,写框架可以节约很多时间。不过我不习惯写,呵呵。
shopex4.85 紫气东来模板的模板文件说明
首先说明下的就是2个XML文件,info.xml与theme.xml文件。是模板的核心配置文件。info.xml是应用于4.8系统前的配置文件。theme.xml是应用于4.8版本后的配置文件。
用编辑器(dreamweaver或者editplus,有很多)打开这2个文件。来看下info.xml,是一个典型的xml文件。简单说明下配置。
这样就调用到了公共头部和底部。4.85可以建立非常多的页面进行调整模板。
首页-index.html
商品列表页-gallery.html
商品详细页-product.html
商品评论/咨询页-comment.html
文章列表页-artical.html
赠品页-gift.html
捆绑商品页-package.html
默认页-default.html
订单确认页-order_index.html
每个页面可以定义多个页面用来备份。4.85还有分类可以绑定不同的列表页和商品详细页。功能以后再提。
Shopex4.85模板教程-代码详解
作者: kulolo | 发布时间: 星期一, 04/26/2010 - 21:48
打开文件夹。看到3个文件夹和2个XML文件和若干html文件。xml配置文件已经在前2天说过了,如果还有朋友不知道的话,可以看下。
Shopex4.85模板教程-模板XML文件(theme.xml与info.xml)详解
接下说下3个文件夹,block文件夹,放着公共的部分的html模板,比如一个网站的头部,紫气东来模板里为header.html和底部信息footer.html,由于所有页面都调用这2个文件,所以独立出来。方便调用。
images文件夹放着模板所用图片,css,javascript文件。调用的时候写相对路径就OK了。
除了3个文件夹还有很多的html文件。这些就是所说的页面模板。index.html就是首页模板,当然shopex4.85可以给首页起不同的名字。shopex4.85可以给所有页面起不同的名字,例如列表页,商品详细页都可以有很多个页面。
<name>紫气东来</name>????? 模板名 ,应用于后台模板管理中的名字。
<id>purple</id>??? 生成模板文件夹名,在模板包加载中生成该名字的文件夹。
<version>ShopEx4.8</version>??? 模板版本号
<info></info>???? 模板说明
1 photoshop cs3版本。要做好效果图,这个工具必不可少。CS4版本比较考验机器性能,装个CS3版本,基本功能一个都不少,修修改改的用起来很顺手。
2 dreamweaver cs4版本,同样是ADOBE公司的一款工具,写前端代码非常方便,且可以设施2个浏览器进行调试。代码提示等诸多方ቤተ መጻሕፍቲ ባይዱ的功能。
3 FireFox浏览器,如果你作为一个前端开发人员,不装Firefox浏览器都不好意思和别人打招呼。基本完全符合W3C制定的规范运行的浏览器。并且配合FIREBUG等诸多插件,使你调试页面非常方便快速。
4 IETESTER 软件。是不是觉得对诸多IE版本调试起来非常痛苦。使用这个软件可以一次性调试IE5~IE8所有的版本。事半功倍的利器。
品牌列表页-brandlist.html
品牌展示页-cart.html
购物车页-search.html
高级搜索页-passport.html
注册/登录页-passport.html
会员中心页-member.html
站点栏目单独页-page.html
订单详细页-order_detail.html
2.statics文件夹 里带有系统默认的一些图片 图标和一些CSS定义过的样式
3.core文件夹 shopex系统核心文件夹,做模板制作时不到必要建议不要修改这个文件夹中的任何文件。
4.plugins文件夹下的widgets文件夹下 放着所有的挂件(挂件以后会详细的谈)。
5.config文件夹下放着shopex系统配置文件。没有安装的新系统内没有config.php文件。
重申一点,就是HTML代码的合理性,语义化,前段的代码都是极其细致化的结果。没有最好,但是要向最好的代码靠近。其实4.85模板机制个人是觉得不友好的,当添加一个挂件的时候,会自动在挂件外添加一个<div>标记,首先他增加的页面的代码量,影响了页面输出或者搜索引擎爬虫的效率,其次他还会破坏页面的布局,我们知道<div>是块状标记,本来我这个挂件想添加的是行内标记,现在莫名多出个<div>标记,破坏了本来的布局。希望4.86改善这一点。好的后端代码不能以牺牲前端代码为基础。
我们来看下shopex系统安装目录下的themes文件夹。打开该文件夹,会出现数量不一的文件夹,4.85默认安装后以后会自带一个purple(紫气东来)的模板文件夹。接下来就以purple(紫气东来)作为例子来详细介绍下模板路径下的文件的作用。
打开purple文件夹,有3个文件夹和2个xml文件还有一堆的html文件和一个preview.jpg文件。(如下图)
相关文档
最新文档