第3章-电子商务网站运作方式的设计课件.ppt

1、电子商务网站建设与维护实训电子商务网站建设与维护实训第第3章章 设计电子商务网站设计电子商务网站的运作方式的运作方式 主编：宋文官，陈永东主编：宋文官，陈永东高等教育出版社高等教育出版社电子商务网站建设与维护实训电子商务网站建设与维护实训22022-11-29第第3章设计电子商务网站的运作方式章设计电子商务网站的运作方式【项目概述【项目概述】n在小王所在的网络公司为在小王所在的网络公司为ABC公司设计了公司设计了电子商务网站的栏目与风格后，需要对电子商务网站的栏目与风格后，需要对ABC公司电子商务网站进行进一步的设计。公司电子商务网站进行进一步的设计。经理布置给小王几项任务，要求小王为经理布置

2、给小王几项任务，要求小王为ABC公司网站准备网页素材，设计网站商公司网站准备网页素材，设计网站商品的展示方式、网站支付方式与配送方式，品的展示方式、网站支付方式与配送方式，并设计并设计ABC网站相关的页面。网站相关的页面。电子商务网站建设与维护实训电子商务网站建设与维护实训32022-11-29【项目分析【项目分析】设计网页时需要设计网页时需要准备哪些素材？准备哪些素材？如何设计网站商如何设计网站商品的展示方式？品的展示方式？如何设计网站的如何设计网站的支付与配送方式？支付与配送方式？如何设计网站的如何设计网站的相关网页？相关网页？电子商务网站建设与维护实训电子商务网站建设与维护实训42022

3、-11-29【任务分解【任务分解】选择网选择网站的支站的支付方式付方式设计网设计网站商品站商品的展示的展示方式方式任务任务1任务任务2 2任务任务3 3任务任务4 4设计网站设计网站的配送方的配送方式式准备网准备网页素材页素材任务任务5 5设计网站设计网站相关页面相关页面电子商务网站建设与维护实训电子商务网站建设与维护实训52022-11-29任务任务1 准备网页素材准备网页素材1准备文字素材准备文字素材 2准备图像素材准备图像素材3准备动画素材准备动画素材4准备音频素材准备音频素材5准备视频素材准备视频素材电子商务网站建设与维护实训电子商务网站建设与维护实训62022-11-291准备文字素

4、材准备文字素材 文字素材是网页设计中最基本的形式文字素材是网页设计中最基本的形式n传统线下文字素材收集传统线下文字素材收集 n通过搜索引擎查找文字素材通过搜索引擎查找文字素材 n通过从其他文档中复制文字素材通过从其他文档中复制文字素材 n通过扫描仪的文字识别功能获取文字素材通过扫描仪的文字识别功能获取文字素材 n通过文本文件过渡获取其他类型文件中的通过文本文件过渡获取其他类型文件中的文字素材文字素材 电子商务网站建设与维护实训电子商务网站建设与维护实训72022-11-292准备图像素材准备图像素材 通过搜索通过搜索引擎查找引擎查找图像素材图像素材 通过从其通过从其他文档中他文档中复制图像复制

5、图像素材素材 通过扫描通过扫描仪将图片仪将图片输入到计输入到计算机算机 通过图像处理软件处理图像素材通过图像处理软件处理图像素材 图像文件格式的转换图像文件格式的转换 通过图通过图像处理像处理软件绘软件绘制制电子商务网站建设与维护实训电子商务网站建设与维护实训82022-11-293准备动画素材准备动画素材n动画文件的种类动画文件的种类n通过搜索引擎查找动画素材通过搜索引擎查找动画素材 n通过动画处理软件制作动画素材通过动画处理软件制作动画素材 n准备三维动画素材准备三维动画素材 电子商务网站建设与维护实训电子商务网站建设与维护实训92022-11-294准备音频素材准备音频素材n声音文件的种

6、类声音文件的种类n通过搜索引擎查找声音素材通过搜索引擎查找声音素材 n通过通过“录音机录音机”程序录制声音素材程序录制声音素材 电子商务网站建设与维护实训电子商务网站建设与维护实训102022-11-295准备视频素材准备视频素材MPEG/MPEG4格式格式AVI格式格式QT格式格式MOV格式格式RM格式格式电子商务网站建设与维护实训电子商务网站建设与维护实训112022-11-29任务任务2设计网站商品的展示方式设计网站商品的展示方式 1网络商品静态图像展示网络商品静态图像展示2网络商品动态图像展示网络商品动态图像展示3网络商品视频展示网络商品视频展示4网络商品的三维展示网络商品的三维展示电

7、子商务网站建设与维护实训电子商务网站建设与维护实训122022-11-291网络商品静态图像展示网络商品静态图像展示确定要使用静态图像商品种类确定要使用静态图像商品种类,数量数量,格式格式确定要使用的静态图像的尺寸确定要使用的静态图像的尺寸确定展示的商品是否需要不同角度的照片确定展示的商品是否需要不同角度的照片选择场地，准备环境，具体拍摄照片选择场地，准备环境，具体拍摄照片将拍好的照片导入电脑，再进行处理将拍好的照片导入电脑，再进行处理电子商务网站建设与维护实训电子商务网站建设与维护实训132022-11-292网络商品动态图像展示网络商品动态图像展示n网络商品动态图像制作的主要方法与静态图像

8、制作的方法网络商品动态图像制作的主要方法与静态图像制作的方法类似。类似。n但是，动态图像一般使用但是，动态图像一般使用GIF动画或动画或FLASH的的SWF的等的等格式，更注意从不同角度、不同大小展示商品；格式，更注意从不同角度、不同大小展示商品；n同时，动态图像需要确定动态图像的展示的效果，如水平同时，动态图像需要确定动态图像的展示的效果，如水平百页窗、淡入淡出、旋转出现等。百页窗、淡入淡出、旋转出现等。n要进行商品动态图像的展示，需要掌握至少一种动画制作要进行商品动态图像的展示，需要掌握至少一种动画制作软件的使用。软件的使用。n同样，对于网络商品的动态图像展示，也应考虑不同商品同样，对于网

9、络商品的动态图像展示，也应考虑不同商品的特性，用最恰当的方式展现商品最优秀的一面。的特性，用最恰当的方式展现商品最优秀的一面。电子商务网站建设与维护实训电子商务网站建设与维护实训142022-11-293网络商品视频展示网络商品视频展示n网络商品视频制作的主要方法与静态图像制作的方法类似。网络商品视频制作的主要方法与静态图像制作的方法类似。n但是，视频一般使用但是，视频一般使用AVI、WMA、MPEG等格式；等格式；n视频一般尺寸不宜过大，以免影响将来播放的速度；视频一般尺寸不宜过大，以免影响将来播放的速度；n视频需要确定展示的效果，如镜头推近、拉远、切换、朦视频需要确定展示的效果，如镜头推近

10、、拉远、切换、朦胧等。胧等。n要进行商品视频的展示，需要掌握至少一种视频处理软件，要进行商品视频的展示，需要掌握至少一种视频处理软件，如如“超级解霸超级解霸”、“金山影霸金山影霸”、“会声会影会声会影”等。等。n对于网络商品的视频展示，也应考虑不同商品的特性，用对于网络商品的视频展示，也应考虑不同商品的特性，用最恰当的方式展现商品最优秀的一面。最恰当的方式展现商品最优秀的一面。电子商务网站建设与维护实训电子商务网站建设与维护实训152022-11-294网络商品的三维展示网络商品的三维展示三维全景虚三维全景虚拟现实拟现实虚拟组装虚拟组装室室 实景互实景互动动360度图片度图片360度全度全景摄

11、影景摄影 电子商务网站建设与维护实训电子商务网站建设与维护实训162022-11-29任务任务3：选择网站的支付方式：选择网站的支付方式 1选择第三方支付平台选择第三方支付平台 2注册并下载在线支付相关文档注册并下载在线支付相关文档 3添加网银在线支付接口添加网银在线支付接口 4选择其他的支付方式选择其他的支付方式 电子商务网站建设与维护实训电子商务网站建设与维护实训172022-11-291选择第三方支付平台选择第三方支付平台n第三方支付一般的运行模式为：第三方支付一般的运行模式为：n比较知名的有支付宝、安付通、网银在线比较知名的有支付宝、安付通、网银在线与易达信动与易达信动QPAY第三方在

12、线支付平台。第三方在线支付平台。买方选购商买方选购商品后，使用品后，使用第三方平台第三方平台提供的账户提供的账户进行货款支进行货款支付付第三方在收第三方在收到代为保管到代为保管的货款后，的货款后，通知卖家货通知卖家货款到账，要款到账，要求商家发货求商家发货买方收到买方收到货物、检货物、检验商品并验商品并确认后，确认后，通知第三通知第三方方第三方第三方将其款将其款项转划项转划至卖家至卖家账户上账户上电子商务网站建设与维护实训电子商务网站建设与维护实训182022-11-292注册并下载在线支付相关文档注册并下载在线支付相关文档n首先需要注册成为网银在线网上商户，注册完成首先需要注册成为网银在线网

13、上商户，注册完成后会获得一个商户号，用商户号可以登录后台管后会获得一个商户号，用商户号可以登录后台管理页面理页面n登录商户管理后台，资料管理登录商户管理后台，资料管理/修改私钥，并需要修改私钥，并需要登录商户管理后台，下载支付接口技术文档登录商户管理后台，下载支付接口技术文档:用于对订单敏感信息加密的加密函数包含文件。用于对订单敏感信息加密的加密函数包含文件。接口测试首页。接口测试首页。接收接口测试首页传递过来的参数的页面。接收接口测试首页传递过来的参数的页面。支付返回处理页面。支付返回处理页面。自动对帐页面。自动对帐页面。电子商务网站建设与维护实训电子商务网站建设与维护实训192022-11

14、-293添加网银在线支付接口添加网银在线支付接口n主要涉及将相关文件复制到网站的相关目录下，主要涉及将相关文件复制到网站的相关目录下，然后需要在支付页面中添加一个网银在线支付的然后需要在支付页面中添加一个网银在线支付的图片，链接到支付发送页面。图片，链接到支付发送页面。n然后需要对支付发送页面中几项参数进行简单的然后需要对支付发送页面中几项参数进行简单的修改即可接通网银在线支付网关。修改即可接通网银在线支付网关。n接下来，需要在接收支付返回页面中将接下来，需要在接收支付返回页面中将key值修值修改成自己的私钥值。改成自己的私钥值。n最后，需要和支付平台提供商在线签订服务合同。最后，需要和支付平

15、台提供商在线签订服务合同。电子商务网站建设与维护实训电子商务网站建设与维护实训202022-11-293添加网银在线支付接口添加网银在线支付接口将相关文将相关文件复制到件复制到网站的相网站的相关目录下关目录下在支付页在支付页面中添加面中添加一个网银一个网银在线支付在线支付的图片，的图片，链接到支链接到支付发送页付发送页面面对支付对支付发送页发送页面中几面中几项参数项参数进行简进行简单的修单的修改，接改，接通网银通网银在线支在线支付网关付网关需要在需要在接收支接收支付返回付返回页面中页面中将将key值修改值修改成自己成自己的私钥的私钥值值需要和需要和支付平支付平台提供台提供商在线商在线签订服签订

16、服务合同务合同电子商务网站建设与维护实训电子商务网站建设与维护实训212022-11-294选择其他的支付方式选择其他的支付方式货到付款货到付款邮局付款邮局付款银行转帐银行转帐电子商务网站建设与维护实训电子商务网站建设与维护实训222022-11-29任务任务4：设计网站的配送方式：设计网站的配送方式1划分可覆盖的配送地理范围划分可覆盖的配送地理范围2选择不同的配送方式选择不同的配送方式3设计普通送货上门配送方式的细则设计普通送货上门配送方式的细则4设计平邮配送方式的细则设计平邮配送方式的细则5设计快递配送方式的细则设计快递配送方式的细则6设计本地配送方式的细则设计本地配送方式的细则电子商务网

17、站建设与维护实训电子商务网站建设与维护实训232022-11-291划分可覆盖的配送地理范围划分可覆盖的配送地理范围n如果覆盖的配送地理范围是国内如果覆盖的配送地理范围是国内n如果覆盖的配送地理范围是全球如果覆盖的配送地理范围是全球n本地（主要指本城市）是主要的配送地理本地（主要指本城市）是主要的配送地理范围，应尽可能做到本地的全覆盖。范围，应尽可能做到本地的全覆盖。n对不同地理范围，应该分别细化讨论确定对不同地理范围，应该分别细化讨论确定更细的可覆盖范围，明确能送达的区域与更细的可覆盖范围，明确能送达的区域与不能送达的区域。不能送达的区域。电子商务网站建设与维护实训电子商务网站建设与维护实训

18、242022-11-292选择不同的配送方式选择不同的配送方式普通送普通送加急送加急送普通邮寄普通邮寄快递快递特快专递特快专递电子商务网站建设与维护实训电子商务网站建设与维护实训252022-11-293设计普通送货上门配送方式的细设计普通送货上门配送方式的细则则n应根据前期工作已经中确定的配送地理范围，确应根据前期工作已经中确定的配送地理范围，确定不同地理范围的配送时间与配送费用。定不同地理范围的配送时间与配送费用。n在设计时，应结合网站的经营成本综合考虑。在设计时，应结合网站的经营成本综合考虑。n应设计一张详细的普通送货范围、时间与费用的应设计一张详细的普通送货范围、时间与费用的细则表，让

19、用户能一目了然。细则表，让用户能一目了然。n另外，为了保证配送环节不出问题，还需要讨论另外，为了保证配送环节不出问题，还需要讨论收货确认方式。收货确认方式。n另外，一般还需要设计几种配送中所要使用的表另外，一般还需要设计几种配送中所要使用的表格，如送货单、验货单等格，如送货单、验货单等 电子商务网站建设与维护实训电子商务网站建设与维护实训262022-11-294设计平邮配送方式的细则设计平邮配送方式的细则n应该根据前期工作已经中确定的配送地理范围，应该根据前期工作已经中确定的配送地理范围，n结合邮局的实际递送情况，确定不同地理范围平结合邮局的实际递送情况，确定不同地理范围平邮的配送时间，邮的

20、配送时间，n可与邮局一起协商，确定不同地理范围平邮的配可与邮局一起协商，确定不同地理范围平邮的配送费用。送费用。n在讨论完毕后，应设计一张详细的平邮配送方式在讨论完毕后，应设计一张详细的平邮配送方式的细则表，该表与普通送货上门配送方式的细则的细则表，该表与普通送货上门配送方式的细则表类似。表类似。n另外，应认真讨论确认平邮配送方式的收货确认另外，应认真讨论确认平邮配送方式的收货确认方式。方式。电子商务网站建设与维护实训电子商务网站建设与维护实训272022-11-295设计快递配送方式的细则设计快递配送方式的细则n应该根据前期工作已经中确定的配送地理范围，应该根据前期工作已经中确定的配送地理范

21、围，n结合快递公司或特快专递机构的实际递送情况，结合快递公司或特快专递机构的实际递送情况，确定不同地理范围配送时间确定不同地理范围配送时间n可与快递公司或特快专递机构一起协商，确定不可与快递公司或特快专递机构一起协商，确定不同地理范围平邮的配送费用。同地理范围平邮的配送费用。n在讨论完毕后应设计一张详细的快递方式的细则在讨论完毕后应设计一张详细的快递方式的细则表，该表也与普通送货上门配送方式的细则表类表，该表也与普通送货上门配送方式的细则表类似。似。n另外，同样应认真讨论确认快递方式的收货确认另外，同样应认真讨论确认快递方式的收货确认方式。方式。电子商务网站建设与维护实训电子商务网站建设与维护

22、实训282022-11-296设计本地配送方式的细则设计本地配送方式的细则n应该考虑尽可能做到本地的全覆盖，并制应该考虑尽可能做到本地的全覆盖，并制订合理的配送范围对应的配送时间、配送订合理的配送范围对应的配送时间、配送费用与货物重量限制。费用与货物重量限制。n在设计本地配送方式的细则时，通常根据在设计本地配送方式的细则时，通常根据网站配送中心的位置与送货点所在的位置网站配送中心的位置与送货点所在的位置综合考虑。综合考虑。n一般情况下，市区的配送费用应该订得较一般情况下，市区的配送费用应该订得较低，郊区的配送费用可以稍高。低，郊区的配送费用可以稍高。电子商务网站建设与维护实训电子商务网站建设与

23、维护实训292022-11-29任务任务5：设计网站相关页面：设计网站相关页面1设计主页上的相关页面设计主页上的相关页面2设计欢迎与公司简介页面设计欢迎与公司简介页面3设计商品在线定购页面设计商品在线定购页面4设计商品信息页面设计商品信息页面5设计主页的框架文件设计主页的框架文件6、设计其他页面、设计其他页面电子商务网站建设与维护实训电子商务网站建设与维护实训302022-11-291设计主页上的相关页面设计主页上的相关页面网站横幅网站横幅(LOGO与网与网站名称等站名称等)导航条导航条(主主要栏目要栏目)网站相关信息网站相关信息(网站的联网站的联系地址、电话、邮箱、系地址、电话、邮箱、ICP

24、登记号、工商登记登记号、工商登记号等号等)电子商务网站建设与维护实训电子商务网站建设与维护实训312022-11-292设计欢迎与公司简介页面设计欢迎与公司简介页面n欢迎页与公司简介页面主要包括欢迎页与公司简介页面主要包括欢迎词、企业文化取向、发展宗旨与口号，欢迎词、企业文化取向、发展宗旨与口号，并且还可能包括公司的性质、工作环境、公司并且还可能包括公司的性质、工作环境、公司员工等内容，员工等内容，并可能涉及一些插图，如工厂面貌、工作环境、并可能涉及一些插图，如工厂面貌、工作环境、生产设备、公司奖项、名人合影或题字与代表生产设备、公司奖项、名人合影或题字与代表性产品图等。性产品图等。电子商务网

25、站建设与维护实训电子商务网站建设与维护实训322022-11-293设计商品在线定购页面设计商品在线定购页面n主要包括商品的名称、数量、颜色等信息。主要包括商品的名称、数量、颜色等信息。n有时可能直接显示或填写客户的姓名与联系电话；有时可能直接显示或填写客户的姓名与联系电话；n有时可能直接要求客户填写收货人的地址、姓名、有时可能直接要求客户填写收货人的地址、姓名、联系电话等信息，以满足定购与接收货物不是同联系电话等信息，以满足定购与接收货物不是同一人的情况。一人的情况。n在设计定购页面时，一般还应将每种品的单价与在设计定购页面时，一般还应将每种品的单价与数量的乘积以及所有商品的价值自动计算出来

26、，数量的乘积以及所有商品的价值自动计算出来，让顾客方便地知道定购情况。让顾客方便地知道定购情况。电子商务网站建设与维护实训电子商务网站建设与维护实训332022-11-29在线定购页面例子在线定购页面例子电子商务网站建设与维护实训电子商务网站建设与维护实训342022-11-294设计商品信息页面设计商品信息页面n商品信息页面也是电子商务网站中的基本商品信息页面也是电子商务网站中的基本页面，主要包括商品的用途、性能、颜色、页面，主要包括商品的用途、性能、颜色、结构、技术参数等内容。结构、技术参数等内容。n一般既有文字说明，还有相应的图片说明。一般既有文字说明，还有相应的图片说明。n参考参考“选

27、择网络商品的展示方式选择网络商品的展示方式”中的相中的相关方法，用最恰当的方式体现商品的特点。关方法，用最恰当的方式体现商品的特点。电子商务网站建设与维护实训电子商务网站建设与维护实训352022-11-295设计主页的框架文件设计主页的框架文件n应选择一种布局方式，如导航条在左边还应选择一种布局方式，如导航条在左边还是在右边，或者是在网站横幅的下方。是在右边，或者是在网站横幅的下方。n既要考虑顾客的方便，还可能参考同类的既要考虑顾客的方便，还可能参考同类的网站，取长补短，设计出特色布局。网站，取长补短，设计出特色布局。n相关的栏目应该根据前期工作相应的规划相关的栏目应该根据前期工作相应的规划

28、说明设计，考虑相关的子栏目的出现方式说明设计，考虑相关的子栏目的出现方式 电子商务网站建设与维护实训电子商务网站建设与维护实训362022-11-296、设计其他页面、设计其他页面n其他页面可能有支付页面、订购确认页面、客户其他页面可能有支付页面、订购确认页面、客户登录页面，以及面向网站管理人员的页面。登录页面，以及面向网站管理人员的页面。n如果采用的是静态网页，则页面相对较容易设计；如果采用的是静态网页，则页面相对较容易设计；n如果有些网页需要使用动态网页的设计方法，则如果有些网页需要使用动态网页的设计方法，则需要掌握需要掌握ASP或或JSP等知识。等知识。n有时，可以先设计一个静态页面，再

29、与相关的技有时，可以先设计一个静态页面，再与相关的技术人员配合，设计出对应的动态网页。术人员配合，设计出对应的动态网页。电子商务网站建设与维护实训电子商务网站建设与维护实训372022-11-29【经验总结【经验总结】n为了进行一个电子商务网站大项目的设计，应该为了进行一个电子商务网站大项目的设计，应该首先准备好各类网页素材，包括文字、图像、音首先准备好各类网页素材，包括文字、图像、音频、视频等形式。频、视频等形式。n然后，需要设计网站商品的展示方式，以最恰当然后，需要设计网站商品的展示方式，以最恰当的方式体现商品的特点。的方式体现商品的特点。n接下来，需要选择网站的支付方式，以提供对各接下来

30、，需要选择网站的支付方式，以提供对各种支付方式的支持。种支付方式的支持。n再往下，需要设计网站的配送方式，以保证商品再往下，需要设计网站的配送方式，以保证商品能以不同的方式送达客户手中。能以不同的方式送达客户手中。n最后，则是具体设计网站相关页面，其中既有静最后，则是具体设计网站相关页面，其中既有静态的页面，也有动态的页面。态的页面，也有动态的页面。电子商务网站建设与维护实训电子商务网站建设与维护实训382022-11-29【后续展望【后续展望】n在准备了网页素材，设计了网站商品的展在准备了网页素材，设计了网站商品的展示方式、支付方式与配送方式，并且设计示方式、支付方式与配送方式，并且设计了网站主要相关页面后，接下来要需要将了网站主要相关页面后，接下来要需要将网站放到相关服务器上进行测试，其中主网站放到相关服务器上进行测试，其中主要涉及：要涉及：选择选择Web服务器软件的种类。服务器软件的种类。安装安装Web服务器。服务器。创建创建WWW站点。站点。配置与管理站点。配置与管理站点。