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