《电商网站案例分析》PPT课件

《《电商网站案例分析》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第九章电子商务网站案例分析第一节“淘宝网”案例分析第二节“易万贝”电子商务网站案例分析第三节“尚志都市商城”电子商务网站案例分析一、总体结构设计在线交易商品展示用户管理三大模块“尚志都市”网站整体效果如图9.27所示。网站总体业务流程如图9.28所示。二、版式规划该网站属于典型的T型版式结构，其构成如图9.29所示。三、头部设计图9.30网站标志（Logo）1．标志（Logo）与网站标题设计（如图9.30所示）网站设计者是怎么构思的？在构思设计上从功用性、识别性、艺术性三大方面进行了综合考虑。（2）网站设计者是怎么制作的？在一体化的网站标志（Logo

2、）的设计上，网站设计者遵循了标志（Logo）设计的三大原则；在制作上使用了以下方法：①图形标志采用了该公司的企业标志，通过扫描处理后供使用。②在工具上，利用了PhotoShop图像处理软件，将公司图标、公司名称和网址进行了组合处理。2．标语（Banner）的设计该网站由于在主体正中居上的位置做了大幅广告“网上开店，赠送网站”，所以省略了头部的标语（Banner），在设计时一定要注意，头部的设计要与整体搭配和谐、自然统一。3．导航设计4．其他功能设计四、栏目设计（1）设计者是怎么构思的？每一个电子商务网站都有一个会员注册与登录模块，而且其位置一般都是在

3、左上部。该网站遵循了这一规律，由于网站刚编制出来，处在运营初期，在最主要位置为本网站进行广告宣传是明智之举，而“免费开店”及“支付宝”则是在线交易的两大重要模块，均在此位置予以设置。1．T型上部的设计（2）设计者是怎么制作的？该部分以蓝色为主，采用Photoshop图像处理工具，其大体步骤如下：①启动Photoshop，新建文件，并将背景设为从蓝到白的渐变；②左侧加入用Photoshop设计成购物车造型；中间预留了动画区，右侧上方加一张表格，用于一些产品链接，下边则为开店入口及支付宝区。③然后用Photoshop将相关的图标及文字加入即可，这在第五章

4、已经有详细介绍，在此不赘述。2．产品分类栏目的设计（1）设计者是怎么构思的？产品分类栏目，即网上商城的产品目录，如图9.36所示。分类全面、层次清晰是本栏目的最大特点，在颜色上，选择了类别标题用红色，类别内容用黑色，标准的12像素宋体字。整体效果相当简洁，把繁杂的类别清晰醒目地展现出来。（2）设计者是怎么制作的？该部分制作十分简单，只有栏目标题处用了一个图像，其他部分全部是纯文字，只要在Dreamweaver中先进行排版，然后设置CSS样式，对行间距进行规范即可。3．推荐产品与最新上架栏目（如图9.37所示）（1）设计者是怎么构思的？目前，商品展示类

5、电子商务网站，都是以图片加文字的形式进行说明（如图9.37所示），本网站的“推荐产品”及“最新上架”均属于商品展示类，标准的75×75像素图像，为了更整齐划一，还特别加了一个浅灰色的细线外框。红色的栏目标题上面还用了一条橘黄色的线条，引人注目的同时，更显生动活泼。（2）设计者是怎么制作的？在网页制作前，准备好所有商品图片，并对每一个商品图片进行简单处理，使其正好能放在75×75像素的外框中。在DreamWeaver中以表格的方式排版，同时，在网站代码中，实现对图片的更换。（1）编写者是怎么构思的如图9.38所示，是图9.27所示的网站整体效果右侧的四

6、个栏目之一，风格一致，制作方法统一。（2）编写者是怎么制作的这四个栏目的制作十分简单，与产品分类基本相同，在此不复述。五、尾部设计六、子页面设计1．设计者是怎么构思的“尚志都市商城”的所有子页面都是通过后台编程自动生成的。在设计时，对各子页面均编写了模板，各子页面根据各自的内容，利用模板生成不同的页面。而模板则是根据模板制定的一般方法，利用商城的首页内容改写而成。模板的不可编辑部分，即头部与尾部均是商城首页内容。这样的设计保持了整个网站风格一致。2．设计者是怎么制作的模板设计和制作模板设计和制作经过以下几个步骤（具体操作请见作者网站视频教程）：①启动

7、DreamWeaver，调入网站首页index.asp；②将网站首页中间部分删除，在体部只留一个与头部及尾部等宽的空表格；③将头部与体部均设置为不可编辑区，将体部设置为可编辑区，如图9.40所示；④另存为模板，名称为SZMB即可。描红临摹创作网站开发高手成长的三个阶段“尚志都市商城”整体版面是如何排出来的