第5章电子商务网站内容设与开发

第第5 5章电子商务网站的内容设计与开发章电子商务网站的内容设计与开发15.1 5.1 网站内容设计的流程网站内容设计的流程5.2 5.2 网站信息结构的设计网站信息结构的设计5.3 5.3 网页的可视化设计网页的可视化设计5.4 5.4 首页设计首页设计5.5 5.5 其他网页的设计其他网页的设计5.6 5.6 网页制作网页制作25.1 电子商务网站内容设计的流程电子商务网站内容设计的流程5.11 网站内容设计的原则网站内容设计的原则 企业要在因特网上开展电子商务，就应企业要在因特网上开展电子商务，就应该在网站的内容设计方面遵循一些基本原则，该在网站的内容设计方面遵循一些基本原则，一般来说，最起码应考虑到以下三个方面：一般来说，最起码应考虑到以下三个方面： 信息内容、访问速度和页面美感。信息内容、访问速度和页面美感。以下分别从这三个方面来说明：以下分别从这三个方面来说明：31. 新、精、专的信息内容新、精、专的信息内容1) 信息内容永远处于第一位；信息内容永远处于第一位；2) 内容设计要有组织；内容设计要有组织；3) 及时更新信息内容。及时更新信息内容。2. 安全快速的访问安全快速的访问1) 提高浏览者的访问速度；提高浏览者的访问速度；2) 要有安全良好运转的硬件和软件环境；要有安全良好运转的硬件和软件环境；3) 遵循遵循“三次点击三次点击”原则，即网站的任原则，即网站的任何信息都应在最多三次点击之内得到。何信息都应在最多三次点击之内得到。43. 美感十足、方便用户访问的页面美感十足、方便用户访问的页面1) 提供交互性；提供交互性；2) 完善的检索和帮助功能；完善的检索和帮助功能；3) 方便用户访问和购买。方便用户访问和购买。5.1.2 5.1.2 网站内容设计流程网站内容设计流程 通常，电子商务网站的内容设计流通常，电子商务网站的内容设计流程都必须经过如下步骤：程都必须经过如下步骤：5a) 收集关于该网站的一些关键信息；收集关于该网站的一些关键信息；b) 网站信息结构的设计；网站信息结构的设计；c) 网站运行环境的选择，其具体选择标准和网站运行环境的选择，其具体选择标准和原则可参见第三章内容；原则可参见第三章内容；d) 进行网页可视化设计；进行网页可视化设计；e) 网页制作，网页制作， 通常情况下，在网页制作过程通常情况下，在网页制作过程中，需利用一定的中，需利用一定的web数据库技术进行信数据库技术进行信息和数据的动态发布和提供；息和数据的动态发布和提供；f) 网站的维护和管理。网站的维护和管理。见课本见课本p110图图5.165.2 5.2 电子商务网站信息结构的设计电子商务网站信息结构的设计一般来说，电子商务网站建设与企业的经营一般来说，电子商务网站建设与企业的经营战略、产品特性、财务预算以及当时的建站战略、产品特性、财务预算以及当时的建站目的等因素有着直接关系。目的等因素有着直接关系。5.21 网站信息内容及其功能模块网站信息内容及其功能模块 尽管每个电子商务网站规模不同，表现形尽管每个电子商务网站规模不同，表现形式各有特色，但从经营的实质上来说，不外乎式各有特色，但从经营的实质上来说，不外乎信息发布型和产品销售型这两种信息发布型和产品销售型这两种 基本形式，一基本形式，一个综合性的网站可能同时包含了这两种基本形个综合性的网站可能同时包含了这两种基本形式。式。 7 信息发布型的网站仍然是电子商务网站信息发布型的网站仍然是电子商务网站的主流形式。的主流形式。 信息发布型网站中信息结构的设计主要信息发布型网站中信息结构的设计主要是从以下几个方面来进行的：是从以下几个方面来进行的：见书见书p112图图5.21) 公司概况；公司概况；2) 员工信息；员工信息；3) 产品目录；产品目录；4) 产品价格表；产品价格表；5) 产品搜索；产品搜索；6) 公司动态；公司动态；7) 网上订购；网上订购；8) 销售网络；销售网络；9) 售后服务；售后服务；10)技术支持信息；技术支持信息；811) 联系信息；联系信息；12) 财务报告；财务报告；13) 辅助信息，辅助信息， 用来弥补产品品种用来弥补产品品种比较少，网页内容单调等不足；比较少，网页内容单调等不足；14) 其他内容信息；比如反馈表、公其他内容信息；比如反馈表、公司人才招聘信息、到其他相关站点司人才招聘信息、到其他相关站点的链接；的链接；15) 增值服务；增值服务； 开辟网络环境下的开辟网络环境下的新服务项目，以增加其服务功能，新服务项目，以增加其服务功能，吸引网民再次光临。吸引网民再次光临。9 在规划设计一个具体网站内容模块和在规划设计一个具体网站内容模块和功能时，主要应考虑企业本身的目标和所功能时，主要应考虑企业本身的目标和所决定的网站功能导向，让企业上网成为整决定的网站功能导向，让企业上网成为整体战略的一个有组成部分，让网站真正成体战略的一个有组成部分，让网站真正成为有效的品牌宣传阵地、有效的营销工具，为有效的品牌宣传阵地、有效的营销工具，或者有效的网上销售场所。或者有效的网上销售场所。5.2.2 网站链接结构的设计网站链接结构的设计 网站链接结构的原则是：用最少的链网站链接结构的原则是：用最少的链接，使得浏览最有效率。接，使得浏览最有效率。10一般地，建立网站的链接结构有如下两一般地，建立网站的链接结构有如下两种基本方式。种基本方式。1. 树状链接结构（一对一）树状链接结构（一对一） 类似类似dos的目录结构，首页链接指向的目录结构，首页链接指向一级页面，一级页面链接指向二级一级页面，一级页面链接指向二级页面。立体结构像一棵树。页面。立体结构像一棵树。优点：优点：条理清晰，不会条理清晰，不会“迷路迷路”；缺点：缺点：浏览效率低，一个栏目下的浏览效率低，一个栏目下的 子页面到另一个栏目下的子页面，子页面到另一个栏目下的子页面，必须绕径首页。必须绕径首页。112. 网状链接结构（一对多）网状链接结构（一对多） 类似网络服务器的链接，每个页面相类似网络服务器的链接，每个页面相互之间都建立有链接。立体结构像一张互之间都建立有链接。立体结构像一张网。网。优点：优点：浏览方便，随时可以到达自己浏览方便，随时可以到达自己喜欢的页面；喜欢的页面；缺点：缺点：链接太多，容易链接太多，容易“迷路迷路”。12 这两种基本结构都只是理想方式，这两种基本结构都只是理想方式，在实际的网站中，总是将这两种结构混在实际的网站中，总是将这两种结构混合起来使用。合起来使用。最好的办法是：最好的办法是： 首页和一级页面之间用网状链接结首页和一级页面之间用网状链接结构，一级和二级页面之间用树状链接构，一级和二级页面之间用树状链接结构。超过三级页面，在页面顶部设结构。超过三级页面，在页面顶部设置导航条。置导航条。例子，请见书例子，请见书p114倒数第三段倒数第三段13 随着电子商务的推广，网站竞争越来越激随着电子商务的推广，网站竞争越来越激烈，对链接结构设计的要求已经不仅仅局限烈，对链接结构设计的要求已经不仅仅局限与可以方便快速地浏览，更加注重个性化和与可以方便快速地浏览，更加注重个性化和相关性。相关性。5.2.3 网站整体风格的设计网站整体风格的设计 整体风格设计是网站设计中的重点和难整体风格设计是网站设计中的重点和难点，是所有网页开发者最希望掌握的，也是点，是所有网页开发者最希望掌握的，也是最难以学习的，因为没有一个固定的程式可最难以学习的，因为没有一个固定的程式可以参照和模仿。以参照和模仿。14 网站风格是抽象的，是指站点的整体网站风格是抽象的，是指站点的整体形象给浏览者的综合感受。形象给浏览者的综合感受。有风格的网站与普通网站的区别在于：有风格的网站与普通网站的区别在于： 在普通网站上看到的只是堆砌在一起在普通网站上看到的只是堆砌在一起的信息，浏览者只能用理性的感受来描述；的信息，浏览者只能用理性的感受来描述；但有风格的网站可以使人有更深一层的感但有风格的网站可以使人有更深一层的感性认识。性认识。15 通常情况下，网站的设计者要根据企业的通常情况下，网站的设计者要根据企业的具体情况，找出其最有特色、特点的东西具体情况，找出其最有特色、特点的东西即是最能体现网站风格的东西，并以它作为网即是最能体现网站风格的东西，并以它作为网站的特色加以重点强化，突出宣传。站的特色加以重点强化，突出宣传。具体做法没有定式，这里仅提供以下一些参考。具体做法没有定式，这里仅提供以下一些参考。1) 使企业的标志尽可能出现在每个页面上，使企业的标志尽可能出现在每个页面上，或者在页眉，或者页脚，或者背景；或者在页眉，或者页脚，或者背景；2) 突出网站的标准色彩；突出网站的标准色彩；163) 突出网站的标准字体；突出网站的标准字体；4) 设计一条朗朗上口宣传标语；设计一条朗朗上口宣传标语；5) 使用统一的图片处理效果；使用统一的图片处理效果；6) 创造一个企业站点特有的符号或图标。创造一个企业站点特有的符号或图标。175.3 5.3 网页的可视化设计网页的可视化设计5.3.1 网页设计原则网页设计原则1. 网页命名要简洁网页命名要简洁 这样既会有助于以后方便地管理网页，这样既会有助于以后方便地管理网页，又会在向搜索引擎提交网页时更容易被别又会在向搜索引擎提交网页时更容易被别人检索到。人检索到。2.2. 确保页面的导览性好确保页面的导览性好 一般来说，网站应提供一个关于本站点的一般来说，网站应提供一个关于本站点的地图，让用户知道在哪儿以及能去哪儿。地图，让用户知道在哪儿以及能去哪儿。183.3.网页要易读网页要易读 这就意味着需要规划文字与背景颜色的这就意味着需要规划文字与背景颜色的搭配方案。此外，网页的字体、大小也是搭配方案。此外，网页的字体、大小也是需要考虑的因素。需要考虑的因素。4. 合理设计视觉效果合理设计视觉效果 视觉效果主要体现在网页的结构和排版上。视觉效果主要体现在网页的结构和排版上。要善用表格来布局网页，突出显示出网站内要善用表格来布局网页，突出显示出网站内容的层次性和空间性。容的层次性和空间性。195. 为图片添加文字说明为图片添加文字说明 这样一来，当网速很慢不能把图象下载这样一来，当网速很慢不能把图象下载下来时或者用户在使用文本类型的浏览器时，下来时或者用户在使用文本类型的浏览器时，照样能阅读网页的内容。照样能阅读网页的内容。6. 不宜使用太多的动画和静态图片不宜使用太多的动画和静态图片 太多的动画和静态图片会增大网页容量，太多的动画和静态图片会增大网页容量，浪费用户的金钱和时间。浪费用户的金钱和时间。207. 页面长度要适中页面长度要适中 一个长页面的传输时间要比较短的页面一个长页面的传输时间要比较短的页面的传输时间长，太长的页面传输会使用户的传输时间长，太长的页面传输会使用户在等待中失去耐心。在等待中失去耐心。 如有大量的基于文本的文档，就应当以如有大量的基于文本的文档，就应当以Adobe Acrobat 格式的文件形式来放置。格式的文件形式来放置。8. Java程序少用为宜程序少用为宜 因为目前来讲因为目前来讲Java的运行速度还比较慢，的运行速度还比较慢，往往使浏览者没有耐心等待页面全部显往往使浏览者没有耐心等待页面全部显示出来。示出来。219. 整个页面风格要一致整个页面风格要一致 10. 计数器能不用最好不用计数器能不用最好不用 计数器也是由程序设计成的，显示计计数器也是由程序设计成的，显示计数器的过程其实就是一个程序的执行过程，数器的过程其实就是一个程序的执行过程，它需要占用用户宝贵的上网时间，并且往它需要占用用户宝贵的上网时间，并且往往毫无意义。往毫无意义。 这样用户就会在浏览网页时觉得舒服、这样用户就会在浏览网页时觉得舒服、顺畅，对网站留下深刻的印象。顺畅，对网站留下深刻的印象。2211. 尽量使用超级链接尽量使用超级链接 这样制作的网页的可移植性比较强，输入这样制作的网页的可移植性比较强，输入量较小。另外要保证超链接的直观有效，以量较小。另外要保证超链接的直观有效，以便使用户能够很快地找到其想要的东西。便使用户能够很快地找到其想要的东西。12. 不要滥用尖端技术不要滥用尖端技术 使用尖端技术有可能会打击企业部分用户使用尖端技术有可能会打击企业部分用户访问网站的兴趣和积极性；另一方面，最新访问网站的兴趣和积极性；另一方面，最新的网站开发技术还存在用户浏览器的版本支的网站开发技术还存在用户浏览器的版本支持问题。持问题。235.3.2 网页版面布局的设计网页版面布局的设计 版面指的是用户在浏览器中看到的一个完版面指的是用户在浏览器中看到的一个完整页面（可以包含框架和层）。布局就是指整页面（可以包含框架和层）。布局就是指以最适合用户浏览的方式将图片和文字排放以最适合用户浏览的方式将图片和文字排放在页面的不同位置。在页面的不同位置。1. 网页版面布局步骤网页版面布局步骤1) 创建初始方案。这属于创造阶段，不讲创建初始方案。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。粗陋的线条勾画出创意的轮廓即可。242) 初步设计网页的布局。初步设计网页的布局。 注意必须遵循突出重点、平衡谐调的原则，注意必须遵循突出重点、平衡谐调的原则，将网站标志、主菜单等最重要的模块放在最将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置，然后在考虑次要模块显眼、最突出的位置，然后在考虑次要模块的排放。的排放。3) 定案。将初步布局精细化、具体化。定案。将初步布局精细化、具体化。252. 常见的版面布局形式常见的版面布局形式a) “T”结构布局。结构布局。 所谓所谓“T”结构，就是指网页上边和左边结构，就是指网页上边和左边相结合，页面顶部的横条网站标志和广告条，相结合，页面顶部的横条网站标志和广告条，下方左面为主菜单，右面显示内容的布局，下方左面为主菜单，右面显示内容的布局，这是网页设计中用的最广泛的一种布局方式。这是网页设计中用的最广泛的一种布局方式。优点：优点：信息能被用户最大限度的获取，而且很信息能被用户最大限度的获取，而且很方便；其次是页面结构清晰，主次分明、方便；其次是页面结构清晰，主次分明、易于使用。易于使用。26缺点：缺点：规矩呆板，让人规矩呆板，让人“看之无味看之无味”。b) “口口”型布局。型布局。 指页面上下各有一个广告条，左面是指页面上下各有一个广告条，左面是主菜单，右面是友情链接等，中间是主要主菜单，右面是友情链接等，中间是主要内容。内容。优点：优点：页面充实、内容丰富、信息量大；页面充实、内容丰富、信息量大；缺点：缺点：页面拥挤，不够灵活。页面拥挤，不够灵活。27c) “三三”型布局。型布局。 特点是页面上横向两条色块，将页面整特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。体分割为四部分，色块中大多放广告条。d) 对称对比布局。对称对比布局。优点：优点：视觉冲击力强；视觉冲击力强；缺点：缺点：将两部分有机地结合比较困难。将两部分有机地结合比较困难。28e) POP布局。指页面布局像一张宣传海报，布局。指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。以一张精美图片作为页面的设计中心。 优点：优点：漂亮吸引人；漂亮吸引人； 缺点：缺点：速度慢。速度慢。3. 页面版面布局原则与技巧页面版面布局原则与技巧 只有当内容和形式，即具体的网页的排只有当内容和形式，即具体的网页的排版布局达到一种协调的状态才算是一种真版布局达到一种协调的状态才算是一种真正成功的网页设计。正成功的网页设计。291) 正常平衡；正常平衡； 多指左右、上下对照形式。多指左右、上下对照形式。2）异常平衡；）异常平衡； 即非对照形式，但也要平衡和韵律。即非对照形式，但也要平衡和韵律。3）对比；）对比； 色彩、色调等技巧的对比，及内容色彩、色调等技巧的对比，及内容上的古今、新旧、贫富对比。上的古今、新旧、贫富对比。以下是一些设计原则：以下是一些设计原则：304) 凝视；指利用页面中人物的视线，使凝视；指利用页面中人物的视线，使浏览者仿照跟随的心理，以达到注视浏览者仿照跟随的心理，以达到注视页面的效果。页面的效果。5) 空白；突出卓越和优越感，有效体现空白；突出卓越和优越感，有效体现网页格调。网页格调。6) 尽量用图片解说。尽量用图片解说。315.3.3 网页色彩设计网页色彩设计 在网页设计中，应根据和谐、均衡和重在网页设计中，应根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。配来构成美丽的页面。研究表明：研究表明： 彩色的记忆效果是黑白色得彩色的记忆效果是黑白色得3.5倍。也就倍。也就是说，彩色页面较完全的黑白页面更加吸是说，彩色页面较完全的黑白页面更加吸引人。引人。32在网页设计中较常的做法：在网页设计中较常的做法： 主要内容文字用非彩色（黑色），边框、背主要内容文字用非彩色（黑色），边框、背景、图片用彩色，这样页面整体不单调，用户景、图片用彩色，这样页面整体不单调，用户看主要内容也不会眼花。看主要内容也不会眼花。1. 网页色彩搭配的原理网页色彩搭配的原理1) 色彩的鲜明性；色彩的鲜明性；2) 色彩的独特性；色彩的独特性；3) 色彩的合适性；色彩的合适性；4) 色彩的联想性。色彩的联想性。332. 网页色彩搭配的技巧网页色彩搭配的技巧1) 相同色系色彩；相同色系色彩；2) 运用对比色或互运用对比色或互补色；补色；3) 使用过渡色；使用过渡色；4) 用黑色和一种彩用黑色和一种彩色；色；345) 不要将所有颜色都用到，尽量控制不要将所有颜色都用到，尽量控制在三种色彩以内；在三种色彩以内；6) 背景和文字的对比尽量要大，要有背景和文字的对比尽量要大，要有足够的对比度来保证页面易于阅读；足够的对比度来保证页面易于阅读；7) 在设计中要考虑主要用户群的背景在设计中要考虑主要用户群的背景和构成。和构成。355.3.4 网页中图片和文字的设计网页中图片和文字的设计1. 善用图片善用图片 现今现今 web 上展现的绝大多数图片和图象是上展现的绝大多数图片和图象是GIF和和JPEG格式、格式、PNG和和FlashPix文件格式。文件格式。 一般情况下，一般情况下，GIF格式格式: 漫画、图标、动画和平铺式图案漫画、图标、动画和平铺式图案背景。背景。JPEG格式格式: 照片和艺术复制品。照片和艺术复制品。36 图象可以弥补文字的不足，但并不能图象可以弥补文字的不足，但并不能够完全取代文字。因此，制作页面时，必够完全取代文字。因此，制作页面时，必须注意将图象所包含的重要信息或链接到须注意将图象所包含的重要信息或链接到其他页面的指示用文字重复表达一次。其他页面的指示用文字重复表达一次。 图像的内容应有一定的实际作用，切图像的内容应有一定的实际作用，切忌虚饰浮夸，最佳的图象应集美观与信息忌虚饰浮夸，最佳的图象应集美观与信息内容与一身。内容与一身。372. 网站字体网站字体下面是网页设计中有关字体的使下面是网页设计中有关字体的使用原则和技巧：用原则和技巧：i.不要使用超过三种以上的字体；不要使用超过三种以上的字体；ii. 不要用太大或太小的文字；不要用太大或太小的文字；iii. 避免过多使用不停闪烁的文字。避免过多使用不停闪烁的文字。385.4 首页设计首页设计 首页也叫主页，它是网站的形象页面，是首页也叫主页，它是网站的形象页面，是网站的网站的“门面门面”，故被称为，故被称为“Home Page”, 它它的设计是一个网站成功与否的关键。的设计是一个网站成功与否的关键。 首页的设计应该遵循快速、简洁、吸引人、首页的设计应该遵循快速、简洁、吸引人、信息概括能力强、易于导航的原则，同时应信息概括能力强、易于导航的原则，同时应纳入企业纳入企业CIS（企业形象识别系统）计划，与（企业形象识别系统）计划，与企业企业CIS的其他内容协调起来。的其他内容协调起来。395.4.1 首页的功能模块首页的功能模块 首页的功能模块是指在首页上需要实现的首页的功能模块是指在首页上需要实现的主要内容及其功能，最简单地在主页上必须主要内容及其功能，最简单地在主页上必须清楚地列出三项要点：清楚地列出三项要点： 机构名称、提供的产品或服务以及主页内机构名称、提供的产品或服务以及主页内容（即网站上其他页面还载有什么资料）。容（即网站上其他页面还载有什么资料）。40411) 页头页头 用来准确无误地标示企业的网站，它应该用来准确无误地标示企业的网站，它应该能够体现出企业网站的主题，而该主题是与能够体现出企业网站的主题，而该主题是与企业的产品和服务紧密相关的。企业的产品和服务紧密相关的。2) 主菜单主菜单 即导航条，它提供了对关键页面的简捷即导航条，它提供了对关键页面的简捷导航，其超链接或图标应明确地表明企业网导航，其超链接或图标应明确地表明企业网站的其他页面上还载有什么样的信息。站的其他页面上还载有什么样的信息。423) 最新消息的传递最新消息的传递 如果企业网站的主页从不改变，用户很快会如果企业网站的主页从不改变，用户很快会厌倦。在主页上预告即将有新资料推出，可吸厌倦。在主页上预告即将有新资料推出，可吸引用户再来浏览。为保新鲜感，应时刻确保主引用户再来浏览。为保新鲜感，应时刻确保主页提供的是最新信息。页提供的是最新信息。4) 电子邮件地址电子邮件地址 在页面底部设计简单的电子邮件链接，可在页面底部设计简单的电子邮件链接，可使用户与网站的有关负责人迅速取得联系。有使用户与网站的有关负责人迅速取得联系。有利于用户节省大量搜索时间，同时企业也能及利于用户节省大量搜索时间，同时企业也能及时获得信息反馈。时获得信息反馈。435) 联络信息。可以列出通讯地址、公关联络信息。可以列出通讯地址、公关或营业部门的电话号码等，以便用户或营业部门的电话号码等，以便用户联系。联系。6) 版权信息。版权信息。7) 其他信息。如广告条、搜索、友情链其他信息。如广告条、搜索、友情链接、邮件列表、计数器等。接、邮件列表、计数器等。445.4.2 首页的可视化设计首页的可视化设计 确定好首页的内容和功能后，就可以设确定好首页的内容和功能后，就可以设计首页的版面了。计首页的版面了。 在图文类首页中，通常以图片和标题为在图文类首页中，通常以图片和标题为视觉兴趣点。为吸引浏览者的注意力，可视觉兴趣点。为吸引浏览者的注意力，可将文字标题融合在画面中，使两个兴趣点将文字标题融合在画面中，使两个兴趣点合为一体。合为一体。45 设计版面的最好方法是：找一张白纸、设计版面的最好方法是：找一张白纸、一支笔，先将理想中的草图勾勒出来，然后一支笔，先将理想中的草图勾勒出来，然后再用网页制作软件实现。再用网页制作软件实现。 设计人员要了解企业的设计人员要了解企业的CIS，熟悉企业标，熟悉企业标志、吉祥物、字体及用色标准，以便在网站志、吉祥物、字体及用色标准，以便在网站的局部将之体现出来，于平淡之中勾画出一的局部将之体现出来，于平淡之中勾画出一个优美的符合企业特点的曲线，从而将企业个优美的符合企业特点的曲线，从而将企业印在浏览者的脑海里。印在浏览者的脑海里。46 在设计中，应避免在设计中，应避免“封面封面”问题。封面是问题。封面是指没有具体内容，只放一个标徽指没有具体内容，只放一个标徽Logo点击进点击进入，或者只有简单的图象菜单的首页。入，或者只有简单的图象菜单的首页。5.4.3 首页设计要注意的问题首页设计要注意的问题1) 首页明确，主题突出；首页明确，主题突出；2) 尽可能缩短下载时间。尽可能缩短下载时间。此外，还需注意配合最抵挡的设备。此外，还需注意配合最抵挡的设备。475.5 其他页面的设计其他页面的设计5.5.1 新闻页面的设计新闻页面的设计 任何类型企业的电子商务站点都应该有一个新闻页任何类型企业的电子商务站点都应该有一个新闻页面，该页面担负着双重作用，既可以用来动态发布有关面，该页面担负着双重作用，既可以用来动态发布有关新产品或新开发项目或公司活动的情况，又可以作为公新产品或新开发项目或公司活动的情况，又可以作为公司的活动年表。司的活动年表。 建立新闻页面，首先在主页上要编写并设置可点击建立新闻页面，首先在主页上要编写并设置可点击的新闻标题，然后再编写完整的新闻页面，这些页面通的新闻标题，然后再编写完整的新闻页面，这些页面通过超链接与新闻标题相连。过超链接与新闻标题相连。481. 主页中的新闻标题主页中的新闻标题 通常标题的文字不宜过长，主要包括的要素与通常标题的文字不宜过长，主要包括的要素与设计的方法如下：设计的方法如下：1) 新闻标题组成的要素新闻标题组成的要素a. 新闻日期，日期位于标题的开头；新闻日期，日期位于标题的开头；b. 使用一个动词来描述该新闻的目的；使用一个动词来描述该新闻的目的；c.设计的产品或企业，着重表示该新设计的产品或企业，着重表示该新闻直接涉及到产品或企业；闻直接涉及到产品或企业；d. 提示语，用来激发浏览者的兴趣。提示语，用来激发浏览者的兴趣。492) 新闻标题的版面布置新闻标题的版面布置 主页中新闻标题的版面布置要保持简单、清晰、主页中新闻标题的版面布置要保持简单、清晰、引人注目，通常可采用以下几种方法。引人注目，通常可采用以下几种方法。a. 新闻标题的排列按降序进行排列，开头新闻标题的排列按降序进行排列，开头顶部是最近的新闻，底部是最旧的新闻；顶部是最近的新闻，底部是最旧的新闻；b. 可在新闻标题前采用标准编目符或小的可在新闻标题前采用标准编目符或小的图象作为点缀，增加页面的可读性；图象作为点缀，增加页面的可读性；c.将新闻标题的列表放在一个上下滚动的将新闻标题的列表放在一个上下滚动的窗口中以容纳更多的新闻。窗口中以容纳更多的新闻。502. 新闻页面新闻页面 新闻页面要满足易于导航的要求，通常可以新闻页面要满足易于导航的要求，通常可以通过在新闻页面建立以下几种方式来实现。通过在新闻页面建立以下几种方式来实现。1) 建立菜单栏导航系统以便与用户实现新闻页建立菜单栏导航系统以便与用户实现新闻页面与网站中其他页面间的无缝跳转。面与网站中其他页面间的无缝跳转。2) 建立与前面或后面新闻的链接；建立与前面或后面新闻的链接；3) 将新闻进行分类或时间索引，建立菜单，用将新闻进行分类或时间索引，建立菜单，用户可根据时间或内容检索其感兴趣的新闻；户可根据时间或内容检索其感兴趣的新闻；4) 在新闻页面中包含与该新闻有关的图片、声在新闻页面中包含与该新闻有关的图片、声音或其他多媒体文件；音或其他多媒体文件；515) 将稿件中出现的关键人名链接到其将稿件中出现的关键人名链接到其E-mail 地址或其因特网页面上；地址或其因特网页面上；6) 考虑链接到稿件中提到的任何企业合伙考虑链接到稿件中提到的任何企业合伙人、公司雇员的见解或其他说明；人、公司雇员的见解或其他说明；7) 客户、分析家或公共舆论对该新闻稿主客户、分析家或公共舆论对该新闻稿主题的见解。题的见解。525.5.2 产品页面的制作产品页面的制作 产品页面一般采用信息分层、逐层细化的方法产品页面一般采用信息分层、逐层细化的方法展示公司产品或服务。展示公司产品或服务。 产品页面的主要内容应包括因特网产品产品页面的主要内容应包括因特网产品/价格清价格清单以及单个产品页面，建立产品名称到产品页面的单以及单个产品页面，建立产品名称到产品页面的链接，还可以利用高级的表格给目录增加新的风格链接，还可以利用高级的表格给目录增加新的风格和生动的图象。和生动的图象。 产品页面的创建主要在于掌握产品目录的层次产品页面的创建主要在于掌握产品目录的层次结构和导航方法。结构和导航方法。53产品目录的分层通常如下：产品目录的分层通常如下：第一层：首先建立一个产品第一层：首先建立一个产品/价格列表，该表使用价格列表，该表使用户能够全面浏览公司的产品；户能够全面浏览公司的产品；第二层：对应每个产品的页面，该页面将对此项第二层：对应每个产品的页面，该页面将对此项产品的有关信息进行全面的介绍；产品的有关信息进行全面的介绍；第三层：产品更深层次的信息，从这一层中浏览第三层：产品更深层次的信息，从这一层中浏览者可以深入了解该产品的技术细节、设计维护等；者可以深入了解该产品的技术细节、设计维护等；第四层：如果浏览者对第三层的信息还不满足，第四层：如果浏览者对第三层的信息还不满足，可以通过网络向公司的有关人员进一步了解信息。可以通过网络向公司的有关人员进一步了解信息。54产品页面应达到以下要求：产品页面应达到以下要求：包含关于产品尽可能多的有用的信息；包含关于产品尽可能多的有用的信息；具有独创性；具有独创性；包含站点的导航菜单及其到产品包含站点的导航菜单及其到产品/价格列表目价格列表目录的链接。另外要注意的是不要在产品页面上录的链接。另外要注意的是不要在产品页面上增加太多无用的链接。增加太多无用的链接。555.5.3 雇员页面雇员页面 雇员是企业最宝贵的资源和财富，网上企业通雇员是企业最宝贵的资源和财富，网上企业通过创建每个雇员的页面可以吸引潜在客户，同时过创建每个雇员的页面可以吸引潜在客户，同时也是使虚拟企业人格化的有效手段。也是使虚拟企业人格化的有效手段。 目前，网上企业的雇员页面大都采用框架目前，网上企业的雇员页面大都采用框架（Frames）形式。最简单的框架是将网页分成左）形式。最简单的框架是将网页分成左右两部分，左半部分放置雇员名字按字母顺序排右两部分，左半部分放置雇员名字按字母顺序排列的清单，每个雇员名字都链接到该雇员的个人列的清单，每个雇员名字都链接到该雇员的个人页面；个人页面的内容放置在右半部分的框架中。页面；个人页面的内容放置在右半部分的框架中。561. 设计雇员目录设计雇员目录 设计按字母排序的雇员清单，填入左框。设计按字母排序的雇员清单，填入左框。2. 创建默认页面创建默认页面 默认页面应提供下列基本信息：企业名称默认页面应提供下列基本信息：企业名称及标志；如何使用框架浏览式的雇员目录页面；及标志；如何使用框架浏览式的雇员目录页面；返回站点主页的链接。返回站点主页的链接。3. 创建个人页面创建个人页面个人页面应包括以下信息：个人页面应包括以下信息：1) 联系信息；联系信息；2) 组织和部门信息；组织和部门信息；3) 雇员背景信息；雇员背景信息；4) 增加一些有趣的材料。增加一些有趣的材料。575.5.4 其他页面设计其他页面设计q 客户支持页面客户支持页面q 市场调研页面市场调研页面q 企业信息页面企业信息页面q 其他内容。其他内容。585.6 网页制作网页制作5.6.1 电子商务网站中的电子商务网站中的web资源资源一般而言，一个电子商务网站中的一般而言，一个电子商务网站中的web资源总资源总是包括静态网页和动态网页两种。是包括静态网页和动态网页两种。静态网页：静态网页：是一个个是一个个.html文件，内容相对稳文件，内容相对稳定，不需要经常修改，文件比较小，适合在定，不需要经常修改，文件比较小，适合在网上传输，执行效率很高；如公司介绍、员网上传输，执行效率很高；如公司介绍、员工信息、销售网络、售后服务信息等是一些工信息、销售网络、售后服务信息等是一些相对固定不变的信息。相对固定不变的信息。59动态网页：动态网页： 由数据库和相应的应用程序构成，包含需要由数据库和相应的应用程序构成，包含需要频繁更新的数据。由于其页面中包含的内容是来频繁更新的数据。由于其页面中包含的内容是来自数据库的，因此，可根据用户的不同选择返回自数据库的，因此，可根据用户的不同选择返回不同的页面。不同的页面。 如有关于产品的信息、网上销售的信息以及如有关于产品的信息、网上销售的信息以及其他服务（如技术支持、公司新闻动态、论坛系其他服务（如技术支持、公司新闻动态、论坛系统），特别是网站的管理系统，一般而言都是采统），特别是网站的管理系统，一般而言都是采用动态页面的形式。用动态页面的形式。 总而言之，凡是网页上的内容需要与用户进总而言之，凡是网页上的内容需要与用户进行交互，就要用动态网页的方式来进行。行交互，就要用动态网页的方式来进行。605.6.2 静态网页的制作静态网页的制作 制作静态网页的第一步就是选定一种网页制作软制作静态网页的第一步就是选定一种网页制作软件（或工具）。从原理上来讲，用任何一种文本编辑件（或工具）。从原理上来讲，用任何一种文本编辑器都可以制作静态网页，但器都可以制作静态网页，但“所见即所得所见即所得”的可视化的可视化开发工具无疑是最方便的。开发工具无疑是最方便的。这里介绍目前主流的两种开发工具。这里介绍目前主流的两种开发工具。1. MS FrontPage 98/2000 FrontPage 不但拥有优越的网页编辑能力，而且不但拥有优越的网页编辑能力，而且具备网站管理的功能。具备网站管理的功能。61 页面制作有页面制作有FrontPage 中的网页视图（中的网页视图（98中为中为Editor）来完成，其工作窗口由三个选项卡组成，）来完成，其工作窗口由三个选项卡组成，分别是分别是WYSIWYG的编辑页、的编辑页、HTML代码编辑页、代码编辑页、预览页。站点管理功能有文件夹、导航、超链接、预览页。站点管理功能有文件夹、导航、超链接、报表、任务视图（报表、任务视图（98下为下为Explorer）所组成。）所组成。具体地讲，具体地讲，FrontPage2000 提供了以下功能：提供了以下功能：1) 精确到像素的定位和分层；精确到像素的定位和分层；2) 预先设计好的主题；预先设计好的主题；3) 自定义主题；自定义主题；624) 跨浏览器的跨浏览器的DHTML动画效果；动画效果；5) 级联样式表；级联样式表；6) 嵌套子站点；嵌套子站点；7) 协作和管理；协作和管理；8) 链接自动修复；链接自动修复；9) Web服务器管理。服务器管理。632. Dreamweaver 3.0/4.0 Dreamweaver 是美国是美国Macromedia公司开发的公司开发的集网页制作和管理网站于一身的所见即所得网页集网页制作和管理网站于一身的所见即所得网页编辑器。编辑器。 自自Dreamweaver 3.0 开始，开始，Macromedia 注意注意了网站开发工具的配合，由了网站开发工具的配合，由Dreamweaver和制作和制作矢量动画的矢量动画的Flash、处理网页图象的、处理网页图象的Firework，共，共同组成了著名的同组成了著名的Dream Team开发工具包，被开发工具包，被Macromedia公司称为公司称为Dream Team（梦之队），（梦之队），业界则称之为业界则称之为“网页设计三剑客网页设计三剑客”。64具体来讲，具体来讲，Dreamweaver 具备以下的特点：具备以下的特点：1) 最佳的制作效率；最佳的制作效率；2) 网站管理；网站管理；3) 无可比拟的控制能力；无可比拟的控制能力；4) 所见即所得；所见即所得；5) 梦幻样板和梦幻样板和XML；6) 全方位呈现。全方位呈现。65具体来讲，具体来讲，Dreamweaver 具备以下的特点：具备以下的特点：1) 最佳的制作效率；最佳的制作效率；2) 网站管理；网站管理；3) 无可比拟的控制能力；无可比拟的控制能力；4) 所见即所得；所见即所得；5) 梦幻样板和梦幻样板和XML；6) 全方位呈现。全方位呈现。665.6.3 动态网页的制作动态网页的制作 一般而言，动态网页的制作分为两种：网页表现一般而言，动态网页的制作分为两种：网页表现形式的动态制作和网页数据内容的动态制作。形式的动态制作和网页数据内容的动态制作。1. 网页表示形式的动态制作网页表示形式的动态制作目前有四种制作方式，分别介绍如下：目前有四种制作方式，分别介绍如下：1) Script（脚本）语言；（脚本）语言；2) Java Applets;3) 层叠样式表（层叠样式表（CSS）；）；4) 虚拟现实建模语言（虚拟现实建模语言（VRML）。）。672. 网页数据内容的动态制作网页数据内容的动态制作 交互式动态网页中网页数据内容的动态制作交互式动态网页中网页数据内容的动态制作一般是和数据库系统联系在一起，通过特定的编一般是和数据库系统联系在一起，通过特定的编程语言和外部应用程序来访问企业信息系统已经程语言和外部应用程序来访问企业信息系统已经存在于数据库中的信息。存在于数据库中的信息。交互式动态网页的制作主要包括两大步骤：交互式动态网页的制作主要包括两大步骤： 68692) 程序设计阶段程序设计阶段a) Web数据库接口技术的选择；数据库接口技术的选择；b) 编程语言的选择；编程语言的选择；c) 应用程序的编写。应用程序的编写。 此阶段主要工作是根据前面确定的网站信息此阶段主要工作是根据前面确定的网站信息结构图进行数据库的逻辑设计、物理设计，并结构图进行数据库的逻辑设计、物理设计，并将具体的数据录入到数据库管理系统中去。将具体的数据录入到数据库管理系统中去。1) 数据库设计阶段数据库设计阶段