第2章电子商务网站规划设计.ppt

《第2章电子商务网站规划设计.ppt》由会员分享，可在线阅读，更多相关《第2章电子商务网站规划设计.ppt（79页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、臧良运崔连和http:/sw.qqhrE.com E-Mail:北京大学出版社电电子子商商务务网网站站建建设设第第第第2 2 2 2章电子商务网站规划设计章电子商务网站规划设计章电子商务网站规划设计章电子商务网站规划设计臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计本章知识结构框图本章知识结构框图 学习激励学习激励案例导航案例导航电子商务电子商务网络规划网络规划基础基础基本概念基本概念网站建设网站建设基础基础导航及目导航及目录设计录设计计计网站3种内容遵循5个原则3个注意事项栏目规划准则栏目设计策略常用栏目功导航作用设计、原则、分类、表现形式导航常用内容目

2、录建立7个原则5个步骤版式及风版式及风格设计格设计模式模式版面布局基础两类常用版式布局4大原则色彩搭配方法文字使用技巧网站规划的必要性网站规划6项任务网站建设3个流程网站规划5种方法马云与他的阿里巴巴臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计本章知识要点学习方法本章知识要点学习方法 本章知识要点本章知识要点本章知识要点本章知识要点1电子商务网站规划的基本理论；2网站内容及栏目设计方法；3导航及目录设计方法；4版式及风格设计。本章学习方法本章学习方法本章学习方法本章学习方法 熟读唐诗三百诗，不会作诗也会吟。大量观察各类网站；从中悟出规律是本章学习的最佳方

3、法，也是入门的唯一捷径。臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计学习激励与案例导航学习激励与案例导航亚马逊亚马逊Ebay(易趣易趣)阿里巴巴阿里巴巴马云马云马云马云全球最大的电子商务网站全球最大的电子商务网站全球最大的电子商务网站全球最大的电子商务网站臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计谁是下一个世界首富？谁是下一个世界首富？比尔盖茨说：亚洲的马云。比尔盖茨说：亚洲的马云。臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.1电子商务网站规划的基本理论一、电子商务网站

4、制作流程概述一、电子商务网站制作流程概述电子商电子商务网站务网站规划的规划的意义意义 指导每一个操作步骤指导每一个操作步骤网站成功的有力保障网站成功的有力保障有效利用时间、提高制作效率有效利用时间、提高制作效率便于团队合作，协同完成便于团队合作，协同完成 保障网站的科学性、严谨性保障网站的科学性、严谨性臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.1.2 2.1.2 网站规划的任务网站规划的任务1 1明晰网站建设的流程明晰网站建设的流程具体要解决以下三个任务具体要解决以下三个任务?（1 1）网站制作有哪些流程）网站制作有哪些流程 （2 2）每一个流程由

5、谁来完成。）每一个流程由谁来完成。（3 3）每一项内容何时完成。）每一项内容何时完成。臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2 2确定网站的目的、功能确定网站的目的、功能 为什么要建立网站，为了宣传产品，还是要进行网上交易？做本企业网站，还是建立行业性网站？为了企业日常任务需要，还是市场开拓的延伸？根据公司的需要和网站建设计划，确定网站的整体功能。目的确定，功能明晰，为后继工作掌握好方向，此后的工作才能顺畅进行。臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计3 3确定网站的技术解决方案确定网站的技术解决方案网站

6、技术网站技术解决方案解决方案（1 1）服务器的选用）服务器的选用（2 2）服务器平台选型）服务器平台选型（3 3）开发技术选型）开发技术选型（4 4）数据库选型）数据库选型 臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计4对网站内容进行总体规划对网站内容进行总体规划规划时要解决网站有哪些栏目的问题规划时要解决网站有哪些栏目的问题 规划时要解决每个栏目都有什么内容的问题规划时要解决每个栏目都有什么内容的问题 +内容规划内容规划 臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计5 5确定网页设计方案确定网页设计方案网站规划时

7、，还要确定网页的设计方案，明网站规划时，还要确定网页的设计方案，明确每一个页面的设计方案。包括版式设计，确每一个页面的设计方案。包括版式设计，目录设计，导航设计及风格设计等。实际实目录设计，导航设计及风格设计等。实际实施制作的技术人员取得该方案后，可以快速施制作的技术人员取得该方案后，可以快速按照指定的要求进行制作。按照指定的要求进行制作。6 6制定网站后期的运营、维护、管理、安全制定网站后期的运营、维护、管理、安全方案方案对网站制作完成后的运营方案、维护计划、对网站制作完成后的运营方案、维护计划、管理体系、安全防范等都要进行统一规划，管理体系、安全防范等都要进行统一规划，这是网站规划的一项重

8、要任务，也是网站规这是网站规划的一项重要任务，也是网站规划中不可缺少的一个有机组成部分。划中不可缺少的一个有机组成部分。臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.1.3 2.1.3 网站建设的流程网站建设的流程1 1、规划设计、规划设计 2 2、实施制作、实施制作 3 3、发布维护、发布维护 臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计1 1、规划、规划设计设计 确定主题确定主题规划分析规划分析 收集资料收集资料 撰写网站规划书撰写网站规划书 整体规划、系统分析整体规划、系统分析 文字、图片、影音素材文字、图

9、片、影音素材 考虑周全、切实可行考虑周全、切实可行市市场场分分析析建建设设网网站站目目的的网网站站功功能能定定位位技技术术解解决决方方案案网网站站内内容容规规划划网网页页设设计计方方案案网网站站维维护护计计划划2.1.3 2.1.3 网站建设的流程网站建设的流程臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计1 1、规划设计、规划设计 2 2、实施制作、实施制作 版面设计版面设计编辑排版编辑排版 后台功能实现后台功能实现 代码整合代码整合 PhotoshopPhotoshopDreamWeaverDreamWeaver前台前台美工美工 2.1.3 2.1.3

10、 网站建设的流程网站建设的流程臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计1 1、规划设计、规划设计 2 2、实施制作、实施制作 网站测试网站测试上传发布上传发布 日常维护日常维护 网站空间网站空间内容维护、版面维护内容维护、版面维护 功能测试功能测试3 3、发布维护、发布维护 链接测试链接测试流量压力测试流量压力测试响应时间测试响应时间测试2.1.3 2.1.3 网站建设的流程网站建设的流程臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.1.4 2.1.4 电子商务网站规划的常用方法电子商务网站规划的常用方法1

11、1调查法调查法调查法包括调查法包括市场调查市场调查 用户调查用户调查 受众群体调查受众群体调查 所谓网站规划的调查法，就是通过市场调查、用户调查、所谓网站规划的调查法，就是通过市场调查、用户调查、受众群体调查，进行网站规划的一种方法。受众群体调查，进行网站规划的一种方法。臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2 2参照法参照法 参照法就是指网站规划时大量参照同类网站、学习同类网站，形成自己的规划方案的一种规划方法。（1 1）上网浏览大量同类网站，重点）上网浏览大量同类网站，重点查看各网站的功能；查看各网站的功能；（2 2）总结各网站的功能特点，将各

12、）总结各网站的功能特点，将各网站的功能列在纸上；网站的功能列在纸上；（3 3）将各网站的功能与自己原有设）将各网站的功能与自己原有设想对比；想对比；（4 4）结合自己实际需要，对各网站）结合自己实际需要，对各网站的功能进行取精去粗，完成网站功能的功能进行取精去粗，完成网站功能规划。规划。臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计3 3手绘法手绘法手绘法是将网站的规划用手绘的方式进行表现的一种方法。手绘法是将网站的规划用手绘的方式进行表现的一种方法。步骤步骤1 1：打开并分析你所在大学校园网站：打开并分析你所在大学校园网站 步骤步骤2 2：梳理你曾经就读

13、的中学基本情况；：梳理你曾经就读的中学基本情况；步骤步骤3 3：画出网站整体轮廓；：画出网站整体轮廓；【操作实例操作实例2-22-2】规划步骤规划步骤 臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计步骤步骤4 4：分别对头部、尾部进行规划绘制；：分别对头部、尾部进行规划绘制；步骤步骤5 5：对体部进行规划绘制。：对体部进行规划绘制。臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计4 4软件规划法软件规划法 软件规划法是指用软件规划法是指用WordWord、PhotoshopPhotoshop、FireworkFirewo

14、rk等软件进等软件进行页面规划的方法。行页面规划的方法。【操作实例操作实例2-32-3】用软件规划法规划一个以个人求职为主用软件规划法规划一个以个人求职为主题的网站首页为体会。题的网站首页为体会。臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计步骤步骤2 2：启动：启动WordWord软件；软件；步骤步骤1 1：通过上网查找，结合自身情况确定个人主页的：通过上网查找，结合自身情况确定个人主页的布局布局 步骤步骤3 3：进行头部规划。上网查找与自己创意相符合的：进行头部规划。上网查找与自己创意相符合的 网站头部，参照制作或复制到网站头部，参照制作或复制到Wor

15、dWord中；中；步骤步骤4 4：进行体部规划。对体部的每一部分内容进行设计：进行体部规划。对体部的每一部分内容进行设计 ，可以不断地上网查找相关资料；，可以不断地上网查找相关资料；步骤步骤5 5：对尾部进行规划。：对尾部进行规划。臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计5 5移花接木法移花接木法移花接木法就是对网站的每个细节部分都在网上找到与自移花接木法就是对网站的每个细节部分都在网上找到与自己设想比较一致的样例，然后将网上样例通过截图软件保存下己设想比较一致的样例，然后将网上样例通过截图软件保存下来，并粘贴到自己的规划图上。来，并粘贴到自己的规划

16、图上。1 1、在百渡中检索相关网站，如、在百渡中检索相关网站，如“网上书店网上书店”。操作步骤操作步骤为某书店设计一个电子商务网站为某书店设计一个电子商务网站题题目目2 2、查看网站的头部，找到合适的用抓图工具截下，放到、查看网站的头部，找到合适的用抓图工具截下，放到 WordWord中。中。3 3、查看网站体部的每一个模块及尾部，用抓图工具截下，、查看网站体部的每一个模块及尾部，用抓图工具截下，放到放到WordWord中。中。臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.2电子商务网站页面内容及栏目设计2.2.1 2.2.1 电子商务网站页面应该包括

17、的内容电子商务网站页面应该包括的内容4 4、最后用、最后用WORDWORD组合成一个完整的页面，形成了整体网站组合成一个完整的页面，形成了整体网站 的构思。的构思。臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计齐齐哈尔旅游网网站体部网站体部网站头部网站头部网站尾部网站尾部臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计头部内容头部内容体部内容体部内容尾部内容尾部内容网网站站标标识识标标题题广广告告条条分分类类导导航航与与检检索索LogoTitleBannerMenuSearchBanner规格规格全全幅幅半半幅幅垂垂直直

18、宽宽型型小小型型486x60234x60120 x240728x9088x31臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计头部内容头部内容体部内容体部内容尾部内容尾部内容网网站站标标识识标标题题广广告告条条分分类类导导航航与与检检索索LogoTitleBannerMenuSearch用用户户注注册册与与登登陆陆各各类类栏栏目目相相关关站站点点链链接接LoginLinks版版权权声声明明管管理理入入口口联联系系方方式式CopyRight臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.2.2 2.2.2 电子商务网站内

19、容设计遵循的原则电子商务网站内容设计遵循的原则相关性相关性真实性真实性动态性动态性准确性准确性图像替代图像替代以以主题主题为主线展开内容设计为主线展开内容设计 对内容要对内容要严格把关严格把关 随时进行随时进行修改修改和和更新更新 尤其是尤其是报价报价、库存库存 适中地适中地使用图像代替文本使用图像代替文本 臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.2.3 2.2.3 网站内容收集的注意事项网站内容收集的注意事项注意事项注意事项文责自负文责自负 材料电子版材料电子版 发送途径选择问题发送途径选择问题 臧良运崔连和 http:/SW0202章章 电电

20、子子商商务务网网站站规规划划设设计计2.2.42.2.4栏目规划概述栏目规划概述1 1什么是网站的栏目什么是网站的栏目?网网站站的的栏栏目目是是指指网网站站内内容容的的提提纲纲，是是网网站站内内容容的的大大纲纲索索引引。其其功功能能是是将将网网站站的的所所有有内内容容都都分分门门别别类类，利利用用栏栏目目将将网网站站的的主主体体明明确确显显示示出出来来。如如果果将将网网站站比比做做一一本本书书，那那么么书中的每章就是一个栏目。书中的每章就是一个栏目。臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计一一一一紧扣主题的原则紧扣主题的原则 二二二二精简的原则精简的

21、原则 三三三三四四四四提纲挈领的原则提纲挈领的原则 凸显特色凸显特色 2 2网站栏目规划的原则网站栏目规划的原则臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.2.5 2.2.5 栏目规划策略栏目规划策略分类法分类法 参照法参照法 +1 1栏目规栏目规划的常用划的常用方法方法所谓分类法，就是将所谓分类法，就是将欲在网站展示的所有欲在网站展示的所有资料进行分门别类，每资料进行分门别类，每一个类别形成一个栏目。一个类别形成一个栏目。所谓参照法，就是参所谓参照法，就是参照同类网站所设置的照同类网站所设置的栏目，结合实际需要栏目，结合实际需要进行栏目设置的方进行

22、栏目设置的方法法 臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2 2栏目规划的技巧栏目规划的技巧设置自己的栏目，具体方法是：设置自己的栏目，具体方法是：（1 1）所有同类网站都有的栏目，你）所有同类网站都有的栏目，你一定要有；一定要有；（2 2）70%70%以上同类网站都有的栏目你以上同类网站都有的栏目你不妨也加上；不妨也加上；（3 3）如果有些栏目只有）如果有些栏目只有50%50%网站具有，网站具有，这类栏目，你要询问客户的意见后，这类栏目，你要询问客户的意见后，再决定是否采用此栏目；再决定是否采用此栏目；（4 4）有些栏目只有）有些栏目只有50%50

23、%以下网站拥有，以下网站拥有，这时要注意了，这类栏目一是用处不这时要注意了，这类栏目一是用处不大的栏目，二是特色栏目，你要根据大的栏目，二是特色栏目，你要根据情况再三斟酌，而后决定。情况再三斟酌，而后决定。臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计3 3栏目的表现形式栏目的表现形式纯文字表现法纯文字表现法 图形化的表现法图形化的表现法 臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计纯文字表现法纯文字表现法 图形化的表现法图形化的表现法 3 3栏目的表现形式栏目的表现形式臧良运崔连和 http:/SW0202章章 电

24、电子子商商务务网网站站规规划划设设计计纯文字表现法纯文字表现法 图形化的表现法图形化的表现法 3 3栏目的表现形式栏目的表现形式臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.2.6 2.2.6 电子商务网站常用栏目电子商务网站常用栏目1 1网上商城常用栏目网上商城常用栏目2 2工业企业常用栏目工业企业常用栏目3 3其他常用栏目其他常用栏目臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计1 1网上商城常用栏目网上商城常用栏目2 2工业企业常用栏目工业企业常用栏目3 3其他常用栏目其他常用栏目2.2.6 2.2.6 电子

25、商务网站常用栏目电子商务网站常用栏目2828臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计1 1网上商城常用栏目网上商城常用栏目2 2工业企业常用栏目工业企业常用栏目3 3其他常用栏目其他常用栏目2.2.6 2.2.6 电子商务网站常用栏目电子商务网站常用栏目臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计1 1网上商城常用栏目网上商城常用栏目2 2工业企业常用栏目工业企业常用栏目3 3其他常用栏目其他常用栏目2.2.6 2.2.6 电子商务网站常用栏目电子商务网站常用栏目臧良运崔连和 http:/SW0202章章 电电

26、子子商商务务网网站站规规划划设设计计2.2.7 2.2.7 阿里巴巴网站内容分析阿里巴巴网站内容分析案案例例分分析析LOGO(LOGO(含标题）含标题）宣传标语宣传标语产品检索产品检索分类导航分类导航1 1、头部内容、头部内容臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计案案例例分分析析2 2、体部内容、体部内容（1 1）资讯栏目）资讯栏目2.2.7 2.2.7 阿里巴巴网站内容分析阿里巴巴网站内容分析臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.2.7 2.2.7 阿里巴巴网站内容分析阿里巴巴网站内容分析案案例例

27、分分析析（2 2）社区栏目）社区栏目（1 1）资讯栏目）资讯栏目2 2、体部内容、体部内容臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.2.7 2.2.7 阿里巴巴网站内容分析阿里巴巴网站内容分析案案例例分分析析（2 2）社区栏目）社区栏目（1 1）资讯栏目）资讯栏目2 2、体部内容、体部内容（3 3）交易栏目）交易栏目臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计案案例例分分析析3 3、尾部内容、尾部内容2.2.7 2.2.7 阿里巴巴网站内容分析阿里巴巴网站内容分析臧良运崔连和 http:/SW0202章章 电

28、电子子商商务务网网站站规规划划设设计计2.32.3电子商务网站导航及目录设计电子商务网站导航及目录设计1 1导航的作用导航的作用 2 2导航设计原则导航设计原则每个网页中应有一个指向主页的链接每个网页中应有一个指向主页的链接美观大方，而且要高效易用。美观大方，而且要高效易用。既直接又简单既直接又简单向导向导臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.3.2 2.3.2 导航分类导航分类 全局导航全局导航局部导航局部导航主要栏目主要栏目一级目录一级目录出现在网站的每页上出现在网站的每页上次要栏目次要栏目二级以上目录二级以上目录快捷导航快捷导航 相关导航

29、相关导航臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.3.3 2.3.3 电子商务网站导航栏设计方法电子商务网站导航栏设计方法纯文字表现法纯文字表现法图片表现法图片表现法优点：显示速度快优点：显示速度快缺点：视觉效果差缺点：视觉效果差优点：视觉效果好优点：视觉效果好缺点：显示速度慢缺点：显示速度慢1 1、电子商务网站导航栏的表现形式、电子商务网站导航栏的表现形式臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计首首 页页简介类简介类如：单位概况、企业简介、走进企业如：单位概况、企业简介、走进企业如：产品介绍如：产品介绍

30、如：论坛、留言板如：论坛、留言板2 2、电子商务网站导航栏的常见内容、电子商务网站导航栏的常见内容展示类展示类社区类社区类2.3.3 2.3.3 电子商务网站导航栏设计方法电子商务网站导航栏设计方法臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计（1 1）确定导航内容。）确定导航内容。（2 2）确定导航表现形式）确定导航表现形式（3 3）确定导航实现方法）确定导航实现方法 3.3.电子商务网站导航栏的设计步骤电子商务网站导航栏的设计步骤步骤步骤臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.3.4 2.3.4、电子商务

31、网站目录设计概述、电子商务网站目录设计概述 网站目录是指建立网站时创建的目录，用于存放网站中所网站目录是指建立网站时创建的目录，用于存放网站中所有的图片、网页、数据库等文件。站点本身的维护、未来的有的图片、网页、数据库等文件。站点本身的维护、未来的扩充和移植有着重要的影响。扩充和移植有着重要的影响。原则：原则：（1 1）分类存放、分别建立目录）分类存放、分别建立目录 分门别类，有序存放分门别类，有序存放 （2 2）目录的层次不要太深）目录的层次不要太深 不超过不超过3 3层层 （3 3）根目录下不要存放所有文件）根目录下不要存放所有文件 主页文件、流量统计的文本文件主页文件、流量统计的文本文件

32、 （4 4）根据栏目内容建立子目录）根据栏目内容建立子目录 （5 5）在每个主栏目子目录下都建立独立的）在每个主栏目子目录下都建立独立的imagesimages目录目录 （6 6）不要使用中文目录）不要使用中文目录 （7 7）不要使用过长的目录）不要使用过长的目录 影响检索速度影响检索速度臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.3.52.3.5网站目录建设的步骤及方法网站目录建设的步骤及方法 1.1.建立一个用于存放网站的总目录建立一个用于存放网站的总目录2.2.进入此网站目录，展开网站目录的建设工作进入此网站目录，展开网站目录的建设工作3.3.

33、在网站的根目录下建立一个在网站的根目录下建立一个ImagesImages子目录子目录存放首页图像文件存放首页图像文件4.4.在网站的根目录下建立一个在网站的根目录下建立一个stylestyle子目录子目录存放样式表文件存放样式表文件5.5.在网站的根目录为每一个栏目建立对应子目录，在网站的根目录为每一个栏目建立对应子目录，每个子目录下建立每个子目录下建立ImagesImages子目录子目录存放子页面图像文件存放子页面图像文件如：如：MyWebMyWeb臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.3.6 2.3.6 案例：敦煌网的目录结构案例：敦煌网的

34、目录结构动动手手制制作作1 1敦煌网的敦煌网的LOGOLOGO及导航栏及导航栏 臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计动动手手制制作作2 2敦煌网的目录结构设计敦煌网的目录结构设计 首页图像文件目录首页图像文件目录样式文件目录样式文件目录我的我的DhgateDhgate栏目栏目我的我的DhgateDhgate的图像文件夹的图像文件夹 功能与服务栏目功能与服务栏目 功能与服务的图像文件夹功能与服务的图像文件夹 热门求购栏目热门求购栏目 外贸通栏目外贸通栏目 热门求购的图象文件夹热门求购的图象文件夹 外贸通的图像文件夹外贸通的图像文件夹 2.3.6 2

35、.3.6 案例：敦煌网的目录结构案例：敦煌网的目录结构臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.42.4电子商务网站版式及风格设计电子商务网站版式及风格设计2.4.12.4.1版面布局的基础版面布局的基础左上角、页面顶部左上角、页面顶部分辨率确定分辨率确定内容与放置位置内容与放置位置 1280X10241024X768800X600高度高度宽度宽度随意随意上部上部下部下部左侧左侧右侧右侧轻快、积极轻快、积极 压抑、稳定压抑、稳定 轻便、自由轻便、自由 局促、庄重局促、庄重 臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划

36、设设计计2.4.2 2.4.2 网页的常用版式网页的常用版式左右结构布局左右结构布局左中右结构布局左中右结构布局上下结构布局上下结构布局1 1、结构化布局、结构化布局2 2、艺术化布局、艺术化布局20%30%70%80%菜菜单单用户登录用户登录流量统计流量统计联系方式联系方式主体内容主体内容臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计左右结构布局左右结构布局左中右结构布局左中右结构布局上下结构布局上下结构布局1 1、结构化布局、结构化布局2 2、艺术化布局、艺术化布局菜菜单单用户登录用户登录流量统计流量统计联系方式联系方式主体内容主体内容链接等链接等2.

37、4.2 2.4.2 网页的常用版式网页的常用版式臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计左右结构布局左右结构布局左中右结构布局左中右结构布局上下结构布局上下结构布局1 1、结构化布局、结构化布局2 2、艺术化布局、艺术化布局主主体体标标题题2.4.2 2.4.2 网页的常用版式网页的常用版式臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.4.2 2.4.2 网页的常用版式网页的常用版式左右结构布局左右结构布局左中右结构布局左中右结构布局上下结构布局上下结构布局最广泛最广泛比较呆板、不够灵活比较呆板、不够灵活二级

38、页面、文章页面二级页面、文章页面1 1、结构化布局、结构化布局2 2、艺术化布局、艺术化布局臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.4.3 2.4.3 版面布局的原则版面布局的原则1 1、根据网站的客户群选择合适的布局、根据网站的客户群选择合适的布局2 2、整体布局要遵循简洁大方的原则、整体布局要遵循简洁大方的原则 3 3、要注意视觉效果与内容翔实相结合的原则、要注意视觉效果与内容翔实相结合的原则4 4、主次分明条理清晰的原则、主次分明条理清晰的原则臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.4.4 2

39、.4.4 电子商务网站风格设计概述电子商务网站风格设计概述1 1、什么是电子商务网站的风格、什么是电子商务网站的风格2 2、如何树立电子商务网站的风格、如何树立电子商务网站的风格 电子商务网站的风格是指站点的整体形象给浏览者的综合感受，是这个站点的与众不同之处。网站标志、色彩、字体、标语、版面布局、浏览方式、交互性、文网站标志、色彩、字体、标语、版面布局、浏览方式、交互性、文字字(1)(1)色调色调(2)(2)简繁简繁(3)(3)字体的使用字体的使用(4)(4)站内风格的统一站内风格的统一符合网站的内容、有独特的创意符合网站的内容、有独特的创意 把握好简洁与花哨尺度把握好简洁与花哨尺度 标准统

40、一，正文的字体为宋体标准统一，正文的字体为宋体1212像素（五号字）像素（五号字）臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计2.4.5 2.4.5 电子商务网站色彩搭配电子商务网站色彩搭配1 1、色彩搭配概述、色彩搭配概述2 2、主色调的选择、主色调的选择粉色粉色蓝色蓝色红色红色绿色绿色黑色黑色企业、事业单位的网站企业、事业单位的网站政府网站、在重大节日期间改版为红色政府网站、在重大节日期间改版为红色食品、农业类网站、购物类、儿童类网站食品、农业类网站、购物类、儿童类网站科幻、游戏类网站科幻、游戏类网站女性、儿童类网站女性、儿童类网站主色调主色调:网站

41、使用最多的颜色称为主色调网站使用最多的颜色称为主色调辅色调辅色调:与主色调配套的其它颜色与主色调配套的其它颜色臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计1 1、字体的运用、字体的运用2 2、字号的设置、字号的设置正文字体正文字体 非标准字体的使用非标准字体的使用 标题字体的使用标题字体的使用 栏目字体栏目字体 宋体宋体 不得使用行楷等过于活泼的字体不得使用行楷等过于活泼的字体 黑体，用图形的方式，搭配一些小图标黑体，用图形的方式，搭配一些小图标 正文字号正文字号 大标题大标题 栏目标题栏目标题 1212像素、像素、1010磅、五号字磅、五号字 不超过不

42、超过3636像素像素 16161818像素、三号、四号、小四号像素、三号、四号、小四号 2.4.5 2.4.5 电子商务网站色彩搭配电子商务网站色彩搭配臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计3 3、行间距的设置、行间距的设置1.21.2倍倍1.51.5倍行距倍行距宋体宋体1212像素正文文字，行间距为像素正文文字，行间距为1818像素像素总结总结字体字体 字号字号 字色字色 行距行距正文：宋体正文：宋体 题目：方方正正的，如黑体题目：方方正正的，如黑体 正文一律用黑色正文一律用黑色 标准文字的为标准文字的为1.51.5倍，如倍，如12PX12PX字

43、，用字，用18PX18PX行距行距正文正文12px,12px,栏目标题栏目标题16-18PX16-18PX，大标题，大标题=36=362.4.5 2.4.5 电子商务网站色彩搭配电子商务网站色彩搭配臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计本章小结本章小结 1 1本章知识概述本章知识概述网站制作共有规划设计、实施制作、发布维护三大流程，网站制作共有规划设计、实施制作、发布维护三大流程，每一个流程又包括若干细节，流程之间有着严格的顺序。每一个流程又包括若干细节，流程之间有着严格的顺序。按照人们认识的规律将网站分为头部、体部、尾部三大板按照人们认识的规律将

44、网站分为头部、体部、尾部三大板块。电子商务网站有网上电子商务系统、用户认证管理系块。电子商务网站有网上电子商务系统、用户认证管理系统、报价系统、商品检索引擎、自助服务系统、论坛系统、统、报价系统、商品检索引擎、自助服务系统、论坛系统、网上调查系统七大功能模块。电子商务网站内容设计应遵网上调查系统七大功能模块。电子商务网站内容设计应遵循相关性、真实性、动态性、准确性、图像替代五大原则，循相关性、真实性、动态性、准确性、图像替代五大原则，网页的常用版式有结构化的布局、艺术化的布局两种。网网页的常用版式有结构化的布局、艺术化的布局两种。网站的导航对于网站则起到提纲挈领的作用，电子商务网站站的导航对于

45、网站则起到提纲挈领的作用，电子商务网站导航栏的表现有纯文字表现法、图片表现法两种形式，导航栏的表现有纯文字表现法、图片表现法两种形式，臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计电子商务网站导航栏的常见内容有首页、简介类、展示类、电子商务网站导航栏的常见内容有首页、简介类、展示类、社区类四种。网站目录建设的总原则是以最少的层次提供社区类四种。网站目录建设的总原则是以最少的层次提供最清晰简便的访问结构。电子商务网站的风格是指站点的最清晰简便的访问结构。电子商务网站的风格是指站点的整体形象给浏览者的综合感受，树立电子商务网站的风格整体形象给浏览者的综合感受，

46、树立电子商务网站的风格可以从色调、简繁、字体的使用、站内风格的统一入手。可以从色调、简繁、字体的使用、站内风格的统一入手。每个网站使用的颜色原则上不得超过三种，并且有一个占每个网站使用的颜色原则上不得超过三种，并且有一个占比例较大的颜色，我们称之为网站的主色调，而其他颜色比例较大的颜色，我们称之为网站的主色调，而其他颜色则称为网站的辅色调。每种颜色适合不同类别的网站，网则称为网站的辅色调。每种颜色适合不同类别的网站，网页正文无特殊情况一般使用宋体，大小为页正文无特殊情况一般使用宋体，大小为1212像素。像素。2 2本章名词本章名词网站制作流程、网站规划、网站的主题、版面设计、网站网站制作流程、

47、网站规划、网站的主题、版面设计、网站发布、网站规划的调发布、网站规划的调 臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计法、网站规划的参照法、网站规划的手绘法、网站规划的法、网站规划的参照法、网站规划的手绘法、网站规划的软件规划法、网站规划的移花接木法、网站的栏目、像素、软件规划法、网站规划的移花接木法、网站的栏目、像素、电子商务网站的风格。电子商务网站的风格。3 3本章的数字本章的数字网站规划网站规划5 5个意义、网站规划的个意义、网站规划的6 6项任务、网站建设的项任务、网站建设的3 3个个流程、网站规划的流程、网站规划的5 5种方法、网站种方法、网站

48、3 3种常见内容、网站内容种常见内容、网站内容设计遵循的设计遵循的5 5个原则、网站内容设计个原则、网站内容设计3 3个注意事项、网站规个注意事项、网站规划划4 4项、项、3 3种规划策略、导航设计的种规划策略、导航设计的3 3原则、导航的原则、导航的4 4个类别、个类别、导航的导航的2 2种表现形式、导航常用种表现形式、导航常用4 4类内容、目录建立类内容、目录建立7 7个原个原则、目录建立的则、目录建立的5 5个步骤、个步骤、2 2类常用版式、布局类常用版式、布局4 4大原则。大原则。臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计每课一考每课一考一、填

49、空（一、填空（4040空，每空空，每空1 1分，共分，共4040分）分）1 1网站规划是指在网站建设前对市场进行分析、确定网站的网站规划是指在网站建设前对市场进行分析、确定网站的目的和功能，并根据需要对网站建设中的（目的和功能，并根据需要对网站建设中的（）、）、（）、（）、（）、（）、（）和（）和（）等）等做出规划。做出规划。2 2按照人们认识的规律将网站分为（按照人们认识的规律将网站分为（）（）（）、（、（）三大板块。）三大板块。3 3电子商务网站内容设计应遵循的原则有（电子商务网站内容设计应遵循的原则有（）、）、（）、（）、（）、（）、（）和）和（）。）。臧良运崔连和 http:/SW02

50、02章章 电电子子商商务务网网站站规规划划设设计计4 4电子商务网站应包括的功能模块有（电子商务网站应包括的功能模块有（）、）、（）、（）、（）、（）、（）、）、（）、（）、（）和（）和（）。）。5 5网页的宽度一般有（网页的宽度一般有（）和（）和（）两种。）两种。6 6网站的最佳视域是（网站的最佳视域是（）。）。7 7网页的结构化布局包括（网页的结构化布局包括（）、（）、（）、（、（）。）。8 8网页版面布局的原则包括（网页版面布局的原则包括（）、（）、（）、（、（）和（）和（）。）。臧良运崔连和 http:/SW0202章章 电电子子商商务务网网站站规规划划设设计计9 9网站的（网站的（）