电子商务网站设计

1,电子商务网站设计,3.1 网站运行平台的构建 3.2 Internet的接入设备 3.3 服务器及其选择 3.4 Web Server软件 3.5 网络数据库,电子商务网站的运行环境,2,3.1 电子商务网站运行平台的构建,3.1.1 网站运行平台的要求 1. 网站运行环境的要求 （1）网站必须有良好的可扩充性； （2）高效的开发处理能力； （3）强大的管理工具； （4）具有良好的容错性能； （5）与企业已有的资源整合；,3,（6）网站必须确保提供7*24小时的服务；,（7）能支持多种客户终端。,2. 网站运行平台构造技术的选择原则,企业选择网站系统构建技术和产品的基本依据是：首先要考察这些产品和技术是否能满足需要，此外，还有一些因素也是必须考虑的，包括以下几个方面：,4,（1）符合各种主流的技术标准；（2）符合企业信息化的整体技术战略；（3）符合未来技术的发展方向；（4）满足开放性、可扩充性的要求；（5）与现有的应用系统具有良好的兼容性；（6）具有成功的应用先例。,5,3.1.2 网站运行平台的基本构成,6,组件按照功能可分为六个部分：,网络接入部分服务器的部分数据存储部分应用服务器软件商务应用软件安全部分,7,3.2 Internet的接入设备,3.2.1 计算机网络的传输介质及连接器 1. 双绞线 双绞线是最常用的传输介质。价格便宜，但传输速度和距离等方面均受到限制，常用于较短距离的信息传输。没有中间器件的情况下，不失真的最大距离为100米。,8,2. 同轴电缆,同轴电缆是由空心的圆柱导体包围的单根内导线所组成。抗干扰能力强，屏蔽性能好，常用于基带传输。,3. 光导纤维,是一种传输光束的细而柔韧的媒质。频带较宽；电磁绝缘性能好，适用于长距离的信息传输以及高度安全场合；衰减较小，增音机的间隔大。,9,4. 无线通信,是利用通信卫星实现数据传输的，它分为点对点卫星微波线路和广播式卫星微波通信线路。,5. 传输介质连接设备,最常用的有：T型连接器、RJ-45非屏蔽双绞线连接器、DB-25接口、V35同步接口等。,10,3.2.2 网络接入设备,1. 网络适配器( NIC ),也称网卡,负责提供计算机与网络的接口。,2. 调制解调器（Modem）,调制：把数字信号转换成模拟信号，以便通过 电话线路或微波线路传输； 解调：把接收到的模拟信号转换成数字信号。,11,3. 中继器（Repeater）,是网络物理层的一种介质连接设备，只对信号放大的作用,不能连接独立的网络，也不能进行数据的选择。,4. 集线器（HUB）,是一种为不能直接连接的电缆提供连接能力的设备。,(1)集线器的类型：一般分为无源集线器、有源集线器和智能集线器。,12,（2）局域网集线器的类型（五种）：单中继器网段HUB、多网段HUB 、端口交换式集线器、网络互联HUB 、交换式HUB。,5.路由器（Router）,路由器用于连接多个逻辑上分开的网络，它在网络层工作。属于网络应用层的一种互联设备。具有判断网络地址和选择路径的功能。,功能: （1）报文转发作用； （2）路由选择作用。,13,6.网桥（Bridge）,网桥是一个局域网与另一个局域网之间建立连接的桥梁。可分为本地网桥和远程网桥。,作用：通过连接数据链路层相同的网络达到扩展网络的距离，并能有效地控制两个介质系统中无关紧要的通信，即对数据进行分组选择。,7.网关,网关将协议进行转换，数据重组，以实现在两种以上不同类型网络系统之间的通信。用于网关转换的应用协议有电子邮件、文件传输和远程登录等。,14,8.交换机,交换机允许在用户端口之间通过一个专用交换系统直接通信。在交换机中有直通式和存储转发式两种不同类型的过滤/转发技术。 交换机可分为网段交换交换机和专用局域网交换机两类。,15,3.3 服务器及其选择,3.3.1 服务器的选择原则 1. 服务器概念 服务器是指客户机/服务器（或浏览器/服务器）网络上的一些机器，管理着应用程序、数据和网络资源。客户机请求服务，而服务器提供服务。 服务器可以是集中的，也可以是专用的。集中式服务器是指将网络上的多项任务集中到单个主机上，专用服务器则是指一台服务器主机只对应与一种服务。 总之，从逻辑上看，服务器是对应于客户机的一种服务，一种服务程序。,16,2. 服务器选择原则,作为服务器的计算机一般是高档微机或小型计算机。一般而言，选择服务器时通常要考虑以下几个方面的性能指标：,可管理性可用性高性能可扩展性模块化,17,3.3.2 PC服务器,随着PC技术突飞猛进地发展，PC机的CPU速度、SMP技术、总线带宽、内存容量和I/O技术都在迅速提高。,在选择PC服务器时，要确认服务器的配置级别，PC服务器大体上可分为工作组级、部门级和企业级三档。,18,3.3.3 UNIX服务器,目前UNIX服务器仍占有极大优势，是高端系统的首选，在SMP技术、总线技术、性能等方面，UNIX服务器要比PC服务器更先进一些。此外，在UNIX服务器下采用的群集技术通常在30秒之内即可完成故障转移。,3.3.4 网络操作系统,1. 网络操作系统的选择,选择网络操作系统（NOS）最好的方法是先选择所需的应用程序、客户机、服务器及实用程序，然后再选择它们共同要求的NOS。,19,2. 常用网络操作系统简介,可供选用的操作系统有很多，估计超过50种，下面介绍几种常用的操作系统。,(1)Banyan Vines,(2)Windows NT/2000 Server,(3)Novell NetWare,(4)Apple Open Transport,(5)IBM OS/2 Warp Server Advanced,(6)Solaris Internet Server,(7)RedHat Linux,20,3. Windows 2000 Server,Windows 2000 Server原名Windows NT 5.0，它提供了高层次的安全性、稳定性和系统性能。其主要特点体现在如下几个方面：,（1）核心模式写保护,（2）Windows文件保护,（3）Driver Signing （驱动程序数字签名）,21,4. Linux系统,Linux的创建；,它的内核源代码完全公开，系统源代码免费发放。,具有以下主要特点：支持多任务，多用户操作；符合IEEE POSX.1标准，同AT&I System V和BSD Unix相兼容；虚拟内存；X Window图形系统；GNU软件支持； f）网络支持。,22,3.4 Web Server 软件,应用服务器软件是指为特定的应用信息传递方法管理数据的应用程序。应用服务器软件可以说是电子商务网站系统的心脏，即核心部分。3.4.1 Web服务器软件的选择原则 对于Web服务器软件的性能在选择时一般要考虑以下几个方面： 1.响应能力； 2.与后端数据资源应用系统的集成能力；,23,3.管理的难易程度；4.功能扩展难易程度；5.稳定可靠性；6.安全性。,3.4.2 Web服务器软件简介,目前Web服务器软件种类很多，这里选择一些比较流行的Web服务器软件予以介绍。,24,1. Apache Httpd4D Web SmartServerInternet信息服务器（IIS）iPlanet Web ServerCERN WebNovell Netware Web ServerOracle Web ServerWeb SphereInternet Office Web ServerWeb Base Pro,25,11. Sybase 企业应用服务器,Sybase EAServer是世界第一个同时实现web联机事务处理(Web OLTP)和动态信息发布的企业级应用服务器平台。,企业级的开发和提交是Sybase的产品策略之一，它包括用户应用开发过程中一个功能广泛的开发工具集和一个多层应用的提交环境，构成一个完整的解决方案。该解决方案的主要特点是：,（1）具有全面的开发效率；,26,(2)组件管理器能收集、管理和配置各种各样的组件；(3)支持4GL和java进行web开发；(4)组件技术简化；(5)DataWindows技术能够方便地访问数据库并有丰富的数据表现形式；(6)集成的数据建模工具，使用户不需要任何代码就可以建立简单的数据录入应用程序；(7)系统提供了一个快速而灵活的配置体系结构来结合一个动态页面引擎和一个强有力组件事务引擎；,27,(8)支持动态web应用、支持多线程和多处理器确保大量事务处理情况下的高速数据发布，能够全面支持各种服务器端组件和各种类型客户端。,3.4.3 Internet Information Server 5.0,1. IIS 5.0简介,与IIS 4.0相比，IIS 5.0的改进在于服务器功能、可靠性、安全性以及开放性和Internet标准支持等方面，具体表现为以下几点：,28,在服务器性能上，IIS 5.0增强了对虚拟服务器数量的支持；在可靠性上，IIS 5.0提供了更多的web进程保护功能；在安全性方面；在应用程序的开发上，它支持动态服务器页面的(ASP)的最新版3.0。,29,2. IIS5.0的特性,除了以上讲的性能之外，具体来说，IIS 5.0具有以下特性：,摘要式身份验证；安全通讯；服务器网关加密；安全向导；IP地址及Internet域限制；证书存储；进程帐户；,30,8) 进程限制；远程管理；标准的支持；多个站点，一个IP地址；Web分布式创作与版式管理（WebDAV）;PICS分级。,31,3.4.4 Apache Httpd,Apache Httpd源于NCSA Httpd，属于自由软件，目前是世界上用户人数最多的web服务器软件。,Apache Httpd 1.3版本在性能上较以前有很大的改进，主要有：,支持SSL技术，支持多个虚拟主机；使用Apache企业可以自定义对错误和问题的响应；具有“内容协商”性能；,32,支持动态共享对象；实验性支持Windows9x/NT平台和NetWare5.0平台，不支持性能优化；通过哈希表查找基于IP的虚拟主机；优化了响应配置；静态页面请求由MAP进程负责响应，降低了cpu的占用率；统一了服务器配置文件；改进了Http/1.1形式的虚拟主机性能。,33,3.4.5 Web Server 的最优化选择,1. PC服务器,如果是PC服务器，那么有四种合理的搭配方式。,34,2.Unix服务器,35,3.5 网络数据库,电子商务是以数据库技术和网络技术为支撑的，其中数据库技术是其核心。 3.5.1 关系数据库 1. Oracle数据库 特点： 1）从Oracle 7.x 版本以来，Oracle引入了共享SQL和多线程服务器体系结构，这减少了Oracle的资源占有，并增强了Oracle的能力；,36,提供了基于角色分工的安全保密管理；支持大量的多媒体数据；提供了与第三代高级语言的接口软件RPO*系列，它还有许多优秀的前台开发工具；提供了新的分布式数据库能力。可通过网络较方便地读写远端数据库里的数据；系统提供了对称复制技术。,37,2. MySQL数据库,MySQL是一个多用户、多线程的符合SQL标准的关系型数据库服务器。它的主要目标是快速、健壮、易用。,3. Informix 数据库,Informix具有几种数据库引擎（可见书p75），它们能理解SQL命令或提供创建和使用数据库的程序。,38,4. Sybase数据库,Sybase是一个采用通常手段解决各种问题的真正的通用数据库系统。,1996年推出的 Sybase XI还具有一些新特性。,5. Microsoft SQL Server数据库,它是一个客户机/服务器结构的关系数据库管理系统，具备C/S的一切优点。,在电子商务商务站点构建中均可将SQL Server 2000作为首选。,39,6. IBM DB2 通用数据库,3.5.2 全文数据库,1. 特点,包含信息的原始性；信息检索的彻底性；检索语言的自然性；数据结构基本上是非结构化的；专业的全文数据库系统一般都采用“自动切词”技术；,40,好的全文数据库还备有知识库；基本上是封闭的；一般占用的存储空间非常大，系统开销大，如何提高检索速度是一大难题。,2. 全文数据库类型,电子版图书；电子杂志；电子报纸。,41,3. 全文检索系统实例,3.5.3 多媒体数据库,特点：,数据量大，结构化程度低，信息长度不稳定，不同连续媒体文件具有时间敏感性；多媒体数据库还要提供特殊的功能。,42,2. 关键技术,数据模型技术；数据的存储管理和压缩解压缩技术；多媒体信息的统一；多媒体信息的再现及良好的用户界面；多媒体信息的检索与查询多媒体技术与通信技术的结合要求能实现分布式多媒体数据库，提供基于内容检索要用到数字信号处理和模式识别技术；多媒体数据的输入。,43,3. 多媒体数据库的查询方法,关键字查询；可视化查询；语义查询（或基于内容的查询）。,44,电子商务网站设计,4.1网页开发技术,4.2网络数据库技术,4.3Web数据库及Web与数据库接口技术,第4章电子商务网站的开发技术与工具,4.4搜索引擎和全文搜索引擎技术,45,4.1 网页开发技术,4.1.1 HTML（HyperText Markup Language）1.HTML 语言概述 HTML是一种简单的、基于文本的语言，它使用一些列代码语言控制符标记，创建可被浏览器解释的文件，它不是一种真正的计算机语言，而是一种描述性语言。,46,2. HTML的作用 （1）格式化文本 （2）建立超链接 （3）插入图象 （4）建立表格 （5）加入多媒体 （6）提供交互式表单,47,3. HTML的不足（1）HTML难以扩展 ; （3）HTML语义性差;,（2）HTML交互性差;,（4）单向的超链接;,（5）HTML缺乏对双字节或多国文字的支持。,这几年来计算机发展迅猛，人们已经开始研究能改进或替代HTML的Web页面制作语言。其中最有成效并已投入使用的有：可扩展标记语言（Extensible Markup Language），简称XML；层叠样式单（Cascading Style Sheet），简称CSS；以及动态HTML，即DHTML。,48,这些语言从不同的角度解决了HTML 存在的问题：XML有利于信息的表达和结构化组织，从而使数据搜索更加有效；CSS解决Web页面的继承和显示的问题；DHTML则主要用于Web页的动态显示。,49,4.1.2 DHTML,DHTML（Dynamic HTML） 动态HTML（DHTML）是Microsoft对HTML4.0版的增强，是HTML的一种扩展和延伸，它是在HTML的基础上加入一些特定的标签来创建一些特殊的对象，其最出色的就是DHTML中“层”这个对象。,50,4.1.3 XML,1.XML的概念 XML（Extensible Markup Language）是一种元语言，可以被用来定义任何一种新的标记语言，用来定义各种不同的文件类别。它有别于HTML那种单一的格式及固定的语法，而要让用户在World Wide Web上制作页面时，能够根据自己的需要灵活而又容易地添加新的标记，同时又不破坏标记语言格式的统一性。,51,2.XML的构成XML主要由三个要素构成：（1）Schema（模式）（2）XSL（Extensible Style Sheet Language,可扩展样式单语言）（3）XLL(Extensible Link Language,可扩展链接语言),请见p85的XML示例,52,3.XML的应用范围及其优越性应用范围：（1）应用于客户需要与不同的数据源进行交互时；（2）希望将Web服务器的大量处理负荷转移给Web客户机的应用；（3）要求Web客户机把同一数据以不同的表现方式提供给不同的用户应用；（4）适应特定用户需求的智能Web工具应用。,53,XML应用的优越性：（主要体现在解决HTML中存在的不足问题）（1）异质系统间的通信；（2）更有意义和更准确的搜索；（3）开发灵活的Web应用软件；（4）集成不同来源的数据；（5）进行数据的本地计算和处理；（6）数据的多样显示；（7）数据粒状的更新。,54,4.XML在企业电子商务中的应用（1）应用于电子商务内容定义 XML所采用的标准技术最适合Web开发，应用于Internet EDI，则可以得到真正Web风格的EDI-XML/EDL。（2）应用于电子商务信息交换 开放的、基于文本的XML非常适用于服务器之间交换事务信息。（3）对称的EDI的应用,55,5.XML的各种标准,（1）cnXML,cnXML基于XML，是与国际上各种版本的XML完全兼容且符合中国特色的电子商务语言规范。主要解决中国的商务流程问题，包括外部商业流程（解决企业间的交易问题）和内部商业流程（解决企业内部审批等问题），最终解决ERP和电子商务平台的连接问题。,56,cnXML的特点如下：,基于XML技术，具有良好的开放性和交互性；具有广泛性、灵活性和可扩展性；按国内的商业流程定义了一套企业间商务活动所需的cnXML文档规范，并可按行业特点扩充和定制；支持国际化和多语言，符合国内的商业惯例；cnXML文档全面支持中文标记；支持多种通信方式；遵循消息和传输方式分离的原则，能通过不同的传输协议，使用多种技术方便地进行应用和实现。,57,（2）ebXML,ebXML（Electronic Business Extensible Markup Language）,即电子商务可扩展标记语言，这是个方便世界上所有规模大小的企业进行电子商务交易活动的标准。,ebXML标准为企业间和公司提供了一个框架，用于交换电子商务所必需的信息，而不必通过EDI，一台PC 机只要在线就可以进行在线电子商务。,58,（3）WML,XML的一个应用实例就是WML（Wire Markup Language），即无线标记语言。手机等移动终端通过WML来显示通过WAP（Wire Application Protocol，无线应用协议）网关转换的Internet上的文字和图象数据。,纯WML文档是一系列文本、图象与表格等数据，内容是静止的。,59,6.基于XML的电子商务的优缺点优点：（1）提供一种可被广泛理解的商业规范；（2）文档表单等信息可在不同的系统中相互交换；（3）提高数据的可持续性，降低投资的风险；（4）利用代理程序实现交易的自动化；（5）降低由于商业规则上的变化所引起的额外应用成本；（6）保证同旧系统的连接，保护既有投资。,缺点：（1）技术尚未完全成熟，需要进一步发展；（2）过多的标准，成为XML成功入主电子商务的一大障碍。,60,4.2网络数据库技术,4.2.1 ODBC技术1.ODBC概述 ODBC（Open Databse Connectivity）的作用是在应用程序和数据库服务器之间建立中间层次，所有的数据通过这个中间层次写到数据库中，每个数据库服务器通过驱动程序提供本身函数与这个中间层次进行连接。这样，就可以采用相同的用户界面来访问任意支持ODBC技术的数据库，从而简化了对数据库的访问，也为程序的跨平台开发和移植提供了最大的方便。,61,ODBC访问数据库的工作流程：,62,2.ODBC的结构 ODBC是一种分层结构，包括驱动程序管理器（Driver Manager）和多个数据库的ODBC驱动程序。,3.ODBC的使用当通过ODBC访问一个数据库时，该数据库必须作 为一个ODBC数据源被注册，这样应用程序就只需要知道其数据源名称。数据库的位置并没有被改变，数据库的类型也没有变化。,63,4.2.2 SQL语言,1.SQL概述 SQL（Structured Query Language）是用于关系型数据库通信的标准语言，它包括数据定义（Data Definition）、数据查询（Data Query）、数据操纵（Data Manipulation）和数据控制（Data Control）四部分功能，其中查询是SQL语言最重要的组成部分。,64,2.SQL语言的特点（1）SQL是一种一体化的语言；（2）SQL语言是一种高度非过程化的语言；（3）SQL语言用一种语法结构提供两种使用方式，也就是直接以命令方式交互使用，或嵌入到程序设计语言中（例如C、Cobol、Fortran、PL/SQL）以程序方式使用；（4）SQL语言的命令简洁，易学易用；（5）SQL语言支持数据库的三层模式结构。,65,3.SQL的功能（1）DDL数据定义语言,DDL所包含的要点如下：,标识所有的表；定义每个表中所包含有的列；给每个表一个保证惟一的主关键字；确认在数据库的每一个表中至少有一个列是与其他表中的列相同；将每一个表都用第三范式或更好的方法来检验，以确保防止插入、删除及非法更新。,66,（2）DML数据操纵语言,数据操纵语言（DML）是SQL的一部分，是SQL中用来生成、修改、删除数据库结构的那些部分，但它并不涉及数据。,（3）DQL数据查询语言,数据查询语言尽管只包含了一条命令，但它是数据库的核心操作，是关系型数据库用户使用SQL的焦点。,（4）事务控制命令,事务控制命令允许用户管理数据库的事务。它们通常是用来防止数据库的表或元素不被损坏的。,67,4.2.3数据仓库技术,数据仓库技术（Data Warehouse,DW）是一个面向主题的、集成的、稳定的、包含历史数据的数据集合，它用于支持管理中的决策制定过程。它是一个工程的概念，更是一个动态的概念。 DW跨越企业的时空界限，将不同企业不同的事务处理系统的数据集成起来提供一个统一的数据视图，获得企业运作状况和客户行为的综合信息。 DW的管理是基于元数据（Meta Data）管理的，元数据就是关于数据的数据，它描述的是DW的数据和环境，记录了DW中数据间的关系，以及与业务处理系统中的业务数据间关系。,68,4.3 Web数据库及Web与数据库接口技术,4.3.1 Web数据库 与WWW和数据库的应用结构模式一样，Web数据库也是属于C/S结构的一种基于三层客户机/服务器的结构应用模式，即Browser/Web Server/DB Server。一个典型的Web数据库应用系统有一个Web浏览器作为用户界面、一个数据库服务器作为信息存储和数据采集和一个连接前两者的Web服务器及应用程序。,69,4.3.2 Web数据库接口技术1.CGI（Common Gateway Interface） CGI即通用网关接口，是早期建立应用程序与Web服务器之间接口的标准。,CGI的跨平台性能极佳，但运行速度慢，而且一个CGI只能处理用户请求，其Web服务器的表现就是响应时间延长、处理缓慢等。其次交互性差，安全性差。,70,(1)ASP工作模式,3. ASP,71,(2）ASP的特点： 完全和HTML集成； 易于生成，无需编译和连接； 面向对象，可以扩展ActiveX Server构件； 独立于浏览器； 比CGI和ISAPI具有更多的优点； 源程序的保密性； 利用ASP开发应用程序较简单。,72,4. Java/JDBC(1)JDBC的基本概念(2)JDBC的构成(3)JDBC Driver的类型(4)Java/JDBC访问数据库的模式,73,74,6. PHP,PHP具备以下优点： 支持多种系统平台；具有良好的开放性和可扩充性；版本更新速度快；容易与现有的网页整合；具有丰富的功能；系统移植速度快。,7.Web数据库接口技术总结,5. JSP(1)JSP概述(2)JSP与ASP的对比分析,75,4.4 搜索引擎和全文搜索引擎技术,4.4.1 SE（Search Engine）技术 (1)SE技术概述 (2)SE分类 可分为两类：分类目录SE与关键词SE4.4.2 全文检索技术（Full Text Retrieval）,76,第5章电子商务网站的内容设计与开发,5.1 网站内容设计的流程5.2 网站信息结构的设计5.3 网页的可视化设计5.4 首页设计5.5 其他网页的设计5.6 网页制作,77,5.1 电子商务网站内容设计的流程,5.11 网站内容设计的原则,企业要在因特网上开展电子商务，就应该在网站的内容设计方面遵循一些基本原则，一般来说，最起码应考虑到以下三个方面： 信息内容、访问速度和页面美感。,以下分别从这三个方面来说明：,78,1. 新、精、专的信息内容,信息内容永远处于第一位；内容设计要有组织；及时更新信息内容。,2. 安全快速的访问,提高浏览者的访问速度；要有安全良好运转的硬件和软件环境；遵循“三次点击”原则，即网站的任何信息都应在最多三次点击之内得到。,79,3. 美感十足、方便用户访问的页面,提供交互性；完善的检索和帮助功能；方便用户访问和购买。,5.1.2 网站内容设计流程,通常，电子商务网站的内容设计流程都必须经过如下步骤：,80,收集关于该网站的一些关键信息；网站信息结构的设计；网站运行环境的选择，其具体选择标准和原则可参见第三章内容；进行网页可视化设计；网页制作， 通常情况下，在网页制作过程中，需利用一定的web数据库技术进行信息和数据的动态发布和提供；网站的维护和管理。,见课本p110图5.1,81,5.2 电子商务网站信息结构的设计,一般来说，电子商务网站建设与企业的经营战略、产品特性、财务预算以及当时的建站目的等因素有着直接关系。,5.21 网站信息内容及其功能模块,尽管每个电子商务网站规模不同，表现形式各有特色，但从经营的实质上来说，不外乎信息发布型和产品销售型这两种 基本形式，一个综合性的网站可能同时包含了这两种基本形式。,82,信息发布型的网站仍然是电子商务网站的主流形式。,信息发布型网站中信息结构的设计主要是从以下几个方面来进行的：见书p112图5.2,公司概况；员工信息；产品目录；产品价格表；产品搜索；,公司动态；网上订购；销售网络；售后服务；技术支持信息；,83,联系信息； 财务报告； 辅助信息， 用来弥补产品品种比较少，网页内容单调等不足； 其他内容信息；比如反馈表、公司人才招聘信息、到其他相关站点的链接； 增值服务； 开辟网络环境下的新服务项目，以增加其服务功能，吸引网民再次光临。,84,在规划设计一个具体网站内容模块和功能时，主要应考虑企业本身的目标和所决定的网站功能导向，让企业上网成为整体战略的一个有组成部分，让网站真正成为有效的品牌宣传阵地、有效的营销工具，或者有效的网上销售场所。,5.2.2 网站链接结构的设计,网站链接结构的原则是：用最少的链接，使得浏览最有效率。,85,一般地，建立网站的链接结构有如下两种基本方式。,树状链接结构（一对一） 类似dos的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构像一棵树。,优点：条理清晰，不会“迷路”；缺点：浏览效率低，一个栏目下的 子页面到另一个栏目下的子页面，必须绕径首页。,86,2. 网状链接结构（一对多）,类似网络服务器的链接，每个页面相互之间都建立有链接。立体结构像一张网。,优点：浏览方便，随时可以到达自己喜欢的页面；缺点：链接太多，容易“迷路”。,87,这两种基本结构都只是理想方式，在实际的网站中，总是将这两种结构混合起来使用。,最好的办法是： 首页和一级页面之间用网状链接结构，一级和二级页面之间用树状链接结构。超过三级页面，在页面顶部设置导航条。,例子，请见书p114倒数第三段,88,随着电子商务的推广，网站竞争越来越激烈，对链接结构设计的要求已经不仅仅局限与可以方便快速地浏览，更加注重个性化和相关性。,5.2.3 网站整体风格的设计,整体风格设计是网站设计中的重点和难点，是所有网页开发者最希望掌握的，也是最难以学习的，因为没有一个固定的程式可以参照和模仿。,89,网站风格是抽象的，是指站点的整体形象给浏览者的综合感受。,有风格的网站与普通网站的区别在于： 在普通网站上看到的只是堆砌在一起的信息，浏览者只能用理性的感受来描述；但有风格的网站可以使人有更深一层的感性认识。,90,通常情况下，网站的设计者要根据企业的具体情况，找出其最有特色、特点的东西即是最能体现网站风格的东西，并以它作为网站的特色加以重点强化，突出宣传。,具体做法没有定式，这里仅提供以下一些参考。,使企业的标志尽可能出现在每个页面上，或者在页眉，或者页脚，或者背景；突出网站的标准色彩；,91,突出网站的标准字体；设计一条朗朗上口宣传标语；使用统一的图片处理效果；创造一个企业站点特有的符号或图标。,92,5.3 网页的可视化设计,5.3.1 网页设计原则,网页命名要简洁 这样既会有助于以后方便地管理网页，又会在向搜索引擎提交网页时更容易被别人检索到。,确保页面的导览性好 一般来说，网站应提供一个关于本站点的地图，让用户知道在哪儿以及能去哪儿。,93,3.网页要易读 这就意味着需要规划文字与背景颜色的搭配方案。此外，网页的字体、大小也是需要考虑的因素。,4. 合理设计视觉效果 视觉效果主要体现在网页的结构和排版上。要善用表格来布局网页，突出显示出网站内容的层次性和空间性。,94,为图片添加文字说明,这样一来，当网速很慢不能把图象下载下来时或者用户在使用文本类型的浏览器时，照样能阅读网页的内容。,6. 不宜使用太多的动画和静态图片,太多的动画和静态图片会增大网页容量，浪费用户的金钱和时间。,95,页面长度要适中,一个长页面的传输时间要比较短的页面的传输时间长，太长的页面传输会使用户在等待中失去耐心。,如有大量的基于文本的文档，就应当以Adobe Acrobat 格式的文件形式来放置。,8. Java程序少用为宜,因为目前来讲Java的运行速度还比较慢，往往使浏览者没有耐心等待页面全部显示出来。,96,整个页面风格要一致,10. 计数器能不用最好不用,计数器也是由程序设计成的，显示计数器的过程其实就是一个程序的执行过程，它需要占用用户宝贵的上网时间，并且往往毫无意义。,这样用户就会在浏览网页时觉得舒服、顺畅，对网站留下深刻的印象。,97,11. 尽量使用超级链接,这样制作的网页的可移植性比较强，输入量较小。另外要保证超链接的直观有效，以便使用户能够很快地找到其想要的东西。,12. 不要滥用尖端技术,使用尖端技术有可能会打击企业部分用户访问网站的兴趣和积极性；另一方面，最新的网站开发技术还存在用户浏览器的版本支持问题。,98,5.3.2 网页版面布局的设计,版面指的是用户在浏览器中看到的一个完整页面（可以包含框架和层）。布局就是指以最适合用户浏览的方式将图片和文字排放在页面的不同位置。,1. 网页版面布局步骤,创建初始方案。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。,99,初步设计网页的布局。,注意必须遵循突出重点、平衡谐调的原则，将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置，然后在考虑次要模块的排放。,定案。将初步布局精细化、具体化。,100,2. 常见的版面布局形式,“T”结构布局。 所谓“T”结构，就是指网页上边和左边相结合，页面顶部的横条网站标志和广告条，下方左面为主菜单，右面显示内容的布局，这是网页设计中用的最广泛的一种布局方式。,优点：信息能被用户最大限度的获取，而且很方便；其次是页面结构清晰，主次分明、易于使用。,101,缺点：规矩呆板，让人“看之无味”。,“口”型布局。 指页面上下各有一个广告条，左面是主菜单，右面是友情链接等，中间是主要内容。,优点：页面充实、内容丰富、信息量大；,缺点：页面拥挤，不够灵活。,102,“三”型布局。 特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。,对称对比布局。优点：视觉冲击力强；缺点：将两部分有机地结合比较困难。,103,POP布局。指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。 优点：漂亮吸引人； 缺点：速度慢。,3. 页面版面布局原则与技巧,只有当内容和形式，即具体的网页的排版布局达到一种协调的状态才算是一种真正成功的网页设计。,104,正常平衡； 多指左右、上下对照形式。2）异常平衡； 即非对照形式，但也要平衡和韵律。3）对比； 色彩、色调等技巧的对比，及内容上的古今、新旧、贫富对比。,以下是一些设计原则：,105,凝视；指利用页面中人物的视线，使浏览者仿照跟随的心理，以达到注视页面的效果。空白；突出卓越和优越感，有效体现网页格调。尽量用图片解说。,106,5.3.3 网页色彩设计,在网页设计中，应根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。,研究表明： 彩色的记忆效果是黑白色得3.5倍。也就是说，彩色页面较完全的黑白页面更加吸引人。,107,在网页设计中较常的做法： 主要内容文字用非彩色（黑色），边框、背景、图片用彩色，这样页面整体不单调，用户看主要内容也不会眼花。,1. 网页色彩搭配的原理,色彩的鲜明性；色彩的独特性；,色彩的合适性；色彩的联想性。,108,2. 网页色彩搭配的技巧,相同色系色彩；运用对比色或互补色；使用过渡色；用黑色和一种彩色；,109,不要将所有颜色都用到，尽量控制在三种色彩以内；背景和文字的对比尽量要大，要有足够的对比度来保证页面易于阅读；在设计中要考虑主要用户群的背景和构成。,110,5.3.4 网页中图片和文字的设计,1. 善用图片,现今 web 上展现的绝大多数图片和图象是GIF和JPEG格式、PNG和FlashPix文件格式。,一般情况下，,GIF格式: 漫画、图标、动画和平铺式图案背景。JPEG格式: 照片和艺术复制品。,111,图象可以弥补文字的不足，但并不能够完全取代文字。因此，制作页面时，必须注意将图象所包含的重要信息或链接到其他页面的指示用文字重复表达一次。,图像的内容应有一定的实际作用，切忌虚饰浮夸，最佳的图象应集美观与信息内容与一身。,112,2. 网站字体,下面是网页设计中有关字体的使用原则和技巧：,不要使用超过三种以上的字体；不要用太大或太小的文字；避免过多使用不停闪烁的文字。,113,5.4 首页设计,首页也叫主页，它是网站的形象页面，是网站的“门面”，故被称为“Home Page”, 它的设计是一个网站成功与否的关键。,首页的设计应该遵循快速、简洁、吸引人、信息概括能力强、易于导航的原则，同时应纳入企业CIS（企业形象识别系统）计划，与企业CIS的其他内容协调起来。,114,5.4.1 首页的功能模块,首页的功能模块是指在首页上需要实现的主要内容及其功能，最简单地在主页上必须清楚地列出三项要点：,机构名称、提供的产品或服务以及主页内容（即网站上其他页面还载有什么资料）。,115,116,页头,用来准确无误地标示企业的网站，它应该能够体现出企业网站的主题，而该主题是与企业的产品和服务紧密相关的。,主菜单,即导航条，它提供了对关键页面的简捷导航，其超链接或图标应明确地表明企业网站的其他页面上还载有什么样的信息。,117,最新消息的传递,如果企业网站的主页从不改变，用户很快会厌倦。在主页上预告即将有新资料推出，可吸引用户再来浏览。为保新鲜感，应时刻确保主页提供的是最新信息。,电子邮件地址,在页面底部设计简单的电子邮件链接，可使用户与网站的有关负责人迅速取得联系。有利于用户节省大量搜索时间，同时企业也能及时获得信息反馈。,118,联络信息。可以列出通讯地址、公关或营业部门的电话号码等，以便用户联系。版权信息。其他信息。如广告条、搜索、友情链接、邮件列表、计数器等。,119,5.4.2 首页的可视化设计,确定好首页的内容和功能后，就可以设计首页的版面了。,在图文类首页中，通常以图片和标题为视觉兴趣点。为吸引浏览者的注意力，可将文字标题融合在画面中，使两个兴趣点合为一体。,120,设计版面的最好方法是：找一张白纸、一支笔，先将理想中的草图勾勒出来，然后再用网页制作软件实现。,设计人员要了解企业的CIS，熟悉企业标志、吉祥物、字体及用色标准，以便在网站的局部将之体现出来，于平淡之中勾画出一个优美的符合企业特点的曲线，从而将企业印在浏览者的脑海里。,121,在设计中，应避免“封面”问题。封面是指没有具体内容，只放一个标徽Logo点击进入，或者只有简单的图象菜单的首页。,5.4.3 首页设计要注意的问题,首页明确，主题突出；尽可能缩短下载时间。,此外，还需注意配合最抵挡的设备。,122,5.5 其他页面的设计,5.5.1 新闻页面的设计,任何类型企业的电子商务站点都应该有一个新闻页面，该页面担负着双重作用，既可以用来动态发布有关新产品或新开发项目或公司活动的情况，又可以作为公司的活动年表。,建立新闻页面，首先在主页上要编写并设置可点击的新闻标题，然后再编写完整的新闻页面，这些页面通过超链接与新闻标题相连。,123,1. 主页中的新闻标题,通常标题的文字不宜过长，主要包括的要素与设计的方法如下：,新闻标题组成的要素,新闻日期，日期位于标题的开头；使用一个动词来描述该新闻的目的；设计的产品或企业，着重表示该新闻直接涉及到产品或企业；提示语，用来激发浏览者的兴趣。,124,新闻标题的版面布置,主页中新闻标题的版面布置要保持简单、清晰、引人注目，通常可采用以下几种方法。,新闻标题的排列按降序进行排列，开头顶部是最近的新闻，底部是最旧的新闻；可在新闻标题前采用标准编目符或小的图象作为点缀，增加页面的可读性；将新闻标题的列表放在一个上下滚动的窗口中以容纳更多的新闻。,125,2. 新闻页面,新闻页面要满足易于导航的要求，通常可以通过在新闻页面建立以下几种方式来实现。,建立菜单栏导航系统以便与用户实现新闻页面与网站中其他页面间的无缝跳转。建立与前面或后面新闻的链接；将新闻进行分类或时间索引，建立菜单，用户可根据时间或内容检索其感兴趣的新闻；在新闻页面中包含与该新闻有关的图片、声音或其他多媒体文件；,126,将稿件中出现的关键人名链接到其E-mail 地址或其因特网页面上；考虑链接到稿件中提到的任何企业合伙人、公司雇员的见解或其他说明；客户、分析家或公共舆论对该新闻稿主题的见解。,127,5.5.2 产品页面的制作,产品页面一般采用信息分层、逐层细化的方法展示公司产品或服务。,产品页面的主要内容应包括因特网产品/价格清单以及单个产品页面，建立产品名称到产品页面的链接，还可以利用高级的表格给目录增加新的风格和生动的图象。,产品页面的创建主要在于掌握产品目录的层次结构和导航方法。,128,产品目录的分层通常如下：,第一层：首先建立一个产品/价格列表，该表使用户能够全面浏览公司的产品；第二层：对应每个产品的页面，该页面将对此项产品的有关信息进行全面的介绍；第三层：产品更深层次的信息，从这一层中浏览者可以深入了解该产品的技术细节、设计维护等；第四层：如果浏览者对第三层的信息还不满足，可以通过网络向公司的有关人员进一步了解信息。,129,产品页面应达到以下要求：包含关于产品尽可能多的有用的信息；具有独创性；包含站点的导航菜单及其到产品/价格列表目录的链接。另外要注意的是不要在产品页面上增加太多无用的链接。,130,5.5.3 雇员页面,雇员是企业最宝贵的资源和财富，网上企业通过创建每个雇员的页面可以吸引潜在客户，同时也是使虚拟企业人格化的有效手段。,目前，网上企业的雇员页面大都采用框架（Frames）形式。最简单的框架是将网页分成左右两部分，左半部分放置雇员名字按字母顺序排列的清单，每个雇员名字都链接到该雇员的个人页面；个人页面的内容放置在右半部分的框架中。,131,1. 设计雇员目录,设计按字母排序的雇员清单，填入左框。,2. 创建默认页面,默认页面应提供下列基本信息：企业名称及标志；如何使用框架浏览式的雇员目录页面；返回站点主页的链接。,3. 创建个人页面,个人页面应包括以下信息：,联系信息；组织和部门信息；,雇员背景信息；增加一些有趣的材料。,132,5.5.4 其他页面设计,客户支持页面市场调研页面企业信息页面其他内容。,133,5.6 网页制作,5.6.1 电子商务网站中的web资源,一般而言，一个电子商务网站中的web资源总是包括静态网页和动态网页两种。,静态网页：是一个个.html文件，内容相对稳定，不需要经常修改，文件比较小，适合在网上传输，执行效率很高；如公司介绍、员工信息、销售网络、售后服务信息等是一些相对固定不变的信息。,134,动态网页： 由数据库和相应的应用程序构成，包含需要频繁更新的数据。由于其页面中包含的内容是来自数据库的，因此，可根据用户的不同选择返回不同的页面。 如有关于产品的信息、网上销售的信息以及其他服务（如技术支持、公司新闻动态、论坛系统），特别是网站的管理系统，一般而言都是采用动态页面的形式。,总而言之，凡是网页上的内容需要与用户进行交互，就要用动态网页的方式来进行。,135,5.6.2 静态网页的制作,制作静态网页的第一步就是选定一种网页制作软件（或工具）。从原理上来讲，用任何一种文本编辑器都可以制作静态网页，但“所见即所得”的可视化开发工具无疑是最方便的。,这里介绍目前主流的两种开发工具。,1. MS FrontPage 98/2000,FrontPage 不但拥有优越的网页编辑能力，而且具备网站管理的功能。,136,页面制作有FrontPage 中的网页视图（98中为Editor）来完成，其工作窗口由三个选项卡组成，分别是WYSIWYG