《《电商网站案例分析》PPT课件》由会员分享，可在线阅读，更多相关《《电商网站案例分析》PPT课件（21页珍藏版）》请在装配图网上搜索。
1、第九章 电子商务网站案例分析,第一节 “淘宝网”案例分析,第二节“易万贝”电子商务网站案例分析,第三节“尚志都市商城”电子商务网站案例分析,一、总体结构设计,在线交易,商品展示,用户管理,三大模块,“尚志都市”网站整体效果如图9.27所示。网站总体业务流程如图9.28所示。,二、版式规划,该网站属于典型的T型版式结构，其构成如图9.29所示。,三、头部设计,图9.30 网站标志（Logo）,1标志（Logo）与网站标题设计（如图9.30所示）,在构思设计上从功用性、识别性、艺术性三大方面 进行了综合考虑。,（2）网站设计者是怎么制作的？,2标语（Banner）的设计 该网站由于在主体正中居上的
2、位置做了大幅广告“网上开店，赠送网站”，所以省略 了头部的标语（Banner），在设计时一定要注意，头部的设计要与整体搭配和谐、自 然统一。,3导航设计,4其他功能设计,四、栏目设计,（1）设计者是怎么构思的？ 每一个电子商务网站都有一个会员注册与登录模块，而且其位置一般都是在左上部。该网站遵循了这一规律，由于网站刚编制出来，处在运营初期，在最主要位置为本网站进行广告宣传是明智之举，而“免费开店”及“支付宝”则是在线交易的两大重要模块，均在此位置予以设置。,1T型上部的设计,（2）设计者是怎么制作的？ 该部分以蓝色为主，采用Photoshop图像处理工具，其大体步骤如下： 启动Photosho
3、p，新建文件，并将背景设为从蓝到白的渐变； 左侧加入用Photoshop设计成购物车造型；中间预留了动画区，右侧上方加一张表格，用于一些产品链接，下边则为开店入口及支付宝区。 然后用Photoshop将相关的图标及文字加入即可，这在第五章已经有详细介绍，在此不赘述。,2产品分类栏目的设计,（1）设计者是怎么构思的？ 产品分类栏目，即网上商城的产品目录，如图9.36所示。分类全面、层次清晰是 本栏目的最大特点，在颜色上，选择了类别标题用红色，类别内容用黑色，标准的 12像素宋体字。整体效果相当简洁，把繁杂的类别清晰醒目地展现出来。 （2）设计者是怎么制作的？ 该部分制作十分简单，只有栏目标题处用
4、了一个图像，其他部分全部是纯文字， 只要在Dreamweaver中先进行排版，然后设置CSS样式，对行间距进行规范即可。,3推荐产品与最新上架栏目（如图9.37所示）,（1）设计者是怎么构思的？,目前，商品展示类电子商务网站，都是以图片加文字的形式进行说明（如图9.37 所示），本网站的“推荐产品”及“最新上架”均属于商品展示类，标准的7575像素图 像，为了更整齐划一，还特别加了一个浅灰色的细线外框。红色的栏目标题上面还用 了一条橘黄色的线条，引人注目的同时，更显生动活泼。,（2）设计者是怎么制作的？ 在网页制作前，准备好所有商品图片，并对每一个商品图片进行简单处理，使其正 好能放在7575
5、像素的外框中。在DreamWeaver中以表格的方式排版，同时，在 网站代码中，实现对图片的更换。,（1）编写者是怎么构思的,如图9.38所示，是图9.27所示的网站整体效果右侧的四个栏目之一，风格一致，制作 方法统一。,（2）编写者是怎么制作的 这四个栏目的制作十分简单，与产品分类基本相同，在此不复述。,五、尾部设计,六、子页面设计,1设计者是怎么构思的 “尚志都市商城”的所有子页面都是通过后台编程自动生成的。在设计时，对各子页面均编写了模板，各子页面根据各自的内容，利用模板生成不同的页面。而模板则是根据模板制定的一般方法，利用商城的首页内容改写而成。模板的不可编辑部分，即头部与尾部均是商城首页内容。这样的设计保持了整个网站风格一致。,2设计者是怎么制作的,模板设计和制作 模板设计和制作经过以下几个步骤（具体操作请见作者网站视频教程）： 启动DreamWeaver，调入网站首页index. asp； 将网站首页中间部分删除，在体部只留一个与头部及尾部等宽的空表格； 将头部与体部均设置为不可编辑区，将体部设置为可编辑区，如图9.40所示； 另存为模板，名称为SZMB即可。,描红,临摹,创作,网站开发高手成 长的三个阶段,“尚志都市商城”整体版面是如何排出来的,
《电商网站案例分析》PPT课件
