教育网页制作和网站设计第四章.pptVIP

第四章 网站的规划与设计 【本章内容】 4.1 网站的栏目规划 4.2 网站的目录结构设计 4.3 网站的风格设计 4.4 网页设计实战 4.5 网站的导航设计 4.1节 网站的栏目规划 【本节内容】 一. 网站的逻辑结构 二. 栏目规划 三. 栏目规划举例 一、网站的逻辑结构（1） 网站内网页之间存在一定的逻辑关系。 1. 线性结构 线性结构是最简单的逻辑结构，如图4-1所示。它将多个网页按照一定的先后顺序链接起来，用户没有访问到前一个网页就无法进入下一个网页。 图4-1 线性结构 一、网站的逻辑结构（1） 1. 线性结构 线性结构最常用于需要逐步进行的栏目，比如用户注册、建立定单、教程等。图4-2所示的就是一个典型的用户注册的例子。 图4-2 用户注册流程 一、网站的逻辑结构（1） 1. 线性结构 如图4-3所示的带选择的线性结构，可以根据用户不同的选择来访问不同的下一个网页。 图4-3 带选择的线性结构 一、网站的逻辑结构（2） 2. 层次型结构 相对于按先后顺序组织而成的线性结构，层次型结构是按照网页之间的包含关系组织而成的。图4-4所示的就是一个典型的层次型结构，它很像一棵倒置的树。 一、网站的逻辑结构（2） 2. 层次型结构 层次型结构简单而且直观，能将所有的内容划分得非常清晰且便于理解，因而几乎所有的网站都采用这种结构来进行总体的栏目规划，即将所有的内容先分成若干个大栏目，然后再将每个大栏目细分成若干小栏目，以此类推直到不用再细分为止。 一、网站的逻辑结构（2） 2. 层次型结构 层次型结构也有不好的地方，就是用户如果要访问最底层的网页就不得不按照层次从上到下一级一级地访问，最终到达想要访问的网页。 所以，层次型结构最好的深度就是三层，最多不要超过五层。 另外，建立一个良好的导航系统（本章第4节将学习）也可以弥补层次型结构这方面的缺点。 一、网站的逻辑结构（3） 3. 网状结构 如图4-5所示，网状结构是指多个网页相互之间都有超链接的一种结构，这些网页可以是层次结构上的任意网页，由于导航的需要或者内容上的相关性而相互链接在一起。 一、网站的逻辑结构（3） 3. 网状结构举例 HTML.COM网它的导航条就出现在主页和其它每一个网页上，用户在任何一个网页上进行访问的时候，都可以通过这个导航条而一步切换到其他栏目的网页之上。这个网站各个网页之间因这个导航条而形成了一个网状结构。 一、网站的逻辑结构（3） 3. 网状结构 网状结构的实现就在于所有相关的网页上保留到其他网页的超链接。这种结构使用户能更方便地在网站上游弋，但同时也带来一个庞大超链接数的问题，对于维护来说相当麻烦，某个网页的改动(如改名、删除、增加)就可能同时需要对所有的网页进行相应的修改。所以在网站中要谨慎使用网状结构。 二、栏目规划 栏目规划的主要任务是对所收集的大量内容进行有效筛选，并将它们组织成一个合理的易于理解的逻辑结构。成功的栏目规划不仅能给用户的访问带来极大的便利，帮助用户准确地了解网站所提供的内容和服务，以及快速地找到自己所感兴趣的网页，还能帮助网站管理员对网站进行更为高效的管理。 二、栏目规划（1） 1. 确定必需栏目 栏目规划的第—步就是要确定哪些是必需的栏目，这取决于网站的性质。 例如，对于一个企业网站来说，公司简介、产品介绍、服务内容、技术支持、联系方式等栏目是必不可少的，而对于政府网站来说政务、政策法规、地方经济、百姓生活、观光旅游等栏目都是必需的。个人网站相对来说比较随意，往往取决于所收集的内容，但个人简介、个人收藏等栏目通常不能缺少。 二、栏目规划（1） 1. 确定必需栏目 除了内容栏目之外，网站还应该包含另外两类栏目：用户指南类栏目和交互性栏。 用户指南类栏目是为了帮助用户了解这个网站的背景、性质、目的、功能及发展历程，如何更好地对网站进行访问，以及网站的最新动态。常以“帮助”、“关于网站”、“网站地图”、“最新动态”等名称出现。 交互性栏目是能与用户进行双向交流的栏目，通过它解答用户的疑问、了解用户的需求，还可以获得用户对网站的建议和看法。如留言板、论坛（BBS）。 二、栏目规划（2） 2. 确定重点栏目 确定完需要设置哪些栏目后，需要从这些栏目中挑选出最重要的几个栏目，然后对它们进行更详细的规划。 这种选择取决于网站的目的与功能。比如企业网站，其目的可能是为了更好地推销自己的产品，所以产品介绍便是它的重点栏目。 而个人网站，目的通常是为了让别人分享他收集到的信息，向别人介绍他的原创作品，它的重点栏