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

1、电子商务网站 建设与维护,1.1 电子商务概述,建立电子商务网站是走向电子商务的第一步。 1.1.1 电子商务的概念 电子商务（EC，electronic commerce）：通过电子手段来建立一种新的经济秩序；是具有商业活动能力的实体进行的网络化、数字化的商业贸易活动。,1.1.2 电子商务网站的特点、分类,电子商务网站是电子商务系统工作的主要承担者与表现者（窗口，交互平台） 由一系列网页、编程技术、后台数据库构成 有广告宣传、经销代理、运输中介等作用,1.1.2 电子商务网站的特点、分类,电子商务网站的特点 P2 商务性 服务性 集成性 可扩展性 安全性 协调性,1.1.2 电子商务网站的

2、特点、分类,按照商务目的和业务功能分类 P3 按照构建网站的主体分类 P4 按照网站拥有的者职能分类 P4 按照产品线的宽度和深度分类 P5 按照电子商务模式分类 P5,1.2 网站开发综述,1.结构化系统开发方法 P6 2.原型法 P8 3.面向对象的系统开发方法 P9,1.2 网站开发综述,1.2.2 电子商务网站开发核心技术 Web技术（IIS等） 标记语言技术（静态页面HTML、XML） 数据库技术（数据存储和检索Oracle、SQL Server） 动态网页技术（可交互ASP、PHP、JSP）,1.3电子商务网站的运行环境,案例1.1 海尔集团P13 ,HTML基础 P60,例 简单

3、的HTML文档 标签 威海欢迎您！ 标题部分 这里是威海职业学院！ 网页主体 标签成对出现 ： 每对标签有特定含义,HTML基础 常用标记,：换行 单标记 Size：设置字体的显示字号，范围是从“17”，其中“3”是默认值。 Color：设置文本的颜色，值可以是颜色名（英文如red代表红色）或颜色的十六进制代码（#000000代表黑色，#FFFFFF代表白色）。 Face：设置文本显示的字体，值为字体的名称,HTML基础 常用标记, 背景色 的属性 (黑体)， （斜体）， （加下划线）,HTML基础 P62,例3.2 加水平线，单标签 定义绝对长度 像素 定义相对长度 百分比 例3.3 颜色

4、法1： Color=red 法2： Color=#RRGGBB 十六进制 法3： Color=rgb(RRR,GGG,BBB) 十进制 0255,HTML基础 P65,Body部分的使用方法 bgcolor link alink vlink leftmargin topmargin,HTML基础 P66,例3.5 定义标题 最大 最小 对齐方式 如： center right,HTML基础 P68,例 3.6 3.7 文本按原有格式输出 例3.8 表格 定义表格 定义表格行 定义表格头的列 定义表格头 定义表格身体 定义表格身体的列,HTML基础,查看网页源代码：“查看”菜单源文件 动态网页：

5、主页心理健康 *.asp 主页08招生录取查询 静态网页： *.htm,HTML练习,1.文件名为shi.htm，网页标题为“李白的诗”，内容及格式为： 独坐敬亭山唐李白众鸟高飞尽，孤云独去闲。相看两不厌， 只有敬亭山。 题目蓝色、加下划线，其余诗句红色，全部居中，背景不是白色，加一条长度为100像素的水平线。,HTML练习,2.文件名为chengji.htm，网页标题为“成绩”，网页内容为如下表格，边框宽度为1：,2.1网站的需求分析,来自于客户的需求或出于公司自身发展的需求。 网站需求分析的4个阶段： 用户调查 市场调查 编制网站功能描述书 评审,2.1网站的需求分析,2.1.2用户调查

6、P17 调查的形式： 调查的主要内容： 调查结束后，要编写用户调查报告,2.1网站的需求分析,2.1.3市场调查 P18 目标客户的调查与分析（个体用户、公司用户） 付款方式、送货方式、年龄、兴趣、文化程度等 竞争对手的调查与分析 研究竞争对手网站运行和电子商务运作效果 市场定位分析 P20,2.1网站的需求分析,2.1.4网站功能描述书 P22 主要内容： 概要情况 调查内容说明 调查资料汇编,2.2网站规划,2.2.1网站规划 是指在网站建设前对市场进行分析、确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。,2.2网站规划,2.2.3网站规划的类型 宣

7、传网站模式P27 宣传企业形象、产品等，电子宣传手册或广告牌 企业门户网站模式P27 登录到这上网站，即可得到企业或商家提供的所有服务 内部管理网站模式P28 是企业的网上办公平台,2.2网站规划,2.2.3网站规划的类型 B to C网站模式P29 图2.5当当网上商城 B to B网站模式P30 图2.7阿里巴巴 主要实体：卖方企业、买方企业、银行、海关等 电子政务网站模式P32 政务公开、网上办公,3.3.2ASP简介P75,ASP：Active Server Pages，即活动服务器页面 在服务器端执行 可用记事本编辑 需安装IIS 默认文件夹：C:Interpubwwwroot 访问

8、方式：http:/localhost/*.asp 或/*.asp 生成一个HTML文件，送回客户端浏览器,3.3.2ASP简介,ASP的语法简介P76 ASP的默认脚本语言：VBScript ASP文件中主要包括如下内容： HTML标记； VBScript或JScript语言的程序代码； ASP代码（标记包含的部分）,3.3.2ASP简介,ASP工作原理,3.3.2ASP简介,赋值：变量名值，把右侧的值赋给左侧的变量 如：sum=15 sum=29 例：3.6 now：VBScript函数 例：3.7 循环结构 color=#0000ffASP技术 ,5.4 II

9、S应用 P177,IIS：Internet Information Server（Service） 主要功能： Web服务器 FTP服务器 SMTP NNTP 安装 控制面板添加/删除程序Windows组件,5.4 IIS应用,右击“我的电脑” 管理Internet信息服务 新建站点 P180 设置Web站点属性 P187 IP地址（一台服务器可以有多个IP） 端口号（默认为80，端口号0 65535，如不是80，访问时要指明端口：8080） 主目录（默认为C:Interpubwwwroot ） 访问权限,5.4 IIS应用,创建虚拟目录 P184 虚拟目录名确定具体文件夹 如：虚拟目录名：m

10、yweb 具体文件夹：E：shanwuwyy 那么访问该文件夹下的wh.asp的地址为： http:/localhost/myweb/wh.asp,VBScript基础,赋值 i=sum=0 i=i+1 sum=sum+i For 循环 for 变量初值 to 终值 step 步长 next,VBScript基础,例1： j=0 For I =3 to 20 step 3 j=j+1 Next 例2： j=1 For I =100 to 30 step -10 j=j1 next,VBScript基础, 标签 网页标题 标题部分 代码 ,VBScript基础,例3 学习VBScript j=0

11、 For I =3 to 20 step 3 j=j+1 Next Msgbox j 弹出消息框，输出变量j的值，输出文字加“” ,VBScript基础,练习 求1100的和。（5050）,VBScript基础,Do whileloop循环 Do while(条件) 例：i=2 do while I=5 I=I*2 loop loop 条件为真执行循环 msgbox i的值是background-color:#00ff00,练习,制作包含如下内容的表单（参考例3.18） 乳品用户调查表： 姓名： 密码： 月收入： 1000以下 1000300030005000 学历： （大专、本科、研究生、博

12、士） 您喜欢的产品： 酸奶 液态奶 奶酪 上传文件： 建议：,提交,取消,表格的使用,作用：定位文本、排列数据 操作：插入表格 单元格内可添加：图像、文本、表格 选择表格P110 法：单击任一边框线 法：单击某一单元格，Ctrl+A两次 法：单击某一单元格，单击左下角,表格的使用,选择行（多行）：光标置于行首 选择列（多列）：光标置于列顶 选择多个单元格：按Ctrl 单击 拆分/合并单元格,练习,1.新建一个网页，命名为“index.htm”，要求标题栏显示“音乐网”，背景颜色为淡绿色。 2.在网页中插入一个3行5列的表格，表格居中,第一行内容为“学院、新闻、音乐、教育、校友录”，其中“学院”

13、链接到“威海职业学院首页”。 3.在网页中制作一个滚动的字幕，内容为“音乐网欢迎你！” 。 4.在网页中插入跳转菜单，菜单项包括“新浪、百度、威海职业学院”。 5.在网页中输入“与我联系”，单击该文字可以打开能够给你发邮件的程序窗口。,练习,制作包含如下内容的表单（参考例3.18） 乳品用户调查表： 姓名： 密码： 月收入： 1000以下 1000300030005000 学历： （大专、本科、研究生、博士） 您喜欢的产品： 酸奶 液态奶 奶酪 上传文件： 建议：,提交,取消,框架页面,创建框架页面 法1：框架工具栏 法2：文件新建框架集 增加框架 法1：框架工具栏 法2：直接从外边框向内拉

14、删除框架 拖动边框至外边框,框架页面,保存框架（每个框架是一个网页文件，另有一个总框架页） 单个框架：光标定位在框架内，文件保存框架 总框架页：单击边框，文件保存框架页 设置框架 选择单个框架：按Alt 单击该框架内部 属性面板中（框架名、可否调整框架大小、是否有滚动条等） 超链接的显示位置,框架练习,1.新建一个网页，该网页包含上下两个框架，上边框架页命名为“k1.htm”，下边框架页命名为“k2.htm”，整个框架命名为“zong.htm”。 2.在上边框架中插入一幅图片（自选），单击该图片可以链接到“新浪”，并显示在下边框架内。 3.在上边框架中输入“用户调查”，单击该文字链接到“百度”

15、，并以新窗口显示。,层（网页布局工具）,可移动、可重叠的网页部分 插入层：插入层 层属性：背景色、大小、位置、Z轴（数值越大越靠前）等 例1：层内滚动字幕 例2：浮动图片 插入层 层内插入图片 修改时间轴增加对象到时间轴 设置起止点（第1帧、最后1帧）位置 （路径可以是曲线，插入关键帧）,首选参数P89,编辑菜单参数选择 层练习 在网页中插入一个层，层背景设为粉黄色，在层中制作一个滚动的字幕效果，内容为“欢迎你！”，其中“”为你的中文姓名。,对象行为,一个行为是由一个事件所触发的动作组成的。 行为动作：如弹出消息框、弹出窗口、播放音乐等 行为事件：如onMouseOver（鼠标经过时） onM

16、ouseOut （鼠标离开时） onClick （鼠标单击时） onLoad （网页载入时） 打开行为面板 法1：窗口行为 法2：Shift+F3,对象行为,例1：打开网页时弹出新窗口 本页面保存为index.htm 弹出的页面保存为pop.htm（名字不含汉字） 在index.htm页面，窗口行为 单击“” 打开浏览器窗口 事件onload,对象行为,例2：弹出提示信息（如当鼠标滑过、单击、双击文本、图片等时） 选中图片（如果是文本，需要作空链接 ） 窗口行为 单击“” 弹出信息 事件onmousemove（onclick） （例：禁止复制时弹出信息，事件：onBeforeCopy）,对象行

17、为,例3：设置状态条文本 选中图片（文本需要作空链接 ） 窗口行为 单击“” 设置文本设置状态条文本 事件onmousemove（鼠标指向对象时状态条的内容） 事件 onmouseout（鼠标离开对象时状态条的内容）,对象行为,例4：给图片加文字提示（设置层文本） 插入图片（或文字） 插入层 选中图片 窗口行为 单击“” 设置文本设置层文本（输入提示内容） 事件onmouseover（鼠标指向图片时显示提示内容） 单击“” 设置文本设置层文本（内容为空） 事件onmouseout（鼠标离开图片时提示内容消失）,对象行为,例5：拖动层（图片）（如拼图游戏） 插入3个层 在层中分别插入图片 窗口行

18、为 单击“” 拖动层 选择层 设为：移动不限制 事件onmouseover（可以拖动该层即图片）,对象行为,例6：弹出式菜单 插入一个表格（如1行3列） 选中“第一项”，做空链接# 窗口行为 单击“” 显示弹出式菜单 设置菜单项（“缩进项”，可以设置子菜单）,对象行为,例7：打开窗口时播放声音 窗口行为 单击“” 播放声音 选择声音文件（文件名不含汉字） 事件onStart 单击插件 属性面板参数 LOOP true，AUTOSTART true HIDDEN（是否在网页中显示播放器）,CSS P113,CSS（Cascading Style Sheets）层叠样式表 功能 使多个网页快速获得

19、一致的布局 使网页更精炼（网页文件更小） CSS面板 法1：窗口CSS样式 法2：Shift+F11,CSS P113,新建CSS样式 窗口CSS样式 单击 新建CSS样式 给当前CSS样式命名（以.开头，如.css1） 保存为文件，如mycss.css （此类型文件为文本文件，可用记事本打开） 设置具体的CSS样式（8个分类） （一个*.css文件可包含多个CSS样式，如mycss.css包含.css1、.css2、.css3 ）,CSS P113,将已有CSS样式应用于其他网页 打开其他网页文件 窗口CSS样式 单击 附加样式表 选择CSS样式表文件（*.css）,创建站点 P90,站点菜

20、单新建站点 站点名称（只作识别用） 是否使用服务器技术 如何连接到测试服务器 用什么URL浏览站点根目录 是否启用存回和取出文件 完成,简单的电子商务网站,模块一：用户管理 P117 用户登录 登录信息验证 新用户注册 用户信息修改 模块二：商品展示和查询 显示商品信息 允许用户查询 商品销售排行,简单的电子商务网站,模块三：购物车和订单生成 订购商品 购物车管理 收银结算 生成订单 订单投诉,用户管理模块建设 P119,1.数据库设计（Access 2000） 启动Access 2000 新建数据库存为“db.mdb” 双击“使用设计器创建表” 表结构 如P120 图4.7 文件保存表名为“

21、member”,用户管理模块建设 P120,2.用户登录界面设计 新建一个站点，站点保存在E:shangwuN下 在IIS中将E:shangwuN设置为主目录 建立index.asp 界面如图4.8 代码 P 121,用户管理模块建设 P122,3.验证用户登录信息的页面设计 创建login.asp 代码 P123,用户管理模块建设 P124,4.新用户注册页面设计 创建reg.asp 表单 P124 创建客户端验证文件：regsave.asp 代码 P126P130,数据库连接,1.准备好一个Access数据库（shangpin.mdb），并添加记录 2.创建数据源 控制面板管理工具数据源（

22、ODBC） 系统工具（SYSTEM DSN）添加Microsoft Access Driver (*.mdb) 完成数据源名（如：mydsn）选择（已准备好的Access数据库）确定确定,数据库连接,3.创建站点 4.设置IIS（主目录） 5.创建动态ASP页（如lx.asp） 6.窗口“数据库”面板 7. “数据库”面板 数据源名称 8.连接名称（如：mylink） 数据源名称（选择已创建的数据源，mydsn） （测试）确定 数据库连接已完成,在页面中显示数据库中的记录,1.建立记录集 窗口“绑定”面板 记录集（查询）名称（如：Recordset1） 连接（已创建的连接，如：mylink）

23、选择字段（测试） 确定 2.在ASP页面中，添加表格（1行4列） 3.将绑定”面板中的字段逐一拖动到单元格中 4.F12 预览 目前只显示一条记录,在页面中显示数据库中的记录,5.重复区域 选中表格窗口“服务器行为”面板 重复区域记录集（如：Recordset1） 一页显示的记录条数确定 6.F12 预览,在页面中向数据库中的增加记录,在前一个练习的基础上继续进行 1.建立用于输入数据的表单 添加记录,在页面中向数据库中的增加记录,2.设置6个单行文本域的属性 文本域名称，如条码文本域，名称为：tiaoma 品名文本域，名称为：pinming 产地文本域，名称为：chandi 价格文本域，名称

24、为：jiage 日期文本域，名称为：riqi 库存文本域，名称为：kucun,在页面中向数据库中的增加记录,3.插入记录 窗口“服务器行为”面板 插入记录选择连接（如：mylink） 插入到表格（detail）获取值自（form1） 表单元素（每个表单项对应插入的字段） 确定 4.F12 预览 5.在页面中输入数据，单击 （插入数据可显示） 6.设置检验主键数据（条码字段）是否重复 窗口“服务器行为”面板 用户身份验证/检查新用户名选择字段（如：tiaoma）确定,插入,页面中的分页显示,在前一个练习的基础上继续进行 1.在页面下部输入“始页 前1页 后1页 末页” 2.选中“始页”窗口“服务

25、器行为”面板 记录集分页/移至第一条记录选择记录集（如：Recordset1）确定 3.选中“前1页”窗口“服务器行为”面板 记录集分页/移至前一条记录选择记录集（如：Recordset1）确定 4.选中“后1页”窗口“服务器行为”面板 记录集分页/移至下一条记录选择记录集（如：Recordset1）确定,页面中的分页显示,5.选中“末页”窗口“服务器行为”面板 记录集分页/移至最后一条记录选择记录集（如：Recordset1）确定 完善页面 （如：显示第1页时不出现“始页 前1页”） 6.选中“始页”“前1页”窗口“服务器行为”面板 显示区域/如果不是第一条记录则显示选择记录集（如：Reco

26、rdset1）确定 7.“末页”“后1页”，同理。,网站测试P207,一、功能测试 1、链接测试： 链接测试可分为三个方面。首先，测试所有链接是否按指示的那样确实链接到了该链接的页面；其次，测试所链接的页面是否存在；最后，保证Web应用系统上没有孤立的页面，所谓孤立页面是指没有链接指向该页面，只有知道正确的URL地址才能访问。,网站测试,2、表单测试 当用户给Web应用系统管理员提交信息时，就需要使用表单操作，例如用户注册、登陆、信息提交等。在这种情况下，我们必须测试提交操作的完整性，以校验提交给服务器的信息的正确性。例如：用户填写的出生日期与职业是否恰当，填写的所属省份与所在城市是否匹配等。

27、如果使用了默认值，还要检验默认值的正确性。如果表单只能接受指定的某些值，则也要进行测试。例如：只能接受某些字符，测试时可以跳过这些字符，看系统是否会报错。,网站测试,3、设计语言测试 Web设计语言版本的差异可以引起客户端或服务器端严重的问题，例如使用哪种版本的HTML等。当在分布式环境中开发时，开发人员都不在一起，这个问题就显得尤为重要。除了HTML的版本问题外，不同的脚本语言，例如Java、JavaScript、ActiveX、VBScript或Perl等也要进行验证。,网站测试,4、数据库测试 在Web应用技术中，数据库起着重要的作用，数据库为Web应用系统的管理、运行、查询和实现用户对

28、数据存储的请求等提供空间。在Web应用中，最常用的数据库类型是关系型数据库，可以使用SQL对信息进行处理。 在使用了数据库的Web应用系统中，一般情况下，可能发生两种错误，分别是数据一致性错误和输出错误。数据一致性错误主要是由于用户提交的表单信息不正确而造成的，而输出错误主要是由于网络速度或程序设计问题等引起的，针对这两种情况，可分别进行测试。,网站测试,二、性能测试 1、连接速度测试 用户连接到Web应用系统的速度根据上网方式的变化而变化，他们或许是电话拨号，或是宽带上网。当下载一个程序时，用户可以等较长的时间，但如果仅仅访问一个页面就不会这样。如果Web系统响应时间太长（例如超过5秒钟），

29、用户就会因没有耐心等待而离开。 另外，有些页面有超时的限制，如果响应速度太慢，用户可能还没来得及浏览内容，就需要重新登陆了。而且，连接速度太慢，还可能引起数据丢失，使用户得不到真实的页面。,网站测试,2、负载测试 负载测试是为了测量Web系统在某一负载级别上的性能，以保证Web系统在需求范围内能正常工作。负载级别可以是某个时刻同时访问Web系统的用户数量，也可以是在线数据处理的数量。例如：Web应用系统能允许多少个用户同时在线？如果超过了这个数量，会出现什么现象？Web应用系统能否处理大量用户对同一个页面的请求？,网站测试,三、可用性测试 1、导航测试 在一个页面上放太多的信息往往起到与预期相

30、反的效果。Web应用系统的用户趋向于目的驱动，很快地扫描一个Web应用系统，看是否有满足自己需要的信息，如果没有，就会很快地离开。很少有用户愿意花时间去熟悉Web应用系统的结构，因此，Web应用系统导航帮助要尽可能地准确。 导航的另一个重要方面是Web应用系统的页面结构、导航、菜单、连接的风格是否一致。确保用户凭直觉就知道Web应用系统里面是否还有内容，内容在什么地方。,网站测试,2、图形测试 在Web应用系统中，适当的图片和动画既能起到广告宣传的作用，又能起到美化页面的功能。一个Web应用系统的图形可以包括图片、动画、边框、颜色、字体、背景、按钮等。图形测试的内容有： （1）要确保图形有明确

31、的用途，图片或动画不要胡乱地堆在一起，以免浪费传输时间。Web应用系统的图片尺寸要尽量地小，并且要能清楚地说明某件事情，一般都链接到某个具体的页面。 （2）验证所有页面字体的风格是否一致。 （3）背景颜色应该与字体颜色和前景颜色相搭配。 （4）图片的大小和质量也是一个很重要的因素，一般采用JPG或GIF压缩。,网站测试,3、内容测试 内容测试用来检验Web应用系统提供信息的正确性、准确性和相关性。 信息的正确性是指信息是可靠的还是误传的。例如，在商品价格列表中，错误的价格可能引起财政问题甚至导致法律纠纷；信息的准确性是指是否有语法或拼写错误。这种测试通常使用一些文字处理软件来进行，例如使用Mi

32、crosoftWord的拼音与语法检查功能；信息的相关性是指是否在当前页面可以找到与当前浏览信息相关的信息列表或入口，也就是一般Web站点中的所谓相关文章列表。,网站测试,四、客户端兼容性测试 1、平台测试 市场上有很多不同的操作系统类型，最常见的有Windows、Unix、Macintosh、Linux等。Web应用系统的最终用户究竟使用哪一种操作系统，取决于用户系统的配置。这样，就可能会发生兼容性问题，同一个应用可能在某些操作系统下能正常运行，但在另外的操作系统下可能会运行失败。 因此，在Web系统发布之前，需要在各种操作系统下对Web系统进行兼容性测试。,网站测试,2、浏览器测试 浏览器

33、是Web客户端最核心的构件，来自不同厂商的浏览器对Java、JavaScript、ActiveX、plug-ins或不同的HTML规格有不同的支持。例如，ActiveX是Microsoft的产品，是为InternetExplorer而设计的，JavaScript是Netscape的产品，Java是Sun的产品等等。另外，框架和层次结构风格在不同的浏览器中也有不同的显示，甚至根本不显示。不同的浏览器对安全性和Java的设置也不一样。,网站测试,五、安全性测试 （1）现在的Web应用系统基本采用先注册，后登陆的方式。因此，必须测试有效和无效的用户名和密码，要注意到是否大小写敏感，可以试多少次的限制

34、，是否可以不登陆而直接浏览某个页面等。 （2）Web应用系统是否有超时的限制，也就是说，用户登陆后在一定时间内（例如15分钟）没有点击任何页面，是否需要重新登陆才能正常使用。 (3）为了保证Web应用系统的安全性，日志文件是至关重要的。需要测试相关信息是否写进了日志文件、是否可追踪。,网站测试,Dreamweaver中测试方式 文件检查页,数据库应用练习,创建一个Access数据库，用来存放注册用户的信息（至少包括用户名（username）、密码（password） 、出生日期（birthday） 、月收入（income） 、邮箱（email）等字段 ），名为yonghu.mdb 创建一个站点 设置IIS