2023年第五电子商务网站的内容设计与开发（教学课件）.ppt

第5章电子商务网站的内容设计与开发 5.1 5.1 内容设计的流程内容设计的流程 5.2 5.2 信息结构的设计信息结构的设计 5.3 5.3 网页的可视化设计网页的可视化设计 5.4 5.4 首页设计首页设计 5.5 5.5 其他网页的设计其他网页的设计 5.6 5.6 网页制作网页制作 5.1 电子商务网站内容设计的流程电子商务网站内容设计的流程 5.1.1 内容设计的原那么内容设计的原那么 企业要在因特网上开展电子商务，就应该在企业要在因特网上开展电子商务，就应该在网站的内容设计方面遵循一些根本原那么，网站的内容设计方面遵循一些根本原那么，一般来说，最起码应考虑到以下三个方面：一般来说，最起码应考虑到以下三个方面：信息内容、访问速度和页面美感。信息内容、访问速度和页面美感。1.新、精、专的信息内容新、精、专的信息内容 信息内容永远处于第一位；信息内容永远处于第一位；内容设计要有组织；内容设计要有组织；及时更新信息内容。及时更新信息内容。2.平安快速的访问平安快速的访问 提高浏览者的访问速度；提高浏览者的访问速度；要有平安良好运转的硬件和软件环境；要有平安良好运转的硬件和软件环境；遵循遵循“三次点击原那么，即网站的任何信息都应在最多三三次点击原那么，即网站的任何信息都应在最多三次点击之内得到。次点击之内得到。3.美感十足、方便用户访问的页面美感十足、方便用户访问的页面 提供交互性；提供交互性；完善的检索和帮助功能；完善的检索和帮助功能；方便用户访问和购置。方便用户访问和购置。5.1.2 5.1.2 内容设计流程内容设计流程 通常，电子商务网站的内容设计流程都必须经过如下步通常，电子商务网站的内容设计流程都必须经过如下步骤：骤：(见课本见课本p108图图5.1)收集关于该网站的一些关键信息；收集关于该网站的一些关键信息；网站信息结构的设计；网站信息结构的设计；网站运行环境的选择，其具体选择标准和原那么可参见网站运行环境的选择，其具体选择标准和原那么可参见第三章内容；第三章内容；进行网页可视化设计；进行网页可视化设计；网页制作，网页制作，通常情况下，在网页制作过程中，需利用一通常情况下，在网页制作过程中，需利用一定的定的web数据库技术进行信息和数据的动态发布和提供；数据库技术进行信息和数据的动态发布和提供；网站的维护和管理。网站的维护和管理。5.2 5.2 电子商务网站信息结构的设计电子商务网站信息结构的设计 一般来说，电子商务网站建设与企业的经营战略、一般来说，电子商务网站建设与企业的经营战略、产品特性、财务预算以及当时的建站目的等因素产品特性、财务预算以及当时的建站目的等因素有着直接关系。有着直接关系。5.2.1 信息内容及其功能模块信息内容及其功能模块 尽管每个电子商务网站规模不同，表现形式各有特尽管每个电子商务网站规模不同，表现形式各有特色，但从经营的实质上来说，不外乎信息发布型色，但从经营的实质上来说，不外乎信息发布型和产品销售型这两种和产品销售型这两种 根本形式，一个综合性的网根本形式，一个综合性的网站可能同时包含了这两种根本形式。站可能同时包含了这两种根本形式。信息发布型的网站仍然是电子商务网站的主流形式。信息发布型的网站仍然是电子商务网站的主流形式。信息发布型网站中信息结构的设计主要是从以下几信息发布型网站中信息结构的设计主要是从以下几个方面来进行的：个方面来进行的：见书见书p110图图5.2 1)公司概况；公司概况；2)员工信息；员工信息；3)产品目录；产品目录；4)产品价格表；产品价格表；5)产品搜索；产品搜索；6)公司动态；公司动态；7)网上订购；网上订购；8)销售网络；销售网络；9)售后效劳；售后效劳；10)技术支持信息；技术支持信息；11)联系信息；联系信息；12)财务报告；财务报告；13)辅助信息，辅助信息，用来弥补产品品种比较少，网页用来弥补产品品种比较少，网页内容单调等缺乏；内容单调等缺乏；14)其他内容信息；比方反响表、公司人才招聘信其他内容信息；比方反响表、公司人才招聘信息、到其他相关站点的链接；息、到其他相关站点的链接；15)增值效劳；增值效劳；开辟网络环境下的新效劳工程，开辟网络环境下的新效劳工程，以增加其效劳功能，吸引网民再次光临。以增加其效劳功能，吸引网民再次光临。如：海尔网站如：海尔网站 静态内容静态内容?一般、常规信息：公司的历史、文化一般、常规信息：公司的历史、文化等等?修改较少，初期建设注意规划修改较少，初期建设注意规划 动态内容动态内容?公司产品和效劳有关信息，促销信息公司产品和效劳有关信息，促销信息?经常修改，保持网站的吸引力和作用经常修改，保持网站的吸引力和作用 分为主要功能和辅助功能分为主要功能和辅助功能 主要功能主要功能?信息发布、网上交易海尔信息发布、网上交易海尔 辅助功能辅助功能?配合主要功能而设置的。如客户注册管理配合主要功能而设置的。如客户注册管理(8848)(8848)功能确定原那么功能确定原那么?内容与功能统一，功能满足顾客需求如退内容与功能统一，功能满足顾客需求如退货货 完全电子商务网站的根本功能完全电子商务网站的根本功能 企业形象宣传企业形象宣传 产品展示产品展示 商品与效劳的在线订购商品与效劳的在线订购 顾客关系与效劳顾客关系与效劳 新闻、信息发布新闻、信息发布 网上调查网上调查 销售业务信息管理销售业务信息管理 在规划设计一个具体网站内容模块和功能时，主要在规划设计一个具体网站内容模块和功能时，主要应考虑企业本身的目标和所决定的网站功能导向，应考虑企业本身的目标和所决定的网站功能导向，让企业上网成为整体战略的一个有组成局部，让让企业上网成为整体战略的一个有组成局部，让网站真正成为有效的品牌宣传阵地、有效的营销网站真正成为有效的品牌宣传阵地、有效的营销工具，或者有效的网上销售场所。工具，或者有效的网上销售场所。5.2.2 目录与链接结构的设计目录与链接结构的设计 网站链接结构的原那么是：用最少的链接，使得浏览最有效网站链接结构的原那么是：用最少的链接，使得浏览最有效率。率。一般地，建立网站的链接结构有如下两种根本方式。一般地，建立网站的链接结构有如下两种根本方式。树状链接结构一对一树状链接结构一对一 类似类似dos的目录结构，首页链接指向一级页面，一级页面的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构像一棵树。链接指向二级页面。立体结构像一棵树。优点：条理清晰，不会优点：条理清晰，不会“迷路；迷路；缺点：浏览效率低，一个栏目下的缺点：浏览效率低，一个栏目下的 子页面到另一个栏目子页面到另一个栏目下的子页面，必须绕径首页。下的子页面，必须绕径首页。2.网状链接结构一对多网状链接结构一对多 类似网络效劳器的链接，每个页面相互之间都建立类似网络效劳器的链接，每个页面相互之间都建立有链接。立体结构像一张网。有链接。立体结构像一张网。优点：浏览方便，随时可以到达自己喜欢的页面；优点：浏览方便，随时可以到达自己喜欢的页面；缺点：链接太多，容易缺点：链接太多，容易“迷路。迷路。主主 页页 产品展示产品展示 关于我们关于我们 网上销售网上销售 在线服务在线服务 网站管理网站管理 信息发布信息发布 企业简介企业简介 企业动态企业动态 业务联系业务联系 产品分类产品分类 产品目录产品目录 产品简介产品简介 产品详情产品详情 分类查询分类查询 品牌介绍品牌介绍 新品推介新品推介 产品查询产品查询 用户注册用户注册 购物车购物车 订单查询订单查询 电子合同电子合同 交易交易 证书下载证书下载 FAQ 在线提问在线提问 售后服务售后服务 技术支持技术支持 用户反馈用户反馈 信息展示信息展示 信息查询信息查询 客户资源管理客户资源管理 产品管理产品管理 供应商管理供应商管理 交易管理交易管理 新闻管理新闻管理 访问分析访问分析 技术支持管理技术支持管理 超级用户管理超级用户管理 这两种根本结构都只是理想方式，在实际的网站这两种根本结构都只是理想方式，在实际的网站中，总是将这两种结构混合起来使用。中，总是将这两种结构混合起来使用。最好的方法是：最好的方法是：首页和一级页面之间用网状链接结构，一级和首页和一级页面之间用网状链接结构，一级和二级页面之间用树状链接结构。超过三级页面，二级页面之间用树状链接结构。超过三级页面，在页面顶部设置导航条。在页面顶部设置导航条。一级页面一级页面 二级页面二级页面 企业新闻页企业新闻页新闻新闻1，新闻，新闻2 首页首页产品信息页产品信息页产品产品1，产品，产品2 技术服务页技术服务页服务服务1，服务，服务2 随着电子商务的推广，网站竞争越来越剧烈，对随着电子商务的推广，网站竞争越来越剧烈，对链接结构设计的要求已经不仅仅局限与可以方便链接结构设计的要求已经不仅仅局限与可以方便快速地浏览，更加注重个性化和相关性快速地浏览，更加注重个性化和相关性 例子，请见书例子，请见书p114倒数第三段倒数第三段 5.2.3 整体风格的设计整体风格的设计 整体风格设计是网站设计中的重点和难点，是所整体风格设计是网站设计中的重点和难点，是所有网页开发者最希望掌握的，也是最难以学习的，有网页开发者最希望掌握的，也是最难以学习的，因为没有一个固定的程式可以参照和模仿。因为没有一个固定的程式可以参照和模仿。网站风格是抽象的，是指站点的整体形象给浏览者网站风格是抽象的，是指站点的整体形象给浏览者的综合感受。的综合感受。有风格的网站与普通网站的区别在于：有风格的网站与普通网站的区别在于：在普通网站上看到的只是堆砌在一起的信息，浏在普通网站上看到的只是堆砌在一起的信息，浏览者只能用理性的感受来描述；但有风格的网站览者只能用理性的感受来描述；但有风格的网站可以使人有更深一层的感性认识。可以使人有更深一层的感性认识。通常情况下，网站的设计者要根据企业的具体情况，通常情况下，网站的设计者要根据企业的具体情况，找出其最有特色、特点的东西找出其最有特色、特点的东西即是最能表达即是最能表达网站风格的东西，并以它作为网站的特色加以重网站风格的东西，并以它作为网站的特色加以重点强化，突出宣传。点强化，突出宣传。具体做法没有定式，这里仅提供以下一些参考具体做法没有定式，这里仅提供以下一些参考 1)使企业的标志尽可能出现在每个页面上，或者使企业的标志尽可能出现在每个页面上，或者在页眉，或者页脚，或者背景；在页眉，或者页脚，或者背景；2)突出网站的标准色彩；突出网站的标准色彩；3)突出网站的标准字体；突出网站的标准字体；4)设计一条朗朗上口宣传标语；设计一条朗朗上口宣传标语；5)使用统一的图片处理效果；使用统一的图片处理效果；6)创造一个企业站点特有的符号或图标创造一个企业站点特有的符号或图标 7)使网站的标志尽可能出现在每个页面使网站的标志尽可能出现在每个页面 创意设计创意设计 网站的创意网站的创意 创意思考的过程创意思考的过程 准备期准备期孵化期孵化期启示期启示期验证期验证期形成形成期期 创意思考的途径创意思考的途径 1.1.把它颠倒把它颠倒 2.2.把它缩小把它缩小 3.3.把颜色换一下把颜色换一下 4.4.使它更长使它更长 5.5.使它闪动使它闪动 6.6.把它放进音乐把它放进音乐里里 7.7.结合文字音乐图画结合文字音乐图画 8.8.使它成为年轻使它成为年轻的的9.9.使它重复使它重复 10.10.使它变成立体使它变成立体 11.11.参加参加竞赛竞赛 12.12.参加打赌参加打赌13.13.变更一局部变更一局部 14.14.分裂分裂它它 15.15.使它速度加快使它速度加快 16.16.使它对称使它对称 等等 5.3 5.3 网页的可视化设计网页的可视化设计 5.3.1 5.3.1 网页设计原那么网页设计原那么 1.网页命名要简洁网页命名要简洁 2.这样既会有助于以前方便地管理网页，又这样既会有助于以前方便地管理网页，又会在向搜索引擎提交网页时更容易被别人检索会在向搜索引擎提交网页时更容易被别人检索到。到。3.确保页面的导览性好确保页面的导览性好