电子商务网站建设与维护.ppt

电子商务网站建设与维护,1.1电子商务概述,建立电子商务网站是走向电子商务的第一步。1.1.1电子商务的概念电子商务（EC，electroniccommerce）：通过电子手段来建立一种新的经济秩序；是具有商业活动能力的实体进行的网络化、数字化的商业贸易活动。,1.1.2电子商务网站的特点、分类,电子商务网站是电子商务系统工作的主要承担者与表现者（窗口，交互平台）由一系列网页、编程技术、后台数据库构成有广告宣传、经销代理、运输中介等作用,1.1.2电子商务网站的特点、分类,电子商务网站的特点P2商务性服务性集成性可扩展性安全性协调性,1.1.2电子商务网站的特点、分类,按照商务目的和业务功能分类P3按照构建网站的主体分类P4按照网站拥有的者职能分类P4按照产品线的宽度和深度分类P5按照电子商务模式分类P5,1.2网站开发综述,1.结构化系统开发方法P62.原型法P83.面向对象的系统开发方法P9,1.2网站开发综述,1.2.2电子商务网站开发核心技术Web技术（IIS等）标记语言技术（静态页面HTML、XML）数据库技术（数据存储和检索Oracle、SQLServer）动态网页技术（可交互ASP、PHP、JSP）,1.3电子商务网站的运行环境,案例1.1海尔集团P13,HTML基础P60,例简单的HTML文档标签威海欢迎您！标题部分这里是威海职业学院！网页主体标签成对出现：每对标签有特定含义,HTML基础常用标记,：换行单标记Size：设置字体的显示字号，范围是从“17”，其中“3”是默认值。Color：设置文本的颜色，值可以是颜色名（英文如red代表红色）或颜色的十六进制代码（#000000代表黑色，#FFFFFF代表白色）。Face：设置文本显示的字体，值为字体的名称,HTML基础常用标记,背景色的属性(黑体)，（斜体），（加下划线）,HTML基础P62,例3.2加水平线，单标签定义绝对长度像素定义相对长度百分比例3.3颜色法1：Color=red法2：Color=#RRGGBB十六进制法3：Color=rgb(RRR,GGG,BBB)十进制0255,HTML基础P65,Body部分的使用方法bgcolorlinkalinkvlinkleftmargintopmargin,HTML基础P66,例3.5定义标题最大最小对齐方式如：centerright,HTML基础P68,例3.63.7文本按原有格式输出例3.8表格定义表格定义表格行定义表格头的列定义表格头定义表格身体定义表格身体的列,HTML基础,查看网页源代码：“查看”菜单源文件动态网页：主页心理健康*.asp主页08招生录取查询静态网页：*.htm,HTML练习,1.文件名为shi.htm，网页标题为“李白的诗”，内容及格式为：独坐敬亭山唐李白众鸟高飞尽，孤云独去闲。相看两不厌，只有敬亭山。题目蓝色、加下划线，其余诗句红色，全部居中，背景不是白色，加一条长度为100像素的水平线。,HTML练习,2.文件名为chengji.htm，网页标题为“成绩”，网页内容为如下表格，边框宽度为1：,2.1网站的需求分析,来自于客户的需求或出于公司自身发展的需求。网站需求分析的4个阶段：用户调查市场调查编制网站功能描述书评审,2.1网站的需求分析,2.1.2用户调查P17调查的形式：调查的主要内容：调查结束后，要编写用户调查报告,2.1网站的需求分析,2.1.3市场调查P18目标客户的调查与分析（个体用户、公司用户）付款方式、送货方式、年龄、兴趣、文化程度等竞争对手的调查与分析研究竞争对手网站运行和电子商务运作效果市场定位分析P20,2.1网站的需求分析,2.1.4网站功能描述书P22主要内容：概要情况调查内容说明调查资料汇编,2.2网站规划,2.2.1网站规划是指在网站建设前对市场进行分析、确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。,2.2网站规划,2.2.3网站规划的类型宣传网站模式P27宣传企业形象、产品等，电子宣传手册或广告牌企业门户网站模式P27登录到这上网站，即可得到企业或商家提供的所有服务内部管理网站模式P28是企业的网上办公平台,2.2网站规划,2.2.3网站规划的类型BtoC网站模式P29图2.5当当网上商城BtoB网站模式P30图2.7阿里巴巴主要实体：卖方企业、买方企业、银行、海关等电子政务网站模式P32政务公开、网上办公,3.3.2ASP简介P75,ASP：ActiveServerPages，即活动服务器页面在服务器端执行可用记事本编辑需安装IIS默认文件夹：C:Interpubwwwroot访问方式：http:/localhost/*.asp或/*.asp生成一个HTML文件，送回客户端浏览器,3.3.2ASP简介,ASP的语法简介P76ASP的默认脚本语言：VBScriptASP文件中主要包括如下内容：HTML标记；VBScript或JScript语言的程序代码；ASP代码（标记包含的部分）,3.3.2ASP简介,ASP工作原理,3.3.2ASP简介,赋值：变量名值，把右侧的值赋给左侧的变量如：sum=15sum=29例：3.6now：VBScript函数例：3.7循环结构color=#0000ffASP技术,5.4IIS应用P177,IIS：InternetInformationServer（Service）主要功能：Web服务器FTP服务器SMTPNNTP安装控制面板添加/删除程序Windows组件,5.4IIS应用,右击“我的电脑”管理Internet信息服务新建站点P180设置Web站点属性P187IP地址（一台服务器可以有多个IP）端口号（默认为80，端口号065535，如不是80，访问时要指明端口：8080）主目录（默认为C:Interpubwwwroot）访问权限,5.4IIS应用,创建虚拟目录P184虚拟目录名确定具体文件夹如：虚拟目录名：myweb具体文件夹：E：shanwuwyy那么访问该文件夹下的wh.asp的地址为：http:/localhost/myweb/wh.asp,VBScript基础,赋值i=sum=0i=i+1sum=sum+iFor循环for变量初值to终值step步长next,VBScript基础,例1：j=0ForI=3to20step3j=j+1Next例2：j=1ForI=100to30step-10j=j1next,VBScript基础,标签网页标题标题部分代码,VBScript基础,例3学习VBScriptj=0ForI=3to20step3j=j+1NextMsgboxj弹出消息框，输出变量j的值，输出文字加“”,VBScript基础,练习求1100的和。（5050）,VBScript基础,Dowhileloop循环Dowhile(条件)例：i=2dowhileI=5I=I*2looploop条件为真执行循环msgboxi的值是background-color:#00ff00,练习,制作包含如下内容的表单（参考例3.18）乳品用户调查表：姓名：密码：月收入：1000以下1000300030005000学历：（大专、本科、研究生、博士）您喜欢的产品：酸奶液态奶奶酪上传文件：建议：,提交,取消,表格的使用,作用：定位文本、排列数据操作：插入表格单元格内可添加：图像、文本、表格选择表格P110法：单击任一边框线法：单击某一单元格，Ctrl+A两次法：单击某一单元格，单击左下角,表格的使用,选择行（多行）：光标置于行首选择列（多列）：光标置于列顶选择多个单元格：按Ctrl单击拆分/合并单元格,练习,1.新建一个网页，命名为“index.htm”，要求标题栏显示“音乐网”，背景颜色为淡绿色。2.在网页中插入一个3行5列的表格，表格居中,第一行内容为“学院、新闻、音乐、教育、校友录”，其中“学院”链接到“威海职业学院首页”。3.在网页中制作一个滚动的字幕，内容为“音乐网欢迎你！”。4.在网页中插入跳转菜单，菜单项包括“新浪、百度、威海职业学院”。5.在网页中输入“与我联系”，单击该文字可以打开能够给你发邮件的程序窗口。,练习,制作包含如下内容的表单（参考例3.18）乳品用户调查表：姓名：密码：月收入：1000以下1000300030005000学历：（大专、本科、研究生、博士）您喜欢的产品：酸奶液态奶奶酪上传文件：建议：,提交,取消,框架页面,创建框架页面法1：框架工具栏法2：文件新建框架集增加框架法1：框架工具栏法2：直接从外边框向内拉删除框架拖动边框至外边框,框架页面,保存框架（每个框架是一个网页文件，另有一个总框架页）单个框架：光标定位在框架内，文件保存框架总框架页：单击边框，文件保存框架页设置框架选择单个框架：按Alt单击该框架内部属性面板中（框架名、可否调整框架大小、是否有滚动条等）超链接的显示位置,框架练习,1.新建一个网页，该网页包含上下两个框架，上边框架页命名为“k1.htm”，下边框架页命名为“k2.htm”，整个框架命名为“zong.htm”。2.在上边框架中插入一幅图片（自选），单击该图片可以链接到“新浪”，并显示在下边框架内。3.在上边框架中输入“用户调查”，单击该文字链接到“百度”，并以新窗口显示。,层（网页布局工具）,可移动、可重叠的网页部分插入层：插入层层属性：背景色、大小、位置、Z轴（数值越大越靠前）等例1：层内滚动字幕例2：浮动图片插入层层内插入图片修改时间轴增加对象到时间轴设置起止点（第1帧、最后1帧）位置（路径可以是曲线，插入关键帧）,首选参数P89,编辑菜单参数选择层练习在网页中插入一个层，层背景设为粉黄色，在层中制作一个滚动的字幕效果，内容为“欢迎你！”，其中“”为你的中文姓名。,对象行为,一个行为是由一个事件所触发的动作组成的。行为动作：如弹出消息框、弹出窗口、播放音乐等行为事件：如onMouseOver（鼠标经过时）onMouseOut（鼠标离开时）onClick（鼠标单击时）onLoad（网页载入时）打开行为面板法1：窗口行为法2：Shift+F3,对象行为,例1：打开网页时弹出新窗口本页面保存为index.htm弹出的页面保存为pop.htm（名字不含汉字）在index.htm页面，窗口行为单击“”打开浏览器窗口事件onload,对象行为,例2：弹出提示信息（如当鼠标滑过、单击、双击文本、图片等时）选中图片（如果是文本，需要作空链接）窗口行为单击“”弹出信息事件onmousemove（onclick）（例：禁止复制时弹出信息，事件：onBeforeCopy）,对象行为,例3：设置状态条文本选中图片（文本需要作空链接）窗口行为单击“”设置文本设置状态条文本事件onmousemove（鼠标指向对象时状态条的内容）事件onmouseout（鼠标离开对象时状态条的内容）,对象行为,例4：给图片加文字提示（设置层文本）插入图片（或文字）插入层选中图片窗口行为单击“”设置文本设置层文本（输入提示内容）事件onmouseover（鼠标指向图片时显示提示内容）单击“”设置文本设置层文本（内容为空）事件onmouseout（鼠标离开图片时提示内容消失）,对象行为,例5：拖动层（图片）（如拼图游戏）插入3个层在层中分别插入图片窗口行为单击“”拖动层选择层设为：移动不限制事件onmouseover（可以拖动该层即图片）,对象行为,例6：弹出式菜单插入一个表格（如1行3列）选中“第一项”，做空链接#窗口行为单击“”显示弹出式菜单设置菜单项（“缩进项”，可以设置子菜单）,对象行为,例7：打开窗口时播放声音窗口行为单击“”播放声音选择声音文件（文件名不含汉字）事件onStart单击插件属性面板参数LOOPtrue，AUTOSTARTtrueHIDDEN（是否在网页中显示播放器）,CSSP113,CSS（CascadingStyleSheets）层叠样式表功能使多个网页快速获得一致的布局使网页更精炼（网页文件更小）CSS面板法1：窗口CSS样式法2：Shift+F11,CSSP113,新建CSS样式窗口CSS样式单击新建CSS样式给当前CSS样式命名（以.开头，如.css1）保存为文件，如mycss.css（此类型文件为文本文件，可用记事本打开）设置具体的CSS样式（8个分类）（一个*.css文件可包含多个CSS样式，如mycss.css包含.css1、.css2、.css3）,CSSP113,将已有CSS样式应用于其他网页打开其他网页文件窗口CSS样式单击附加样式表选择CSS样式表文件（*.css）,创建站点P90,站点菜单新建站点站点名称（只作识别用）是否使用服务器技术如何连接到测试服务器用什么URL浏览站点根目录是否启用存回和取出文件完成,简单的电子商务网站,模块一：用户管理P117用户登录登录信息验证新用户注册用户信息修改模块二：商品展示和查询显示商品信息允许用户查询商品销售排行,简单的电子商务网站,模块三：购物车和订单生成订购商品购物车管理收银结算生成订单订单投诉,用户管理模块建设P119,1.数据库设计（Access2000）启动Access2000新建数据库存为“db.mdb”双击“使用设计器创建表”表结构如P120图4.7文件保存表名为“member”,用户管理模块建设P120,2.用户登录界面设计新建一个站点，站点保存在E:shangwuN下在IIS中将E:shangwuN设置为主目录建立index.asp界面如图4.8代码P121,用户管理模块建设P122,3.验证用户登录信息的页面设计创建login.asp代码P123,用户管理模块建设P124,4.新用户注册页面设计创建reg.asp表单P124创建客户端验证文件：regsave.asp代码P126P130,数据库连接,1.准备好一个Access数据库（shangpin.mdb），并添加记录2.创建数据源控制面板管理工具数据源（ODBC）系统工具（SYSTEMDSN）添加MicrosoftAccessDriver(*.mdb)完成数据源名（如：mydsn）选择（已准备好的Access数据库）确定确定,数据库连接,3.创建站点4.设置IIS（主目录）5.创建动态ASP页（如lx.asp）6.窗口“数据库”面板7.“数据库”面板数据源名称8.连接名称（如：mylink）数据源名称（选择已创建的数据源，mydsn）（测试）确定数据库连接已完成,在页面中显示数据库中的记录,1.建立记录集窗口“绑定”面板记录集（查询）名称（如：Recordset1）连接（已创建的连接，如：mylink）选择字段（测试）确定2.在ASP页面中，添加表格（1行4列）3.将绑定”面板中的字段逐一拖动到单元格中4.F12预览目前只显示一条记录,在页面中显示数据库中的记录,5.重复区域选中表格窗口“服务器行为”面板重复区域记录集（如：Recordset1）一页显示的记录条数确定6.F12预览,在页面中向数据库中的增加记录,在前一个练习的基础上继续进行1.建立用于输入数据的表单添加记录,在页面中向数据库中的增加记录,2.设置6个单行文本域的属性文本域名称，如条码文本域，名称为：tiaoma品名文本域，名称为：pinming产地文本域，名称为：chandi价格文本域，名称为：jiage日期文本域，名称为：riqi库存文本域，名称为：kucun,在页面中向数据库中的增加记录,3.插入记录窗口“服务器行为”面板插入记录选择连接（如：mylink）插入到表格（detail）获取值自（form1）表单元素（每个表单项对应插入的字段）确定4.F12预览5.在页面中输入数据，单击（插入数据可显示）6.设置检验主键数据（条码字段）是否重复窗口“服务器行为”面板用户身份验证/检查新用户名选择字段（如：tiaoma）确定,插入,页面中的分页显示,在前一个练习的基础上继续进行1.在页面下部输入“始页前1页后1页末页”2.选中“始页”窗口“服务器行为”面板记录集分页/移至第一条记录选择记录集（如：Recordset1）确定3.选中“前1页”窗口“服务器行为”面板记录集分页/移至前一条记录选择记录集（如：Recordset1）确定4.选中“后1页”窗口“服务器行为”面板记录集分页/移至下一条记录选择记录集（如：Recordset1）确定,页面中的分页显示,5.选中“末页”窗口“服务器行为”面板记录集分页/移至最后一条记录选择记录集（如：Recordset1）确定完善页面（如：显示第1页时不出现“始页前1页”）6.选中“始页”“前1页”窗口“服务器行为”面板显示区域/如果不是第一条记录则显示选择记录集（如：Recordset1）确定7.“末页”“后1页”，同理。,网站测试P207,一、功能测试1、链接测试：链接测试可分为三个方面。首先，测试所有链接是否按指示的那样确实链接到了该链接的页面；其次，测试所链接的页面是否存在；最后，保证Web应用系统上没有孤立的页面，所谓孤立页面是指没有链接指向该页面，只有知道正确的URL地址才能访问。,网站测试,2、表单测试当用户给Web应用系统管理员提交信息时，就需要使用表单操作，例如用户注册、登陆、信息提交等。在这种情况下，我们必须测试提交操作的完整性，以校验提交给服务器的信息的正确性。例如：用户填写的出生日期与职业是否恰当，填写的所属省份与所在城市是否匹配等。如果使用了默认值，还要检验默认值的正确性。如果表单只能接受指定的某些值，则也要进行测试。例如：只能接受某些字符，测试时可以跳过这些字符，看系统是否会报错。,网站测试,3、设计语言测试Web设计语言版本的差异可以引起客户端或服务器端严重的问题，例如使用哪种版本的HTML等。当在分布式环境中开发时，开发人员都不在一起，这个问题就显得尤为重要。除了HTML的版本问题外，不同的脚本语言，例如Java、JavaScript、ActiveX、VBScript或Perl等也要进行验证。,网站测试,4、数据库测试在Web应用技术中，数据库起着重要的作用，数据库为Web应用系统的管理、运行、查询和实现用户对数据存储的请求等提供空间。在Web应用中，最常用的数据库类型是关系型数据库，可以使用SQL对信息进行处理。在使用了数据库的Web应用系统中，一般情况下，可能发生两种错误，分别是数据一致性错误和输出错误。数据一致性错误主要是由于用户提交的表单信息不正确而造成的，而输出错误主要是由于网络速度或程序设计问题等引起的，针对这两种情况，可分别进行测试。,网站测试,二、性能测试1、连接速度测试用户连接到Web应用系统的速度根据上网方式的变化而变化，他们或许是电话拨号，或是宽带上网。当下载一个程序时，用户可以等较长的时间，但如果仅仅访问一个页面就不会这样。如果Web系统响应时间太长（例如超过5秒钟），用户就会因没有耐心等待而离开。另外，有些页面有超时的限制，如果响应速度太慢，用户可能还没来得及浏览内容，就需要重新登陆了。而且，连接速度太慢，还可能引起数据丢失，使用户得不到真实的页面。,网站测试,2、负载测试负载测试是为了测量Web系统在某一负载级别上的性能，以保证Web系统在需求范围内能正常工作。负载级别可以是某个时刻同时访问Web系统的用户数量，也可以是在线数据处理的数量。例如：Web应用系统能允许多少个用户同时在线？如果超过了这个数量，会出现什么现象？Web应用系统能否处理大量用户对同一个页面的请求？,网站测试,三、可用性测试1、导航测试在一个页面上放太多的信息往往起到与预期相反的效果。Web应用系统的用户趋向于目的驱动，很快地扫描一个Web应用系统，看是否有满足自己需要的信息，如果没有，就会很快地离开。很少有用户愿意花时间去熟悉Web应用系统的结构，因此，Web应用系统导航帮助要尽可能地准确。导航的另一个重要方面是Web应用系统的页面结构、导航、菜单、连接的风格是否一致。确保用户凭直觉就知道Web应用系统里面是否还有内容，内容在什么地方。,网站测试,2、图形测试在Web应用系统中，适当的图片和动画既能起到广告宣传的作用，又能起到美化页面的功能。一个Web应用系统的图形可以包括图片、动画、边框、颜色、字体、背景、按钮等。图形测试的内容有：（1）要确保图形有明确的用途，图片或动画不要胡乱地堆在一起，以免浪费传输时间。Web应用系统的图片尺寸要尽量地小，并且要能清楚地说明某件事情，一般都链接到某个具体的页面。（2）验证所有页面字体的风格是否一致。（3）背景颜色应该与字体颜色和前景颜色相搭配。（4）图片的大小和质量也是一个很重要的因素，一般采用JPG或GIF压缩。,网站测试,3、内容测试内容测试用来检验Web应用系统提供信息的正确性、准确性和相关性。信息的正确性是指信息是可靠的还是误传的。例如，在商品价格列表中，错误的价格可能引起财政问题甚至导致法律纠纷；信息的准确性是指是否有语法或拼写错误。这种测试通常使用一些文字处理软件来进行，例如使用MicrosoftWord的拼音与语法检查功能；信息的相关性是指是否在当前页面可以找到与当前浏览信息相关的信息列表或入口，也就是一般Web站点中的所谓相关文章列表。,网站测试,四、客户端兼容性测试1、平台测试市场上有很多不同的操作系统类型，最常见的有Windows、Unix、Macintosh、Linux等。Web应用系统的最终用户究竟使用哪一种操作系统，取决于用户系统的配置。这样，就可能会发生兼容性问题，同一个应用可能在某些操作系统下能正常运行，但在另外的操作系统下可能会运行失败。因此，在Web系统发布之前，需要在各种操作系统下对Web系统进行兼容性测试。,网站测试,2、浏览器测试浏览器是Web客户端最核心的构件，来自不同厂商的浏览器对Java、JavaScript、ActiveX、plug-ins或不同的HTML规格有不同的支持。例如，ActiveX是Microsoft的产品，是为InternetExplorer而设计的，JavaScript是Netscape的产品，Java是Sun的产品等等。另外，框架和层次结构风格在不同的浏览器中也有不同的显示，甚至根本不显示。不同的浏览器对安全性和Java的设置也不一样。,网站测试,五、安全性测试（1）现在的Web应用系统基本采用先注册，后登陆的方式。因此，必须测试有效和无效的用户名和密码，要注意到是否大小写敏感，可以试多少次的限制，是否可以不登陆而直接浏览某个页面等。（2）Web应用系统是否有超时的限制，也就是说，用户登陆后在一定时间内（例如15分钟）没有点击任何页面，是否需要重新登陆才能正常使用。(3）为了保证Web应用系统的安全性，日志文件是至关重要的。需要测试相关信息是否写进了日志文件、是否可追踪。,网站测试,Dreamweaver中测试