电子商务系统开发与建设课件.ppt
《电子商务系统开发与建设课件.ppt》由会员分享,可在线阅读,更多相关《电子商务系统开发与建设课件.ppt(47页珍藏版)》请在三一办公上搜索。
1、第四章 电子商务系统开发与建设,2,内容概要,3,4.1电子商务系统规划与设计,4,4.1电子商务系统规划与设计,电子商务系统设计可以分为整体设计、功能与结构设计、艺术性设计等方面。具体而言,就是需要确定系统的结构、栏目的设置、整体风格、颜色搭配、版面布局以及文字图片的呈现方式等。只有在系统开发之前把这些都考虑到了,才能在开发过程中胸有成竹,才能较好的实现目标,满足用户的需要。,5,4.1.1电子商务系统开发流程,由于当前电子商务系统绝大部分都是B/S模式,系统一般以网站的形式存在,所以,初次接触电子商务系统(网站)开发的学生或爱好者容易陷入一个认识上的误区,把电子商务系统开发理解成网页制作,
2、其实电子商务系统的设计与开发是一个系统工程,需要遵循一定的开发流程,按部就班的开展工作,这样才能设计、开发出符合要求、令人满意的电子商务系统。根据软件工程学知识和电子商务系统开发工程实践,本章将电子商务系统的开发流程归纳为电子商务系统规划与设计、电子商务系统开发、电子商务系统部署与管理三个阶段,每个阶段又有一些子阶段,如表4-1所示。实际的开发流程并不一定严格按照标准流程来进行,不同类型的系统可能有不同的侧重阶段,比如大型系统更注重规划与分析,而小型系统则更侧重开发与部署。,6,4.1.1电子商务系统开发流程,表4-1 电子商务系统开发流程,7,4.1.1电子商务系统开发流程,在标准的软件生命
3、周期中,系统规划、系统分析与系统设计是在系统开发阶段之前完成的工作,对于电子商务系统开发,这些工作也是不可或缺的,分别对应的是电子商务系统规划、需求分析、电子商务系统设计。在系统规划阶段要对系统的可行性、经济与社会效益等进行分析与预测,撰写电子商务系统策划书或者电子商务系统建设规划。在需求分析阶段对系统的业务需求进行全面系统的分析,确定系统的建设目标和主要的功能需求,本阶段完成以后将产生电子商务系统建设目标、需求说明书和功能模块图等文档。,8,4.1.1电子商务系统开发流程,电子商务型和信息管理型系统的设计阶段非常重要,这类电子商务系统其实就是一个WEB应用系统,应该严格按照系统设计与开发的方
4、法与步骤去完成,一般包括总体设计、数据库设计、业务逻辑设计、界面设计等环节,有兴趣的同学请参阅有关电子商务系统设计与开发方面的书籍。网络营销型系统的设计阶段更多是强调界面的设计,包括布局、色彩、logo等方面。本环节最终需要提交电子商务系统设计说明书。有了电子商务系统设计说明书,就可以着手搜集与系统开发有关的资料与素材了,有些素材可以通过网络或其他途径收集,有些素材需要自己动手来设计与制作。有了资料和素材的准备,方可进行系统的开发工作,这是一个复杂而细致的过程,需要多动手才能积累经验。,9,4.1.1电子商务系统开发流程,电子商务系统开发完成,还只能自己欣赏,如何让全世界的人都可以通过浏览器看
5、到你的系统界面呢?这就需要将电子商务系统部署到服务器上,只有将网页文件发布到WEB服务器上,才能够让远程用户访问。在实际操作中,电子商务系统部署需要经过域名申请、服务器准备和文件上传与发布三个步骤。系统发布后,更需要经常的维护与更新,保持内容的新鲜。只有不断补充新的内容,才能吸引浏览者,而有计划有步骤的进行电子商务系统推广也是电子商务系统获得有效访问的重要手段。,10,4.1.2整体设计与功能结构设计,电子商务系统整体设计阶段需要解决的事项包括:提出系统架构建议、选择技术组合、决定项目建设方式(外包还是自建等)等。目前常见的电子商务系统(网站)一般采用.NET、J2EE、Node.JS等技术或
6、架构。如果决定采用项目外包,合作伙伴(如软、硬件服务提供商)和合作方式的选择是需要重点考虑的内容,一般中小企业采用在公有云购买云服务器,然后将电子商务系统的建设和维护委托给专业公司来进行;而大企业则可以考虑价格较高的私有云方式,然后选择自己设计并维护电子商务系统。,11,4.1.2整体设计与功能结构设计,电子商务系统功能与结构设计的主要工作是绘制电子商务系统的功能结构图,以及系统(网站)的主要信息内容与导航的策划。图4-1所示是某网络营销型电子商务系统(网站)的功能结构图。,图4-1 某公司电子商务系统(网站)整体结构图,12,4.1.3艺术性设计与布局设计,(1)艺术性设计 让电子商务系统(
7、网站)有一个统一的风格与形象是很重要的。要做出美观,形象统一的电子商务系统,有意识的让网站的风格,色彩、字体、排版等保持一致是非常重要的一环,此外,电子商务系统还需要考虑系统的视觉设计与企业形象识别系统(CIS)的统一。(2)布局设计 如前所述,电子商务系统大部分以网站的形式存在,网页的布局设计工作是保证电子商务系统具有统一形象的另外一环。不同类型的网页的构成基本元素是不同的。一般网页的构成元素包括导航栏、网页标志、网页banner、主内容区及页脚版权信息等,如图4-2所示。,13,4.1.3艺术性设计与布局设计,图4-2 电子商务系统(网站)整体布局示意图,14,4.1.3艺术性设计与布局设
8、计,导航栏的设计一般从总体角度来进行,是整个系统设计中比较独立的部分。一般来说,导航在各页面中出现的位置是比较固定的,而且风格也较为一致。导航的位置一般有四种:左侧、右侧、顶部和底部。有时候在同一个页面中运用了多种导航,这样可以增强电子商务系统(网站)的可访问性。导航的另一个功能是用于表示当前网页在网站中的位置。标志是一个站点的象征,又称为站点logo。一个好的站点标志,跟企业商标一样,可以更好的树立站点形象。网页标志一般放在网站的左上角,访问者一眼就能看到它。其尺寸通常有三种:8831、12060、12090像素。,15,4.1.3艺术性设计与布局设计,Banner是横幅广告,可以位于网页顶
9、部、中部或者底部,一般横向贯穿整个或者大半个页面。常见的尺寸是48060像素,或23330像素,一般是使用GIF、JPG格式的图像文件,也可以是FLASH动画。页脚是放置版权信息的地方,也可以用于呈现联系方式或其它栏目。,16,4.1.3艺术性设计与布局设计,(3)常见网页布局形式 网页的排版布局一般以网站主页的版面布局为主,其他内页与主页风格保持一致。为了达到最佳的视角效果,设计者应该考虑布局的合理性,使浏览者有一个流畅的视角体验。设计版面布局前需要先画出布局草图,接着对布局进行细化和调整,反复调整后确定最终的布局方案。常见的网页布局形式有“国”字型、“厂”字型、框架型、封面型等。“国”字型
10、是一些大中型网站常见的布局方式,这种布局方式中间的主要内容部分分三栏,左右分别列出一些栏目,比如登录模块、通告等。其优点是充分利用版面,信息量大,缺点是页面显得拥挤,不够灵活。,17,4.1.3艺术性设计与布局设计,“厂”字型布局是指页面顶部为标志和广告,下方左面为主菜单,右面为正文信息,整体效果类似“厂”字,故而得名。厂字型布局一般应用于企业网站中的二级页面。其优点是结构清晰,主次分明,是初学者容易上手的布局方法。缺点是规矩呆板,如果色彩搭配不当,很容易让人厌烦。框架型布局一般分为上下、左右布局。常见的是三栏布局,顶部放置图片广告、标志等,左边显示导航栏,右边是正文信息。封面型布局一般应用在
11、网站的引导页或者广告宣传页上,一般为精美的图片加上简单的文字链接,指向站点的主要栏目,或通过“进入”按钮链接到真正的主页。,18,4.2电子商务系统开发技术,19,4.2.1网站开发技术分类,一般来说,网页分为“静态网页”和“动态网页”两类。(1)静态网页指网页的内容已预先设计好,存放在WEB服务器上,当用户使用浏览器通过互联网的HTTP协议向WEB服务器提出请求时,服务器仅仅是将原已设计好的静态HTML文档传送给用户浏览器。(2)动态网页指能够根据用户的要求和选择,进行不同的处理,并根据处理的结果,自动生成新的页面,不再需要设计者手动更新HTML文档。在网页上加上一些动画和视频并不是动态网页
12、。,20,4.2.1网站开发技术分类,动态网页技术又可分为客户端动态技术和服务器端动态技术两种,客户端动态是指脚本代码在客户浏览器解释执行而实现的动态技术,目前常用的有Javascript等。服务端动态技术是指在服务器上解释执行,然后将执行结果发送到客户端浏览器来显示的方式,服务端动态技术更加多样,最初是通过CGI和DHTML等方式来实现,然后出现了在HTML代码中嵌入动态代码并在服务器端的容器中执行的方式,曾经流行的ASP、JSP和PHP以及近年开始崛起的Node.js等均属于这类技术,由于过去代码嵌入方式无法完成企业级的应用开发和集成开发的要求,因此.NET和J2EE两大Web应用开发平台
13、成为主流。服务端动态技术一般还需要用到数据库技术,常见的WEB应用开发使用的数据库包括MySQL,SQLServer,MongoDB等。而对于系统集成,一般XML和JSON技术是系统间通信标准的首选。,21,表4-2网站开发技术列表,22,4.2.1网站开发技术分类,对应于各种开发技术,都有一些常用的开发工具,例如:一般网页制作最常用的是Dreamweaver,动画制作最常用的是Flash,图片处理软件最常用的是Photoshop。.NET专用开发平台是Microsoft Visual Studio,Eclipse,Eclipse、MyEclipse等是与Java语言有关的平台,而PHP的开发
14、常用Zend Studio等,开发电子商务系统(网站)要根据实际情况选用不同的技术和开发工具。,23,4.2.2 HTML和CSS,1)HTML语言 HTML是超文本标记语言(HyperText Markup Language)的缩写,HTML文件(即网页的源文件)是一个放置了标记的纯文本(ASCII码)文件,通常的扩展名为.html或.htm。自1990年以来HTML就一直被用作WEB的信息表示语言,用于描述网页的格式设计和它与WEB上其它网页的连结信息。一个HTML文档是由一系列的元素和标签组成,这些标签均由符号以及一个字符串组成,不区分大小写。使用HTML语言描述的文件,需要通过WEB浏
15、览器显示出效果,浏览器的功能是对标记进行解释,显示出文字、图像、动画、播放声音。HTML的最新版本是H5,用H5搭建的站点与应用可以兼容PC端与移动端、Windows与Linux、安卓与IOS,它可以轻易地移植到各种不同的开放平台、应用平台上。,24,4.2.2 HTML和CSS,下面是一个最基本的html文档的代码:-开始标签-头标签电子商务实验网-定义文件标题-头标签结束-体标签开始欢迎访问本网站-插入图片-超链接想查看HTML教程,点击这里-体标签结束-结尾标签,25,4.2.2 HTML和CSS,2)CSS CSS是英文Cascading Style Sheets的缩写,一般中译为级联
16、样式表或层叠样式表,是能够实现网页表现与内容分离的一种样式设计语言,有较强的易读性。相对于传统HTML,CSS能够对网页中对象的位置排版进行像素级的精确控制,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS+DIV是一种网页布局方法,它用CSS控制DIV进行布局,DIV是HTML语言里的一个标签元素,属于布局元素。与传统中通过表格(Table)布局定位的方式不同,它可以实现网页页面内容与表现相分离。,26,4.2.3 动态网站实现技术,ASP、JSP和PHP实现服务端动态的方式是一致的,都是通过在HTML代码中嵌入代码,然后在服务器端的
17、容器中执行,用执行结果来替换代相关代码,最后将完整的HTML结果发送给客户端,所以客户端浏览器不需要任何附加的软件支持。其中ASP是较常用的一种动态建站技术,它通常运行在微软的IIS服务器平台上,PHP(Personal Home Page)是一种跨平台的服务器端嵌入式脚本语言。直接在HTML中写代码的方式虽然简单,但是无法满足企业级应用开发需求,因此集成各种开发资源和工具的开发平台应运而生,目前比较普及的有.NET和J2EE两大平台,他们都分别由一系列的技术构成。如.NET一般支持ASP.NET,C#.NET等,而依据JAVA语言更发展出了许多开源的WEB应用开发框架,如Struts、Spr
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 电子商务 系统 开发 建设 课件
![提示](https://www.31ppt.com/images/bang_tan.gif)
链接地址:https://www.31ppt.com/p-3360571.html