《电子商务网站的开发步骤19167.pptx》由会员分享，可在线阅读，更多相关《电子商务网站的开发步骤19167.pptx（138页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第二章第二章 电子商务网站开发步骤电子商务网站开发步骤 网站的设计与建设是需要一系列步骤来完成网站的设计与建设是需要一系列步骤来完成的，能否遵循网站的设计步骤直接影响一个网站质的，能否遵循网站的设计步骤直接影响一个网站质量，也直接影响网站发布后是否能成功运行。量，也直接影响网站发布后是否能成功运行。2.12.1 总体概述总体概述2.22.2 网站的规划与设计网站的规划与设计2.32.3 站点建设站点建设2.42.4 站点发布和网站的管理与维护站点发布和网站的管理与维护习习 题题第二章第二章 电子商务网站开发步骤电子商务网站开发步骤2.1 总体概述 网站建设总的网站建设总的来说需要经历四个来说需
2、要经历四个步骤，分别是网站步骤，分别是网站的规划与设计、站的规划与设计、站点建设、网站发布点建设、网站发布和网站的管理与维和网站的管理与维护，如图护，如图2-12-1所示。所示。图图2-1 网站建设的步骤网站建设的步骤 网站的规划与设计是网站建设的网站的规划与设计是网站建设的第一第一步。在这步。在这步中需要对网站进行整体的分析，步中需要对网站进行整体的分析，明确网站的建设目标，确定网站的访问对明确网站的建设目标，确定网站的访问对象、网站应提供的内容与服务及网站的域象、网站应提供的内容与服务及网站的域名，设计网站的标志、网站的风格、网站名，设计网站的标志、网站的风格、网站的目录结构等各方面的内容
3、。这一步是网的目录结构等各方面的内容。这一步是网站建设成功与否的前提，因为所有的后续站建设成功与否的前提，因为所有的后续步骤都必须按照第一步的规划与设计来进步骤都必须按照第一步的规划与设计来进行实施。行实施。网站的规划与设计完成之后，接着进入网站的规划与设计完成之后，接着进入具体的站点建设步骤。这个步骤主要包括域名具体的站点建设步骤。这个步骤主要包括域名注册、网站配置、网页制作和网站测试四个部注册、网站配置、网页制作和网站测试四个部分。除了网站测试必须要在其他三项内容开始分。除了网站测试必须要在其他三项内容开始之后才能进行之外，域名注册、网站配置和网之后才能进行之外，域名注册、网站配置和网页制
4、作相对独立，可以同时进行。页制作相对独立，可以同时进行。相关的内容都建设好后，就可以正式地相关的内容都建设好后，就可以正式地发布网站，也就是说将网站放到发布网站，也就是说将网站放到InternetInternet上允上允许用户通过网站的域名进行访问。许用户通过网站的域名进行访问。网站的管理与维护虽然是最后一个步骤，网站的管理与维护虽然是最后一个步骤，但实际上贯穿网站建设的全过程，只要网站没但实际上贯穿网站建设的全过程，只要网站没有停止运行，就需要对其进行管理和维护，所有停止运行，就需要对其进行管理和维护，所以这一步也是最为费劲的一步。网站的管理和以这一步也是最为费劲的一步。网站的管理和维护主要
5、包括安全管理、性能管理和内容管理维护主要包括安全管理、性能管理和内容管理三个方面。三个方面。另外从图另外从图2-12-1也可以看到，网站建设是也可以看到，网站建设是一个循环的过程，并不是说一次过后就结束了。一个循环的过程，并不是说一次过后就结束了。它需要随着需求的变化不断地对网站进行再次它需要随着需求的变化不断地对网站进行再次规划与设计，进而不断地建设和发布新的内容规划与设计，进而不断地建设和发布新的内容与服务，不断地升级服务器和网络环境以保障与服务，不断地升级服务器和网络环境以保障网站的运行性能。网站的运行性能。2.22.2 网站的规划与设计网站的规划与设计 在网站建设之前，需要对网站进行一
6、系列的分在网站建设之前，需要对网站进行一系列的分析和估计，然后根据分析的结果提出合理的建设方析和估计，然后根据分析的结果提出合理的建设方案，这就是网站的规划与设计。网站的规划与设计案，这就是网站的规划与设计。网站的规划与设计可分为网站定位、栏目规划、目录结构设计、风格可分为网站定位、栏目规划、目录结构设计、风格设计、导航系统设计几个环节。设计、导航系统设计几个环节。2.22.2 网站的规划与设计网站的规划与设计 1 1 网站的定位网站的定位 网站的定位就是确定网站的建设目标，它通常网站的定位就是确定网站的建设目标，它通常需要确定三个方面：网站的建设目的、网站的需要确定三个方面：网站的建设目的、
7、网站的访问对象和网站的内容与服务。用更通俗的话访问对象和网站的内容与服务。用更通俗的话来说，就是回答来说，就是回答“为什么要建立这个网站为什么要建立这个网站?这个这个网站为谁服务网站为谁服务?网站提供哪些方面的内容和服务网站提供哪些方面的内容和服务?”这三个问题。这三个问题。不同性质的站点有不同的建设目的，比不同性质的站点有不同的建设目的，比如电子商务站点主要是为了在企业与企业、企如电子商务站点主要是为了在企业与企业、企业名。与个人消费者之间建立更为直接和高效业名。与个人消费者之间建立更为直接和高效的商务通道；电子政务网站代表的是政府部门，的商务通道；电子政务网站代表的是政府部门，所以主要是通
8、过它来宣传政府的形象、实现政所以主要是通过它来宣传政府的形象、实现政务公开、向社会提供有价值的公益和导向信息，务公开、向社会提供有价值的公益和导向信息，以及实现网上政务；而个人站点则主要是为了以及实现网上政务；而个人站点则主要是为了介绍个人的兴趣爱好，通过共享信息来结识更介绍个人的兴趣爱好，通过共享信息来结识更多的朋友。多的朋友。2、栏目规划及其任务栏目规划及其任务 栏目规划的主要任务是对所收集栏目规划的主要任务是对所收集的大量内容进行有效的筛选，并将它们的大量内容进行有效的筛选，并将它们组织成一个合理的便于理解的逻辑结构，组织成一个合理的便于理解的逻辑结构，即建立网站的逻辑结构，在这其中不仅
9、即建立网站的逻辑结构，在这其中不仅需要为整个网站建立层次型结构，还需需要为整个网站建立层次型结构，还需要为每一个栏目或者子栏目设计合理的要为每一个栏目或者子栏目设计合理的逻辑结构。除此之外，栏目规划还需要逻辑结构。除此之外，栏目规划还需要确定哪些是重点栏目、哪些是需要实时确定哪些是重点栏目、哪些是需要实时更新的栏目、需要提供哪些功能性栏目更新的栏目、需要提供哪些功能性栏目等。等。成功的栏目规划不仅能给用户的访成功的栏目规划不仅能给用户的访问带来极大的便利，帮助用户准确地问带来极大的便利，帮助用户准确地了解网站所提供的内容和服务和快速了解网站所提供的内容和服务和快速地找到自己所感兴趣的网页，而且
10、能地找到自己所感兴趣的网页，而且能帮助网站管理员对网站进行更为高效帮助网站管理员对网站进行更为高效的管理。的管理。1)确定必需的栏目确定必需的栏目 栏目规划的第一步就是要确定哪些是必需的栏目，栏目规划的第一步就是要确定哪些是必需的栏目，这通常取决于网站的性质。比如对于一个企业网站来这通常取决于网站的性质。比如对于一个企业网站来说，公司简介、产品介绍、服务内容、联系方式、技说，公司简介、产品介绍、服务内容、联系方式、技术支持等栏目是必不可少的，而对于政府网站来说政术支持等栏目是必不可少的，而对于政府网站来说政务、政策法规、地方经济、百姓生活、观光旅游等栏务、政策法规、地方经济、百姓生活、观光旅游
11、等栏目都是必需的。个人网站相对来说比较随意，往往取目都是必需的。个人网站相对来说比较随意，往往取决于所收集的内容，但个人简介、个人收藏等栏目通决于所收集的内容，但个人简介、个人收藏等栏目通常不能缺少。常不能缺少。除了内容栏目之外，网站还应该包含除了内容栏目之外，网站还应该包含另外两类栏目，分别是用户指南类栏目和交另外两类栏目，分别是用户指南类栏目和交互性栏目。用户指南类栏目的目的是为了帮互性栏目。用户指南类栏目的目的是为了帮助用户了解这个网站的背景、性质、目的、助用户了解这个网站的背景、性质、目的、功能及发展历程，了解如何更好地对网站进功能及发展历程，了解如何更好地对网站进行访问，了解网站建设
12、的最新动态。这类栏行访问，了解网站建设的最新动态。这类栏目通常以目通常以“帮助帮助”、“关于网站关于网站”、“网站网站地图地图”、“最新动态最新动态”等名称出现。等名称出现。交互性栏目是能与用户进行双向交流的栏目，交互性栏目是能与用户进行双向交流的栏目，通过它不仅可以解答用户的疑问、了解用户的需求，通过它不仅可以解答用户的疑问、了解用户的需求，而且还可以获得用户对网站的建议和看法，让用户而且还可以获得用户对网站的建议和看法，让用户与网站、用户与用户之间建立良好的沟通，以便更与网站、用户与用户之间建立良好的沟通，以便更好地帮助网站的建设与发展。交互性栏目最常见的好地帮助网站的建设与发展。交互性栏
13、目最常见的方式就是留言板。方式就是留言板。2)确定重点栏目确定重点栏目 在确定完需要设置哪些栏目之后，接着需要做的在确定完需要设置哪些栏目之后，接着需要做的是从这些栏目中挑选出最为重要的几个栏目然后对它是从这些栏目中挑选出最为重要的几个栏目然后对它们进行更为详细的规划，这种选择往往取决于网站的们进行更为详细的规划，这种选择往往取决于网站的目的与功能。比如企业网站，其目的可能是为了更好目的与功能。比如企业网站，其目的可能是为了更好地推销自己的产品，所以产品介绍便是它的重点栏目。地推销自己的产品，所以产品介绍便是它的重点栏目。因此为了更好地介绍产品，它除了基本的产品介绍之因此为了更好地介绍产品，它
14、除了基本的产品介绍之外，可能还需要设立价格信息、网上定购、产品动态外，可能还需要设立价格信息、网上定购、产品动态等相关栏目。等相关栏目。3)建立层次型结构建立层次型结构 建立层次型结构是一个递进的过程，即从建立层次型结构是一个递进的过程，即从上到下一级一级地确定每一层的栏目。首先是上到下一级一级地确定每一层的栏目。首先是确定第一层，即网站所必需的栏目，然后对其确定第一层，即网站所必需的栏目，然后对其中的重点栏目进行进一步的规划，确定它们所中的重点栏目进行进一步的规划，确定它们所必需的子栏目，以此类推直至不需要再细分为必需的子栏目，以此类推直至不需要再细分为止。将所有的栏目及其子栏目连在一起就形
15、成止。将所有的栏目及其子栏目连在一起就形成了网站的层次型结构。了网站的层次型结构。1)线型结构线型结构 线型结构是最为简单的逻辑结构，如图线型结构是最为简单的逻辑结构，如图2-2-2 2所示，它将多个网页按照一定的先后顺序链所示，它将多个网页按照一定的先后顺序链接起来，使得用户在没有完成上一个网页的接起来，使得用户在没有完成上一个网页的访问之前就无法进入下一个网页。访问之前就无法进入下一个网页。图图2-2 线性结构线性结构2)层次型结构层次型结构 相对于按先后顺序组织而成的线型结构，层次相对于按先后顺序组织而成的线型结构，层次型结构是按照网页之间的包含关系组织而成。型结构是按照网页之间的包含关
16、系组织而成。层次型结构简单而且直观，能将所有的内容划层次型结构简单而且直观，能将所有的内容划分得非常清晰且便于理解，所以几乎所有的网站都分得非常清晰且便于理解，所以几乎所有的网站都采用这种结构来进行总体的栏目规划，即将所有的采用这种结构来进行总体的栏目规划，即将所有的内容先分成若干个大栏目，然后再将每个大栏目细内容先分成若干个大栏目，然后再将每个大栏目细分成若干小栏目，以此类推直到不用再细分为止。分成若干小栏目，以此类推直到不用再细分为止。层次型结构也有不好的地方，就是用户如层次型结构也有不好的地方，就是用户如果要访问最底层的网页就不得不按照层次从上到果要访问最底层的网页就不得不按照层次从上到
17、下一级一级地访问，最终到达想要访问的网页。下一级一级地访问，最终到达想要访问的网页。如果层次型结构的层次很深，比如有五层或者六如果层次型结构的层次很深，比如有五层或者六层，那么所带来的麻烦就大大降低了层次型网络层，那么所带来的麻烦就大大降低了层次型网络所具有的优点。又比如图所具有的优点。又比如图2-32-3所示的例子，用户所示的例子，用户想从网页想从网页A A转到网页转到网页B B，很可能不得不先从网页，很可能不得不先从网页A A一级一级级地返回到网页级地返回到网页C C，然后再一级一级地往下，然后再一级一级地往下走直到网页走直到网页B B。图图2-3 层次型结构说明图层次型结构说明图 所以过
18、深过于复杂的层次型结构反而会带来很所以过深过于复杂的层次型结构反而会带来很多不良的影响，最好的深度就是三层，最多不要超多不良的影响，最好的深度就是三层，最多不要超过五层。另外，建立一个良好的导航系统也可以弥过五层。另外，建立一个良好的导航系统也可以弥补层次型结构这方面的缺点。补层次型结构这方面的缺点。如图如图2-42-4所示，网络型结构是指多个所示，网络型结构是指多个网页相互之间都超链接的一种结构，这些网页相互之间都超链接的一种结构，这些网页可以是层次结构上的任意网页，但是网页可以是层次结构上的任意网页，但是因为导航的需要或者内容上的相关性而链因为导航的需要或者内容上的相关性而链接在一起。接在
19、一起。3)网络型结构网络型结构图图2-4 网络型结构网络型结构 网络型结构的实现就在于在所有相关的网页上网络型结构的实现就在于在所有相关的网页上保留到其他网页的超链接。这种结构使用户能更方便保留到其他网页的超链接。这种结构使用户能更方便地在网站上游弋，但同时也带来一个庞大超链接数的地在网站上游弋，但同时也带来一个庞大超链接数的问题。我们可以简单地计算一下，总的超链接数应该问题。我们可以简单地计算一下，总的超链接数应该等于网页数乘以网页数减一，所以三个网页的网络型等于网页数乘以网页数减一，所以三个网页的网络型结构的超链接总数为结构的超链接总数为32=632=6，1010个网页的网络型结构个网页的
20、网络型结构的超链接总数就到达的超链接总数就到达lO9=99lO9=99。这么庞大的超链接数维护起来相当麻烦，某个这么庞大的超链接数维护起来相当麻烦，某个网页的改动网页的改动(如改名、删除、增加如改名、删除、增加)就可能同时需要对就可能同时需要对所有的网页进行相应的修改，这是谁都不愿意做的事所有的网页进行相应的修改，这是谁都不愿意做的事情，所以在网站中需要谨慎使用网络型结构。情，所以在网站中需要谨慎使用网络型结构。4、网站目录结构设计网站目录结构设计 目录结构又称为物理结构，它的设目录结构又称为物理结构，它的设计解决的是如何在硬盘上更好地存放包括计解决的是如何在硬盘上更好地存放包括网页、图片、网
21、页、图片、FlashFlash动画、动画、JavaAppletJavaApplet、数据库等各种资源在内的所有网站资源。数据库等各种资源在内的所有网站资源。目录结构是否合理，对网站的创建目录结构是否合理，对网站的创建效率会产生较大的影响，但更主要的，会效率会产生较大的影响，但更主要的，会对未来网站的性能、网站的维护及扩展产对未来网站的性能、网站的维护及扩展产生很大的影响。生很大的影响。2)根据栏目规划来设计目录结构根据栏目规划来设计目录结构 一般情况下，可以按照网站的栏目规划来一般情况下，可以按照网站的栏目规划来设计目录结构，使两者有一一对应的关系。但设计目录结构，使两者有一一对应的关系。但是
22、这么做，也会导致一个安全问题，就是访问是这么做，也会导致一个安全问题，就是访问者很容易猜测出网站的目录结构，也就容易对者很容易猜测出网站的目录结构，也就容易对网站实施攻击。所以在设计目录结构的时候，网站实施攻击。所以在设计目录结构的时候，尽量避免目录名和栏目名相一致，可以尽量避免目录名和栏目名相一致，可以a a的方式的方式来提高目录名的猜测难度。来提高目录名的猜测难度。3)每个目录下都建立独立的每个目录下都建立独立的imagesimages子目录子目录 将图片及资源文件都放在一个独立将图片及资源文件都放在一个独立的的imagesimages目录下，可以使目录结构更加目录下，可以使目录结构更加清
23、晰。如果很多网页都需要用到同一个清晰。如果很多网页都需要用到同一个图片，比如网站标志图片，那么将这个图片，比如网站标志图片，那么将这个图片放到所有这些网页共有的最高层目图片放到所有这些网页共有的最高层目录的录的imagesimages子目录下。子目录下。4)目录的层次不要太深目录的层次不要太深5)不要使用中文目录名不要使用中文目录名 因为你的站点是对因为你的站点是对InternetInternet所有用所有用户开放的，所以你得考虑到使用非中文户开放的，所以你得考虑到使用非中文操作系统的客户也能正常访问你的站点。操作系统的客户也能正常访问你的站点。对于目录名，最好都使用英文。对于目录名，最好都使
24、用英文。6)可执行文件和不可执行文件分开放置可执行文件和不可执行文件分开放置 将可执行的动态服务器网页文件和不将可执行的动态服务器网页文件和不可执行的静态网页文件与动态网页文件分可执行的静态网页文件与动态网页文件分别放在两个目录下，然后将存放可执行网别放在两个目录下，然后将存放可执行网页文件的目录设为不可读和执行。这么做页文件的目录设为不可读和执行。这么做的好处就是可以避免动态服务器网页文件的好处就是可以避免动态服务器网页文件被读取。被读取。7)数据库文件单独放置数据库文件单独放置 数据库文件因为安全需求很高，数据库文件因为安全需求很高，所以最好放置在所以最好放置在HTTPHTTP所不能访问到
25、的所不能访问到的目录底下。这样就可以避免恶意的用目录底下。这样就可以避免恶意的用户通过户通过HTTPHTTP方式取到数据库文件。方式取到数据库文件。3风格设计：风格设计：风格设计包含很多内容，为了体现个人风格，符风格设计包含很多内容，为了体现个人风格，符合网站的名称和定位。下面我们在色彩搭配和版面合网站的名称和定位。下面我们在色彩搭配和版面布局方面做一些规划和设计。布局方面做一些规划和设计。1)色彩搭配色彩搭配 网站的色彩是最影响网站整体风格的因素，网站的色彩是最影响网站整体风格的因素，也是站点美工设计中最令人头疼的问题。许多也是站点美工设计中最令人头疼的问题。许多网页设计者都缺乏色彩搭配的基
26、本知识，所以网页设计者都缺乏色彩搭配的基本知识，所以在制作网页之前往往有一个很好的想法，但是在制作网页之前往往有一个很好的想法，但是却不知如何搭配网页的颜色来表达预想的效果。却不知如何搭配网页的颜色来表达预想的效果。因此，在介绍色彩搭配之前，先来看看色彩的因此，在介绍色彩搭配之前，先来看看色彩的基本知识。基本知识。色彩的基本知识色彩的基本知识 在物理学中，颜色是因为光的折射而产生的。颜在物理学中，颜色是因为光的折射而产生的。颜色不同，光的波长也就不同。红、绿、蓝是自然界的色不同，光的波长也就不同。红、绿、蓝是自然界的三原色，它们不同程度的组合可以形成各种颜色。所三原色，它们不同程度的组合可以形
27、成各种颜色。所以在网页中，也就用它们的不同颜色值来表示各种颜以在网页中，也就用它们的不同颜色值来表示各种颜色。色。网页中的颜色通常采用网页中的颜色通常采用6 6位十六进制的数值来表位十六进制的数值来表示，每两位代表一种颜色，从左到右依次表示红色、示，每两位代表一种颜色，从左到右依次表示红色、绿色和蓝色。颜色绿色和蓝色。颜色 值越高表示这种颜色越深。比如红色，其数值为值越高表示这种颜色越深。比如红色，其数值为“#FF0000#FF0000”，白色为，白色为“#FFFFFF#FFFFFF”，黑色为，黑色为“#000000#000000”。也可以采用三个以。也可以采用三个以“，”相隔的十进制相隔的十
28、进制数来表示某一颜色，比如红色，其十进制表示为数来表示某一颜色，比如红色，其十进制表示为color(255color(255，0 0，0)0)。在传统的色彩理论中，颜色一般分为彩色和非彩色在传统的色彩理论中，颜色一般分为彩色和非彩色(或称为灰色或称为灰色)两大色系。非彩色是指黑、白和所有灰色，两大色系。非彩色是指黑、白和所有灰色，彩色是指除非彩色外所有的颜色。在网页中，如果三种彩色是指除非彩色外所有的颜色。在网页中，如果三种颜色的数值相等，就显示为灰色。颜色的数值相等，就显示为灰色。太阳光是彩色的，按颜色的色调通常太阳光是彩色的，按颜色的色调通常将其划分为七种颜色：红、橙、黄、绿、青、将其划分
29、为七种颜色：红、橙、黄、绿、青、蓝、紫。如果将这七种颜色按这个顺序渐变蓝、紫。如果将这七种颜色按这个顺序渐变为一条色带的话，越靠近红色，给人的感觉为一条色带的话，越靠近红色，给人的感觉越温暖，越靠近蓝色和紫色，给人的感觉越越温暖，越靠近蓝色和紫色，给人的感觉越寒冷。所以红、橙、黄的组合又称为暖色调，寒冷。所以红、橙、黄的组合又称为暖色调，青、蓝、紫的组合又称为冷色调。青、蓝、紫的组合又称为冷色调。除了冷暖的差别外，不同的单个颜色除了冷暖的差别外，不同的单个颜色也会给人带来不同的感觉，通常：也会给人带来不同的感觉，通常：红色红色：是一种激奋的色彩，给人以冲动、愤：是一种激奋的色彩，给人以冲动、愤
30、怒、热情和活力的感觉。怒、热情和活力的感觉。绿色绿色：介于冷暖两种色彩的中间，一显得和：介于冷暖两种色彩的中间，一显得和睦、宁静、健康、安全。它和金黄、淡白搭配，可睦、宁静、健康、安全。它和金黄、淡白搭配，可以产生优雅、舒适的气氛。以产生优雅、舒适的气氛。橙色橙色：也是一种激奋的色彩，具有轻快、欢：也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨和时尚的效果。欣、热烈、温馨和时尚的效果。黄色黄色：充满快乐、希望、智慧和轻快，它也：充满快乐、希望、智慧和轻快，它也是最亮的一种颜色。是最亮的一种颜色。蓝色蓝色：是最具凉爽、清新、专业的色彩。：是最具凉爽、清新、专业的色彩。它和白色混合，能体现柔顺、淡
31、雅、浪漫的气它和白色混合，能体现柔顺、淡雅、浪漫的气 (如天空的色彩如天空的色彩)。白色：给人以洁白、明快、纯真和干净的白色：给人以洁白、明快、纯真和干净的感觉。感觉。黑色：通常是深沉、神秘、寂静、悲哀和黑色：通常是深沉、神秘、寂静、悲哀和压抑的代表。压抑的代表。灰色灰色：具有中庸、平凡、温和、谦让、中：具有中庸、平凡、温和、谦让、中立和高雅的感觉，它可以和任何一种颜色进行搭立和高雅的感觉，它可以和任何一种颜色进行搭配。配。网站的色彩搭配网站的色彩搭配 网站的色彩搭配通常分为两个步骤，那么第一步就是网站的色彩搭配通常分为两个步骤，那么第一步就是为整个网站选取一种主色调，然后再为主色调搭配多种为
32、整个网站选取一种主色调，然后再为主色调搭配多种适合的颜色。主色调指的是整个网站给人印象最深的颜适合的颜色。主色调指的是整个网站给人印象最深的颜色，或者说除白色之外用得最多的颜色。色，或者说除白色之外用得最多的颜色。正如前面所述，不同的颜色给人的感受是不一样的，正如前面所述，不同的颜色给人的感受是不一样的，所以主色调选取的一个最基本的原则就是保证所选的颜所以主色调选取的一个最基本的原则就是保证所选的颜色与网站的主题或者形象相符，进一步地，能够通过这色与网站的主题或者形象相符，进一步地，能够通过这种颜色加深用户对网站的印象。种颜色加深用户对网站的印象。图图2-5 微软公司主页微软公司主页图图2-6
33、 IBM公司主页公司主页 企业在选取主色调的时候需要考虑符企业在选取主色调的时候需要考虑符合企业自身的形象。合企业自身的形象。选好主色调之后，接下来要考虑的就选好主色调之后，接下来要考虑的就是在什么地方使用主色调。从前面的几个例是在什么地方使用主色调。从前面的几个例子也可以看到，主色调最常表现在三个位置，子也可以看到，主色调最常表现在三个位置，首先是头部，也就是网页最上面的部分，通首先是头部，也就是网页最上面的部分，通常包含导航条。头部是最能体现主色调的地常包含导航条。头部是最能体现主色调的地方，所以所有的网站都会在头部表现主色调。方，所以所有的网站都会在头部表现主色调。其次是栏目索引条上，栏
34、目索引条虽其次是栏目索引条上，栏目索引条虽然面积小，但是出现在网页的各个部位，所然面积小，但是出现在网页的各个部位，所以能非常有效地渲染主色调。最后是网页上以能非常有效地渲染主色调。最后是网页上的文字，文字笔画虽细，但大面积的文字也的文字，文字笔画虽细，但大面积的文字也能很好地突出主色调。能很好地突出主色调。接着要考虑的是别的地方使用什么颜接着要考虑的是别的地方使用什么颜色去搭配这种主色调，比如背景色、文字颜色去搭配这种主色调，比如背景色、文字颜色、导航条颜色、插图颜色等都使用什么颜色、导航条颜色、插图颜色等都使用什么颜色。色彩搭配是一项非常精细的工作，因为色。色彩搭配是一项非常精细的工作，因
35、为往往一个细节就会影响整个网页的色彩均衡往往一个细节就会影响整个网页的色彩均衡.选取背景色选取背景色 大多数的网站都会选取白色作为背景色。大多数的网站都会选取白色作为背景色。白色使得狭小的屏幕空间显得很大，再白色使得狭小的屏幕空间显得很大，再多的信息在白色的背景下，其排放也可多的信息在白色的背景下，其排放也可以显得很整齐，其页面也可以显得非常以显得很整齐，其页面也可以显得非常干净和整洁。干净和整洁。(2)(2)导航条的颜色导航条的颜色 导航条是对网站栏目的一个索引，它导航条是对网站栏目的一个索引，它通常以一个水平长条的形式出现在网页头通常以一个水平长条的形式出现在网页头部的下边。导航条作为头部
36、的一部分，经部的下边。导航条作为头部的一部分，经常采用主色调，另常采用主色调，另方面，导航条因为介于方面，导航条因为介于网页的头部和内容部分的中间，所以也经网页的头部和内容部分的中间，所以也经常作为头部和内容部分的过渡，这种情况常作为头部和内容部分的过渡，这种情况下通常采用灰色系下通常采用灰色系(3)(3)栏目索引条的颜色栏目索引条的颜色 栏目索引条因为分布在网页的各个部位，栏目索引条因为分布在网页的各个部位，所以经常采用主色调中不同深度的颜色来烘托所以经常采用主色调中不同深度的颜色来烘托整体的效果。整体的效果。(4)(4)文字的颜色文字的颜色 文字在一个网页上是无处不在的，但是文字在一个网页
37、上是无处不在的，但是文字的笔画比较单薄，所以文字通常用来进一文字的笔画比较单薄，所以文字通常用来进一步突出主色调，或者用来过渡和缓解页面的颜步突出主色调，或者用来过渡和缓解页面的颜色。文字的颜色主要根据文字的背景色进行搭色。文字的颜色主要根据文字的背景色进行搭配，它与背景色应有较大的反差，如白底黑字、配，它与背景色应有较大的反差，如白底黑字、蓝底白字等，以便能清楚得显示文字。其次文蓝底白字等，以便能清楚得显示文字。其次文字的颜色搭配还得兼顾文字周围物体的颜色。字的颜色搭配还得兼顾文字周围物体的颜色。(5)(5)插图的颜色插图的颜色 网页的插图通常尺寸都比较小，所以它的网页的插图通常尺寸都比较小
38、，所以它的颜色可以绚丽、丰富一些，这样一来可以使页面颜色可以绚丽、丰富一些，这样一来可以使页面变得活泼，二来可以点缀整个页面。但是在选择变得活泼，二来可以点缀整个页面。但是在选择有背景的图片时要特别小心，不要和网页的背景有背景的图片时要特别小心，不要和网页的背景色及图所插区域的背景色相冲突。解决这个问题色及图所插区域的背景色相冲突。解决这个问题一般有两种方法，一种是采用可透明的一般有两种方法，一种是采用可透明的GIFGIF图，另图，另一种是将图片的背景色做成和网页背景色一样的一种是将图片的背景色做成和网页背景色一样的颜色。颜色。2)版面布局设计版面布局设计 报纸、杂志通常分为不同的版面，不同的
39、版面报纸、杂志通常分为不同的版面，不同的版面需要不同的布局，比如报纸的头版最为重要，它的需要不同的布局，比如报纸的头版最为重要，它的布局通常都围绕醒目的大标题展开以吸引人们对它布局通常都围绕醒目的大标题展开以吸引人们对它的注意，而其他版面以内容为主，所以它们的布局的注意，而其他版面以内容为主，所以它们的布局相对简单，通常都根据内容文字的多少而自然分割。相对简单，通常都根据内容文字的多少而自然分割。同报纸、杂志一样，网站也分为很多不同的网页，同报纸、杂志一样，网站也分为很多不同的网页，比如主页、栏目首页、内容网页等，比如主页、栏目首页、内容网页等，网站在版面布局上的一个特点，那就是从网站层次型结
40、构的顶层主页到最底层的内容网页，版面布局不断简化。如果将这个特点反过来，便得到了网站在进行版面布局设计时应采用的原则，那就是首先首先对主页进行版面布局，然后在主页布局的对主页进行版面布局，然后在主页布局的基础上对栏目首页进行版面布局，接着往基础上对栏目首页进行版面布局，接着往下，最后对内容网页进行版面布局。下，最后对内容网页进行版面布局。第二步就是在网页的不同区域上安排第二步就是在网页的不同区域上安排不同的内容。不同的网页内容自然是不一样不同的内容。不同的网页内容自然是不一样的，所以在这里只是向大家介绍内容编排上的，所以在这里只是向大家介绍内容编排上的一个基本知识，那就是人们在浏览一个网的一个
41、基本知识，那就是人们在浏览一个网页的时候，页的时候，通常会把第一眼停留在网页的左通常会把第一眼停留在网页的左上角或中间的地方上角或中间的地方(如图如图2-72-7所示所示)，然后才，然后才会浏览其他部分。这个部分通常称为焦点，会浏览其他部分。这个部分通常称为焦点，所以在布局内容的时候，应该把最能传达信所以在布局内容的时候，应该把最能传达信息、最能吸引人的内容放在这些地方，比如息、最能吸引人的内容放在这些地方，比如网站标志和最新新闻。网站标志和最新新闻。图图2-7网页设计重点区域网页设计重点区域 版面布局的基本方法版面布局的基本方法 熟悉网页制作的人在拿到网页的相关内容后，熟悉网页制作的人在拿到
42、网页的相关内容后，也许很快就可以在脑子里形成大概的布局，并且可也许很快就可以在脑子里形成大概的布局，并且可以直接用网页制作工具开始制作。但是对不熟悉网以直接用网页制作工具开始制作。但是对不熟悉网页布局的人来说，这么做有相当大的困难，所以这页布局的人来说，这么做有相当大的困难，所以这时，就需要借助于其他的方法来进行网页布局。时，就需要借助于其他的方法来进行网页布局。第一种方法是用手工的方式在纸上画草图，第一种方法是用手工的方式在纸上画草图，这种方法可以大概地描绘出网页的框架，但是这种方法可以大概地描绘出网页的框架，但是也只能到此为止，不能再进行更细的工作，如也只能到此为止，不能再进行更细的工作，
43、如配色、摆放文字和图片等。配色、摆放文字和图片等。第二种方法是用专业制图软件来进行布局，第二种方法是用专业制图软件来进行布局，建议使用建议使用PhotoshopPhotoshop。PhotoshopPhotoshop是一个非常优是一个非常优秀的图片处理工具。用它可以像设计一幅图片、秀的图片处理工具。用它可以像设计一幅图片、一幅招贴画、一幅广告一样去设计一个网页的一幅招贴画、一幅广告一样去设计一个网页的界面，然后再考虑如何用网页制作工具去实现界面，然后再考虑如何用网页制作工具去实现这个网页。这个网页。2、网站的导航设计网站的导航设计 在访问网站的时候也一样，用户期望在任在访问网站的时候也一样，用
44、户期望在任何一个网页上都能清楚地知道目前所处的何一个网页上都能清楚地知道目前所处的位置，并且能快速地从这个网页切换到另位置，并且能快速地从这个网页切换到另一网页。因此网站导航对于一个网站来说一网页。因此网站导航对于一个网站来说非常的必要和重要，它是衡量一个网站是非常的必要和重要，它是衡量一个网站是否优秀的重要标准。否优秀的重要标准。1)导航的实现方法导航的实现方法 导航最常用的实现方法就是导航条。在导航条中，导航最常用的实现方法就是导航条。在导航条中，所有超链接所对应的网页在网站的层次型结构中是并所有超链接所对应的网页在网站的层次型结构中是并列的，所以通过它可以快速地切换到并列的其他网页。列的
45、，所以通过它可以快速地切换到并列的其他网页。比如图比如图2-82-8所示的新浪网首页中就有很多导航条。首先所示的新浪网首页中就有很多导航条。首先是网站第一层分类栏目的导航条，这个导航条几乎出是网站第一层分类栏目的导航条，这个导航条几乎出现在新浪网的所有网页中，所以在任何一个网页通过现在新浪网的所有网页中，所以在任何一个网页通过它都可以立即跳转到新闻、它都可以立即跳转到新闻、UCUC聊天、体育等各个栏目聊天、体育等各个栏目的首页。的首页。图图2-8新浪网导航条新浪网导航条 几乎在所有的网站上都可以找到类似几乎在所有的网站上都可以找到类似的导航条，不同之处可能只在表现形式上。的导航条，不同之处可能
46、只在表现形式上。比如当当网的导航条采用类似图片按钮的比如当当网的导航条采用类似图片按钮的形式，而首都之窗网站、微软公司网站、形式，而首都之窗网站、微软公司网站、新浪网等的导航条则直接采用文字超链接新浪网等的导航条则直接采用文字超链接的形式。的形式。除了普通的导航条之外，导航另一种非除了普通的导航条之外，导航另一种非常重要的实现方法是路径导航，即在网页上显常重要的实现方法是路径导航，即在网页上显示这个网页在网站层次型结构上的位置。通过示这个网页在网站层次型结构上的位置。通过路径导航，用户不仅可以了解当前所处的位置，路径导航，用户不仅可以了解当前所处的位置，还可以快速地返回到当前网页以上的任何一层
47、还可以快速地返回到当前网页以上的任何一层网页。网页。比如图比如图2-92-9所示的新浪网读书栏目上就有所示的新浪网读书栏目上就有路径导航，从这个导航可以清楚地看到这个网路径导航，从这个导航可以清楚地看到这个网页归属于读书栏目下的沈从文小说页归属于读书栏目下的沈从文小说边城边城子栏目，而且通过它还可以直接跳转到新浪子栏目，而且通过它还可以直接跳转到新浪首页、读书栏目首页。首页、读书栏目首页。图图2-9新浪网读书栏目路径导航条新浪网读书栏目路径导航条 除了上述两种最为重要的实现方法除了上述两种最为重要的实现方法之外，还有一些扩展的实现方法，如重点之外，还有一些扩展的实现方法，如重点导航、相关导航等
48、，这些导航可以让用户导航、相关导航等，这些导航可以让用户有更多更灵活的方式找到自己所感兴趣的有更多更灵活的方式找到自己所感兴趣的网页。下面我们通过实际的例子来看看这网页。下面我们通过实际的例子来看看这些导航。比如新浪网在每一个新闻内容网些导航。比如新浪网在每一个新闻内容网页的底部都有一个区域，里边罗列着与这页的底部都有一个区域，里边罗列着与这个新闻相关的新闻网页的超链接，如图个新闻相关的新闻网页的超链接，如图2-2-1010所示，这就是相关导航。所示，这就是相关导航。图图2-10 相关导航举例相关导航举例2)导航的设计策略导航的设计策略 虽然导航有很多不同的实现方法，但是并不是虽然导航有很多不
49、同的实现方法，但是并不是所有的网站都需要使用这些方法，这通常取决于网所有的网站都需要使用这些方法，这通常取决于网站的规模。下面就是在设计网站导航时，可以采用站的规模。下面就是在设计网站导航时，可以采用的一些基本策略：的一些基本策略：(1)(1)首先，至少要使用一个一层栏目的导航条，首先，至少要使用一个一层栏目的导航条，如果栏目底下也有很多内容，可以分为很多子类如果栏目底下也有很多内容，可以分为很多子类的话，那么可以进一步设计栏目下的导航条。的话，那么可以进一步设计栏目下的导航条。(2)(2)其次，如果网站的层次很深，其次，如果网站的层次很深，比如三层以上比如三层以上(主页作为第一层主页作为第一
50、层)，最好，最好使用路径导航。路径导航可以从第三层使用路径导航。路径导航可以从第三层以下的网页开始出现。如果网站的层次以下的网页开始出现。如果网站的层次只有两层或者三层，那么不是特别需要只有两层或者三层，那么不是特别需要路径导航。路径导航。(3)(3)其他导航方式作为辅助的导其他导航方式作为辅助的导航手段，视实际需要而定。航手段，视实际需要而定。网站设计需要注意的其他问题网页长度不要超过三屏，否则使网页下载速度过慢。网页中的图像单张不要超过30KB，整页不要超过60KB，若不得不使用大的图片，可将其切割再使用。正确选择图片格式，网上常用的图片格式是GIF、JPEG或PNG，分辨率一般是72像素