5第五章电子商务网站的内容设计与开发.ppt

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

1、第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 网站内容设计的原则网站内容设计的原则企业要在因特网上开展电子商务，就应该在网站的企业要在因特网上开展电子商务，就应该在网站的内容设计方面遵循一些基本原则，一般来说，最内容设计方面遵循一些基本原则，一般来说，最起码应考虑到以下三个方面：

2、起码应考虑到以下三个方面：信息内容、访问速度和页面美感。信息内容、访问速度和页面美感。1.新、精、专的信息内容新、精、专的信息内容1)信息内容永远处于第一位；信息内容永远处于第一位；2)内容设计要有组织；内容设计要有组织；3)及时更新信息内容。及时更新信息内容。2.安全快速的访问安全快速的访问1)提高浏览者的访问速度；提高浏览者的访问速度；2)要有安全良好运转的硬件和软件环境；要有安全良好运转的硬件和软件环境；3)遵循遵循“三次点击三次点击”原则，即网站的任何信息都应在最多原则，即网站的任何信息都应在最多三次点击之内得到。三次点击之内得到。l3.美感十足、方便用户访问的页面美感十足、方便用户访

3、问的页面1)提供交互性；提供交互性；2)完善的检索和帮助功能；完善的检索和帮助功能；3)方便用户访问和购买。方便用户访问和购买。5.1.2 5.1.2 网站内容设计流程网站内容设计流程l通常，电子商务网站的内容设计流程都必须经过如下步通常，电子商务网站的内容设计流程都必须经过如下步骤：骤：(见课本见课本p108图图5.1)a)收集关于该网站的一些关键信息；收集关于该网站的一些关键信息；b)网站信息结构的设计；网站信息结构的设计；c)网站运行环境的选择，其具体选择标准和原则可参见第网站运行环境的选择，其具体选择标准和原则可参见第三章内容；三章内容；d)进行网页可视化设计；进行网页可视化设计；e)

4、网页制作，网页制作，通常情况下，在网页制作过程中，需利用一通常情况下，在网页制作过程中，需利用一定的定的web数据库技术进行信息和数据的动态发布和提供；数据库技术进行信息和数据的动态发布和提供；f)网站的维护和管理。网站的维护和管理。5.2 5.2 电子商务网站信息结构的设计电子商务网站信息结构的设计l一般来说，电子商务网站建设与企业的经营战略、一般来说，电子商务网站建设与企业的经营战略、产品特性、财务预算以及当时的建站目的等因素产品特性、财务预算以及当时的建站目的等因素有着直接关系。有着直接关系。5.2.1 网站信息内容及其功能模块网站信息内容及其功能模块尽管每个电子商务网站规模不同，表现形

5、式各有特尽管每个电子商务网站规模不同，表现形式各有特色，但从经营的实质上来说，不外乎信息发布型色，但从经营的实质上来说，不外乎信息发布型和产品销售型这两种和产品销售型这两种 基本形式，一个综合性的网基本形式，一个综合性的网站可能同时包含了这两种基本形式。站可能同时包含了这两种基本形式。信息发布型的网站仍然是电子商务网站的主流形式。信息发布型的网站仍然是电子商务网站的主流形式。信息发布型网站中信息结构的设计主要是从以下几信息发布型网站中信息结构的设计主要是从以下几个方面来进行的：个方面来进行的：见书见书p110图图5.21)公司概况；公司概况；2)员工信息；员工信息；3)产品目录；产品目录；4)

6、产品价格表；产品价格表；5)产品搜索；产品搜索；6)公司动态；公司动态；7)网上订购；网上订购；8)销售网络；销售网络；9)售后服务；售后服务；10)技术支持信息；技术支持信息；11)联系信息；联系信息；12)财务报告；财务报告；13)辅助信息，辅助信息，用来弥补产品品种比较少，网页用来弥补产品品种比较少，网页内容单调等不足；内容单调等不足；14)其他内容信息；比如反馈表、公司人才招聘信其他内容信息；比如反馈表、公司人才招聘信息、到其他相关站点的链接；息、到其他相关站点的链接；15)增值服务；增值服务；开辟网络环境下的新服务项目，开辟网络环境下的新服务项目，以增加其服务功能，吸引网民再次光临。

7、以增加其服务功能，吸引网民再次光临。l如：如：海尔网站海尔网站l静态内容静态内容一般、常规信息：公司的历史、文化等一般、常规信息：公司的历史、文化等修改较少，初期建设注意规划修改较少，初期建设注意规划l动态内容动态内容公司产品和服务有关信息，促销信息公司产品和服务有关信息，促销信息经常修改，保持网站的吸引力和作用经常修改，保持网站的吸引力和作用分为主要功能和辅助功能分为主要功能和辅助功能主要功能主要功能信息发布、信息发布、网上交易（海尔）网上交易（海尔）辅助功能辅助功能配合主要功能而设置的。如配合主要功能而设置的。如客户注册管理客户注册管理(8848)(8848)功能确定原则功能确定原则内容与

8、功能统一，功能满足顾客需求（如内容与功能统一，功能满足顾客需求（如退货退货）完全电子商务网站的基本功能完全电子商务网站的基本功能l企业形象宣传企业形象宣传l产品展示产品展示l商品与服务的在线订购商品与服务的在线订购l顾客关系与服务顾客关系与服务l新闻、信息发布新闻、信息发布l网上调查网上调查l销售业务信息管理销售业务信息管理在规划设计一个具体网站内容模块和功能时，主要在规划设计一个具体网站内容模块和功能时，主要应考虑企业本身的目标和所决定的网站功能导向，应考虑企业本身的目标和所决定的网站功能导向，让企业上网成为整体战略的一个有组成部分，让让企业上网成为整体战略的一个有组成部分，让网站真正成为有

9、效的品牌宣传阵地、有效的营销网站真正成为有效的品牌宣传阵地、有效的营销工具，或者有效的网上销售场所。工具，或者有效的网上销售场所。5.2.2 网站目录与链接结构的设计网站目录与链接结构的设计网站链接结构的原则是：用最少的链接，使得浏览最有效率。网站链接结构的原则是：用最少的链接，使得浏览最有效率。l一般地，建立网站的链接结构有如下两种基本方式。一般地，建立网站的链接结构有如下两种基本方式。1.树状链接结构（一对一）树状链接结构（一对一）类似类似dos的目录结构，首页链接指向一级页面，一级页面的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构像一棵树。链接指向二级页面。立体结构

10、像一棵树。优点：优点：条理清晰，不会条理清晰，不会“迷路迷路”；缺点：缺点：浏览效率低，一个栏目下的浏览效率低，一个栏目下的 子页面到另一个栏目下子页面到另一个栏目下的子页面，必须绕径首页。的子页面，必须绕径首页。2.网状链接结构（一对多）网状链接结构（一对多）l类似网络服务器的链接，每个页面相互之间都建类似网络服务器的链接，每个页面相互之间都建立有链接。立体结构像一张网。立有链接。立体结构像一张网。优点：优点：浏览方便，随时可以到达自己喜欢的页面；浏览方便，随时可以到达自己喜欢的页面；缺点：缺点：链接太多，容易链接太多，容易“迷路迷路”。主主 页页产品展示产品展示关于我们关于我们网上销售网上

11、销售在线服务在线服务网站管理网站管理信息发布信息发布企业简介企业简介企业动态企业动态业务联系业务联系产品分类产品分类产品目录产品目录产品简介产品简介产品详情产品详情分类查询分类查询品牌介绍品牌介绍新品推介新品推介产品查询产品查询用户注册用户注册购物车购物车订单查询订单查询电子合同电子合同交易交易证书下载证书下载FAQ在线提问在线提问售后服务售后服务技术支持技术支持用户反馈用户反馈信息展示信息展示信息查询信息查询客户资源管理客户资源管理产品管理产品管理供应商管理供应商管理交易管理交易管理新闻管理新闻管理访问分析访问分析技术支持管理技术支持管理超级用户管理超级用户管理l这两种基本结构都只是理想方式

12、，在实际的网站这两种基本结构都只是理想方式，在实际的网站中，总是将这两种结构混合起来使用。中，总是将这两种结构混合起来使用。最好的办法是：最好的办法是：首页和一级页面之间用网状链接结构，一级和二首页和一级页面之间用网状链接结构，一级和二级页面之间用树状链接结构。超过三级页面，在级页面之间用树状链接结构。超过三级页面，在页面顶部设置导航条。页面顶部设置导航条。一级页面一级页面 二级页面二级页面 企业新闻页企业新闻页新闻新闻1，新闻，新闻2首页首页产品信息页产品信息页产品产品1，产品，产品2 技术服务页技术服务页服务服务1，服务，服务2l随着电子商务的推广，网站竞争越来越激烈，对随着电子商务的推广

13、，网站竞争越来越激烈，对链接结构设计的要求已经不仅仅局限与可以方便链接结构设计的要求已经不仅仅局限与可以方便快速地浏览，更加注重个性化和相关性快速地浏览，更加注重个性化和相关性l例子，请见书例子，请见书p114倒数第三段倒数第三段l5.2.3 网站整体风格的设计网站整体风格的设计整体风格设计是网站设计中的重点和难点，是所有整体风格设计是网站设计中的重点和难点，是所有网页开发者最希望掌握的，也是最难以学习的，网页开发者最希望掌握的，也是最难以学习的，因为没有一个固定的程式可以参照和模仿。因为没有一个固定的程式可以参照和模仿。网站风格是抽象的，是指站点的整体形象给浏览者网站风格是抽象的，是指站点的

14、整体形象给浏览者的综合感受。的综合感受。有风格的网站与普通网站的区别在于：有风格的网站与普通网站的区别在于：在普通网站上看到的只是堆砌在一起的信息，浏在普通网站上看到的只是堆砌在一起的信息，浏览者只能用理性的感受来描述；但有风格的网站览者只能用理性的感受来描述；但有风格的网站可以使人有更深一层的感性认识。可以使人有更深一层的感性认识。l通常情况下，网站的设计者要根据企业的具体情通常情况下，网站的设计者要根据企业的具体情况，找出其最有特色、特点的东西况，找出其最有特色、特点的东西即是最能即是最能体现网站风格的东西，并以它作为网站的特色加体现网站风格的东西，并以它作为网站的特色加以重点强化，突出宣

15、传。以重点强化，突出宣传。具体做法没有定式，这里仅提供以下一些参考具体做法没有定式，这里仅提供以下一些参考1)使企业的标志尽可能出现在每个页面上，或者使企业的标志尽可能出现在每个页面上，或者在页眉，或者页脚，或者背景；在页眉，或者页脚，或者背景；2)突出网站的标准色彩；突出网站的标准色彩；3)突出网站的标准字体；突出网站的标准字体；4)设计一条朗朗上口宣传标语；设计一条朗朗上口宣传标语；5)使用统一的图片处理效果；使用统一的图片处理效果；6)创造一个企业站点特有的符号或图标创造一个企业站点特有的符号或图标7)使网站的标志尽可能出现在每个页面使网站的标志尽可能出现在每个页面l创意设计创意设计网站

16、的创意网站的创意创意思考的过程创意思考的过程l准备期准备期孵化期孵化期启示期启示期验证期验证期形成期形成期创意思考的途径创意思考的途径l1.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.使它速度加快使它

17、速度加快 16.16.使它对称使它对称 等等5.3 5.3 网页的可视化设计网页的可视化设计 5.3.1 网页设计原则网页设计原则1.网页命名要简洁网页命名要简洁 这样既会有助于以后方便地管理网页，又会在这样既会有助于以后方便地管理网页，又会在向搜索引擎提交网页时更容易被别人检索到。向搜索引擎提交网页时更容易被别人检索到。2.2.确保页面的导览性好确保页面的导览性好 一般来说，网站应提供一个关于本站点的地图，一般来说，网站应提供一个关于本站点的地图，让用户知道在哪儿以及能去哪儿。让用户知道在哪儿以及能去哪儿。3.3.网页要易读网页要易读 这就意味着需要规划文字与背景颜色的搭配方这就意味着需要规

18、划文字与背景颜色的搭配方案。此外，网页的字体、大小也是需要考虑的因案。此外，网页的字体、大小也是需要考虑的因素。素。4.合理设计视觉效果合理设计视觉效果 视觉效果主要体现在网页的结构和排版上。要善视觉效果主要体现在网页的结构和排版上。要善用表格来布局网页，突出显示出网站内容的层次用表格来布局网页，突出显示出网站内容的层次性和空间性。性和空间性。l5.为图片添加文字说明为图片添加文字说明l这样一来，当网速很慢不能把图象下载下来时或这样一来，当网速很慢不能把图象下载下来时或者用户在使用文本类型的浏览器时，照样能阅读者用户在使用文本类型的浏览器时，照样能阅读网页的内容网页的内容6.不宜使用太多的动画

19、和静态图片不宜使用太多的动画和静态图片太多的动画和静态图片会增大网页容量，浪费用户太多的动画和静态图片会增大网页容量，浪费用户的金钱和时间。的金钱和时间。l7.页面长度要适中页面长度要适中一个长页面的传输时间要比较短的页面的传输时间一个长页面的传输时间要比较短的页面的传输时间长，太长的页面传输会使用户在等待中失去耐心。长，太长的页面传输会使用户在等待中失去耐心。如有大量的基于文本的文档，就应当以如有大量的基于文本的文档，就应当以Adobe Acrobat 格式的文件形式来放置。格式的文件形式来放置。l8.Java程序少用为宜程序少用为宜因为目前来讲因为目前来讲Java的运行速度还比较慢，往往使

20、浏的运行速度还比较慢，往往使浏览者没有耐心等待页面全部显示出来。览者没有耐心等待页面全部显示出来。l9.整个页面风格要一致整个页面风格要一致这样用户就会在浏览网页时觉得舒服、顺畅，对网这样用户就会在浏览网页时觉得舒服、顺畅，对网站留下深刻的印象。站留下深刻的印象。l10.计数器能不用最好不用计数器能不用最好不用计数器也是由程序设计成的，显示计数器的过程其计数器也是由程序设计成的，显示计数器的过程其实就是一个程序的执行过程，它需要占用用户宝实就是一个程序的执行过程，它需要占用用户宝贵的上网时间，并且往往毫无意义。贵的上网时间，并且往往毫无意义。l11.尽量使用超级链接尽量使用超级链接这样制作的网

21、页的可移植性比较强，输入量较小。这样制作的网页的可移植性比较强，输入量较小。另外要保证超链接的直观有效，以便使用户能够另外要保证超链接的直观有效，以便使用户能够很快地找到其想要的东西。很快地找到其想要的东西。12.不要滥用尖端技术不要滥用尖端技术l使用尖端技术有可能会打击企业部分用户访问网使用尖端技术有可能会打击企业部分用户访问网站的兴趣和积极性；另一方面，最新的网站开发站的兴趣和积极性；另一方面，最新的网站开发技术还存在用户浏览器的版本支持问题。技术还存在用户浏览器的版本支持问题。网站网站CICI形象设计形象设计lCI:CI:企业形象。企业形象。CICI设计主要指网站的标志、设计主要指网站的

22、标志、色彩、字体、标语等。色彩、字体、标语等。l1 1、网站标志、名称设计、网站标志、名称设计网站有代表性的人、事、物网站有代表性的人、事、物专业性网站的代表性物品专业性网站的代表性物品英文名称作标志英文名称作标志网站名称要合法、合理、合情网站名称要合法、合理、合情网站标志、名称网站标志、名称设计网站的标准色彩设计网站的标准色彩标准色彩：指能体现网站形象和延伸内涵的标准色彩：指能体现网站形象和延伸内涵的色彩。色彩。一般地，网站的标准色彩不要超过一般地，网站的标准色彩不要超过3 3种种标准色彩要用于网站的标志、标题、主菜单标准色彩要用于网站的标志、标题、主菜单和主色块和主色块。l色彩设计色彩设计

23、色彩的基本知识色彩的基本知识l三原色原理三原色原理l色彩搭配色彩搭配l色彩的心理感觉色彩的心理感觉l色彩的对比色彩的对比l色彩的区域大小和形状色彩的区域大小和形状l色彩的位置色彩的位置网页色彩设计网页色彩设计l网页配色的基本方法网页配色的基本方法底色和图形色底色和图形色整体色彩整体色彩颜色的平衡颜色的平衡配色时要有重点色配色时要有重点色渐变色的调和渐变色的调和统调配色统调配色分割配色分割配色l网页色彩设计网页色彩设计网页内容的色彩网页内容的色彩网页标题色网页标题色导航菜单色导航菜单色侧栏色侧栏色页脚色页脚色l网页色彩搭配的技巧网页色彩搭配的技巧暖色调暖色调冷色调冷色调对比色调对比色调网页配色网

24、页配色宣传型电子商务网站宣传型电子商务网站实现网上商务交易的电子商务网站实现网上商务交易的电子商务网站企业信息化的电子商务网站企业信息化的电子商务网站5.3.2 网页版面布局的设计网页版面布局的设计版面指的是用户在浏览器中看到的一个完整页面版面指的是用户在浏览器中看到的一个完整页面（可以包含框架和层）。布局就是指以最适合（可以包含框架和层）。布局就是指以最适合用户浏览的方式将图片和文字排放在页面的不用户浏览的方式将图片和文字排放在页面的不同位置。同位置。1.网页版面布局步骤网页版面布局步骤1)创建初始方案。这属于创造阶段，不讲究细腻创建初始方案。这属于创造阶段，不讲究细腻工整，不必考虑细节功能

25、，只以粗陋的线条勾工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。画出创意的轮廓即可。2.见的版面布局形式见的版面布局形式a)“T”结构布局。结构布局。所谓所谓“T”结构，就是指网页上边和左边相结结构，就是指网页上边和左边相结合，页面顶部的横条网站标志和广告条，下方左合，页面顶部的横条网站标志和广告条，下方左面为主菜单，右面显示内容的布局，这是网页设面为主菜单，右面显示内容的布局，这是网页设计中用的最广泛的一种布局方式计中用的最广泛的一种布局方式优点：优点：信息能被用户最大限度的获取，而且很方便；信息能被用户最大限度的获取，而且很方便；其次是页面结构清晰，主次分明、易于使用。其次是

26、页面结构清晰，主次分明、易于使用。缺点：缺点：规矩呆板，让人规矩呆板，让人“看之无味看之无味”。b)“口口”型布局。型布局。指页面上下各有一个广告条，左面是主菜单，指页面上下各有一个广告条，左面是主菜单，右面是友情链接等，中间是主要内容。右面是友情链接等，中间是主要内容。优点：优点：页面充实、内容丰富、信息量大；页面充实、内容丰富、信息量大；缺点：缺点：页面拥挤，不够灵活。页面拥挤，不够灵活。c)“三三”型布局。型布局。特点是页面上横向两条色块，将页面整特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。体分割为四部分，色块中大多放广告条。d)对称对比布局。对称对比布局。优点

27、：优点：视觉冲击力强；视觉冲击力强；缺点：缺点：将两部分有机地结合比较困难。将两部分有机地结合比较困难。e)POP布局。指页面布局像一张宣传海报，布局。指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。以一张精美图片作为页面的设计中心。优点：优点：漂亮吸引人；漂亮吸引人；缺点：缺点：速度慢。速度慢。3.页面版面布局原则与技巧页面版面布局原则与技巧只有当内容和形式，即具体的网页的排版布局达到一种协调只有当内容和形式，即具体的网页的排版布局达到一种协调的状态才算是一种真正成功的网页设计。的状态才算是一种真正成功的网页设计。l以下是一些设计原则：以下是一些设计原则：1)正常平衡；正常平衡；

28、多指左右、上下对照形式。多指左右、上下对照形式。主要强调秩序，能达到安定诚实、信赖的效果主要强调秩序，能达到安定诚实、信赖的效果 2）异常平衡；即非对照形式，但也要平衡和韵律。）异常平衡；即非对照形式，但也要平衡和韵律。此种布局能达到强调性、不安性、高注目性的效果此种布局能达到强调性、不安性、高注目性的效果 3）对比；）对比；色彩、色调等技巧的对比，及内容上色彩、色调等技巧的对比，及内容上 的古今、新旧、贫富对比。的古今、新旧、贫富对比。4)凝视；指利用页面中人物的凝视；指利用页面中人物的 视线，使浏览者仿照跟随的视线，使浏览者仿照跟随的 心理，以达到注视页面的效果。心理，以达到注视页面的效果

29、。5)空白；突出卓越和优越感，空白；突出卓越和优越感，有效体现网页格调。有效体现网页格调。4)图片解说。图片解说。此法对不能用语言说服、或用语言此法对不能用语言说服、或用语言无法表达的情感，特别有效无法表达的情感，特别有效 5.3.3 网页色彩设计网页色彩设计在网页设计中，应根据和谐、均衡和重点突出的原在网页设计中，应根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的则，将不同的色彩进行组合、搭配来构成美丽的页面。页面。研究表明：研究表明：彩色的记忆效果是黑白色得彩色的记忆效果是黑白色得3.5倍。也就是说，倍。也就是说，彩色页面较完全的黑白页面更加吸引人。彩色页面较完全的黑

30、白页面更加吸引人。在网页设计中较常的做法：在网页设计中较常的做法：主要内容文字用非彩色（黑色），边框、背景、主要内容文字用非彩色（黑色），边框、背景、图片用彩色，这样页面整体不单调，用户看主图片用彩色，这样页面整体不单调，用户看主要内容也不会眼花。要内容也不会眼花。1.网页色彩搭配的原理网页色彩搭配的原理1)色彩的鲜明性；色彩的鲜明性；2)色彩的独特性；色彩的独特性；3)色彩的合适性；色彩的合适性；4)色彩的联想性。色彩的联想性。2.网页色彩搭配的技巧网页色彩搭配的技巧1)相同色系色彩；相同色系色彩；2)运用对比色或互补色；运用对比色或互补色；3)使用过渡色；使用过渡色；4)用黑色和一种彩色；

31、用黑色和一种彩色；5)不要将所有颜色都用到，尽量控制在三种色彩以内；不要将所有颜色都用到，尽量控制在三种色彩以内；6)背景和文字的对比尽量要大，要有足够的对比度来保证背景和文字的对比尽量要大，要有足够的对比度来保证页面易于阅读；页面易于阅读；7)在设计中要考虑主要用户群的背景和构成。在设计中要考虑主要用户群的背景和构成。8 8）标准色彩要用于网站的标志、标题、主菜单和主色块。标准色彩要用于网站的标志、标题、主菜单和主色块。5.3.4 网页中图片和文字的设计网页中图片和文字的设计1.善用图片善用图片l现今现今 web 上展现的绝大多数图片和图象是上展现的绝大多数图片和图象是GIF和和JPEG格式

32、、格式、PNG和和FlashPix文件格式。文件格式。l一般情况下，一般情况下，GIF格式格式:漫画、图标、动画和平铺式图案背景。漫画、图标、动画和平铺式图案背景。JPEG格式格式:照片和艺术复制品。照片和艺术复制品。图像的格式与大小图像的格式与大小l大小：单张大小：单张30KB，单页单页60KB，较大图像应进行较大图像应进行“切割切割”l图象的格式：图象的格式：GIF、JPEG图像设计技巧图像设计技巧l为图片加入说明为图片加入说明l缩略图的使用缩略图的使用l图片的更新图片的更新l透明色的使用透明色的使用l慎用网页背景图片慎用网页背景图片l动画设计动画设计GIF动画与动画与Flash动画动画图

33、像的内容应有一定的实际作用，切忌虚饰浮夸，图像的内容应有一定的实际作用，切忌虚饰浮夸，最佳的图象应集美观与信息内容与一身。最佳的图象应集美观与信息内容与一身。图象可以弥补文字的不足，但并不能够完全取代文图象可以弥补文字的不足，但并不能够完全取代文字。因此，制作页面时，必须注意将图象所包含字。因此，制作页面时，必须注意将图象所包含的重要信息或链接到其他页面的指示用文字重复的重要信息或链接到其他页面的指示用文字重复表达一次。表达一次。2.网站字体网站字体下面是网页设计中有关字体的使用原则和技巧：下面是网页设计中有关字体的使用原则和技巧：i.不要使用超过三种以上的字体；不要使用超过三种以上的字体；i

34、i.不要用太大或太小的文字；不要用太大或太小的文字；iii.避免过多使用不停闪烁的文字。避免过多使用不停闪烁的文字。标准字体：指用于标志、标题、主菜单、主体内标准字体：指用于标志、标题、主菜单、主体内容的字体。容的字体。不常用字体最好通过图片形式显示不常用字体最好通过图片形式显示5.4 首页设计首页设计l 首页也叫主页，它是网站的形象页面，是网站的首页也叫主页，它是网站的形象页面，是网站的“门面门面”，故被称为，故被称为“Home Page”,它的设计是一它的设计是一个网站成功与否的关键。个网站成功与否的关键。l 首页的设计应该遵循快速、简洁、吸引人、信息首页的设计应该遵循快速、简洁、吸引人、

35、信息概括能力强、易于导航的原则，同时应纳入企业概括能力强、易于导航的原则，同时应纳入企业CIS（企业形象识别系统）计划，与企业（企业形象识别系统）计划，与企业CIS的其的其他内容协调起来。他内容协调起来。5.4.1 首页的功能模块首页的功能模块首页的功能模块是指在首页上需要实现的主要内容首页的功能模块是指在首页上需要实现的主要内容及其功能，最简单地在主页上必须清楚地列出三及其功能，最简单地在主页上必须清楚地列出三项要点：项要点：机构名称、提供的产品或服务以及主页内容（即网机构名称、提供的产品或服务以及主页内容（即网站上其他页面还载有什么资料）。站上其他页面还载有什么资料）。1)页头页头 用来准

36、确无误地标示企业的网站，它应该能够体现用来准确无误地标示企业的网站，它应该能够体现出企业网站的主题，而该主题是与企业的产品出企业网站的主题，而该主题是与企业的产品和服务紧密相关的。和服务紧密相关的。2)主菜单主菜单l 即导航条，它提供了对关键页面的简捷导航，即导航条，它提供了对关键页面的简捷导航，其超链接或图标应明确地表明企业网站的其他其超链接或图标应明确地表明企业网站的其他页面上还载有什么样的信息。页面上还载有什么样的信息。3)最新消息的传递最新消息的传递 如果企业网站的主页从不改变，用户很快会厌倦。如果企业网站的主页从不改变，用户很快会厌倦。在主页上预告即将有新资料推出，可吸引用户在主页上

37、预告即将有新资料推出，可吸引用户再来浏览。为保新鲜感，应时刻确保主页提供再来浏览。为保新鲜感，应时刻确保主页提供的是最新信息。的是最新信息。4)电子邮件地址电子邮件地址l 在页面底部设计简单的电子邮件链接，可使用在页面底部设计简单的电子邮件链接，可使用户与网站的有关负责人迅速取得联系。有利于户与网站的有关负责人迅速取得联系。有利于用户节省大量搜索时间，同时企业也能及时获用户节省大量搜索时间，同时企业也能及时获得信息反馈。得信息反馈。5)联络信息。可以列出通讯地址、公关或营业部联络信息。可以列出通讯地址、公关或营业部门的电话号码等，以便用户联系。门的电话号码等，以便用户联系。6)版权信息。版权信

38、息。7)其他信息。如广告条、搜索、友情链接、邮件其他信息。如广告条、搜索、友情链接、邮件列表、计数器等。列表、计数器等。l处理技术上的细节处理技术上的细节风格、链接、图形、动画、文字、速度风格、链接、图形、动画、文字、速度5.4.2 首页的可视化设计首页的可视化设计 确定好首页的内容和功能后，就可以设计首页的版确定好首页的内容和功能后，就可以设计首页的版面了。面了。在图文类首页中，通常以图片和标题为视觉兴趣点。在图文类首页中，通常以图片和标题为视觉兴趣点。为吸引浏览者的注意力，可将文字标题融合在画为吸引浏览者的注意力，可将文字标题融合在画面中，使两个兴趣点合为一体。面中，使两个兴趣点合为一体。

39、勾画草图勾画草图软件实现软件实现vioso2002l 设计版面的最好方法是：找一张白纸、一支笔，设计版面的最好方法是：找一张白纸、一支笔，先将理想中的草图勾勒出来，然后再用网页制作先将理想中的草图勾勒出来，然后再用网页制作软件实现软件实现l 设计人员要了解企业的设计人员要了解企业的CIS，熟悉企业标志、吉，熟悉企业标志、吉祥物、字体及用色标准，以便在网站的局部将之祥物、字体及用色标准，以便在网站的局部将之体现出来，于平淡之中勾画出一个优美的符合企体现出来，于平淡之中勾画出一个优美的符合企业特点的曲线，从而将企业印在浏览者的脑海里。业特点的曲线，从而将企业印在浏览者的脑海里。l 在设计中，应避免

40、在设计中，应避免“封面封面”问题。封面是指没有问题。封面是指没有具体内容，只放一个标徽具体内容，只放一个标徽Logo点击进入，或者只点击进入，或者只有简单的图象菜单的首页。有简单的图象菜单的首页。5.4.3 首页设计要注意的问题首页设计要注意的问题1)首页明确，主题突出；首页明确，主题突出；2)尽可能缩短下载时间。尽可能缩短下载时间。此外，还需注意配合最抵挡的设备此外，还需注意配合最抵挡的设备5.5 其他页面的设计其他页面的设计5.5.1 新闻页面的设计新闻页面的设计任何类型企业的电子商务站点都应该有一个新闻页面，该页任何类型企业的电子商务站点都应该有一个新闻页面，该页面担负着双重作用，既可以

41、用来动态发布有关新产品或新面担负着双重作用，既可以用来动态发布有关新产品或新开发项目或公司活动的情况，又可以作为公司的活动年表。开发项目或公司活动的情况，又可以作为公司的活动年表。建立新闻页面，首先在主页上要编写并设置可点击的新闻标建立新闻页面，首先在主页上要编写并设置可点击的新闻标题，然后再编写完整的新闻页面，这些页面通过超链接与题，然后再编写完整的新闻页面，这些页面通过超链接与新闻标题相连。新闻标题相连。1.主页中的新闻标题主页中的新闻标题l通常标题的文字不宜过长，主要包括的要素与设计的方通常标题的文字不宜过长，主要包括的要素与设计的方法如下：法如下：1)新闻标题组成的要素新闻标题组成的要

42、素a.新闻日期，日期位于标题的开头；新闻日期，日期位于标题的开头；b.使用一个动词来描述该新闻的目的；使用一个动词来描述该新闻的目的；c.设计的产品或企业，着重表示该新闻直接涉及到产品或设计的产品或企业，着重表示该新闻直接涉及到产品或企业；企业；d.提示语，用来激发浏览者的兴趣。提示语，用来激发浏览者的兴趣。2)新闻标题的版面布置新闻标题的版面布置主页中新闻标题的版面布置要保持简单、清晰、引人注目，主页中新闻标题的版面布置要保持简单、清晰、引人注目，通常可采用以下几种方法。通常可采用以下几种方法。a.新闻标题的排列按降序进行排列，开头顶部是最近的新新闻标题的排列按降序进行排列，开头顶部是最近的

43、新闻，底部是最旧的新闻；闻，底部是最旧的新闻；b.可在新闻标题前采用标准编目符或小的图象作为点缀，可在新闻标题前采用标准编目符或小的图象作为点缀，增加页面的可读性；增加页面的可读性；c.将新闻标题的列表放在一个上下滚动的窗口中以容纳更将新闻标题的列表放在一个上下滚动的窗口中以容纳更多的新闻。多的新闻。l2.新闻页面新闻页面l 新闻页面要满足易于导航的要求，通常可以通过在新闻新闻页面要满足易于导航的要求，通常可以通过在新闻页面建立以下几种方式来实现。页面建立以下几种方式来实现。1)建立菜单栏导航系统以便与用户实现新闻页面与网站中建立菜单栏导航系统以便与用户实现新闻页面与网站中其他页面间的无缝跳转

44、。其他页面间的无缝跳转。2)建立与前面或后面新闻的链接；建立与前面或后面新闻的链接；3)将新闻进行分类或时间索引，建立菜单，用户可根据时将新闻进行分类或时间索引，建立菜单，用户可根据时间或内容检索其感兴趣的新闻；间或内容检索其感兴趣的新闻；4)在新闻页面中包含与该新闻有关的图片、声音或其他多在新闻页面中包含与该新闻有关的图片、声音或其他多媒体文件；媒体文件；将稿件中出现的关键人名链接到其将稿件中出现的关键人名链接到其E-mail 地址或其因特地址或其因特网页面上；网页面上；考虑链接到稿件中提到的任何企业合伙人、公司雇员的考虑链接到稿件中提到的任何企业合伙人、公司雇员的见解或其他说明；见解或其他

45、说明；客户、分析家或公共舆论对该新闻稿主题的见解。客户、分析家或公共舆论对该新闻稿主题的见解。5.5.2 产品页面的制作产品页面的制作产品页面一般采用信息分层、逐层细化的方法展示公司产品产品页面一般采用信息分层、逐层细化的方法展示公司产品或服务。或服务。l产品页面的主要内容应包括因特网产品产品页面的主要内容应包括因特网产品/价格清单以及单个价格清单以及单个产品页面，建立产品名称到产品页面的链接，还可以利用产品页面，建立产品名称到产品页面的链接，还可以利用高级的表格给目录增加新的风格和生动的图象。高级的表格给目录增加新的风格和生动的图象。产品页面的创建主要在于掌握产品目录的层次结构和导航方产品页

46、面的创建主要在于掌握产品目录的层次结构和导航方法。法。l产品目录的分层通常如下：产品目录的分层通常如下：第一层：首先建立一个产品第一层：首先建立一个产品/价格列表，该表使用户能够全面价格列表，该表使用户能够全面浏览公司的产品；浏览公司的产品；第二层：对应每个产品的页面，该页面将对此项产品的有关第二层：对应每个产品的页面，该页面将对此项产品的有关信息进行全面的介绍；信息进行全面的介绍；第三层：产品更深层次的信息，从这一层中浏览者可以深入第三层：产品更深层次的信息，从这一层中浏览者可以深入了解该产品的技术细节、设计维护等；了解该产品的技术细节、设计维护等；第四层：如果浏览者对第三层的信息还不满足，

47、可以通过网第四层：如果浏览者对第三层的信息还不满足，可以通过网络向公司的有关人员进一步了解信息。络向公司的有关人员进一步了解信息。产品页面应达到以下要求：产品页面应达到以下要求：包含关于产品尽可能多的有用的信息；包含关于产品尽可能多的有用的信息；具有独创性；具有独创性；包含站点的导航菜单及其到产品包含站点的导航菜单及其到产品/价格列表目录的链接。另价格列表目录的链接。另外要注意的是不要在产品页面上增加太多无用的链接。外要注意的是不要在产品页面上增加太多无用的链接。5.5.3 雇员页面雇员页面雇员是企业最宝贵的资源和财富，网上企业通过创建每个雇雇员是企业最宝贵的资源和财富，网上企业通过创建每个雇

48、员的页面可以吸引潜在客户，同时也是使虚拟企业人格化员的页面可以吸引潜在客户，同时也是使虚拟企业人格化的有效手段。的有效手段。目前，网上企业的雇员页面大都采用框架（目前，网上企业的雇员页面大都采用框架（Frames）形式。）形式。最简单的框架是将网页分成左右两部分，左半部分放置雇最简单的框架是将网页分成左右两部分，左半部分放置雇员名字按字母顺序排列的清单，每个雇员名字都链接到该员名字按字母顺序排列的清单，每个雇员名字都链接到该雇员的个人页面；个人页面的内容放置在右半部分的框架雇员的个人页面；个人页面的内容放置在右半部分的框架中。中。1.设计雇员目录设计雇员目录l 设计按字母排序的雇员清单，填入左

49、框。设计按字母排序的雇员清单，填入左框。2.创建默认页面创建默认页面默认页面应提供下列基本信息：企业名称及标志；如何使用默认页面应提供下列基本信息：企业名称及标志；如何使用框架浏览式的雇员目录页面；返回站点主页的链接。框架浏览式的雇员目录页面；返回站点主页的链接。3.创建个人页面创建个人页面l个人页面应包括以下信息：个人页面应包括以下信息：1)联系信息；联系信息；2)组织和部门信息；组织和部门信息；3)雇员背景信息；雇员背景信息；4)增加一些有趣的材料。增加一些有趣的材料。5.5.4 其他页面设计其他页面设计q客户支持页面客户支持页面q市场调研页面市场调研页面q企业信息页面企业信息页面q其他内

50、容。其他内容。5.6 网页制作网页制作l5.6.1 电子商务网站中的电子商务网站中的web资源资源l一般而言，一个电子商务网站中的一般而言，一个电子商务网站中的web资源总是包括静态资源总是包括静态网页和动态网页两种。网页和动态网页两种。l静态网页：静态网页：是一个个是一个个.html文件，内容相对稳定，不需要经文件，内容相对稳定，不需要经常修改，文件比较小，适合在网上传输，执行效率很高；常修改，文件比较小，适合在网上传输，执行效率很高；如公司介绍、员工信息、销售网络、售后服务信息等是一如公司介绍、员工信息、销售网络、售后服务信息等是一些相对固定不变的信息。些相对固定不变的信息。动态网页：动态