《网站设计与建设》电子教案-雷学生 第4章

《《网站设计与建设》电子教案-雷学生 第4章》由会员分享，可在线阅读，更多相关《《网站设计与建设》电子教案-雷学生 第4章（89页珍藏版）》请在金锄头文库上搜索。

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 网站的逻辑链接结构,4.2 网站的逻辑链接结构,层次型结构也有不好的地方，就是效率较低。用户如果要访问 最底层的网页不得不按照层次从上到下一级一级地访问，必须 绕经首页，最终到达想要访问的网页。,4.2 网站的逻辑链接结构,2线性结构（星状链接结构） 线性结构类似于数据结构中的线性表，用于组织线性顺序形式 存在的信息，可以引导浏览者按部就班地浏览整个网站文件。 它类似网络服务器的链接，每个页面相互之间都建立有链接。 线性结构

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

7、买图书或者音像制品，也必须按顺序进行选 择商品、图4-6所示的只是最简单的线性结构，在这个基础上 进行扩展可以演变出更具灵活性的线性结构，以满足各种不同 的需求。如图4-7所示的带抉择的线性结构，可以根据用户不 同的抉择来访问不同的下一个网页。,4.2 网站的逻辑链接结构,又比如图4-8所示的带选项的线性结构，可以让用户直接跳转 到后面的步骤以加快任务的完成。,上述基本结构都只是理想方式，在实际的网站设计中，总是将 这两种结构混合起来使用。我们希望浏览者既可以方便快速地 达到自己需要的页面，又可以清晰地知道自己的位置。所以， 最好的办法是首页和一级页面之间用星状链接结构，一级和二 级页面之间用

8、树状链接结构。,4.2 网站的逻辑链接结构,3Web结构（混合链接结构） Web结构又称为网络型结构。Web结构是层状结构和线性结 构两种结构方式的混合，它能使访问者既可快速方便到达所需 页面，又可清楚知道自己的位置。如图4-9所示。,4.2 网站的逻辑链接结构,Web结构类似于Internet的组成结构，各网页之间形成网状连接，允许用 户随意浏览。这些网页可以是层次结构上的任意网页，但是因为导航的需 要或者内容上的相关性而链接在一起。,4.2 网站的逻辑链接结构,又比如图4-11所示的网页，这个网页的右边设置了到其他几个具有相关内 容网页的超链接，其他几个网页的情况也一样。所以这几个网页之间

9、就形 成了一个简单的网络型结构.,到其他内容网页的超链接,4.2 网站的逻辑链接结构,网络型结构的实现就在于在所有相关的网页上保留到其他网页 的超链接。这种结构使用户能更方便地在网站上游弋，但同时 也带来一个庞大超链接数的问题。我们可以简单地计算一下， 总的超链接数应该等于网页数乘以网页数减一，所以四个网页 的网络型结构的超链接总数为43=12，10个网页的网络型 结构的超链接总数就达到109=90。这么庞大的超链接数维 护起来相当麻烦，某个网页的改动就可能同时需要对所有的网 页进行相应的的修改，这是谁都不愿意做的。 关于链接结构的设计，在实际的网页制作中是非常重要的一、 环。采用什么样的链接

10、结构直接影响到版面的布局。,4.3 网站的目录结构,目录结构又称为物理结构，是指网站组织和存放站内所有文档 的目录设置情况。它的设计解决的是如何在硬盘上更好在存放 包括网页、图片、Flash动画、Java Applet、数据库等各种 资源在内的所有网站资源。 任何网站都有一定的目录结构，大型网站的目录数量多，层次 关系复杂。网站的目录结构是一个容易忽略的问题，不少网站 设计者都未经周密规划，随意创建子目录，这对未来网站的性 能、创建效率、上传维护、内容的扩充和移植等会带来诸多的 不便。 目录结构的好坏，目录结构是否合理，对浏览者来说并没有多 少影响，但是对网站的本身有着重要的影响。所以，在网站

11、设 计中需要合理定义目录结构和组织好所有的文档。,4.3 网站的目录结构,4.3.1 目录结构的设计 目录结构对用户来说是不可见的，它只针对网站管理员，所以 它的设计是为了网站管理员能从文件的角度更好地管理网站的 所有资源。目录结构的设计通常需要遵循以下的原则： 1不要将所有文件都存放在根目录下 （1）文件管理混乱。项目开发到一定时期后，设计者常常搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，从而影响工作效率。 （2）上传速度慢。当文件很多时，会非常影响WWW服务器的索引速度。所以，尽可能减少根目录的文件存放数。也就是说，除非非常有必要，文件才放在根目录中，否则，放

12、在子目录中。,4.3 网站的目录结构,2每个主栏目目录下都建立独立的images目录 将图片及资源文件都放在一个独立的images目录下，可以使 目录结构更加清晰。如果很多网页都需要用到同一个图片，比 如网站标志图片，那么将这个图片放到所有这些网页共有的最 高目录的images目录下。 在默认的设置中，每个站点的根目录下都有一个images目 录，可以将所有的图片都存放在这个目录里。但是这样做也有 不方便的时候，当需要将某个主栏目打包供用户下载，或者将 某个栏目删除时，图片和管理相当麻烦。实践证明，为每个主 栏目建立一个独立的images目录是最方便管理的，而根目录 下的images目录只是用

13、来放首页和一些次要栏目的图片。,4.3 网站的目录结构,3按栏目内容建立子目录，并首先按主菜单栏目建立 一般情况下，可以按照网站的栏目内容来设计目录结构，使两者有一一对应的关系。但是这么做，也会导致一个安全问题，就是访问者很容易猜出网站的目录结构，也就很容易对网站实施攻击。所以在设计目录结构时候，尽量避免目录名和栏目名相一致，可以采用数字、字母、下划线等组合的方式来提高目录名的猜测难度。 建立子目录的做法首先是按主菜单的栏目来建立。例如，网上书店的图书浏览栏目，可以根据不同的分类方法，如按中国图书馆法分类、按教材分类等，分别建立相应的目录。企业电子商务网站可以按公司简介、产品介绍、价格、在线订

14、单、意见反馈等栏目建立相应的目录。,4.3 网站的目录结构,其他的次要栏目，如新闻、行业动态等内容较多、需要经常更新的内容可以建立独立的子目录。而一些相关性强、不需要经常更新的栏目，如关于本站、关于站长等则可以合并放在一个统一的目录下。 所有的程序一般都存放在特点目录下，例如CGI程序放在Cgi-bin目录。主页HTML文件一般置于Web服务器的虚拟路径的根目录下，与之相关联的资源(如图片，声音等)作为一个一级目录，其他的一级页面构成各个一级目录，而在一级页面的目录里又有与之相关的资源和上级页面构成二级目录，类似地再往下分为三级目录等。全局资源文件应放在根目录下的Global目录中。供客户下载

15、的内容应该放在一个目录下，以方便系统设置文件目录的访问权限。其他程序一般都存放在特定的目录。,4.3 网站的目录结构,一般根目录下可建立以下目录：网页中所需要图像目录、文本目录、程序专用目录以及数据库目录、各栏目目录、临时目录等。建议在网站根目录中开设images、common、temp等子目录，根据需要再开设media子目录，images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner条、菜单、按钮等等；common子目录中放css、js，php、include等公共文件；temp子目录放客户提供的各种文字图片等等原始资料，temp目录中的文件往往会比较多，建议以时间为

16、名称开设目录，将客户陆续提供的资料归类整理；media子目录中放 flash、avi、quick time等多媒体文件。,4.3 网站的目录结构,4目录的层次不要太深 为便于维护和管理，建议目录结构不应十分复杂，网站的层次 不要超过3层。应该根据网站文件的功能，地位和大致的逻辑 结构来建立树状的目录结构。 5不要使用过长的目录名 目录的命名方法： （1）目录命名不要使用中文目录和中文文件名。使用中文目录可能对网址的正确显示造成困难，某些Web服务器不支持对中文名称的目录和文件的访问。 （2）不要使用过长的目录名，尽管服务器支持长文件名，但是太长的目录名不便于记忆，也不便于管理。 （3）尽量使用意义明确的目录，便于记忆和管理。,4.3 网站的目录结构,6不要使用中文目录 因为你的站点是对Internet所有用户开放的，所以你得考虑到使用非中文操作系统的客户也能正常访问你的站点，因为编码的差异以及异地服务器解释程序的差异可能使中文目录网址的正确显示造成困难。对于目录名，最好都使用英文。 7可执行文件和不可执行文件分开放置 将可执行的动态服务器网页文件和不可