第二章网站设计步骤.ppt

《第二章网站设计步骤.ppt》由会员分享，可在线阅读，更多相关《第二章网站设计步骤.ppt（175页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、第第章章 网站设计步骤网站设计步骤 第二章第二章 网站设计步骤网站设计步骤 网站的设计与建设是需要一系列步骤来完成的，网站的设计与建设是需要一系列步骤来完成的，能否遵循网站的设计步骤直接影响一个网站质量，能否遵循网站的设计步骤直接影响一个网站质量，也直接影响网站发布后是否能成功运行。也直接影响网站发布后是否能成功运行。第第章章 网站设计步骤网站设计步骤 2.12.1总体概述总体概述2.22.2 网站的规划与设计网站的规划与设计2.32.3 站点建设站点建设2.42.4 站点发布和网站的管理与维护站点发布和网站的管理与维护习习 题题第二章第二章 网站设计步骤网站设计步骤第第章章 网站设计步骤网站

2、设计步骤 2.12.1 总体概述总体概述 网站建设总的网站建设总的来说需要经历四个来说需要经历四个步骤，分别是网站步骤，分别是网站的规划与设计、站的规划与设计、站点建设、网站发布点建设、网站发布和网站的管理与维和网站的管理与维护，如图护，如图2-12-1所示。所示。图图2-1 网站建设的步骤网站建设的步骤第第章章 网站设计步骤网站设计步骤 网站的规划与设计是网站建设的网站的规划与设计是网站建设的第一步。在这第一步。在这步中步中需要对网站进行整体的分析，明确网站的建设目标，确定需要对网站进行整体的分析，明确网站的建设目标，确定网站的访问对象、网站应提供的内容与服务及网站的域名，网站的访问对象、网

3、站应提供的内容与服务及网站的域名，设计网站的标志、网站的风格、网站的目录结构等各方面设计网站的标志、网站的风格、网站的目录结构等各方面的内容。这一步是网站建设成功与否的前提，因为所有的的内容。这一步是网站建设成功与否的前提，因为所有的后续步骤都必须按照第一步的规划与设计来进行实施。后续步骤都必须按照第一步的规划与设计来进行实施。第第章章 网站设计步骤网站设计步骤 网站的规划与设计完成之后，接着进入具体的站点建网站的规划与设计完成之后，接着进入具体的站点建设步骤。这个步骤主要包括域名注册、网站配置、网页制设步骤。这个步骤主要包括域名注册、网站配置、网页制作和网站测试四个部分。除了网站测试必须要在

4、其他三项作和网站测试四个部分。除了网站测试必须要在其他三项内容开始之后才能进行之外，域名注册、网站配置和网页内容开始之后才能进行之外，域名注册、网站配置和网页制作相对独立，可以同时进行。制作相对独立，可以同时进行。相关的内容都建设好后，就可以正式地发布网站，也相关的内容都建设好后，就可以正式地发布网站，也就是说将网站放到就是说将网站放到InternetInternet上允许用户通过网站的域名进上允许用户通过网站的域名进行访问。行访问。第第章章 网站设计步骤网站设计步骤 网站的管理与维护虽然是最后一个步骤，但实际上贯网站的管理与维护虽然是最后一个步骤，但实际上贯穿网站建设的全过程，只要网站没有停

5、止运行，就需要对穿网站建设的全过程，只要网站没有停止运行，就需要对其进行管理和维护，所以这一步也是最为费劲的一步。网其进行管理和维护，所以这一步也是最为费劲的一步。网站的管理和维护主要包括安全管理、性能管理和内容管理站的管理和维护主要包括安全管理、性能管理和内容管理三个方面。三个方面。另外从图另外从图2-12-1也可以看到，网站建设是一个循环的过也可以看到，网站建设是一个循环的过程，并不是说一次过后就结束了。它需要随着需求的变化程，并不是说一次过后就结束了。它需要随着需求的变化不断地对网站进行再次规划与设计，进而不断地建设和发不断地对网站进行再次规划与设计，进而不断地建设和发布新的内容与服务，

6、不断地升级服务器和网络环境以保障布新的内容与服务，不断地升级服务器和网络环境以保障网站的运行性能。网站的运行性能。第第章章 网站设计步骤网站设计步骤 2.22.2 网站的规划与设计网站的规划与设计 在网站建设之前，需要对网站进行一系列的分在网站建设之前，需要对网站进行一系列的分析和估计，然后根据分析的结果提出合理的建设方析和估计，然后根据分析的结果提出合理的建设方案，这就是网站的规划与设计。网站的规划与设计案，这就是网站的规划与设计。网站的规划与设计可分为网站定位、内容收集、栏目规划、目录结构可分为网站定位、内容收集、栏目规划、目录结构设计、网站标志设计、风格设计、导航系统设计七设计、网站标志

7、设计、风格设计、导航系统设计七个环节。如图个环节。如图2-12-1所示。所示。第第章章 网站设计步骤网站设计步骤 图图22“淡蓝的天空淡蓝的天空”个人网站个人网站下面我们就以建立一个名为下面我们就以建立一个名为“淡蓝的天空淡蓝的天空”的的个人网站为例来进行栏目规划。如图个人网站为例来进行栏目规划。如图22所示所示。第第章章 网站设计步骤网站设计步骤 案例假设：如你是一个开朗幽默、喜欢交友、案例假设：如你是一个开朗幽默、喜欢交友、喜欢音乐、喜欢上网、喜欢读书的人，你已经收喜欢音乐、喜欢上网、喜欢读书的人，你已经收集网上很多好的资源和音乐，同时在网络和书刊集网上很多好的资源和音乐，同时在网络和书刊

8、中摘录了许多好的文章，现在你要为自己建立一中摘录了许多好的文章，现在你要为自己建立一个网站。目的是介绍自己、张扬自己的个性、与个网站。目的是介绍自己、张扬自己的个性、与所有爱好者分享你收集的资源，同时给爱好者提所有爱好者分享你收集的资源，同时给爱好者提供一个交流的平台。供一个交流的平台。第第章章 网站设计步骤网站设计步骤 实例实例21“淡蓝的天空淡蓝的天空”个人网站个人网站的栏目规划（）的栏目规划（）一、要求与目的一、要求与目的 掌握掌握网站的定位网站的定位 掌握掌握栏目规划栏目规划 掌握逻辑掌握逻辑结构设计结构设计 掌握掌握目录结构设计目录结构设计第第章章 网站设计步骤网站设计步骤 二、规划

9、分析过程二、规划分析过程 1网站定位：网站定位：通过上述案例假设，从中可对网站做出定位：通过上述案例假设，从中可对网站做出定位：极具个性化的个人网站，根据个人兴趣爱好，分极具个性化的个人网站，根据个人兴趣爱好，分享资源，以期通过网络平台结识更多的同好者。享资源，以期通过网络平台结识更多的同好者。网站访问群体定位：所有志趣相投的朋友，网站访问群体定位：所有志趣相投的朋友，共同交流和资源共享。共同交流和资源共享。为了表达一种心境，凸现自己的个性，将要为了表达一种心境，凸现自己的个性，将要建立的网站取名为建立的网站取名为“淡蓝的天空淡蓝的天空”。第第章章 网站设计步骤网站设计步骤 2网站栏目划分网站

10、栏目划分 对网站及其访问群体做了定位后，接着需要做的对网站及其访问群体做了定位后，接着需要做的是确定网站所必需的栏目，依案例假设，确定栏目及是确定网站所必需的栏目，依案例假设，确定栏目及其名称如下：其名称如下：1)1)平凡的陌生人平凡的陌生人：此栏目主要是为了在网络上展：此栏目主要是为了在网络上展现自己，现自己，)让别人了解自己。让别人了解自己。2)感动你的心灵感动你的心灵：此栏目主要是把自己平时收集：此栏目主要是把自己平时收集的文摘、网络文学、杂文、幽默等共享出来，的文摘、网络文学、杂文、幽默等共享出来，)与有共同与有共同)兴趣的朋友一同兴趣的朋友一同)来欣赏，来欣赏，)以期望在以期望在心灵

11、深处有所触动。心灵深处有所触动。第第章章 网站设计步骤网站设计步骤 3)请聆听请聆听：此栏目主要是把自己喜欢的音乐呈现：此栏目主要是把自己喜欢的音乐呈现给同给同)好者或浏览者，好者或浏览者，)来共同来共同)欣赏这美妙的乐欣赏这美妙的乐曲。曲。4)那笨拙的脚印那笨拙的脚印：此栏目主要是提供收集的网络：此栏目主要是提供收集的网络资源，资源，)起名起名)“那笨拙的脚印那笨拙的脚印”主要是为了体主要是为了体现设计者在网络和相关技术上的欠缺，现设计者在网络和相关技术上的欠缺，)同时也同时也隐含设计者此方面虽然隐含设计者此方面虽然“脚印笨拙脚印笨拙”，)但仍孜但仍孜孜不孜不)倦的追求的心境，倦的追求的心境

12、，)也包含谦逊的成分在也包含谦逊的成分在内。内。第第章章 网站设计步骤网站设计步骤 5)同心结：此栏目主要是给有着共同：此栏目主要是给有着共同)兴趣的朋兴趣的朋友提供相互链接的平台，友提供相互链接的平台，)以达到能和同以达到能和同)类的类的网站进行相互推荐，网站进行相互推荐，)建立良好的合作关系的目建立良好的合作关系的目的。的。6)晚安：此栏目主要是留言本，：此栏目主要是留言本，)提供浏览者与提供浏览者与浏览者、浏览者与作者间共同浏览者、浏览者与作者间共同)交流的地方，交流的地方，)起名起名)“晚安晚安”主要是考虑到同主要是考虑到同)好者多位全职，好者多位全职，)晚上上网较多，晚上上网较多，)

13、同时也体现设计者不同时也体现设计者不)拘一格拘一格的设计思想，的设计思想，)表达个性，表达个性，)问候朋友。问候朋友。第第章章 网站设计步骤网站设计步骤 在所有栏目中，在所有栏目中，“感动你的心灵感动你的心灵”和和“那笨那笨拙的脚印拙的脚印”是重要的栏目，其中是重要的栏目，其中“感动你的心灵感动你的心灵”需要对它进行更细的划分，根据自己兴趣和所需要对它进行更细的划分，根据自己兴趣和所收集的相关文章，本栏目又被划分为：收集的相关文章，本栏目又被划分为：“文摘文摘”、“网文网文”、“杂文杂文”、“幽默幽默”、“测验测验”、“专栏专栏”等子栏目。等子栏目。第第章章 网站设计步骤网站设计步骤 3.网站

14、逻辑结构设计网站逻辑结构设计 由于本网站属于个人网站。由于本网站属于个人网站。一般情况下栏目不是太多，结一般情况下栏目不是太多，结构不是太复杂，层次不是太多，构不是太复杂，层次不是太多，为了能使相关内容划分的很清为了能使相关内容划分的很清楚，便于理解和浏览，本网站楚，便于理解和浏览，本网站采用层次型逻辑结构。如图采用层次型逻辑结构。如图2 23 3所示。所示。图图2-3 层次型逻辑结构层次型逻辑结构第第章章 网站设计步骤网站设计步骤 将网站所有将网站所有栏目及其子栏目连栏目及其子栏目连在一起，本网站的在一起，本网站的逻辑目录结构如图逻辑目录结构如图24所示所示图图2-4“淡蓝的天空淡蓝的天空”

15、网站层次型目录结构图网站层次型目录结构图第第章章 网站设计步骤网站设计步骤 4网站目录结构设计网站目录结构设计 为了便于网站管理和维护，网站的目录结为了便于网站管理和维护，网站的目录结构设计采用规范设计，即建立网站根目录，再构设计采用规范设计，即建立网站根目录，再在网站根目录下建立各级栏目的目录，目录名在网站根目录下建立各级栏目的目录，目录名采用拼音，采用拼音，imagesimages目录有两级目录有两级网站网站imagesimages和各栏目目录下独立的和各栏目目录下独立的imagesimages。如图。如图2 25 5所示所示。第第章章 网站设计步骤网站设计步骤 图图2-5“淡蓝的天空淡蓝

16、的天空”网站目录网站目录第第章章 网站设计步骤网站设计步骤 三、本实例知识点三、本实例知识点 1、网站的定位网站的定位 网站的定位就是确定网站的建设目标，它通常需要确网站的定位就是确定网站的建设目标，它通常需要确定三个方面：网站的建设目的、网站的访问对象和网站的定三个方面：网站的建设目的、网站的访问对象和网站的内容与服务。用更通俗的话来说，就是回答内容与服务。用更通俗的话来说，就是回答“为什么要建为什么要建立这个网站立这个网站?这个网站为谁服务这个网站为谁服务?网站提供哪些方面的内容网站提供哪些方面的内容和服务和服务?”?”这三个问题。这三个问题。第第章章 网站设计步骤网站设计步骤 不同性质的

17、站点有不同的建设目的，比如不同性质的站点有不同的建设目的，比如电子商务站点主要是为了在企业与企业、企业电子商务站点主要是为了在企业与企业、企业名。与个人消费者之间建立更为直接和高效的名。与个人消费者之间建立更为直接和高效的商务通道；电子政务网站代表的是政府部门，商务通道；电子政务网站代表的是政府部门，所以主要是通过它来宣传政府的形象、实现政所以主要是通过它来宣传政府的形象、实现政务公开、向社会提供有价值的公益和导向信息，务公开、向社会提供有价值的公益和导向信息，以及实现网上政务；而个人站点则主要是为了以及实现网上政务；而个人站点则主要是为了介绍个人的兴趣爱好，通过共享信息来结识更介绍个人的兴趣

18、爱好，通过共享信息来结识更多的朋友。多的朋友。第第章章 网站设计步骤网站设计步骤 网站的访问对象指的是这个网站主要面向哪些网站的访问对象指的是这个网站主要面向哪些社会群体社会群体?是企业、消费者、社会大众、兄弟部门是企业、消费者、社会大众、兄弟部门还是所有志趣相投的朋友还是所有志趣相投的朋友?比如你是一个非常喜欢比如你是一个非常喜欢ROLLING STONE ROLLING STONE 乐队的人，那么你可能就非常希乐队的人，那么你可能就非常希望通过你的网站来结交更多同样喜欢望通过你的网站来结交更多同样喜欢ROLLING ROLLING STONE STONE 乐队的朋友。乐队的朋友。第第章章

19、网站设计步骤网站设计步骤 网站的内容与服务指的是你计划在你的网站网站的内容与服务指的是你计划在你的网站上放置哪些内容来让别人访问。接着上面的例上放置哪些内容来让别人访问。接着上面的例子，你可能就会在你的网站上放置很多有关子，你可能就会在你的网站上放置很多有关ROLLING STONE ROLLING STONE 乐队的内容，比如乐队的内容，比如ROLLING ROLLING STONE STONE 乐队的经典乐曲、乐队的经典乐曲、ROLLING STONE ROLLING STONE 乐队乐队的图片、的图片、ROLLING STONE ROLLING STONE 乐队的最新动态等。乐队的最新动

20、态等。网站是提供了一个与外界进行交流的窗口，而网站是提供了一个与外界进行交流的窗口，而真正赋予网站生命力的是网站的内容。具有能真正赋予网站生命力的是网站的内容。具有能吸引人的内容才能留住访问过的人，才能吸引吸引人的内容才能留住访问过的人，才能吸引更多的人来访问更多的人来访问。第第章章 网站设计步骤网站设计步骤 对于内容收集，在确定好需要在网站上放对于内容收集，在确定好需要在网站上放置什么内容之后，接着要做的就是大量收集相置什么内容之后，接着要做的就是大量收集相关的内容并对其进行整理。内容收集的渠道很关的内容并对其进行整理。内容收集的渠道很多，一方面你可能已经有了一些积累，另一方多，一方面你可能

21、已经有了一些积累，另一方面你也可以从朋友、杂志或者因特网上搜索和面你也可以从朋友、杂志或者因特网上搜索和下载，最后你还可以自己创作一些内容。下载，最后你还可以自己创作一些内容。第第章章 网站设计步骤网站设计步骤 2、栏目规划及其任务栏目规划及其任务 栏目规划的主要任务是对所收集的大量内容进行栏目规划的主要任务是对所收集的大量内容进行有效的筛选，并将它们组织成一个合理的便于理解的有效的筛选，并将它们组织成一个合理的便于理解的逻辑结构，即建立网站的逻辑结构，在这其中不仅需逻辑结构，即建立网站的逻辑结构，在这其中不仅需要为整个网站建立层次型结构，还需要为每一个栏目要为整个网站建立层次型结构，还需要为

22、每一个栏目或者子栏目设计合理的逻辑结构。除此之外，栏目规或者子栏目设计合理的逻辑结构。除此之外，栏目规划还需要确定哪些是重点栏目、哪些是需要实时更新划还需要确定哪些是重点栏目、哪些是需要实时更新的栏目、需要提供哪些功能性栏目等。的栏目、需要提供哪些功能性栏目等。第第章章 网站设计步骤网站设计步骤 1)确定必需的栏目确定必需的栏目 栏目规划的第一步就是要确定哪些是必需的栏目，栏目规划的第一步就是要确定哪些是必需的栏目，这通常取决于网站的性质。比如对于一个企业网站来这通常取决于网站的性质。比如对于一个企业网站来说，公司简介、产品介绍、服务内容、联系方式、技说，公司简介、产品介绍、服务内容、联系方式

23、、技术支持等栏目是必不可少的，而对于政府网站来说政术支持等栏目是必不可少的，而对于政府网站来说政务、政策法规、地方经济、百姓生活、观光旅游等栏务、政策法规、地方经济、百姓生活、观光旅游等栏目都是必需的。个人网站相对来说比较随意，往往取目都是必需的。个人网站相对来说比较随意，往往取决于所收集的内容，但个人简介、个人收藏等栏目通决于所收集的内容，但个人简介、个人收藏等栏目通常不能缺少。常不能缺少。第第章章 网站设计步骤网站设计步骤 除了内容栏目之外，网站还应该包含另外两类栏目，除了内容栏目之外，网站还应该包含另外两类栏目，分别是用户指南类栏目和交互性栏目。用户指南类栏目分别是用户指南类栏目和交互性

24、栏目。用户指南类栏目的目的是为了帮助用户了解这个网站的背景、性质、目的目的是为了帮助用户了解这个网站的背景、性质、目的、功能及发展历程，了解如何更好地对网站进行访问，的、功能及发展历程，了解如何更好地对网站进行访问，了解网站建设的最新动态。这类栏目通常以了解网站建设的最新动态。这类栏目通常以“帮助帮助”、“关于网站关于网站”、“网站地图网站地图”、“最新动态最新动态”等名称出等名称出现。现。第第章章 网站设计步骤网站设计步骤 交互性栏目是能与用户进行双向交流的栏目，交互性栏目是能与用户进行双向交流的栏目，通过它不仅可以解答用户的疑问、了解用户的需求，通过它不仅可以解答用户的疑问、了解用户的需求

25、，而且还可以获得用户对网站的建议和看法，让用户而且还可以获得用户对网站的建议和看法，让用户与网站、用户与用户之间建立良好的沟通，以便更与网站、用户与用户之间建立良好的沟通，以便更好地帮助网站的建设与发展。交互性栏目最常见的好地帮助网站的建设与发展。交互性栏目最常见的方式就是留言板。方式就是留言板。第第章章 网站设计步骤网站设计步骤 2)确定重点栏目确定重点栏目 在确定完需要设置哪些栏目之后，接着需要做的在确定完需要设置哪些栏目之后，接着需要做的是从这些栏目中挑选出最为重要的几个栏目然后对它是从这些栏目中挑选出最为重要的几个栏目然后对它们进行更为详细的规划，这种选择往往取决于网站的们进行更为详细

26、的规划，这种选择往往取决于网站的目的与功能。比如企业网站，其目的可能是为了更好目的与功能。比如企业网站，其目的可能是为了更好地推销自己的产品，所以产品介绍便是它的重点栏目。地推销自己的产品，所以产品介绍便是它的重点栏目。因此为了更好地介绍产品，它除了基本的产品介绍之因此为了更好地介绍产品，它除了基本的产品介绍之外，可能还需要设立价格信息、网上定购、产品动态外，可能还需要设立价格信息、网上定购、产品动态等相关栏目。等相关栏目。第第章章 网站设计步骤网站设计步骤 又比如个人网站，它的目的通常是为了又比如个人网站，它的目的通常是为了让别人分享他收集到的信息，更想向别人介让别人分享他收集到的信息，更想

27、向别人介绍他的原创作品，所以它的重点栏目往往是绍他的原创作品，所以它的重点栏目往往是个人作品和个人收藏。比如个人作品和个人收藏。比如“淡蓝的天空淡蓝的天空”，它的重点栏目就包括，它的重点栏目就包括“感动你的心灵感动你的心灵”和和“那笨拙的脚印那笨拙的脚印”。第第章章 网站设计步骤网站设计步骤 3)建立层次型结构建立层次型结构 建立层次型结构是一个递进的过程，即从建立层次型结构是一个递进的过程，即从上到下一级一级地确定每一层的栏目。首先是上到下一级一级地确定每一层的栏目。首先是确定第一层，即网站所必需的栏目，然后对其确定第一层，即网站所必需的栏目，然后对其中的重点栏目进行进一步的规划，确定它们所

28、中的重点栏目进行进一步的规划，确定它们所必需的子栏目，以此类推直至不需要再细分为必需的子栏目，以此类推直至不需要再细分为止。将所有的栏目及其子栏目连在一起就形成止。将所有的栏目及其子栏目连在一起就形成了网站的层次型结构。了网站的层次型结构。第第章章 网站设计步骤网站设计步骤 比如本例的比如本例的“淡蓝的天空淡蓝的天空”个人网站，它在第一层设个人网站，它在第一层设置了置了“那笨拙的脚印那笨拙的脚印”、“感动你的心灵感动你的心灵”二个重点栏目二个重点栏目和和“平凡的陌生人平凡的陌生人”、“请聆听请聆听”“”“同心结同心结”、“晚安晚安”四个其他栏目，其中四个其他栏目，其中“感动你的心灵感动你的心灵

29、”重点栏目又进行了重点栏目又进行了更细的规划更细的规划“文摘文摘”、“网文网文”、“杂文杂文”、“幽默幽默”、“测验测验”、“专栏专栏”等子栏目。将这些栏目及其子栏等子栏目。将这些栏目及其子栏目连在一起，我们可以很清楚地看到目连在一起，我们可以很清楚地看到“淡蓝的天空淡蓝的天空”个人个人网站的层次型结构，如图网站的层次型结构，如图2-42-4所示。所示。第第章章 网站设计步骤网站设计步骤 成功的栏目规划不仅能给用户的访成功的栏目规划不仅能给用户的访问带来极大的便利，帮助用户准确地问带来极大的便利，帮助用户准确地了解网站所提供的内容和服务和快速了解网站所提供的内容和服务和快速地找到自己所感兴趣的

30、网页，而且能地找到自己所感兴趣的网页，而且能帮助网站管理员对网站进行更为高效帮助网站管理员对网站进行更为高效的管理。的管理。第第章章 网站设计步骤网站设计步骤 4)设计每一个栏目设计每一个栏目 层次型结构的建立只是对网站的栏目进行了总体的规层次型结构的建立只是对网站的栏目进行了总体的规划，接下来要做的是对每一个栏目或者子栏目进行更为细划，接下来要做的是对每一个栏目或者子栏目进行更为细致的设计。设计一个栏目通常需要做三件事情，首先是描致的设计。设计一个栏目通常需要做三件事情，首先是描述这个栏目，描述这个栏目的目的、服务对象、内容、资述这个栏目，描述这个栏目的目的、服务对象、内容、资料来源等。描述

31、能让浏览者对这个栏目有整体的了解和把料来源等。描述能让浏览者对这个栏目有整体的了解和把握，也能让网站建设者对这个栏目有一个准确、清晰的认握，也能让网站建设者对这个栏目有一个准确、清晰的认识。识。第第章章 网站设计步骤网站设计步骤 其次是设计这个栏目的实现方法，即设计这个栏目的其次是设计这个栏目的实现方法，即设计这个栏目的网页构成、各个网页之间的逻辑关系、各个网页的内容、网页构成、各个网页之间的逻辑关系、各个网页的内容、内容的显示方式、数据库结构等各个方面的问题。比如很内容的显示方式、数据库结构等各个方面的问题。比如很多网站都有的用户注册栏目，如图多网站都有的用户注册栏目，如图2-62-6所示，

32、这个栏目通所示，这个栏目通常需要五个网页，采用线型结构（参见下个知识点）来进常需要五个网页，采用线型结构（参见下个知识点）来进行组织。行组织。第第章章 网站设计步骤网站设计步骤 第一个网页第一个网页“开始注册开始注册”是用户注册的入口，它的内是用户注册的入口，它的内容通常只是一个指向第二个网页的超链接。第二个网页容通常只是一个指向第二个网页的超链接。第二个网页“接受条款接受条款”上除了列出相应的条款之外，还需要设置一个上除了列出相应的条款之外，还需要设置一个用于选择是否接受条款的表单。第三个网页用于选择是否接受条款的表单。第三个网页“填写注册信填写注册信息息”采用表单来实现，所需注册的信息根据

33、网站的需求而采用表单来实现，所需注册的信息根据网站的需求而定，通常包括用户名、密码、性别、国籍、省份、定，通常包括用户名、密码、性别、国籍、省份、E-mailE-mail等内容。第四个网页等内容。第四个网页“信息检验信息检验”是为了检验用户信息的是为了检验用户信息的合法性，即检查所填写的用户名是否已经存在、所填写的合法性，即检查所填写的用户名是否已经存在、所填写的出生年月是否在正常范围之内、所填写的内出生年月是否在正常范围之内、所填写的内第第章章 网站设计步骤网站设计步骤 容是否包含非法脚本和不文明的词汇等内容。这个网容是否包含非法脚本和不文明的词汇等内容。这个网页可能不会显示给用户，只是根据

34、其检查的结果跳转到页可能不会显示给用户，只是根据其检查的结果跳转到相应的网页，比如检查通过就跳转到相应的网页，比如检查通过就跳转到“完成注册完成注册”网页，网页，检查不通过就跳转到检查不通过就跳转到“填写注册信息填写注册信息”网页要求重新填网页要求重新填写或者修改不合法的部分。最后一个网页是写或者修改不合法的部分。最后一个网页是“完成注册完成注册”，它需要将用户的注册信息保存到数据库中并将成功，它需要将用户的注册信息保存到数据库中并将成功注册的信息显示给用户。注册的信息显示给用户。第第章章 网站设计步骤网站设计步骤 图图2-6 用户注册栏目用户注册栏目第第章章 网站设计步骤网站设计步骤 最后是

35、设计这个栏目和其他栏目之间的关系。虽然分最后是设计这个栏目和其他栏目之间的关系。虽然分为不同的栏目，但很多情况下，栏目与栏目之间存在着从为不同的栏目，但很多情况下，栏目与栏目之间存在着从数据、内容到布局等各个层次上的关联。比如企业站点的数据、内容到布局等各个层次上的关联。比如企业站点的产品介绍、价格信息和在线定单等栏目之间通常使用统一产品介绍、价格信息和在线定单等栏目之间通常使用统一的数据库，这样在任何一个栏目中打开同一个产品时都能的数据库，这样在任何一个栏目中打开同一个产品时都能看到相同的介绍信息，保证了信息的一致性，而且统一的看到相同的介绍信息，保证了信息的一致性，而且统一的数据库也便于管

36、理和维护。又比如门户网站通常将娱乐资数据库也便于管理和维护。又比如门户网站通常将娱乐资讯分为电影、音乐、短信、游戏等多个子栏目，它们之间讯分为电影、音乐、短信、游戏等多个子栏目，它们之间有许多关联的内容，比如电影都有许多关联的内容，比如电影都第第章章 网站设计步骤网站设计步骤 有电影主题曲和插曲，很多歌曲又被编辑成手机铃声和有电影主题曲和插曲，很多歌曲又被编辑成手机铃声和短信，很多电影被制作成游戏，同时又有很多游戏被拍短信，很多电影被制作成游戏，同时又有很多游戏被拍成电影，比如古墓丽影，相关的内容将这些不同栏目串联成电影，比如古墓丽影，相关的内容将这些不同栏目串联在一起，使用户的访问更加方便。

37、所以设计栏目之间关系在一起，使用户的访问更加方便。所以设计栏目之间关系的工作就是找出各个栏目之间可以共享和相关的内容，并的工作就是找出各个栏目之间可以共享和相关的内容，并确定采用什么样的方式将它们串联起来。确定采用什么样的方式将它们串联起来。栏目规划最便捷的方法就是参考同类网站的栏目规划，栏目规划最便捷的方法就是参考同类网站的栏目规划，吸收共同的栏目，去掉不适合的栏目，然后添加有自己特吸收共同的栏目，去掉不适合的栏目，然后添加有自己特色的栏目。色的栏目。第第章章 网站设计步骤网站设计步骤 3、逻辑结构设计逻辑结构设计 不同网页之间通常具有一定的逻辑关系，比如先后关不同网页之间通常具有一定的逻辑

38、关系，比如先后关系、包含关系、并列关系等，多个网页按照它们之间的系、包含关系、并列关系等，多个网页按照它们之间的逻辑关系组织在一起就形成了各种逻辑结构。在现在的逻辑关系组织在一起就形成了各种逻辑结构。在现在的网站中，最常见的逻辑结构就是层次型结构，其次是线网站中，最常见的逻辑结构就是层次型结构，其次是线型结构和网型结构。型结构和网型结构。第第章章 网站设计步骤网站设计步骤 1)线型结构线型结构 线型结构是最为简单的逻辑结构，如图线型结构是最为简单的逻辑结构，如图2-2-7 7所示，它将多个网页按照一定的先后顺序链所示，它将多个网页按照一定的先后顺序链接起来，使得用户在没有完成上一个网页的接起来

39、，使得用户在没有完成上一个网页的访问之前就无法进入下一个网页。访问之前就无法进入下一个网页。图图2-7 线性结构线性结构第第章章 网站设计步骤网站设计步骤 线型结构最常用于需要按步骤进行的栏目上，线型结构最常用于需要按步骤进行的栏目上，比如用户注册、建立定单、教程等。图比如用户注册、建立定单、教程等。图2-52-5所示的就所示的就是一个典型的用户注册的例子，从这个图可以看出。是一个典型的用户注册的例子，从这个图可以看出。一个新用户要完成注册需要经历四个步骤，而且必一个新用户要完成注册需要经历四个步骤，而且必须按顺序进行，否则就不能完成注册。须按顺序进行，否则就不能完成注册。第第章章 网站设计步

40、骤网站设计步骤 又比如在当当网购买图书或者音像制品，也必须按又比如在当当网购买图书或者音像制品，也必须按顺序进行选择商品、确认购物车、填写定单、生成定单顺序进行选择商品、确认购物车、填写定单、生成定单四个步骤，如图四个步骤，如图2-82-8所示。所示。图图2-8 当当网购物流程当当网购物流程第第章章 网站设计步骤网站设计步骤 图图2-72-7所示的只是最简单的线型结构，在这个基础所示的只是最简单的线型结构，在这个基础上进行扩展可以演变出更具灵活性的线型结构，以满上进行扩展可以演变出更具灵活性的线型结构，以满足各种不同的需求。如图足各种不同的需求。如图2-82-8所示的带抉择的线型结构，所示的带

41、抉择的线型结构，可以根据用户不同的抉择来访问不同的下一个网页。可以根据用户不同的抉择来访问不同的下一个网页。又比如图又比如图2-92-9所示的带选项的线型结构，可以让用户直所示的带选项的线型结构，可以让用户直接跳转到后面的步骤以加快任务的完成。接跳转到后面的步骤以加快任务的完成。第第章章 网站设计步骤网站设计步骤 图图2-9 带抉择的线型结构带抉择的线型结构图图2-10 带选项的线型结构带选项的线型结构第第章章 网站设计步骤网站设计步骤 2)层次型结构层次型结构 相对于按先后顺序组织而成的线型结构，层次相对于按先后顺序组织而成的线型结构，层次型结构是按照网页之间的包含关系组织而成。图型结构是按

42、照网页之间的包含关系组织而成。图2-2-2 2所示的就是一个典型的层次型结构，它很像一棵所示的就是一个典型的层次型结构，它很像一棵倒置的树。倒置的树。层次型结构简单而且直观，能将所有的内容划层次型结构简单而且直观，能将所有的内容划分得非常清晰且便于理解，所以几乎所有的网站都分得非常清晰且便于理解，所以几乎所有的网站都采用这种结构来进行总体的栏目规划，即将所有的采用这种结构来进行总体的栏目规划，即将所有的内容先分成若干个大栏目，然后再将每个大栏目细内容先分成若干个大栏目，然后再将每个大栏目细分成若干小栏目，以此类推直到不用再细分为止。分成若干小栏目，以此类推直到不用再细分为止。第第章章 网站设计

43、步骤网站设计步骤 层次型结构也有不好的地方，就是用户如果层次型结构也有不好的地方，就是用户如果要访问最底层的网页就不得不按照层次从上到下要访问最底层的网页就不得不按照层次从上到下一级一级地访问，最终到达想要访问的网页。如一级一级地访问，最终到达想要访问的网页。如果层次型结构的层次很深，比如有五层或者六层，果层次型结构的层次很深，比如有五层或者六层，那么所带来的麻烦就大大降低了层次型网络所具那么所带来的麻烦就大大降低了层次型网络所具有的优点。又比如图有的优点。又比如图2-112-11所示的例子，用户想从所示的例子，用户想从网页网页A A转到网页转到网页B B，很可能不得不先从网页，很可能不得不先

44、从网页A A一级一级级地返回到网页级地返回到网页C C，然后再一级一级地往下走，然后再一级一级地往下走直到网页直到网页B B。第第章章 网站设计步骤网站设计步骤 图图2-11 层次型结构说明图层次型结构说明图 所以过深过于复杂的层次型结构反而会带来很所以过深过于复杂的层次型结构反而会带来很多不良的影响，最好的深度就是三层，最多不要超多不良的影响，最好的深度就是三层，最多不要超过五层。另外，建立一个良好的导航系统也可以弥过五层。另外，建立一个良好的导航系统也可以弥补层次型结构这方面的缺点。补层次型结构这方面的缺点。第第章章 网站设计步骤网站设计步骤 如图如图2-122-12所示，网络型结构是指多

45、个网页相互之间所示，网络型结构是指多个网页相互之间都超链接的一种结构，这些网页可以是层次结构上的任都超链接的一种结构，这些网页可以是层次结构上的任意网页，但是因为导航的需要或者内容上的相关性而链意网页，但是因为导航的需要或者内容上的相关性而链接在一起。接在一起。3)网络型结构网络型结构图图2-12 网络型结构网络型结构第第章章 网站设计步骤网站设计步骤 比如我们在第比如我们在第1 1章曾访问过的甘肃省人民政章曾访问过的甘肃省人民政府网站府网站()，它的导航条就出，它的导航条就出现在主页和所有栏目的首页之中，它们之间就现在主页和所有栏目的首页之中，它们之间就形成了一个网络型结构，这样用户在任何一

46、个形成了一个网络型结构，这样用户在任何一个网页上进行访问的时候，都可以通过这个结构网页上进行访问的时候，都可以通过这个结构一步切换到其他栏目的网页之上。一步切换到其他栏目的网页之上。第第章章 网站设计步骤网站设计步骤 又比如图又比如图2-132-13所示的网页，这个网页的右所示的网页，这个网页的右边设置了到其他二个具有相关内容网页的超链边设置了到其他二个具有相关内容网页的超链接，其他二个网页的情况也一样。所以这三个接，其他二个网页的情况也一样。所以这三个网页之间就形成了一个简单的网络型结构，使网页之间就形成了一个简单的网络型结构，使得用户在浏览某个网页的时候能非常方便地跳得用户在浏览某个网页的

47、时候能非常方便地跳转到相关的网页上以便继续浏览。转到相关的网页上以便继续浏览。第第章章 网站设计步骤网站设计步骤 图图2-13 网络型结构实例网络型结构实例第第章章 网站设计步骤网站设计步骤 网络型结构的实现就在于在所有相关的网页上保留网络型结构的实现就在于在所有相关的网页上保留到其他网页的超链接。这种结构使用户能更方便地在网到其他网页的超链接。这种结构使用户能更方便地在网站上游弋，但同时也带来一个庞大超链接数的问题。我站上游弋，但同时也带来一个庞大超链接数的问题。我们可以简单地计算一下，总的超链接数应该等于网页数们可以简单地计算一下，总的超链接数应该等于网页数乘以网页数减一，所以三个网页的网

48、络型结构的超链接乘以网页数减一，所以三个网页的网络型结构的超链接总数为总数为32=632=6，1010个网页的网络型结构的超链接总数就个网页的网络型结构的超链接总数就到达到达lO9=99lO9=99。这么庞大的超链接数维护起来相当麻烦，某个网页这么庞大的超链接数维护起来相当麻烦，某个网页的改动的改动(如改名、删除、增加如改名、删除、增加)就可能同时需要对所有的就可能同时需要对所有的网页进行相应的修改，这是谁都不愿意做的事情，所以网页进行相应的修改，这是谁都不愿意做的事情，所以在网站中需要谨慎使用网络型结构。在网站中需要谨慎使用网络型结构。第第章章 网站设计步骤网站设计步骤 4、网站目录结构设计

49、网站目录结构设计 目录结构又称为物理结构，它的设计解决的是如何目录结构又称为物理结构，它的设计解决的是如何在硬盘上更好地存放包括网页、图片、在硬盘上更好地存放包括网页、图片、FlashFlash动画、动画、JavaAppletJavaApplet、数据库等各种资源在内的所有网站资源。、数据库等各种资源在内的所有网站资源。目录结构是否合理，对网站的创建效率会产生较大目录结构是否合理，对网站的创建效率会产生较大的影响，但更主要的，会对未来网站的性能、网站的维的影响，但更主要的，会对未来网站的性能、网站的维护及扩展产生很大的影响。举一个例子来说明，比如极护及扩展产生很大的影响。举一个例子来说明，比如

50、极端情况下，端情况下，第第章章 网站设计步骤网站设计步骤 将所有的网页文件和资源文件都放在同一个目录底将所有的网页文件和资源文件都放在同一个目录底下。那么当文件一多时，下。那么当文件一多时，wwwwww服务器的性能就会急剧下降，服务器的性能就会急剧下降，因为查找一个网页文件需要很长的时间，而且网站管理因为查找一个网页文件需要很长的时间，而且网站管理员在区分不同性质的文件和查找某一个特定的文件时也员在区分不同性质的文件和查找某一个特定的文件时也会变得非常麻烦。会变得非常麻烦。目录结构对用户来说是不可见的，它只针对网站管目录结构对用户来说是不可见的，它只针对网站管理员，所以它的设计是为了网站管理员