Java,Jsp,模式及框架
Web技术
Web服务器
浏览器相关
SQL语言
数据库
开发环境
软件开发及管理
网站SEO
短信及邮件服务
网页设计
电脑、硬件及网络
协同管理平台问题
电子商务
前沿技术及趋势
  当前位置:首页 - 知识积累 - 电子商务
电子商务模板制作
时间:2010年08月20日 

一、模板相关知识

1.含义:模板是一种特殊类型的文档,用于设计“锁定”的页面布局。网页设计者可以利用模板快速生成大量风格相似的,具有很多相同布局、图片、文字等元素的网页,避免了重复劳动。

注意:模板中有不可编辑的区域,用于锁定多个文件中所共有的内容;也必须有可编辑的区域,用于填充不同的内容。

2.模板的作用:一是可以生成大批的风格相近的网页,二是一旦模板修改了,就会自动更新由此模板生成的所有网页,大大提高了网页制作的效率。


二、模板制作相关操作

以电子商务订单作为说明,产品订单包含四个html页面,产品内容页面、productCart、orderList、productOrder 。

1、通常的产品内容(productContent)页面添加模板有:1、商品编号(商品型号)

相关代码:<pre><input name="text2" type="text" style="width:90%;height:20px;background-color:#ff9900" value=商品编号 compvalue="<![CDATA[value:$]]>"  datatype="ec_productId" /></pre>

2、商品的价格

 相关代码:<pre><input name="text3" type="text" style="width:90%;height:20px;background-color:#ff9900" value=商品价格 compvalue="<![CDATA[value:$]]>" datatype="ec_price" /></pre>

3、产品描述,对产品进行相关的描述

相关代码:<pre><input name="Input10" style="width:90%;height:200px;background-color:#ff9900" value=产品描述 compvalue="<![CDATA[value:$index:n$lines:10]]>" distype="y" datatype="self_text" /></pre>

4、产品的订购,首先插入文本框,然后在对文本框进行购物车链接

相关代码:<pre><input type="text" name="textfield" /></pre>
            <span onclick='gotoProductCar(this,"textfield")' style="cursor:hand"><img src="images/buy.gif" mce_src="images/buy.gif" width="51" height="20" /></span>


 2、购物车(productCart)

 购物车页面包含提交订单查看订单列表,相关代码:

购物车模板:<pre><input name="Input2" style="width:90%;height:500px;background-color:#ff9900" value=购物车 compvalue='<![CDATA[value:$htmlVal:<li><a href={url} target=_blank>{title}</a></li>$nullValue:对不起,没有相关的内容!]]>' datatype="ec_productCart" /></pre>

3、订单列表(orderList)

 订单列表页面包含提交订单和返回购物车

相关代码:<pre><input name="text" type="text" style="width:90%;height:600px;background-color:#ff9900" value=订单列表 compvalue="<![CDATA[value:]]>" datatype="ec_orderList" /></pre>

4、商品订单(productOrder) 

商品订单查看订单列表和返回购物车,填写并核对订单信息

相关代码:<pre><input name="text" type="text" style="width:90%;height:600px;background-color:#ff9900" value=商品订单 compvalue="<![CDATA[value:]]>" datatype="ec_productOrder" /></pre>