《网站设计与建设》第4章课件.ppt

《《网站设计与建设》第4章课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4章网站的结构设计4.1网站结构的设计原则所谓网站，从资源的角度来看，就是指存放在Internet服务器上供浏览者浏览的所有文档或文件夹，这些文档或文件夹是一些相互链接的网页以及一些相关文件。网站不仅是多个文字页面的集合，其中还包含其他诸如图片、声音、外部程序等相关联的内容。因此应创建合理的站点结构，使用合理的组织形式来管理站点中的文档或文件夹。如果没有对站点的结构进行认真的设计和规划，那么日后的维护工作量就会很大。在设计网站的结构时，一般要遵循如下的一些基本规则。1．用文件夹来保存文档应该用文件夹来合理构建站点的结构。首先为站点创建一个根文件夹，然后在其中创建多个子文件夹，再将文档分门别

2、类地存储到相应的子文件夹下，必要时可以创建更多级子文件夹。这种树型的组织类型能使站点更容易维护和导航。4.1网站结构的设计原则4.1网站结构的设计原则2．使用合理的文件名称使用合理的文件名非常重要，在网站的规模很大时更是如此。文件名应该容易理解，这样别人看了就能够知道网页表述的内容。另外，给文件命名时，应避免使用中文文件名，因为很多Internet服务器使用的是英文操作系统，不能对中文文件名提供很好的支持，而且浏览网站的用户也可能使用英文操作系统，中文文件名同样可能导致浏览错误或访问失败。如果对英文不熟悉，可以使用汉语拼音拼写文件名。3．在设计网站的逻辑链接结构时，一要符合浏览者的思维习惯和

3、浏览风格；二要使网站中最重要的信息有最多的机会与浏览者见面。4.2网站的逻辑链接结构合理的逻辑结构设计对于网站的规划是至关重要的。研究网站的逻辑链接结构的目的地于：用最少的链接，使浏览更有效率。同时网站的链接结构的好坏，也将直接影响网页的浏览速度。网站的逻辑链接结构反应了页面之间相互链接关系，如果把这种关系画成示意图表，就好象一个拓扑结构图。逻辑链接的拓扑结构要能很好地把页面之间的有机联系反映出来，要能反映站点多页面之间的程序与内容的关系。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线，一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而

4、是存在于一个立体的空间中。因此，网站的逻辑链接结构是网站在运行时抽象出来的。4.2网站的逻辑链接结构1．层状结构（树状结构）层状结构类似于目录系统的树型结构（如DOS的目录结构）。它是按照网页之间的包含关系组织而成，如图4-2所示。层次结构采用一对一的形式，首页链接指向一级页面，一级链接指向二级等等，其结构看起来就像蒲公英。这样的链接结构浏览时，一级级进入，一级级退出。层次型结构简单而且直观，条理清晰，能将所有的内容划分得非常清晰且便于理解。访问者明确知道自己在什么位置，不容易“迷路”。所以几乎所有的网站都采用这种结构来进行总体的栏目规划，即将所有的内容先分成若干个大栏目，然后再将每个大栏目

5、细分成若干个小栏目，以此类推直到不用再细分为止。4.2网站的逻辑链接结构主页页面1页面2页面3页面4页面5页面6页面7一级标题二级标题4.2网站的逻辑链接结构层次型结构也有不好的地方，就是效率较低。用户如果要访问最底层的网页不得不按照层次从上到下一级一级地访问，必须绕经首页，最终到达想要访问的网页。主页页面2页面4页面5页面1页面6页面7页面8页面10页面3页面94.2网站的逻辑链接结构2．线性结构（星状链接结构）线性结构类似于数据结构中的线性表，用于组织线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。它类似网络服务器的链接，每个页面相互之间都建立有链接。线性结构浏览方便高

6、效，随时可以到达自己喜欢的页面。缺点是链接太多,页面之间的层次结构不清晰,容易使访问者“迷路”,搞不清自己所在的位置，也不能确定自己已经浏览过的内容。通常情况下，网站文件的结构是层状结构和线性结构相结合的。最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。4.2网站的逻辑链接结构线性结构常用于需要按步骤进行的栏目上，比如用户注册、建立定单、教程等。图4-5所示的就是一个典型的用户注册的例子，从这个图可以看出，一个新用户要完成注册需要经历四个步骤，而且必须按顺序进行，否则就不能完成注册。开始注册接受条款填写注册信息完成注册4.2网站的逻辑链接结构又比如在当当网购

7、买图书或者音像制品，也必须按顺序进行选择商品、图4-6所示的只是最简单的线性结构，在这个基础上进行扩展可以演变出更具灵活性的线性结构，以满足各种不同的需求。如图4-7所示的带抉择的线性结构，可以根据用户不同的抉择来访问不同的下一个网页。选择商品确认购物车填写定单生成定单首页面一级子页面二级子页面三级子页面四级子页面一级子页面4.2网站的逻辑链接结构又比如图4-8所示的带选项的线性结构，可以让用户直接跳转到后面