7电子商务系统建设.ppt

《7电子商务系统建设.ppt》由会员分享，可在线阅读，更多相关《7电子商务系统建设.ppt（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第7 7章章 电子商务系统建设电子商务系统建设1/30/2023电子商务系统设计架构电子商务系统设计架构n n电子商务系统电子商务系统基于基于InternetInternet并支持企并支持企业价值链增值的信息系统。业价值链增值的信息系统。n n电子商务系统基本框架分为电子商务系统基本框架分为5 5大部分（由大部分（由底层到上层依次是）：网络环境、硬件环底层到上层依次是）：网络环境、硬件环境、软件及开发环境、商务服务环境、电境、软件及开发环境、商务服务环境、电子商务应用。子商务应用。n n电子商务网站是电子商务系统的对外窗口，电子商务网站是电子商务系统的对外窗口，网站的设计影响着系统的质量。网

2、站的设计影响着系统的质量。1/30/2023优秀电子商务网站设计要素优秀电子商务网站设计要素因因 素素说说 明明下载时间下载时间长时间的等待常常会丧失潜在的消费者长时间的等待常常会丧失潜在的消费者安全性安全性建立起消费者与企业的信任关系，留住客户。建立起消费者与企业的信任关系，留住客户。商品（含服务）商品（含服务）质量质量 虽然这和网站设计无关，但即使你的网站设计得再精美，但提供虽然这和网站设计无关，但即使你的网站设计得再精美，但提供了虚假或劣质的商品，终将被市场淘汰。了虚假或劣质的商品，终将被市场淘汰。功能完备功能完备可使用户快速浏览网页，有效自然地将用户引向网站销售的商品。可使用户快速浏览

3、网页，有效自然地将用户引向网站销售的商品。信息量大信息量大可帮助用户轻松找到更多企业和产品信息的链接可帮助用户轻松找到更多企业和产品信息的链接 冗余导航冗余导航具备指向同一内容的多条导航通路具备指向同一内容的多条导航通路购买、退订方便购买、退订方便只需一两次操作就可以完成购买，同样也能快速退定，给用户提只需一两次操作就可以完成购买，同样也能快速退定，给用户提供更大的自主选择空间，不进行强卖。供更大的自主选择空间，不进行强卖。支持多种浏览器支持多种浏览器网站必须与大多数浏览器兼容网站必须与大多数浏览器兼容 简单的图形界面简单的图形界面避免让用户分散注意力的令人厌烦的图片和声音避免让用户分散注意力

4、的令人厌烦的图片和声音文本清晰文本清晰 避免使用容易造成文本扭曲或文字不清晰的背景避免使用容易造成文本扭曲或文字不清晰的背景 1/30/2023电子商务网站建设电子商务网站建设电电电电子子子子商商商商务务务务网网网网站站站站建建建建设设设设 域名域名主机主机接入接入网站架构网站架构网站管理网站管理网站推广网站推广1/30/20231/30/20231/30/20231/30/20231/30/2023n n网页界面网页界面 后台程序后台程序 数据储存数据储存网站建设1/30/2023 网页、网站、主页、超链接HTML知识客户端脚本语言知识CSS样式表知识网页制作工具1/30/2023n n网页

5、：网页：网页：网页：也叫也叫WebWeb页，是页，是HTMLHTML格式的文件。格式的文件。n n网站：网站：网站：网站：2 2个或更多的网页链接在一起，就构成了个或更多的网页链接在一起，就构成了网站。网站。n n主页：主页：主页：主页：进入某个站点所见到的第一页，一般称为进入某个站点所见到的第一页，一般称为“HomePageHomePage”，中文的意思是中文的意思是“主页主页”。主页的。主页的文件名通常是文件名通常是index.htmindex.htm（index.htmlindex.html）或）或default.htmdefault.htm（default.htmldefault.ht

6、ml）。）。n n超链接：超链接：超链接：超链接：站点内不同网页之间、站点与站点内不同网页之间、站点与WebWeb之间之间的连接关系，它可以使站点内的网页成为有机的的连接关系，它可以使站点内的网页成为有机的整体，还能够使不同站点之间建立联系。整体，还能够使不同站点之间建立联系。1/30/2023网页其他文件图像声音网站锚点Email文本图像图像热区其它元素链接载体网络资源1/30/2023HTML知识 n n HTML代码代码hyperText Markup Language n n网页的网页的HTML标记标记1/30/2023超文本标记页头这对标签之间是该超文本文档文档头。对该超文本文档的定

7、义、说明、描述等都在这部份主体部份这对标签之间是该超文本文档的具体内容。该网页要传送的信息基本上都在这一部份。1/30/2023我的第一个页面good luck!1/30/2023客户端脚本n n在网页中嵌入的脚本有两种类型：uu一种是在服务器端执行的，由服务器将脚本执行的结果传递给浏览器，称为服务器端脚本。例如，要读取服务器上某个数据库中的一部分内容，这样的程序代码需要在服务器上执行。uu另外一种是在客户端浏览器上执行的，它是由服务器将脚本的内容传送给浏览器，再由浏览器执行，称为客户端脚本。例如，让一幅图片窗口中不断移动。1/30/2023不同脚本处理方式示意HTML文档服务器端脚本客户端脚

8、本HTML文档服务器端浏览器端客户端脚本传送执行结果传送源代码1/30/2023n n使用使用标签的标签的FORFOR属性指出脚本所面属性指出脚本所面向的对象，而用向的对象，而用EVENTEVENT属性指出引用脚本的事属性指出引用脚本的事件。网页形式如下：件。网页形式如下：SCRIPT LANGUAGE=VBScript“MsgBoxMsgBox 你单击了这个按钮。你单击了这个按钮。input 单击这里测试一下1/30/2023n nn nfunction function CoolMenuControlCoolMenuControl()()n n/-/-常规变量常规变量-n nthis.la

9、stScrollXthis.lastScrollX=0;=0;n nthis.lastScrollYthis.lastScrollY=0;=0;n nthis.lastScrollWthis.lastScrollW=0;=0;n nthis.lastScrollHthis.lastScrollH=0;=0;n nthis.td_Xthis.td_X=0;=0;n nthis.td_Ythis.td_Y=0;=0;n nthis.td_Wthis.td_W=0;=0;n nthis.td_Hthis.td_H=0;=0;n nthis.tdthis.td=0;=0;n nthis.mouseon

10、this.mouseon=0;=0;n nthis.currentthis.current=null=nulln nthis.hk_namethis.hk_name;n nthis.hktable_namethis.hktable_name;n nthis.menudiv_namethis.menudiv_name;n nthis.menutable_namethis.menutable_name;n nthis.mlthis.ml=0;=0;n nthis.menuarraythis.menuarray=new Array();=new Array();n nthis.speedthis.s

11、peed;n nthis.hrefthis.href=;=;n n/-/-菜单项目菜单项目-n nfunction function menuitem(type,value,url,targetmenuitem(type,value,url,target)n nthis.typethis.type=type=typen nthis.valuethis.value=value=valuen nthis.urlthis.url=urlurln nthis.targetthis.target=target=targetn n n n/-/-插入菜单插入菜单-n nthis.insertmenuthi

12、s.insertmenu=function(type,value,url,targetfunction(type,value,url,target)n n this.menuarraythis.menuarray.lengththis.menuarraythis.menuarray.length=new=new menuitem(type,value,url,targetmenuitem(type,value,url,target)n n n n/-/-程序初试化程序初试化-n nthis.initthis.init=function(name,bdc,bgc,speed,Alphafunct

13、ion(name,bdc,bgc,speed,Alpha)n nvarvar inhtmlinhtml=n nvarvar cellcountcellcount=0=0n nvarvar lastcellcountlastcellcount=0=0n nthis.hk_namethis.hk_name=name+hkname+hk n nthis.hktable_namethis.hktable_name=name+hktablename+hktable“n nthis.menudiv_namethis.menudiv_name=name+menudivname+menudiv n nthis

14、.menutable_namethis.menutable_name=name+menutablename+menutable n nthis.speedthis.speed=speed=speedn nfor(i=0;ifor(i=0;ithis.menuarray.length;ithis.menuarray.length;i+)+)n n n n if(if(this.menuarrayi.typethis.menuarrayi.type=2)=2)cellcountcellcount=cellcount+1=cellcount+1n n if(if(this.menuarrayi.ty

15、pethis.menuarrayi.type=1|=1|this.menuarrayi.typethis.menuarrayi.type=0)=0)cellcountcellcount=0=0n n if(if(lastcellcountlastcellcount cellcountcellcount)lastcellcountlastcellcount+n n n n n n/alert(cellcountalert(cellcount)n nstylecodestylecode=cursor:hand;filter:Alpha(stylecursor:hand;filter:Alpha(s

16、tyle=0,opacity=+=0,opacity=+Alpha+);background-color:+bgcAlpha+);background-color:+bgcn nsuspendcodesuspendcode=DIV id=+=()n n +table id=+n n +;n ndocument.write(suspendcodedocument.write(suspendcode););n nvarvar fcellfcell=true=truen nfor(i=0;ifor(i=0;ithis.menuarray.length;ithis.menuarray.length;i

17、+)+)n n n n switch(this.menuarrayi.typeswitch(this.menuarrayi.type)n n n n case 0:case 0:n n t=t=cellcountcellcount*2*2JS菜单效果单击这里测试一下if(t=0)inhtml+=+this.menuarrayi.value else inhtml+=+this.menuarrayi.value fcell=true break;case 1:t=(cellcount-1)*2 if(t=0)inhtml+=+this.menuarrayi.value else inhtml+=

18、+this.menuarrayi.value fcell=true break;case 2:if(fcell)inhtml+=+this.menuarrayi.value;fcell=false else inhtml+=+this.menuarrayi.value;break;inhtml=+inhtml +;/alert(inhtml)document.write(inhtml);this.lastScrollX=0;this.lastScrollY=-4;this.posXY(eval(this.menutable_name).cells0)this.td_W=eval(this.me

19、nutable_name).cells0.scrollWidth+6 this.td_H=eval(this.menutable_name).cells0.scrollHeightsetInterval(name+.scrollback(),1)/-单击超连接-this.doClick=function()/alert(this.url)var url=this.href.split(,)/alert(url0)/alert(url1)if(url0=)returnif(url1=_blank)window.open(url0)else location.href=url0/-滑动处理-thi

20、s.scrollback=function()diffX=this.td_X-3diffY=this.td_Y-5diffW=this.td_WdiffH=this.td_HpercentX=this.speed*(diffX-this.lastScrollX);percentY=this.speed*(diffY-this.lastScrollY);percentW=this.speed*(diffW-this.lastScrollW);percentH=this.speed*(diffH-this.lastScrollH);if(percentX0)percentX=Math.ceil(p

21、ercentX);else percentX=Math.floor(percentX);if(percentY0)percentY=Math.ceil(percentY);else percentY=Math.floor(percentY);if(percentW0)percentW=Math.ceil(percentW);else percentW=Math.floor(percentW);if(percentH0)percentH=Math.ceil(percentH);else percentH=Math.floor(percentH);eval(this.hk_name).style.

22、pixelTop+=percentY;eval(this.hk_name).style.pixelLeft+=percentX;eval(this.hktable_name).style.pixelWidth+=percentW;eval(this.hktable_name).style.pixelHeight+=percentH;this.lastScrollX=this.lastScrollX+percentX;this.lastScrollY=this.lastScrollY+percentY;this.lastScrollW=this.lastScrollW+percentW;this

23、.lastScrollH=this.lastScrollH+percentH;/-滑出-this.doOver=function()if(event.srcElement.tagName=TD)if(event.srcElement.innerText.length=0|event.srcElement.innerText=|)return this.posXY(event.srcElement)this.td_W=event.srcElement.scrollWidth+6 this.td_H=event.srcElement.scrollHeight /-绝对定位-this.posXY=f

24、unction(obj)hk_left=obj.offsetLeft hk_top=obj.offsetTop vParent=obj.offsetParent;while(vParent.tagName.toUpperCase()!=BODY)hk_left+=vParent.offsetLeft;hk_top+=vParent.offsetTop;vParent=vParent.offsetParent;this.td_X=hk_left this.td_Y=hk_top/-关于-this.about=function()alert(OK).bcolor=#000066;cursor:ha

25、nd.menu font-family:Arial;cursor:Default;font-size:12px;border:1px#000000 solid;border-collapse:collapse;filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0,startcolorstr=#ffffff,endcolorstr=#dddddd)progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#cccccc,strength=3);.htfont

26、-weight:bold!-第一步：实体化X-Menu类 用法:var.new CoolMenuControl()-var CoolMenu1=new CoolMenuControl()var about=new Array()about0=关于X-Menu菜单nnAuthor:PuterJamnCopyright 2004n转载请通知本人about1=关于作者nn这家伙很懒，什么也没留下！!-第二步：建立菜单项目-用法:.insertmenu(类型,Html代码,链接网址,目标)类型：代表菜单标题，代表树型菜单子项目，代表横向菜单子项目 Html代码：显示在菜单上的Html代码 链接网址：不

27、用多说了，网址或Javascript脚本 目标：默认为空，既不在本页打开；_blank代表在新的页面打开例如:CoolMenu2.insertmenu(2,新浪网,http:/ 如果背景颜色=transparent既为完全透明例如:CoolMenu1.init(CoolMenu1,#002000,#38FFff,0.1,15)-CoolMenu1.init(CoolMenu1,#002000,#38FFff,0.1,15)1/30/2023CSS样式表知识 n nCSSCSS（Cascading Style Sheets）样式表样式表 n n例例1/30/2023网页制作工具 n nHTML代

28、码生成的可视化网页开发代码生成的可视化网页开发工具软件工具软件 uuDREAMWEAVER uuFrontpage n n网页图像及动画制作工具网页图像及动画制作工具 FIREWORK FLASHFIREWORK FLASH1/30/2023网站发布与测试网站发布与测试n n上传上传上传上传(把设计好的网页存放到把设计好的网页存放到WEBWEB的服务器上，供的服务器上，供用户访问用户访问)uuWebWebWebWeb方式方式方式方式uuFTPFTPFTPFTP软件软件软件软件 leapftpleapftpleapftpleapftp cuteftpcuteftpcuteftpcuteftpn

29、n在发布之前应该进行测试在发布之前应该进行测试在发布之前应该进行测试在发布之前应该进行测试 1 1、不同浏览器测试、不同浏览器测试 2 2、网页测试（正确、错误数据测试，系统功能、网页测试（正确、错误数据测试，系统功能测试）测试）3 3、链接有效性测试、链接有效性测试 4 4、下载时间和速度测试、下载时间和速度测试 5 5、文本和图片的显示位置是否正确、文本和图片的显示位置是否正确1/30/20231/30/20231/30/2023网站推广的其它方式网站推广的其它方式1、利用搜索引擎进行推广2、网上广告（旗帜广告、按纽广告）3、电子邮件-直效广告4、交换链接、结为联盟5、bbs、网上社区、blog6、非网上宣传 企业传统宣传材料（名片、产品宣传单等）传统宣传媒体（户外广告、车身广告、报纸、电视等）1/30/2023