网站设计与开发第三章课件

网站设计与开发

网站设计与开发第三章网站规划与设计网站设计步骤网站规划网站功能设计网站主要功能模块介绍第三章网站规划与设计网站主要功能模块介绍网站功能设计网站规划本章目录网站设计步骤目录1324网站主要功能模块介绍网站功能设计网站规划本章目录网站设计步骤第一节网站设计步骤

1.1网站开发步骤

网站建设步骤：网站建设总的来说需要经历四个步骤，分别是网站的规划与设计、站点建设、网站发布和网站的管理与维护。第一节网站设计步骤

1.1网站开发步

a.网站的规划与设计是网站建设的第一步。在这一步中需要对网站进行整体的分析，明确网站的建设目标，确定网站的访问对象、网站应提供的内容与服务及网站的域名，设计网站的标志、网站的风格、网站的目录结构等各方面的内容。这一步是网站建设成功与否的前提，因为所有的后续步骤都必须按照第一步的规划与设计进行实施。a.网站的规划与设计是网站建设的第一步。

b.网站的规划与设计完成之后，进入具体的站点建设步骤。这个步骤主要包括域名注册、网站配置、网页制作和网站测试四个部分。除了网站测试必须要在其他三项内容开始之后才能进行之外，域名注册、网站配置和网页制作相对独立，可以同时进行。

c.相关的内容都建设好后，就可以正式地发布网站，也就是说将网站放到Internet上允许用户通过网站的域名进行访问。b.网站的规划与设计完成之后，进入具体的站点建设

d.网站的管理与维护虽然是最后一个步骤，但实际上贯穿网站建设的全过程，只要网站没有停止运行，就需要对其进行管理和维护，所以这一步也是最为费劲的一步。网站的管理和维护主要包括安全管理、性能管理和内容管理三个方面。注意：网站建设是一个循环的过程，并不是说一次过后就结束了。它需要随着需求的变化不断地对网站进行再次规划与设计，进而不断地建设和发布新的内容与服务，不断地升级服务器和网络环境以保障网站的运行性能。d.网站的管理与维护虽然是最后一个步骤，但实际上第二节网站的规划2.1

任务明晰网站建设的流程（网站制作有哪些流程，每一个流程由谁完成，每一项内容何时完成；每一个流程由谁完成；每一项内容何时完成）确定网站的目的、功能确定网站的技术解决方案对网站内容进行规划确定网页设计方案指定网站后期的运营、维护、管理、安全方案企业形象宣传：功能实现最容易产品和服务项目展示商品和服务订购、转账与支付、运输信息搜索与查询客户信息管理（网上客户管理）销售业务信息管理新闻发布、供求信息发布网上营销第二节网站的规划企业形象宣传：功注意：网站规划可以分为网站的商务功能规划和网站技术规划两个方面。最后形成《企业网站建设规划书》。企业网站规划书一般包含如下内容：.网站建设目标.分析网站的用户和目标访问群.网站域名设计.网站建设财务预算.网站内容规划和栏目规划.网站推广方式注意：网站规划可以分为网站的商务功能规第二节电子商务网站的规划

2.2网站规划

2.2.1规划准备——分析研究工作①.通过分析商务需求进行业务选择对自身商务需求的研究分析对商品特色、行业特点及企业行业地位的研究分析②.对目标客户和竞争对手的调查和分析a.对目标客户调查和分析

第二节电子商务网站的规划

c.通过专门的咨询公司或自己实地调查

d.利用ISP或有影响的行业网站进行网上的调查和研究对竞争对手的调查

分析内容：

a.确认网上的竞争对手

b.了解竞争对电子商务的战略所开展的主要网上业务

c.研究竞争对手网站的设计架构与运行效果③.网站的可行性研究c.通过专门的咨询公司或自己实地调查网站销售可行性分析

用户分析

产品特征分析

市场特征分析

访问者心理分析他们总是匆匆忙忙

他们希望“免费”的东西他们不容易相信人他们喜欢点击

以客户为中心网站销售可行性分析他们总是匆匆忙忙 以客户为中心技术可行性分析经济可行性分析a.电子商务网站的成本估算b.电子商务网站的收益分析成本构成构建开发成本运行管理成本规划设计成本（调查研究、业务分析、方案设计）构建费用（软硬件费用，域名、主机托管费用，开发费用，人员培训费用）运行费用（网站推广费用、人员费用、安全保证等费用、消耗材料设备折旧费用、技术资料咨询费用）

维护费用（数据更新、系统纠错、完善性维护）管理费用（行政管理、监督审查）技术可行性分析成本构建开发成本规划设计成本（调查研究、业务分人员可行性分析

网站建设所需要的人力配置如下：系统策划师（网站策划人员）、网站设计师、程序设计师、美工师、录入人员、项目经理人员可行性分析2.2.2网站商务功能和规划

a.网站主题规划确定网站主题（确定企业网站的任务或目标是什么，网站的近期和远期目标是什么，网站的服务领域和对象是什么，网站的盈利方式是什么等）表达网站主题（站点的中心内容能够反映设计者的风格和思想）如：b2c购物站点，实现网上支付B2b站点，实现网上合同洽谈和签约企业门户网站：包括企业的信息发布和信息服务内容与主题相扣2.2.2网站商务功能和规划如：b2c购物站点，实现网上支b.设计网站名称和域名c.分析网站的用户（每一个企业的服务目标客户群不一样，网站商业模式和网站主题也就不同）d.网站建设财务预算b.设计网站名称和域名2.2.3网站运行环境规划网站平台配置：网站配置首先要做的就是为网站选择合适的发布平台，即选择适合网站规模的各种软硬件资源，包括确定服务器解决方案,确定软件平台等。装配前的准备工作

a.估计带宽：第一，明确本网站提供的资源的种类（如支持视频、声音流或复杂的HTML网页这样的复杂工作的系统需要较多的资源）。第二，明确本系统所需要的反应时间。第三，明确同时在线的用户的数目。

b.主机管理方式选择

c.web服务器软件的选择2.2.3网站运行环境规划带宽的估计

带宽估算：统计WebServer日志文件中HTTP操作纪录的总行数。确定日志文件运行的天数。将总行数除以天数，得到每天操作次数。将每天操作次数除以86400秒（一天的秒数），得到每秒操作次数。将每秒操作次数乘以3，得到每秒峰值操作次数。将128Kbps乘以每秒峰值操作次数，得到所需的带宽。128Kbps是个经验值。上述估计具有局限性，事实上在估计带宽时应考虑资源大小和请求人数。带宽的估计带宽估算：例如：一个站点30天内的点击次数为15000次。则每天操作次数为500次，每秒操作次数为0.006次/秒，每秒峰值操作次数为0.018次/秒，所需带宽为128Kbps*0.018=2.3Kbps。

例如：自建服务器：易于控制，安全。但需要申请专线接入。适用于处理敏感数据的站点，例如电子商务站点。托管服务器：将自己的服务器放到高带宽入网（100M以上）的电信局或专门的数据中心，通过拨号、ISDN、DDN等低速线路远程维护。ISP提供优越的机架空间、网络安全防护、UPS供电、恒温恒湿环境及防火设施等。收费按占用的机架空间和接入带宽计算。适用于中、大规模的网站，许多大型网站就是以此形式建立站点及镜像站点的。租用虚拟主机：与托管服务器相似，只是主机不是自己的。

虚拟主机：在同一计算机硬件、同一操作系统上，可以建立多个Web站点，每一个站点在访问者看来好像是在一个独立的主机硬件上，这样的Web站点称为虚拟主机。每一个虚拟主机具有独立的域名，可以共享一个IP地址，也可以具有独立的IP地址，能提供完整的Internet服务（包括WWW、FTP、Email等），缺点是不能支持高访问量、远程管理权限有限、软件安装不方便。适用于小企业做产品宣传和业余爱好者发布数据。

确定服务器解决方案虚拟主机：在同一计算机硬件、同一操作系统上，可以建立多三种服务器选择方案的比较：

自建服务器（1）成本较高（2）适合对信息量和网站功能要求较高的大中型企业三种服务器选择方案的比较：自建服务器租用虚拟主机

虚拟主机是使用计算机软件技术，把一台运行在Internet上的服务器主机分隔成多台“虚拟”主机，每一台虚拟主机都各自具有独立的域名和IP地址，具有比较完善的Internet服务器功能。租用虚拟主机虚拟主机是使用计算机软件技术，把一台运行在I租用虚拟主机虚拟主机就是由很多人一起租用一台服务器。

租用虚拟主机虚拟主机就是由很多人一起租用一台服务器。优点：采用虚拟主机技术的用户只需对自己的信息进行远程维护，而无需对硬件、操作系统及通信线路进行维护。因此虚拟主机技术可以为广大中小型企业或初次建立网站的企业节省大量人力物力及一系列烦琐的工作，是企业发布信息较好的方式。特点：采用虚拟主机方式建立电子商务网站具有投资小、建立速度快、安全可靠、无需软硬件配置及投资、无需拥有技术支持等特点。

优点：采用虚拟主机技术的用户只需对自己的信息进行远程维护，而虚拟主机服务内容选择虚拟主机主要考虑以下几点服务内容：

(1)存储空间：适中；(2)电子邮件：提供的电子邮箱个数；(3)网页制作；(4)IP地址：提供独立的IP地址，并支持多个域名指向同一个IP地址；(5)文件传输（FTP）：支持网页上传;（6）时间：提供不间断服务的时间;(7)速度：重点考虑网络带宽问题。虚拟主机服务内容选择虚拟主机主要考虑以下几点服务内容：服务器托管（主机托管）（1）主机托管就是客户把属于自己的一台服务器放置在某个经营“整机托管”业务网站的数据中心的机房里，由网站机房的技术人员对服务器进行管理和维护。（2）自建网站机房和整机托管的比较自建机房成本大：技术人员、软硬件、维护费、线路通信服务费整机托管更经济、快捷且实用：远程控制、客户机/服务器两者相比，整机托管在成本和服务方面有优势。服务器托管（主机托管）（1）主机托管就是客户把属于自己的一台服务器托管（主机托管）服务器托管（主机托管）服务器托管（主机托管）服务器托管具有以下特点：（1）灵活：系统资源、软件和服务不受限制；（2）稳定：不受其他用户的牵连；(3)安全；(4)快捷。主机托管服务选择时应考虑以下因素：

(1)可靠性因素

(2)安全因素

(3)功能需求因素服务器托管（主机托管）服务器托管具有以下特点：（1）灵活：系29案例：上海数据中心IDC（/idc2.htm）29案例：上海数据中心IDC（http://www.shis30案例：上海IDC的服务器租用服务30案例：上海IDC的服务器租用服务补充：服务器性能：

对做Web服务器的主机，服务速度主要取决于CPU、内存、网络I/O和磁盘I/O。为提高Web服务器的性能，开发服务、搜索引擎服务、数据库服务应另建服务器，不要建在同一个主机上。因为这些服务要占用大量的CPU资源和内存资源，削弱Web服务的能力。

补充：服务器性能：

集群（Cluster）：一组被称为节点的计算机，通过网络和软件结合在一起，通过负载均衡和失效接管来向客户端提供一个单一的、可持续工作的服务系统，也可以不停机更新个别节点。它将可用性提升至99.99%。对于需要几百兆高带宽接入的大型网站，需要多台服务器组成集群系统提供均载服务，同时也可以避免单点故障。

集群（Cluster）：一组被称为节点的计算机，通过镜像站点的体系结构属于一种每个单独的节点都分散于地理上不同位置的集群。集群中每个节点具有不同的主机名（URL），但具有相同的镜像内容。用户直接从多个具有独立URL的站点中进行选择，并将HTTP请求发送给该镜像站点进行服务。通常，用户可以选择一个地理上距离最近的集群节点以减少响应时间。镜像站点的体系结构属于一种每个单独的节点都分散于地理上不同位网站设计与开发第三章课件缺点：Web服务器集群缺少对请求分配的控制，集群节点的选择仅依赖于客户的主观意志，但客户根本不清楚各节点的负载情况。其次，集群节点对于客户是可见的（非透明的），因此某一节点出现故障会影响客户感知的集群可用性。最后，各集群节点对于客户的可见性也具有潜在的安全方面的问题。缺点：Web服务器集群缺少对请求分配的控制，集群节点的选择仅在基于DNS的集群体系结构中，集群所在域的授权域名服务器（称为“集群DNS”）向外部提供一个单一的URL主机名作为整个集群的虚拟接口，使得集群对用户端具有透明性。集群中的每台Web服务器都具有一个真实的IP地址。集群DNS作为集群系统的集中式请求调度器，在Web站点域名（URL）到服务器节点IP地址的映射过程中，能够选择集群中的任何节点作为请求分配的目的地。在基于DNS的集群体系结构中，集群所在域的授权域名服务器（称网站设计与开发第三章课件WEB服务器软件选用WEB服务器软件时的参考的性能参数：响应能力：WEB服务器对多个用户浏览信息的相应速度。与后端服务器的集成管理的难易程度：管理Web服务器；利用Web界面进行网络管理信息开发的难易程度：稳定性可靠性安全性：是否泄密；防止黑客的攻击与其他系统的搭配WEB服务器软件流行Web服务器系统ApachehttpdIIS（IIS是允许在公共Intranet或Internet上发布信息的Web服务器。）

TomcatJBOSSBEAWebLogic

IBMWebsphereTomcat是一个开放源代码、运行servlet和JSPWeb应用软件的基于Java的Web应用软件容器。

JBoss是全世界开发者共同努力的成果，一个基于J2EE的开放源代码的应用服务器一般与Tomcat或Jetty绑定使用。

WebSphere软件平台提供了一整套全面的集成电子商务软件解决方案。Apache源于NCSAhttpd服务器，经过多次修改，成为世界上最流行的Web服务器软件之一。

流行Web服务器系统ApachehttpdTomcat是一主机软硬件配置

操作系统软件UNIX操作系统：技术成熟、开放性好、可靠性高、网络功能强大。Linux操作系统：免费的操作系统Windows2000操作系统主机软硬件配置操作系统软件数据库软件关系型数据库面向对象DB2，Oracle，Sybase，MSSQLServer，MySQL数据库软件2.2.4网站内容规划和设计网站内容设计的总原则1）相关性（围绕主题）2）最大限度地满足访问者的需求，信息内容真实、动态性3）要最有效地进行资源利用4）要求使用方便、界面连贯、运行高效5）适当使用图像具体来说：新、精、专的信息内容2.2.4网站内容规划和设计2.2.5网站信息结构设计（1）确定网站的栏目栏目就是网站的菜单栏，它可以有子栏目，和一般菜单不同，当点击栏目或子栏目时其会链接到本网站的另一个网页。栏目是网站的结构体现，是网站的骨架（如大家看到的企业新闻、产品信息等）。设计栏目应该考虑的方面（原则）：1）要紧扣主题2）考虑设置一个最近更新或网站指南栏目2.2.5网站信息结构设计3）精简原则4）提纲挈领原则5）凸显特色设计方法

1）分类法

2）参照法3）精简原则栏目设计技巧：栏目列出网站最有价值的内容与网站定位无关的删除栏目设计方便访问者浏览和查询所有同类网站都有的栏目建议加上电子商务网站常用栏目：网上商城：我要买、我要卖、热门促销、商品展示、分类导航、购物车、帮助、行业市场、商业社区、行业咨讯、公告栏等。栏目设计技巧：（2）网站物理结构设计网站的真实目录及网页文件所存储的位置决定的结构，即网站的目录。有两种形式：a.扁平结构（所有的页面都在根目录下）如：/pageA.html/pageB.html/pageC.html（2）网站物理结构设计b.树形结构（在根目录下分成多个子目录，每个页面从属于上级目录）/product1//product2//product1/A.html/product1/B.html/product2/A.html/product2/B.htmlb.树形结构（在根目录下分成多个子目录，每个页面从属于上级目敦煌网的目录结构设计

首页图像文件目录样式文件目录我的Dhgate栏目我的Dhgate的图像文件夹

功能与服务栏目

功能与服务的图像文件夹

热门求购栏目

外贸通栏目

热门求购的图象文件夹

外贸通的图像文件夹

案例：敦煌网的目录结构敦煌网的目录结构设计首页图像文件目录样式文件目录我的Dhg目录设计注意点：目录结构是否合理，对网站的创建效率会产生较大的影响，但更主要的，会对未来网站的性能、网站的维护及扩展产生很大的影响。目录结构对用户来说是不可见的，它只针对网站管理员，所以它的设计是为了网站管理员能从文件的角度更好地管理网站的所有资源。目录设计注意点：目录结构的设计通常需要遵循以下原则：不要将所有的文件都放在根目录下原因：文件管理混乱上传速度慢（服务器会为根目录建立一个索引）

根据栏目内容来设计目录结构子目录的建立，首先按主菜单栏目建立。其他的次要栏目，比如友情链接等内容较多、需要经常更新的栏目可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，可以合并放在一个目录下。目录结构的设计通常需要遵循以下原则：每个目录下都建立独立的images子目录将图片及资源文件都放在一个独立的images目录下，可以使目录结构更加清晰。如果很多网页都需要用到同一个图片，比如网站标志图片，那么将这个图片放到所有这些网页共有的最高层目录的images子目录下。每个目录下都建立独立的images子目录其他需要注意的问题：a.不要使用中文名目录b.不要使用过长的目录c.尽量使用意义明确的目录d.目录层次不要太深（建议不要超过3层）e.可执行文件和不可执行文件分开放置(将可执行的动态服务器网页文件和不可执行的静态网页文件与动态网页文件分别放在两个目录下，然后将存放可执行网页文件的目录设为不可读和执行。这么做的好处就是可以避免动态服务器网页文件被读取。)其他需要注意的问题：f.数据库文件单独放置数据库文件因为安全需求很高，所以最好放置在HTTP所不能访问到的目录底下。这样就可以避免恶意的用户通过HTTP方式取到数据库文件。f.数据库文件单独放置

1）线型逻辑组织模型线型逻辑组织模型的特点是直观、简单，它又是人们最为熟悉的一种组织形式，因为，传统的信息媒介大都采用这种形式。

逻辑结构设计逻辑结构也称为链接结构，由网页内部链接所形成。逻辑结构描述的是网页文档的链接关系。逻辑结构为用户操作方便设计的。1）线型逻辑组织模型

逻辑结构设计逻辑结构也称为链接结特点：用户在没有完成上一个网页的访问之前就无法进入下一个网页。特点：用户在没有完成上一个网页的访

2）树型（层次型）逻辑组织模型层次型逻辑组织模型也称为树型组织模型，在Web站点上，应用最多的还是层次型的组织结构，几乎所有的站点在整体栏目规划的时候都采用层次型结构。2）树型（层次型）逻辑组织模型特点：用户如果要访问最底层的网页就不得不按照层次从上到下一级一级地访问，最终到达想要访问的网页。如果层次型结构的层次很深，比如有五层或者六层，那么所带来的麻烦就大大降低了层次型网络所具有的优点。又比如下图所示的例子，用户想从网页A转到网页B，不得不先从网页A一级—级地返回到网页C，然后再一级一级地往下走直到网页B。特点：用户如果要访问最底层的网页就不得不按照层次从上到下一级所以过深过于复杂的层次型结构反而会带来很多不良的影响，最好的深度就是三层，最多不要超过五层。另外，建立一个良好的导航系统也可以弥补层次型结构这方面的缺点。所以过深过于复杂的层次型结构反而会带来很多不良的影响，最好的

3）星状（网络型）逻辑组织模型星状逻辑组织模型是指多个网页之间都有相互链接的一种结构，如下图所示。（典型：首页）3）星状（网络型）逻辑组织模型（典型：首页）特点：网络型结构的实现就在于在所有相关的网页上保留到其他网页的超链接。这种结构使用户能更方便地在网站上游弋，但同时也带来一个庞大超链接数的问题。我们可以简单地计算一下，总的超链接数应该等于网页数乘以网页数减一，所以三个网页的网络型结构的超链接总数为3×2=6，10个网页的网络型结构的超链接总数就到达l0×9=90。这么庞大的超链接数维护起来相当麻烦，某个网页的改动(如改名、删除、增加)就可能同时需要对所有的网页进行相应的修改，这是谁都不愿意做的事情，所以在网站中需要谨慎使用网络型结构。特点：网络型结构的实现就在于在所有相关的网页上保留到其他网页4）混合型逻辑组织模型混合型逻辑组织模型指的是，将以上几种模型混合在一起构成了一个新的网站模型，这样的模型可以吸取各单个模型的所有长处，避免其短处。实际上，几乎所有大的网站都采用混合型结构来进行组织的。4）混合型逻辑组织模型2.2.6导航设计

网站导航对于一个网站来说非常的必要和重要，它能使用户在访问任何一个网页时，都能清楚地知道目前所处的位置，并且能快速地从这个网页切换到另一网页。2.2.6导航设计

导航的实现方法：导航条导航的实现方法：路径导航在网页上显示这个网页在网站层次型结构上的位置。比如下图所示的新浪网读书栏目上就有路径导航，从这个导航可以清楚地看到这个网页归属于读书栏目下的沈从文小说――《边城》子栏目，而且通过它还可以直接跳转到新浪首页、读书栏目首页。路径导航相关导航等相关导航等导航的设计策略：至少要使用一个一层栏目的导航条，如果栏目底下也有很多内容，可以分为很多子类的话，那么可以进一步设计栏目下的导航条。如果网站的层次很深，比如三层以上(主页作为第一层)，最好使用路径导航。路径导航可以从第三层以下的网页开始出现。如果网站的层次只有两层或者三层，那么不是特别需要路径导航。其他导航方式作为辅助的导航手段，视实际需要而定。

导航的设计策略：网站内容设计的方法规划a.自上而下：首先构建整个网站的框架，在此框架下再详细设计各个页面内容。这种方法能在整体上统一整个网站的风格，使网站的组织结构相对比比较合理，保证页面和功能设置的一致性。网站设计与开发第三章课件b.自下而上：一般用于辅助设计，使网站既有共性又有个性c.不断增补：属于补充设计，随着访问量的增加，不断增加网页。网站内容设计实施的步骤a.网站内容的收集和准备内容收集内容整理：归类站点内容基本信息型网站（按照组织机构组织内容）电子商务型网站(按照公司的服务对象划分内容）b.自下而上：一般用于辅助设计，使网站既有共性又有个性网站内容产品列表批发商零售商供求信息C2C交易产品1，产品2，…，产品n大客户、小客户、vip客户公司资料1、公司资料2A地、B地，…产品1、产品2，…供货信息1、供货信息2，…求购信息1、求购信息2，…产品介绍1、价格产品图片1、产品图片2网站产品列表批发商零售商供求信息C2C交易产品1，产品2，…网站内容的设计和制作网站的整体风格设计-》对内容进行逻辑组织、信息结构进行设计-》对每个网页的外观进行设计-》实施每个网页的制作工作。网站内容的设计和制作2.2.7网站整体风格的设计网站风格是指站点整体形象给浏览者的综合感觉。站点CI设计版面布局交互性文字语气内容价值注意内容统一：LOGO、导航栏、版权和联系信息、其他元素2.2.7网站整体风格的设计站点CI设计注意内容统一：LO网站CI设计所谓CI，是借用的广告术语。所谓的企业形象，是指企业的关系者对企业的整体感觉、印象和认识，优秀的CI设计，使企业更加容易树立市场形象、展示企业文化、抢占商业先机。

企业标志的要素（网站的标志（Logo）、商品的商标、文字和图形类型和标志。）企业名称标准字要素（企业或公司的正式名称）企业的标准色要素设计网站的色彩（通常1~3种色彩为主）企业标语要素专业字体要素网站CI设计网站名称的设计简短响亮易记，立意要正，网站最好使用中文名称，不要使用英文或中英文混合型名称网站标志的设计标志可以是中文、英文字母，可以是符号、图案，可以是动物或者人物等。标志的设计创意来自你网站的名称和内容。设计标志有以下几种方法：

网站名称的设计

a.选择与网站主题有关的，并具有代表性的人或者物，用它们作为设计的蓝本，加以卡通化和艺术化。例：

b.对于专业性的网站，可以以本专业有代表的物品作为标志。例:c.最常用和最简单的方式是用自己网站的中文或者英文名称作为标志。采用不同的字体、字母的变形与组合，可以很容易制作出自己的标志。a.选择与网站主题有关的，并具有代表性的人或者物，用它们Logo展示Logo展示网站宣传口号的设计宣传口号是网站的精神，网站的目标，往往用一句话或一个词来表示。如：雀巢（味道好极了），阿里巴巴网站（中国商人自己的网站）等网站标准色彩的设计

网站宣传口号的设计

所谓“标准色彩”是指能体现网站形象和延伸内涵的色彩。例如，IBM网站的主色调是深蓝色的，肯得基网站的主色调是红色条型的，网易网站的主色调是淡蓝色的，Windows视窗标志上的红蓝黄绿色块。

网站的标志、标题、主菜单和主色块文字的链接色彩尽量使用标准色彩；图片的主色彩、背景色、边框等尽量使用标准色彩同色系的色彩。一个网站的标准色彩不超过3种。色彩总的应用原则应该是“总体协调，局部对比”。所谓“标准色彩”是指能体现网站形象和延伸内涵的色彩。例

色彩的心理感觉：

①红色是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。

②绿色是介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。它和金黄，淡白搭配，可以产生优雅，舒适的气氛。

③橙色也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。

④黄色是一种具有快乐，希望，智慧和轻快的个性，它的明度最高。

⑤蓝色是一种具有凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛就像天空的色彩一样。

⑥白色是一种具有洁白的颜色，明快，纯真，清洁的感受。

⑦黑色是一种具有深沉，神秘，寂静，悲哀，压抑的感受。

⑧灰色是一种具有中庸，平凡，温和，谦让，中立和高雅的感觉。

几种色彩搭配技巧：（1）使用单色彩，所谓单色彩是指先选定一种色彩，然后调整透明度或者饱和度，也就是说，将某一种单色彩变淡或变深后产生一种新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

（2）使用两种色彩，所谓两种色彩是指先选定一种色彩，然后再选择该色彩的对比色。例如，蓝色是黄色的对比色。这样的色彩可以使整个页面色彩丰富但不花俏。

（3）使用一个色系，所谓色系是指一个感觉的色彩，例如淡蓝、淡黄、淡绿；或者土黄、土灰、土蓝。

（4）使用黑色一种彩色。例如，大红的字体配黑色的边框感觉很“跳”，黑色的背景配上白色字体感觉很“亮”。

几种色彩搭配技巧：举例：红色色调为主，强调喜事、大事举例：红色色调为主，强调喜事、大事绿色为主，白色为辅，产生舒适、优雅、适于阅读的气氛绿色为主，白色为辅，产生舒适、优雅、适于阅读的气氛设计网站的标准字体

标准字体是指用于标志、标题、主菜单的特有字体。一般网页默认的字体是宋体。使用一些比较特别的字体时，最好使用图片的形式。设计网站的标准字体标准字体是指用于标志、标题、主菜单的特有字主色调的选择粉色蓝色红色绿色黑色企业、事业单位的网站政府网站、在重大节日期间改版为红色食品、农业类网站、购物类、儿童类网站科幻、游戏类网站女性、儿童类网站主色调:网站使用最多的颜色称为主色调辅色调:与主色调配套的其它颜色设计技巧主色调的选择粉色蓝色红色绿色黑色企业、事业单位的网站政府网站a、字体的运用b、字号的设置正文字体非标准字体的使用(photoshop做成图片）标题字体的使用栏目字体宋体不得使用行楷等过于活泼的字体黑体，用图形的方式，搭配一些小图标正文字号大标题栏目标题12像素、10磅、五号字不超过36像素16—18像素、三号、四号、小四号a、字体的运用b、字号的设置正文字体非标准字体的使用(pc.行间距的设置1.2倍—1.5倍行距宋体12像素正文文字，行间距为18像素总结字体字号字色行距正文：宋体题目：方方正正的，如黑体正文一律用黑色标准文字的为1.5倍，如12PX字，用18PX行距正文12px,栏目标题16-18PX，大标题<=36c.行间距的设置1.2倍—1.5倍行距总结字体字号字色左上角、页面顶部内容与放置位置

上部下部左侧右侧轻快、积极压抑、稳定轻便、自由局促、庄重左上角、页面顶部内容与放置位置上部下部左侧右侧轻快、积极网站页面设计原则

1）必须贯彻网站的整体设计，树立网站的CI形象，（使用统一的标志。色彩、字体和标语）

2）要兼顾网页的美感网页设计过程中应注意：

1）网页命名要简洁

2）确保页面的导航性好2.2.8页面设计及版面设计网站页面设计原则2.2.8页面设计及版面设计3）网页要易读4）合理设计视觉效果5）为图片添加文字说明6）不宜使用太多的动画和静态图片7）页面长度要适中8）尽量使用相对超级链接3）网页要易读网站的版面设计在网页布局过程中，应该遵循的原则有：对称平衡、异常平衡及对比、凝视和空白、用图片解说等。一般来说，网页的布局有下面几种常见的结构。网站设计与开发第三章课件

T型布局就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母“T”,所以我们称之为“T”形布局。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。

T型布局就是指页面顶部为横条网站标志+广告条，下方左面为主“三”型布局这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为三部分，色块中大多放广告条。“三”型布局这种布局多用于国外站点，国内用的不多。特点是页面POP布局以一张精美图片作为页面的设计中心。常用于时尚类站点，比如ELLE.com。优点显而易见：漂亮吸引人。缺点就是速度慢。POP布局以一张精美图片作为页面的设计中心。常用于时尚类π型布局所谓的这种结构是指页面顶部为“网站标志+广告条+主菜单”,下方左面和右面为链接、广告或其他一些内容,下方的中间部分是主题内容的布局,其整体效果类似于符号pai。这种布局的优点是充分利用版面,信息量大;缺点是页面拥挤,不够灵活。π型布局所谓的这种结构是指页面顶部为“网站标志+广告条+主菜口型布局与π型布局类型类似，但是它是页面上下各有一个广告条，左面是主菜单，右面是友情链接，中间是主要内容。这种布局的优点是充分利用版面、信息量大。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸，此类版式多为游戏娱乐站点。口型布局与π型布局类型类似，但是它是页面上下各有一个广告条，第三节电子商务网站功能设计

3.1功能设计（电子商务网站规划工作的一部分）电子商务网站的功能设计一般包括：需求分析网站栏目规划网站导航设计主要功能模块设计第三节电子商务网站功能设计

3.1功能a.需求分析：一般来说电子商务网站所必须具备的商务功能包括新产品的展示发布、购物车和会员服务。系统的功能模块图可以表示为

网络购物中心会员管理购物车公告显示与管理订单管理商品搜索商品展示收银台结帐商品分类管理a.需求分析：网络购物中心会员管理购物车公告显示与管理订单管具体可分为前台商品展示及销售、后台管理两部分

网络购物中心前台商品展示商品查询购物车收银台会员管理订单管理商城公告新品上市特价商品畅销商品按类别查看商品按类别及商品名称模糊查询添加至购物车查看购物车从购物车中移去指定商品清空购物车填写订单信息结账会员注册会员登陆会员修改个人资料具体可分为前台商品展示及销售、后台管理两部分网络购物中心前网络购物中心后台商品管理公告管理订单管理会员管理退出后台后台登录查看商品列表添加商品信息修改商品信息查看商品详细信息查看公告列表查看订单列表查看订单详细信息执行订单查看会员列表解冻/冻结会员查看会员详细信息添加公告删除公告网络购物中心后台商品管理公告管理订单管理会员管理退出后台查看网站前台文件架构index.jsp商品搜索(search.jsp)搜索结果(search_deal.jsp)商品分类Goodsclassify.jsp广告栏ad.jsp网站导航navigation.jsp会员登录(login.jsp)会员登录处理(login_deal.jsp)网站前台文件架构index.jsp商品搜索搜索结果会员登录会网站后台文件结构后台登录后台首页会员管理详细信息订单管理执行订单详细信息添加商品信息修改商品信息删除商品信息公告管理添加公告信息删除公告信息退出后台解冻/冻结管理网站后台文件结构后台登录后台首页会员管理详细信息订单管理执行3.2首页设计

首页/主页(homepage)指用户进入站点后所看到的第一个页面，体现了网站的形象。注意：网站中的首页使用规定的文件名，不同的服务器规定不同。文件名多为index.htm或index.html、default.htm或default.html。主页通常有两种类型，一种是文字型（适合分类信息比较多的情况），一种是图像型(适合分类信息比较少的情况）。3.2首页设计首页/主页(homepage)指用户进入站点确定首页的功能模块：对于电子商务网站,模块有：页头：用来准确无误地标示企业的网站，能够体现出企业网站的主题。（可以用企业的名称、标语、徽号或图像表示）主菜单（导航条）最新消息传递邮件列表（页面的底部）联络信息版权确定首页的功能模块：其他信息如：广告条、搜索、友情链接、邮件列表、计数器等。首页的设计

1）首页明确，主题突出

2）文字的排版

3）尽可能缩短下载时间

4）在设计时，避免”封面”问题其他信息如：广告条、搜索、友情链接、邮件列表、计数器等。头部内容体部内容尾部内容网站标识标题广告条分类导航与检索LogoTitleBannerMenuSearchBanner规格全幅半幅垂直宽型小型486x60234x60120x240728x9088x31头部内容体部内容尾部内容网站标识标题广告条分类导航LogoT头部内容体部内容尾部内容网站标识标题广告条分类导航与检索LogoTitleBannerMenuSearch用户注册与登陆各类栏目相关站点链接LoginLinks版权声明管理入口联系方式CopyRight头部内容体部内容尾部内容网站标识标题广告条分类导航LogoT头部内容LOGO产品检索分类导航头部内容LOGO产品检索分类导航尾部内容尾部内容其他页面的设计1）新闻页面的设计新闻页面用于动态发布有关新产品、新开发项目或公司活动的情况、又可以作为公司的活动年表。

新闻标题：由新闻日期（位于标题的开头）、新闻目的（用一个动词来描述）、涉及的产品或企业、提示语（常用图标”new”来表示）组成新闻标题的版面布局：首页中新闻标题的版面布置要保持简单、清晰、引人瞩目。一般按新闻早晚降序排列。

其他页面的设计可在新闻标题前采用标准编目符或小的图像作为点缀，增加页面可读性。将新闻标题的列表放在一个上下滚动的窗口中，以便容纳更多的新闻。新闻页面

建立菜单栏导航；建立与前面或后面新闻的链接、将新闻进行分类或时间索引、建立菜单；在新闻页面中设置与该新闻有关的图片、声音或其他多媒体文件；将稿件中出现的关键人名链接到其e-mail地址或因特网页面上；根据需要考虑链接稿件中提到的企业合伙人、公司雇员的见解或其他说明；客户、分析家或公共舆论对该新闻稿主题的见解。可在新闻标题前采用标准编目符或小的图像作为点缀，3.3产品页面的设计产品页面一般采用信息分层、逐层细化的方法展示公司产品或服务。产品目录的分层：第一层建立一个产品/价格列表第二层建立对应每个产品的页面第三层提供产品更深层次的信息第四层如果浏览者对第三层的信息还不满足，可以通过网络向公司的有关人员进一步了解信息。3.3产品页面的设计3.4雇员页面设计雇员页面是企业最宝贵的资源和财富，网上企业通过创建每个雇员的页面可以吸引潜在的用户，同时也是使虚拟企业人格化的有效手段。目前主要的实现方式是使用框架形式（左边列出雇员清单，右边链接到雇员的个人页面）4）其他页面的设计客户支持页面市场调研页面（收集消费者对产品、服务评价、建议等信息）企业信息页面其他内容（赞助商务页面、货物追踪系统、电子货币、安全保密系统等）3.4雇员页面设计第四节主要功能模块介绍以网上商城为例，举例说明产品展示模块、购物车（书）、后台管理（视频）。第四节主要功能模块介绍数据库设计数据库设计各表间的关系各表间的关系补充：数据库设计

Jsp与数据库的连接

（1）Jsp经典设计模式请求响应浏览器关系数据库JSPJavaBeansJDBC浏览器关系数据库serveletJavaBeansJDBCjsp请求响应补充：请求响应浏关系JSPJavaBeansJDBC浏关系s(2)采用第一种设计模式：与数据库连