电子商务网站建设与维护第9章电子商务网站案例分析

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,电子商务网站案例分析,第,9,章,全书行文至此，一直遵循“一个中心，两个根本点的,编写总原那么，即以掌握电子商务网站建设技术为中心，以,学会必需的理论和实际动手能力为根本点。,知识要点,认真,听讲,1通过对“淘宝网的分析，重点掌握大型电子商务网站的,创意设计；,2通过对“易万贝网站的分析，重点掌握中型电子商务,网站的整体规划；,3通过对“尚志都市商城的分析，重点掌握小型电子商务,网站的制作。,四,大技能,认真,听讲,1网站开发高手成长的轨迹；,2“淘宝网的创意；,3电子商务网站的结构规划；,4“淘宝网入门流程。,学习方法,认真,听讲,本章没有理论知识，全部是案例分析，因此本章的学习，,要注意发散思维。通过学习本章的内容，可了解整个电,子商务网站的全貌，为自己创立电子商务网站打下坚实,的根底。要求如下：,1对每一个案例，上网查阅类似网站，进行广泛分析；,2认真学习每一个案例，领悟其中的精髓；,3模仿每一个案例，制作电子商务网站。,案例导航,三个电子商务网站 三个人的人生轨迹,2003年5月10日“淘宝网诞生于电子商务世家“阿里巴巴，先天优越、“家,风优良的“淘宝网茁壮成长。5年后的今天，它已业绩显赫：2021年一季度，,“淘宝网注册会员超过6200万人，截至2021年1月，支付宝注册会员超过6300万，,覆盖了中国绝大局部网购人群；交易额突破188亿，2007年全年的成交额是433亿。,目前“淘宝网已经是中国网民最喜爱的电子商务平台。,张宗新，名不见经传，却在孕育着又一个电子商务奇迹。1993年，正在读书的,毛头小伙子张宗新梦想创立一个著名的网络平台，父命难违的他却阴差阳错地进了,建设银行，当了一名网络管理员。2003年，他毅然辞职，狂热专注梦中的“她，,认真,听讲,案例导航,2021年他终于携“易万贝闪亮登场，奥运之年虽然遭遇金融危机，他的梦想,也受到了影响，但他仍然满怀激情，因为他知道，“易万贝底蕴深厚，必将走向,辉煌。草根张伟山，拖着病残的双腿行走在人生路上，曾以黑龙江省第一名的成绩,参加全国计算机大赛。一个普普通通的网民，不畏网络世界的风浪，不惧金融风暴,的肆虐，用自己的双手编织着电子商务创业梦。他的“尚志都市商城虽然还没有,很大的名气，虽然还不是很完善，但我们却要第一时间去探究他的秘密，他的未来,一定会获得巨大的成功。因为我们和他们一样，有梦想、有激情，都在艰难的创业,路上一路前行。,认真,听讲,第九章 电子商务网站案例分析,第一节 “淘宝网案例分析,第二节“易万贝电子商务网站案例分析,第三节“尚志都市商城电子商务网站案例分析,第九章 电子商务网站案例分析,第一节 “淘宝网案例分析,第二节“易万贝电子商务网站案例分析,第三节“尚志都市商城电子商务网站案例分析,一、创意,1建站目标明确,2整体创意独特,3模式创意,4功能创意,5营销创意,6内容创意,7效劳创意,B2C模式,C2C模式,给网民以家的温馨,为网民提供在线交流功能,便捷的功能让网民轻松进入,二、规划,1总体设计,“淘宝网是最经典的电子商务网站，是商家们最喜爱的交易平台。仔细比照分析，,就会发现，目前国内很多中小型电子商务网站局部模仿“淘宝网。无论是从结构设计,上，还是风格设计上，“淘宝网都比较有特色，符合电子商务网站设计的标准。,2结构设计,图9.1 “淘宝网的头部,2体部结构设计,3尾部结构设计,3风格设计,“淘宝网以橘色为主色调，风格清新自然，色彩整体和谐统一，动感十足。,页面层次清晰、主次清楚、重点突出、布局合理。网站设计方案主题鲜明，版,式设计恰到好处；内容虽然繁多，但多而不乱；网页形式与内容高度统一；字,体使用符合网页制作标准。,三、实现,1页面效果的实现,1“宝贝类目栏目巧妙地利用了红、灰、蓝三色。其中总分类及突出的重点子目用了红色，而其他的子目分类那么用了蓝色与灰色两种，字色的变化与字号的变化相配合，设计得分外合理。,2“热卖单品，那么用了浅灰色的细线框将各种形状的商品标准化。,3关键之处全部使用了红色，例如标题、商品总分类、价格。,4Flash动画的使用，使网站增添了动态效果。,“淘宝网页面采用规那么的CSS布局，由于内容众多，在实现上采取了以下措施：,1实名认证制,2信用评价体系,3付款发货方式,2诚信平安体系,经典必,备栏目,1我要买,2我要卖,3支付平台,4商品分类,5热卖商品,6资讯,如何设置电子商务网站必备栏目,“淘宝网电子商务体验,1“淘宝网买家与卖家入门流程,1买家入门,2卖家入门,2网上平安交易流程,3卖家交易的四个步骤,1申请认证,2发布宝贝和开设店铺,3宝贝出售中,在此步骤中，可以进行查询交易信息和修改商品信息两项操作。,4宝贝成交后见图9.11,分析电子商务网站,【训练内容】到网上查找三个典型的电子网站，对其展开分析,【训练目的】,1综合应用所学知识，全面分析网站。,2对电子商务网站的规划、设计有更全面的了解。,3为自行设计电子商务网站打下根底。,【训练要求】,1必须是典型的电子商务网站。,2进行全面分析。,第九章 电子商务网站案例分析,第一节 “淘宝网案例分析,第二节“易万贝电子商务网站案例分析,第三节“尚志都市商城电子商务网站案例分析,一、“易万贝的总体结构设计,二、头部设计,1网站标志Logo与标题设计,2横幅标语Banner设计,3导航设计,“易万贝导航设计的另外一个显著特点，是将整个网站内容分为衣、食、,住、行、玩五个类别，以栏目的形式，列于网站的左方，如图9.16列出了,栏目“衣。,4其他功能设计,1店铺搜索,2辅助功能,三、栏目设计,易万贝的栏目,社区购物,联盟商圈,餐饮效劳,分类信息,优惠打折,资讯信息,人才市场,大庆二手,四、尾部设计,“易万贝网上商家实现在线销售主要有两种方式,一种是在网上开设独立的虚拟商店,另一种是参与并成为网上购物中心的一局部,五、用户管理功能设计,六、商品展示功能模块设计,“易万贝社区平台商品展示模式其功能根本分为,图文展示,多媒体展示,“易万贝制订的推广方案包括内容,网站推广方案,网站筹划建设阶段的推广,网站发布初期的根本推广手段,网站增长期的推广,网站稳定期的推广,推广效果的评价,七、网站推广方式,网站开发团队的组成,创立一个电子商务网站，要拥有一支团队，那么一个网站开发团队由哪些人员组成呢？根据工程的大小，团队可以有几十人，也可以只有几个人。,在团队划分中应该含有6个角色，分别是工程经理、网站筹划、前台美工、程序开发员、代码整合员、网站测试员。不管团队有多少人，这6个角色都是必需的。人数少，可以一人兼任多个角色，比方工程经理可以兼任网站筹划这个角色；程序开发员还可以兼任代码整合和测试这两个角色。,一般网站开发之初，人数不必太多，可一个人身兼数职；随着电子商务网站的开展壮大，每个角色的人员可以随时补充。,“当当网 :/新用户注册流程,1进入“当当网主页后，单击首页左上角的“请登录免费注册中的“免费注册,如图9.20所示,2显示新用户注册页面，根据提示填写根本信息，包括Email地址、昵称、密码,、验证码等信息,1Email地址的填写要求,2昵称的填写要求,3验证码的输入问题, 如果您的计算机显示不出证验码，请刷新页面或调整IE浏览器的设置。调整浏,览器设置请到“工具“Internet选项(如图9.24所示) “常规，选择“删除文件(cookie),并“去除历史记录，如图9.25所示。,3验证邮箱如图9.26所示,1单击“注册按钮之后，系统会发送一封验证邮件到您已注册的电子邮箱里。,2如果您的邮箱收不到验证邮件，验证邮件可能被您的邮箱提供商认定为垃,圾邮件或广告邮件，请查看您的垃圾邮件箱或广告邮件箱。您也可以在该页面,更改电子邮件地址。,3登录您注册时填写的邮箱，查询当当发送的验证邮件。只要将邮件中的验证码输,入到图9.26中的输入框内，单击“完成按钮就注册成功了。,撰写一份?电子商务网站现状分析?报告,【训练内容】浏览国内较有名的电子商务网站，撰写一份?电子商务网站现状分析?,【训练目的】,1开阔视野，拓展思维。,2通过浏览网站，了解电子商务网站的现状，为自己制作电子商务网站打下坚实,根底。,【训练要求】,1分析时所涉及的电子商务网站均需注明网址。,2主要从页面设计、功能设计两个方面展开分析。,第九章 电子商务网站案例分析,第一节 “淘宝网案例分析,第二节“易万贝电子商务网站案例分析,第三节“尚志都市商城电子商务网站案例分析,一、总体结构设计,在线交易,商品展示,用户管理,三大模块,“尚志都市网站整体效果如图9.27所示。网站总体业务流程如图9.28所示。,二、版式规划,该网站属于典型的T型版式结构，其构成如图9.29所示。,三、头部设计,图9.30 网站标志Logo,1标志Logo与网站标题设计如图9.30所示,网站设计者是怎么构思的？,在构思设计上从功用性、识别性、艺术性三大方面,进行了综合考虑。,2网站设计者是怎么制作的？,在一体化的网站标志（Logo）的设计上，网站设计者遵循了标志（Logo）设计的三大原则；在制作上使用了以下方法：, 图形标志采用了该公司的企业标志，通过扫描处理后供使用。, 在工具上，利用了PhotoShop图像处理软件，将公司图标、公司名称和网址进行了组合处理。,2标语Banner的设计,该网站由于在主体正中居上的位置做了大幅广告“网上开店，赠送网站，所以省略,了头部的标语Banner，在设计时一定要注意，头部的设计要与整体搭配和谐、自,然统一。,3导航设计,4其他功能设计,四、栏目设计,1设计者是怎么构思的？,每一个电子商务网站都有一个会员注册与登录模块，而且其位置一般都是在左上部。该网站遵循了这一规律，由于网站刚编制出来，处在运营初期，在最主要位置为本网站进行广告宣传是明智之举，而“免费开店及“支付宝那么是在线交易的两大重要模块，均在此位置予以设置。,1T型上部的设计,2设计者是怎么制作的？,该局部以蓝色为主，采用Photoshop图像处理工具，其大体步骤如下：, 启动Photoshop，新建文件，并将背景设为从蓝到白的渐变；, 左侧参加用Photoshop设计成购物车造型；中间预留了动画区，右侧上方加一张表格，用于一些产品链接，下边那么为开店入口及支付宝区。, 然后用Photoshop将相关的图标及文字参加即可，这在第五章已经有详细介绍，在此不赘述。,2产品分类栏目的设计,1设计者是怎么构思的？,产品分类栏目，即网上商城的产品目录，如图9.36所示。分类全面、层次清晰是,本栏目的最大特点，在颜色上，选择了类别标题用红色，类别内容用黑色，标准的,12像素宋体字。整体效果相当简洁，把繁杂的类别清晰醒目地展现出来。,2设计者是怎么制作的？,该局部制作十分简单，只有栏目标题处用了一个图像，其他局部全部是纯文字，,只要在Dreamweaver中先进行排版，然后设置CSS样式，对行间距进行标准即可。,3推荐产品与最新上架栏目如图9.37所示,1设计者是怎么构思的？,目前，商品展示类电子商务网站，都是以图片加文字的形式进行说明如图9.37,所示，本网站的“推荐产品及“最新上架均属于商品展示类，标准的7575像素图,像，为了更整齐划一，还特别加了一个浅灰色的细线外框。红色的栏目标题上面还用,了一条橘黄色的线条，引人注目的同时，更显生动活泼。,2设计者是怎么制作的？,在网页制作前，准备好所有商品图片，并对每一个商品图片进行简单处理，使其正,好能放在7575像素的外框中。在DreamWeaver中以表格的方式排版，同时，在,网站代码中，实现对图片的更换。,1编写者是怎么构思的,如图9.38所示，是图9.27所示的网站整体效果右侧的四个栏目之一，风格一致，制作,方法统一。,2编写者是怎么制作的,这四个栏目的制作十分简单，与产品分类根本相同，在此不复述。,五、尾部设计,六、子页面设计,1设计者是怎么构思的,“尚志都市商城的所有子页面都是通过后台编程自动生成的。在设计时，对各子页面均编写了模板，各子页面根据各自的内容，利用模板生成不同的页面。而模板那么是根据模板制定的一般方法，利用商城的首页内容改写而成。模板的不可编辑局部，即头部与尾部均是商城首页内容。这样的设计保持了整个网站风格一致。,2设计者是怎么制作的,模板设计和制作,模板设计和制作经过以下几个步骤具体操作请见作者网站视频教程：, 启动DreamWeaver，调入网站首页index. asp；, 将网站首页中间局部删除，在体部只留一个与头部及尾部等宽的空表格；, 将头部与体部均设置为不可编辑区，将体部设置为可编辑区，如图9.40所示；, 另存为模板，名称为SZMB即可。,描红,临摹,创作,网站开发高手成,长的三个阶段,“尚志都市商城整体版面是如何排出来的,电子商务网站版面的设计与制作,【训练内容】模仿本节的尚志都市商城制作一个电子商务网站,【训练目的】,1综合使用所学知识，提高整体网站的制作能力。,2对电子商务网站知识进行全面稳固，并学以致用。,【训练要求】,1综合使用所学知识，进行系统全面规划，要先规划后制作。,2网站名称以你个人名称为主，一般为两个字。,3要先以模仿为主，模仿成功后，再自行创作。,本 章 小 结,认真,听讲,本章是全书的收篇之作，旨在指导学生综合运用全书知识，提高规划设计电子,商务网站的综合能力。本章精心选择了三个电子商务网站作为实例，从不同侧面进,行了综合分析。,第一个网站是由大型研发队伍建设的最权威的“淘宝网，重点从创意、规划和制,作三个层面进行了剖析，使学生通过这一实例重点掌握电子商务网站的创意与规划。,在创意层面上从建站目标、整体创意、模式创意、功能创意、营销创意、内容创意、,效劳创意七个方面进行了综合分析，使学生学后如醍醐灌顶，彻底领悟“淘宝网创意,之绝妙。在规划上，那么从总体设计、结构设计、风格设计三个方面做了讲解，实现上,那么简要进行了说明。第二个网站那么是由小型网络公司制作的刚上线的“易万贝网站，,让学生重点从该网站学习其创意与制作技术。第三个网站那么是由作者本人制作的名气,还不是很大的电子商务网站，其重点也是实际制作。本章在实例的选择上，突破传统,教材以单纯的成功网站为例的做法，从学生实际出发，用著名的“淘宝网做引领，教,会学生思想；用刚上线的“易万贝做过渡，使学生加深了解；用作者本人建设的“尚,志都市商城做示范，让学生学会制作。,每 课 一 考,拓展技能综合题共5题，每题20分，共100分,1易趣网 :/是一个典型的电子商务网站，请对该网站,进行全面分析，重点从以下几个方面入手。,1版式；,2色彩运用；,3栏目设置；,4主题与域名。,2请对以下10个电子商务网站的创意进行简要分析,1万国商业网： :/,2环球资源内贸网： :/,3当当网： :/,4卓越网： :/,5逛街网： :/,6鲜花礼品网： :/,7北斗 网：,8我爱打折网：,9天天购物网：,10孔夫子旧书网： :/,3请对以下网站的页面布局进行分析,1红孩子母婴网： :/,2乐淘玩具城： :/,3央视音像精品网： :/,4返利网： :/,5家居易站： :/,4请对下以网站的功能进行分析,118900 网：,2快乐购： :/,3名品导购网： :/,5请指出以下网站的主要栏目,1锐意网： :/,2果皮网： :/,3绿森数码网： :/,4华宇物流网： :/,Thank You!,