网站结构与网站设计网站结构与网站设计4.1 网站结构的设计原则网站结构的设计原则所谓网站，从资源的角度来看，就是指存放在Internet服务器上供浏览者浏览的所有文档或文件夹，这些文档或文件夹是一些相互链接的网页以及一些相关文件。网站不仅是多个文字页面的集合，其中还包含其他诸如图片、声音、外部程序等相关联的内容。因此应创建合理的站点结构，使用合理的组织形式来管理站点中的文档或文件夹。如果没有对站点的结构进行认真的设计和规划，那么日后的维护工作量就会很大。在设计网站的结构时，一般要遵循如下的一些基本规则。1用文件夹来保存文档用文件夹来保存文档应该用文件夹来合理构建站点的结构。首先为站点创建一个根文件夹，然后在其中创建多个子文件夹，再将文档分门别类地存储到相应的子文件夹下，必要时可以创建更多级子文件夹。这种树型的组织类型能使站点更容易维护和导航。4.1 网站结构的设计原则网站结构的设计原则4.1 网站结构的设计原则网站结构的设计原则2使用合理的文件名称使用合理的文件名称使用合理的文件名非常重要，在网站的规模很大时更是如此。文件名应该容易理解，这样别人看了就能够知道网页表述的内容。另外，给文件命名时，应避免使用中文文件名，因为很多Internet服务器使用的是英文操作系统，不能对中文文件名提供很好的支持，而且浏览网站的用户也可能使用英文操作系统，中文文件名同样可能导致浏览错误或访问失败。如果对英文不熟悉，可以使用汉语拼音拼写文件名。3在设计网站的逻辑链接结构时，一要符合浏览者的思维习要符合浏览者的思维习惯和浏览风格惯和浏览风格；二要使网站中最重要的信息最重要的信息有最多的机会与浏览者见面。4.2 网站的逻辑链接结构网站的逻辑链接结构合理的逻辑结构设计对于网站的规划是至关重要的。研究网站的逻辑链接结构的目的地于：用最少的链接，使浏览更有效用最少的链接，使浏览更有效率率。同时网站的链接结构的好坏，也将直接影响网页的浏览速度。网站的逻辑链接结构反应了页面之间相互链接关系页面之间相互链接关系，如果把这种关系画成示意图表，就好象一个拓扑结构图。逻辑链接的拓扑结构要能很好地把页面之间的有机联系反映出来，要能反映站点多页面之间的程序与内容的关系。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线，一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。因此，网站的逻辑链接结构是网站在运行时抽象出来的。4.2 网站的逻辑链接结构网站的逻辑链接结构1层状结构（树状结构）层状结构（树状结构）层状结构类似于目录系统的树型结构（如DOS的目录结构）。它是按照网页之间的包含关系组织而成，如图4-2所示。层次结构采用一对一的形式，首页链接指向一级页面，一级链接指向二级等等，其结构看起来就像蒲公英。这样的链接结构浏览时，一级级进入，一级级退出。层次型结构简单而且直观，条理清晰简单而且直观，条理清晰，能将所有的内容划分得非常清晰且便于理解。访问者明确知道自己在什么位置，不容易“迷路”。所以几乎所有的网站都采用这种结构来进行总体的栏目规划，即将所有的内容先分成若干个大栏目，然后再将每个大栏目细分成若干个小栏目，以此类推直到不用再细分为止。4.2 网站的逻辑链接结构网站的逻辑链接结构主主 页页 页面页面1 页面页面2 页面页面3 页面页面4 页面页面5 页面页面6 页面页面7 一级标题一级标题二级标题二级标题4.2 网站的逻辑链接结构网站的逻辑链接结构层次型结构也有不好的地方，就是效率较低。用户如果要访问最底层的网页不得不按照层次从上到下一级一级地访问，必须绕经首页，最终到达想要访问的网页。 主主页页页面页面2 页面页面4页面页面5页面页面1页面页面6页面页面7页面页面8 页面页面10页面页面3页面页面94.2 网站的逻辑链接结构网站的逻辑链接结构2线性结构（星状链接结构）线性结构（星状链接结构）线性结构类似于数据结构中的线性表，用于组织线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。它类似网络服务器的链接，每个页面相互之间都建立有链接。线性结构浏览方便高效，随时可以到达自己喜欢的页面。缺点是链接太多,页面之间的层次结构不清晰,容易使访问者“迷路”,搞不清自己所在的位置，也不能确定自己已经浏览过的内容。通常情况下，网站文件的结构是层状结构和线性结构相结合的。最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。4.2 网站的逻辑链接结构网站的逻辑链接结构线性结构常用于需要按步骤进行的栏目上，比如用户注册、建立定单、教程等。图4-5所示的就是一个典型的用户注册的例子，从这个图可以看出，一个新用户要完成注册需要经历四个步骤，而且必须按顺序进行，否则就不能完成注册。开始注册接受条款填写注册信息完成注册4.2 网站的逻辑链接结构网站的逻辑链接结构又比如在当当网购买图书或者音像制品，也必须按顺序进行选择商品、图4-6所示的只是最简单的线性结构，在这个基础上进行扩展可以演变出更具灵活性的线性结构，以满足各种不同的需求。如图4-7所示的带抉择的线性结构，可以根据用户不同的抉择来访问不同的下一个网页。选择商品确认购物车填写定单生成定单首页面一级子页面二级子页面三级子页面四级子页面一级子页面4.2 网站的逻辑链接结构网站的逻辑链接结构又比如图4-8所示的带选项的线性结构，可以让用户直接跳转到后面的步骤以加快任务的完成。首页面一级子页面二级子页面三级子页面四级子页面上述基本结构都只是理想方式，在实际的网站设计中，总是将这两种结构混合起来使用。我们希望浏览者既可以方便快速地达到自己需要的页面，又可以清晰地知道自己的位置。所以，最好的办法是首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。4.2 网站的逻辑链接结构网站的逻辑链接结构3Web结构（混合链接结构）Web结构又称为网络型结构。Web结构是层状结构和线性结构两种结构方式的混合，它能使访问者既可快速方便到达所需页面，又可清楚知道自己的位置。如图4-9所示。主 页页面1页面2页面3页面4页面5页面7页面8一级标题二级标题页面64.2 网站的逻辑链接结构网站的逻辑链接结构Web结构类似于Internet的组成结构，各网页之间形成网状连接，允许用户随意浏览。这些网页可以是层次结构上的任意网页，但是因为导航的需要或者内容上的相关性而链接在一起。重点栏目导航重点栏目导航首都之窗的网站标志首都之窗的网站标志网站即时新闻网站即时新闻4.2 网站的逻辑链接结构网站的逻辑链接结构又比如图4-11所示的网页，这个网页的右边设置了到其他几个具有相关内容网页的超链接，其他几个网页的情况也一样。所以这几个网页之间就形成了一个简单的网络型结构.到其他内容网页的超链接到其他内容网页的超链接4.2 网站的逻辑链接结构网站的逻辑链接结构网络型结构的实现就在于在所有相关的网页上保留到其他网页的超链接。这种结构使用户能更方便地在网站上游弋，但同时也带来一个庞大超链接数的问题。我们可以简单地计算一下，总的超链接数应该等于网页数乘以网页数减一，所以四个网页的网络型结构的超链接总数为43=12，10个网页的网络型结构的超链接总数就达到109=90。这么庞大的超链接数维护起来相当麻烦，某个网页的改动就可能同时需要对所有的网页进行相应的的修改，这是谁都不愿意做的。关于链接结构的设计，在实际的网页制作中是非常重要的一、环。采用什么样的链接结构直接影响到版面的布局。4.3 网站的目录结构网站的目录结构目录结构又称为物理结构，是指网站组织和存放站内所有文档的目录设置情况。它的设计解决的是如何在硬盘上更好在存放包括网页、图片、Flash动画、JavaApplet、数据库等各种资源在内的所有网站资源。任何网站都有一定的目录结构，大型网站的目录数量多，层次关系复杂。网站的目录结构是一个容易忽略的问题，不少网站设计者都未经周密规划，随意创建子目录，这对未来网站的性能、创建效率、上传维护、内容的扩充和移植等会带来诸多的不便。目录结构的好坏，目录结构是否合理，对浏览者来说并没有多少影响，但是对网站的本身有着重要的影响。所以，在网站设计中需要合理定义目录结构和组织好所有的文档。4.3 网站的目录结构网站的目录结构4.3.1 目录结构的设计目录结构的设计目录结构对用户来说是不可见的，它只针对网站管理员，所以它的设计是为了网站管理员能从文件的角度更好地管理网站的所有资源。目录结构的设计通常需要遵循以下的原则：1不要将所有文件都存放在根目录下不要将所有文件都存放在根目录下（1）文件管理混乱。项目开发到一定时期后，设计者常常搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，从而影响工作效率。（2）上传速度慢。当文件很多时，会非常影响WWW服务器的索引速度。所以，尽可能减少根目录的文件存放数。也就是说，除非非常有必要，文件才放在根目录中，否则，放在子目录中。4.3 网站的目录结构网站的目录结构2每个主栏目目录下都建立独立的每个主栏目目录下都建立独立的images目录目录将图片及资源文件都放在一个独立的images目录下，可以使目录结构更加清晰。如果很多网页都需要用到同一个图片，比如网站标志图片，那么将这个图片放到所有这些网页共有的最高目录的images目录下。在默认的设置中，每个站点的根目录下都有一个images目录，可以将所有的图片都存放在这个目录里。但是这样做也有不方便的时候，当需要将某个主栏目打包供用户下载，或者将某个栏目删除时，图片和管理相当麻烦。实践证明，为每个主栏目建立一个独立的images目录是最方便管理的，而根目录下的images目录只是用来放首页和一些次要栏目的图片。4.3 网站的目录结构网站的目录结构3按栏目内容建立子目录，并首先按主菜单栏目建立按栏目内容建立子目录，并首先按主菜单栏目建立一般情况下，可以按照网站的栏目内容来设计目录结构，使两者有一一对应的关系。但是这么做，也会导致一个安全问题，就是访问者很容易猜出网站的目录结构，也就很容易对网站实施攻击。所以在设计目录结构时候，尽量避免目录名和栏目名相一致，可以采用数字、字母、下划线等组合的方式来提高目录名的猜测难度。建立子目录的做法首先是按主菜单的栏目来建立。例如，网上书店的图书浏览栏目，可以根据不同的分类方法，如按中国图书馆法分类、按教材分类等，分别建立相应的目录。企业电子商务网站可以按公司简介、产品介绍、价格、在线订单、意见反馈等栏目建立相应的目录。4.3 网站的目录结构网站的目录结构其他的次要栏目，如新闻、行业动态等内容较多、需要经常更新的内容可以建立独立的子目录。而一些相关性强、不需要经常更新的栏目，如关于本站、关于站长等则可以合并放在一个统一的目录下。所有的程序一般都存放在特点目录下，例如CGI程序放在Cgi-bin目录。主页HTML文件一般置于Web服务器的虚拟路径的根目录下，与之相关联的资源(如图片，声音等)作为一个一级目录，其他的一级页面构成各个一级目录，而在一级页面的目录里又有与之相关的资源和上级页面构成二级目录，类似地再往下分为三级目录等。全局资源文件应放在根目录下的Global目录中。供客户下载的内容应该放在一个目录下，以方便系统设置文件目录的访问权限。其他程序一般都存放在特定的目录。4.3 网站的目录结构网站的目录结构一般根目录下可建立以下目录：网页中所需要图像目录、文本目录、程序专用目录以及数据库目录、各栏目目录、临时目录等。建议在网站根目录中开设images、common、temp等子目录，根据需要再开设media子目录，images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner条、菜单、按钮等等；common子目录中放css、js，php、include等公共文件；temp子目录放客户提供的各种文字图片等等原始资料，temp目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理；media子目录中放flash、avi、quicktime等多媒体文件。4.3 网站的目录结构网站的目录结构4目录的层次不要太深目录的层次不要太深为便于维护和管理，建议目录结构不应十分复杂，网站的层次不要超过3层。应该根据网站文件的功能，地位和大致的逻辑结构来建立树状的目录结构。5不要使用过长的目录名不要使用过长的目录名目录的命名方法：（1）目录命名不要使用中文目录和中文文件名。使用中文目录可能对网址的正确显示造成困难，某些Web服务器不支持对中文名称的目录和文件的访问。（2）不要使用过长的目录名，尽管服务器支持长文件名，但是太长的目录名不便于记忆，也不便于管理。（3）尽量使用意义明确的目录，便于记忆和管理。4.3 网站的目录结构网站的目录结构6不要使用中文目录不要使用中文目录因为你的站点是对Internet所有用户开放的，所以你得考虑到使用非中文操作系统的客户也能正常访问你的站点，因为编码的差异以及异地服务器解释程序的差异可能使中文目录网址的正确显示造成困难。对于目录名，最好都使用英文。7可执行文件和不可执行文件分开放置可执行文件和不可执行文件分开放置将可执行的动态服务器网页文件和不可执行的的静态网页文件分别放在两个目录下，然后将存放可执行网页文件的目录设为不可读和执行。这样做的好处就是可以避免动态服务器网页文件被读起。4.3 网站的目录结构网站的目录结构8数据库文件单独放置数据库文件单独放置数据库文件因为安全需求很高，所以最好放置在HTTP所不能访问到的目录底下。这样就可以避免恶意的用户通过HTTP方式取到数据库文件。随着网页技术的不断发展，利用数据库或者其他后台程序自动生成网页越来越普遍，网站的目录结构设计也必将上升到一个新的层次。ImagesImagesWoDeTuPianJingYanZhiTanImagesWebWoDeJianJieImagesImagesImagesWoDeZuoPinTuPianXinShangLiuYanBanImagesGuangGaoDongWuKaTongQuWeiImagesImagesImagesZuiXinDongTaiGuanYuWangZhanWangZhanLianJie4.3 网站的目录结构网站的目录结构从这个图可以看到：1网站的目录结构也应用了网站的层次型结构，即网站的目录结构和网站的层次型结构是可对应的。2并不是将所有文件都存放在根目录下，采用了分层结构，网站的层次没有超过3层。3每个主栏目目录下都建立了独立的images目录。4没有使用过长的目录名，没有使用中文目录。4.3 网站的目录结构网站的目录结构4.3.2 网站结构设计举例网站结构设计举例假设根据网站策划阶段网站规划方案文档，得到这个商业网站系统的目标定位为：主要为网民提供快速、大量、有价值的IT营销信息，注册用户还可以使用网站提供的论坛功能。根据这个目标，知道系统需要实现的核心功能如下：p新闻浏览p用户注册p发表评论p社区讨论p广告记费p后台管理。包括数据的维护、新闻更新、评论的管理、讨论社区、用户的管理等。4.3 网站的目录结构网站的目录结构上面是已经分了组的功能列表单，每一项是一个功能组。每个功能组内包含了一系列相互联系的功能项。例如，新闻浏览中包括新闻标题、专题和栏目的列表功能，新闻查询功能，新闻内容的展示功能，新闻评论列表功能，浏览新闻评论功能等等。在划分了功能组后，就可以进行页面的初步划分。页面初步划分是基于功能组划分的，通常一个功能组的组项就放在一个总页面之中，该页面由派生出各个功能项的页面。如果功能实现要多个步骤，例如用户注册需要签写协议书、填写个人资料、返回成功或失败信息等，则应该再分开多个页面。4.3 网站的目录结构网站的目录结构由于要实现后台管理这个独立的功能（一般访问者没有权限使用该功能，因此与前面的功能组分离开来），于是将整个网站分成两大部分：公众访问部分和后台管理部分，页面也相对应划分为这两部分。1网站的目录结构设计网站的目录结构设计网站分为公众访问部分和管理员访问部分。因此将这两部分的页面分别放在虚拟路径根目录的两个一级目录下，分别命名为Public和Management。另外，建立一个一级目录Global，用来存放所有页面的公用部分。由于被外部用户访问时，默认为一般公众访问者，所以将公众部分的主页放于根目录下，并设为默认访问页。在根目录下还有一个名为“Global.asa”的文件，这是一个十分重要的文件。4.3 网站的目录结构网站的目录结构在Public和Management里分别是两个部分的页面文件，在这个网站里主要采用了ASP技术，因此文件基本上为.asp文件。一般来说，要判断用户要求来链接的页面都采用.asp文件，只有静态文本的输出，如新闻、通知等的输出才采用html文本。除了各个页面的文件外，我们在Public中建立了banner、image、picture、include目录。Banner主要存放为网站或企业做广告制作的gif广告条，在许多网站中一般被置于页面的顶部或底部。image和picture是有分别的，image主要存放一些固定读取的小按钮、标签、图标、Logo等小型gif或jpg等文件，而picture则存放一些较大的或暂时读取的图片，如新闻图片等。4.3 网站的目录结构网站的目录结构Public中的Include目录是存放Public页面的公共部分的，包括一些公共过程、函数文件（以.inc文件形式存放,在应用时，通过ASP的SSI机制包含进.asp文件）以及各页面的公共样式（CSSStyle）等。在Management目录中也包含include和image目录，其作用与Public部分是相同的，区别在于管理员部分不会出现一些暂时性的图片，也不用过分地修饰页面。整个网站的详细目录结构如图4-13所示。4.3 网站的目录结构网站的目录结构WebsiteGlobalimageManagementimcludePublicimagebannerimageincludepictrue图4-13 示例网站的目录结构4.3 网站的目录结构网站的目录结构2网站公众部分的结构列表网站公众部分的结构列表首先，考虑主页的链接功能，为了让网站的重要功能方便使用，将最重要的功能放在了首页：用户登录；新用户注册；链接至新闻专题、栏目及标题页面；链接至社区讨论；链接至新闻搜索。以上几项作为主页的基本链接，放在了页面较显眼的地方以方便链接。而在主页中间的内容中，除了一些友好界面的部分（如当前时间、显示访问人数、动画效果、向访问者问好等内容），为了突出当前的某些主题或者焦点新闻，提供了某些重要专题和新闻的直接链接。而对于新闻专目的分类链接，在“精彩栏目”栏，分别给出了新闻专题的二级目录和它们以下的三级目录，二级目录和三级目录的名字采用不同颜色的字体区分。另外，在主页底部提供通常的介绍性和联系性的链接，如广告联系、管理员联系、招聘信息、版权信息等等。4.3 网站的目录结构网站的目录结构下面给出主页的链接结构。1P主页1.1首页（链接本主页）1.2焦点新闻（链接至焦点新闻页面）1.3IT社区（链接至IT社区页面）1.4搜索引擎（链接至搜索引擎页面）1.5精彩栏目营销新闻营销总议网上寻宝促销活动公关活动营销专题各地市场广州市场1.6IT社区社区论坛1.7焦点新闻1.7.1（具体新闻的链接）1.8今日导读l.8.1（具体专题的链接）l.9用户登录和新用户注册1.10网站简介1.11广告联系1.12管理员联系4.3 网站的目录结构网站的目录结构下面对后台管理部分后台管理部分结构进行讨论。Management部分是后台管理部分，只有管理员才有权限访问。后台管理部分在设置方面不应由于过分强调浏览方便而使结构设计得混乱，而是在整体构思上，以树状结构为主，体现管理的条理性，只在每个页面加上了各个一级管理项目的链接（在实现上，通过构造公共的边框和链接，形成.inc文件，在各个管理项页面中包含进去即可）。Management中的管理项目分类是由公众页面的功能决定的，对公众页面的每一功能，在Management中都应该设立相应的管理项目。例如，对于新闻浏览的功能，就应设立新闻的添加、删除；新闻专题的增加等等。以下给出了部分主页的页面结构列表。4.3 网站的目录结构网站的目录结构1M主页1.1添加新闻1.2管理新闻1.3管理评论1.4管理栏目1.5社区管理1.6添加栏目添加一级新闻栏目添加二级新闻栏目添加三级新闻栏目添加四级新闻栏目添加讨论区专题添加讨论区栏目添加新闻来源1.7管理用户1.8管理广告用户1.9管理广告1.10每页的公共链接：添加新闻、管理新闻、管理评论、管理栏目、管理社区、添加栏目、管理用户4.4 网站结构蓝图网站结构蓝图栏目规划最基本的任务就是要建立网站的逻辑结构，这不仅需要为整个网站建立层次型结构，还需要为每一个栏目或者子栏目设计合理的逻辑结构。很多人通过网站的结构清单想象实际的网站有些困难。有了结构蓝图就容易多了。假如你决定建造一所房子，你是否是这样进行：挖一条沟,买一些砖，然后就开始垒，边垒边看还需要什么？虽然你可能未必如此，但许多网站在开始建造时的确是这样的：网页很少，没有真正的计划，很少想过在网站内容变得越来越复杂时如何将它们组织在一起。在建造房子时，如果按照建筑师的计划施工，那么实现起来就更加容易、住起来就更加舒适和安全。与此类似，如果在建设网站过程中首先进行了细致的计划，建立了网站的结构蓝图，则该网站就会更易于实现、使用和管理。4.4 网站结构蓝图网站结构蓝图结构层次：网站的结构层次是一种有关网站结构，组织方式的网站结构列表（或概述）。结构层次图：根据结构列表画出的网站层次结构图。结构化蓝图：网站的结构层次用可视化结构图形表示出来就是结构化蓝图。结构化蓝图是网站结构的可视化表示，是能精确反映网站中各元素如何分组和联系的图表。4.4 网站结构蓝图网站结构蓝图4.4.1 建立网站层次结构图建立网站层次结构图1网站的结构层次网站的结构层次网站的结构层次是一种有关网站结构和组织方式的内容清单。各层次主要内容或题目的详细内容被列在其下的副标题中。用这种方式组织起来的信息可以使访问者迅速找到所需信息的位置。建立层次型结构是一个递进的过程，从上到下一级一级地确定每一层的栏目即确定网站的结构清单。一般分为两个步骤：首先是确定第一层，即网站所必需的栏目。其次对其中的重点栏目进行进一步的规划，确定它们所必需的子栏目，以此类推直至不需要再细分为止。其方法是把每部分的组织与内容清单的条目对应起来。对网站深入分析时，应把低层次的部缩进，重复此过程，然后把注意力集中到网站的细节。4.4 网站结构蓝图网站结构蓝图将所有的栏目及其子目录连在一起就形成了网站的层次型结构(也称为网站结构列表)。如下所示。Section1Section1.1Section1.2Section2Section2.1Section2.2Section3具体案例可参阅上一节Public和Management的结构列表。4.4 网站结构蓝图网站结构蓝图2网站的结构层次图网站的结构层次图根据结构列表可画出网站的层次结构图。既然你已经有了网站的结构层次列表，现在就可以建立一个基于文本的网站的层次结构图。层次结构图也有很多种，顺序结构，网状结构，继承结构，WEB结构等，应依据你的内容而定。画出结构图的目的，主要是便于有逻辑地组织站点和链接，同时，将来你会用这个图去分配工作和任务。例如：你可以告诉某个开发人员，让他完成结构图中某个分支的内容；你可以把这个图递交给业务人员，告诉他们哪些页面，需要他们进一步提供内容或资料；你可以把结构图给专业美工看，让美工人员考虑以什么样的形式来表现你要表达的内容等等。简而言之，这个框架图，将为你下一步进行工作分配，人员安排提供依据。4.4 网站结构蓝图网站结构蓝图网络书店图书板块交易板块管理板块辅助板块新书推介图书明细购物车分类浏览联系我们购物指南客户交流公司简介订单管理用户管理图书管理4.4 网站结构蓝图网站结构蓝图4.4.2 建立网站结构蓝图建立网站结构蓝图有了网站层次结构图或结构列表，是很难想象实际的网站的。有了结构蓝图就容易多了。结构蓝图就是一组由框图、有向连线以及图标等组件所组成的反映网站结构的图形。结构蓝图显示了网站中的元素如何分组和联系的图表。需要做一些图例：如何在蓝图上表示在线连接、离线连接、页的成分、页、页的分组。你可能要区分执行不同功能或事物处理的部分、动态产生的部分、只由文本组成的页面等。如果网站很大，可能要做几张蓝图，从简单的网站开始，利用蓝图把网站建得越来越好。根据上节案例网站的结构列表，就可以给出网站的结构蓝图了。如图4-15是网站结构蓝图示例。4.4 网站结构蓝图网站结构蓝图(系统执行一个操作：页面不显示)(一个页面：页面显示)公众路线操作员路线图例：箭头表示链接，其中：4.4 网站结构蓝图网站结构蓝图系统管理页面 ，操作员通过这一部分完成对网站系统的管理。（1）操作员登录。（2）网站管理主菜单。（3）栏目罗列页面。把新闻的专题以及大栏目全部罗列出来。 （4）新闻罗列页面。罗列了某一大栏目中的所有新闻的小栏目以及新闻标题，应该有新闻检索功能。该页面有两个入口：新闻管理评论管理，其出口分别是新闻内容以及评论列表。（5）新闻填写页面。本页可供网站新闻编辑填写新添加新闻的有关内容：如选择所属小栏目、新闻标题、新闻内容、新闻图片、定义关键字、定义级别、定义相关新闻等等。（6）评论列表。列出某条新闻的所有评论、或者某个社区专题的讨论，具有检索功能。（7）栏目内容。列出某一专题的某一大栏目下的所有小栏目。可以更改成或删除栏目内容。（8）栏目填写。可以添加专题、栏目、小栏目。编辑人员选择上级栏目以及填写新增栏目名。用户列表用户列表专题列表专题列表栏目罗列栏目罗列新闻管新闻管理理网站管理主菜单网站管理主菜单新闻添新闻添加加评论管评论管理理社区管社区管理理栏目添栏目添加加栏目管栏目管理理用户管用户管理理栏目罗列栏目罗列新闻填写新闻填写新闻罗列新闻罗列新闻内容新闻内容评论列表评论列表栏目填写栏目填写栏目内容栏目内容用户信息用户信息增加增加删除删除修改修改增加增加增加增加修改修改删除删除删除删除删除删除操作员登录操作员登录帐号密码检查帐号密码检查4.4 网站结构蓝图网站结构蓝图讨论社区讨论社区新闻专题、栏目及新闻专题、栏目及标题页面标题页面用户注册用户注册主页主页新闻浏览新闻浏览新闻评论列表新闻评论列表查询结果查询结果登记登记新闻查询新闻查询发表发表发表评论发表评论浏览评论浏览评论登录登录公共服务页面说明。公众用户通过这一部分进行新闻查看、发表评论、查看评论、注册等等。4.4 网站结构蓝图网站结构蓝图制定网站蓝图时需要考虑的二个重要因素二个重要因素是：首先是栏目描述。它包括受众（哪些人会访问你的网站）、包括内容（主题是什么，你拥有多少有关该主题的内容）；第二是栏目和栏目之间的关系包括导航结构（访问者发现你的网站后，如何浏览其中的内容）。对这二个因素的仔细考虑将有助于奠定一个成功网站的基础。4.4 网站结构蓝图网站结构蓝图1栏目描述栏目描述栏目描述即是要描述栏目的目的、服务对象、内容、资料来源等。要把目标细化以整理出站点内容框架，初步整理出为达到这些目的，站点所需要包含的所有内容。例如，站点应该发布什么信息，站点需要提供什么应用程序等等。然后，你应该把初步定下的内容纲要写下来，交给上级或业务人员审核批准。这实际上就形成了站点设计的需求报告。在你的内容纲要里，还应该注明这些内容的信息来源，哪个部门应该提供哪方面的信息。把这些罗列下来，会使得上级以及各个相关部门清楚“谁应该为这些内容负责”。描述能让领导和同事们对这个栏目有整体的了解和把握，也能让网站建设者对这个栏目有一个准确、清晰的认识。4.4 网站结构蓝图网站结构蓝图现举例说明如下：（1）确定谁会使用网站。建立网站蓝图的第一个要求是了解你的用户。只有这样，你才能规划网站内容，进而确定如何将这些内容展示给用户。可以先列出一张可能访问你网站的全部用户清单。例如，假设你是一个为观赏鱼饲养者生产相关产品的制造商，除了销售你的产品，你还希望你的网站成为一个关于鱼的信息源。那么你的潜在用户将包括有经验的养鱼者、缺少经验的养鱼者、正在考虑将鱼做宠物的人、希望销售你的产品的宠物商店店主、做有关鱼的作业的孩子们以及那些希望买礼物送给养鱼的朋友的人。当然，还会有很多其他潜在用户组；绝大多数网站都可列出至少15至20个潜在用户组。4.4 网站结构蓝图网站结构蓝图（2）组织内容：了解了大致的用户情况后，即可更仔细地审视你的内容，并考虑如何组织这些内容。先为每个用户组（即使这些用户组现在对你似乎不太重要）制定一个详细列表，列出你希望包含的确切内容。可为每个用户组制定两个列表：你现有的内容和计划将来要加入的内容。如果发现内容很容易按用户进行划分，在不同的用户标题下很少或根本不会出现同一内容的重复，那么你的网站可能属于一类极少见的网站：使用主要基于用户的内容组织才有意义。而多数情况则是，当你按用户组来组织内容时会出现大量重叠，同一内容区域会对多个不同的用户组显示。在这种情况下，按主题区域组织内容生成的结构会更清晰、重复更少。4.4 网站结构蓝图网站结构蓝图2栏目与栏目之间的关系栏目与栏目之间的关系（1）栏目网页之间的关系。设计栏目的网页构成、各个网页之间的逻辑关系、各个网页的内容、内容的显示方式、数据库结构等各个方面的问题。比如很多网站都有的“用户注册”栏目，如图4-18所示，这个栏目通常需要五个网页，采用线性结构来进行组织。第一个网页“开始注册”是用户注册的入口。第二个网页“接收条款”上需要设计一个用于选择是否接收条款的表单。第三个网页“填写注册信息”采用表单来实现，所需注册的信息根据网站的需求而定。第四个网页“信息检验”是为了检验用户信息的合法性。这个网页可能不会显示给用户，只是根据其检查的结果跳转到相应的网页。最后一个网页是“完成注册”，它需要将用户的注册信息保存到数据库中并将成功注册的信息显示给用户。4.4 网站结构蓝图网站结构蓝图（2）栏目与栏目间的关系。虽然分为不同的栏目，但很多情况下，栏目与栏目之间存在着从数据、内容到布局等各个层次上的关联。比如企业站点的产品介绍、价格信息和在线定单等栏目之间通常使用统一的数据库，这样在任何一个栏目中打开同一个产品时都能看到相同的介绍信息，保证了信息的一致性，而且统一的数据库也便于管理和维护。所以设计栏目之间关系的工作就是找出各个栏目之间可以共享和相关的内容，并确定采用什么样的方式将它们串联起来。总之，上述二要素的思想就是根据目标框架整理出站点的内容框架，进一步整理出站点逻辑结构图和结构蓝图。4.5 网站导航网站导航导航就是帮助我们找到能最快到达目的地的路径。网站导航对于一个网站说非常的必要和重要，它是衡量一个网站是否优秀的重要标准。因此，网站的导航系统导航系统是一个以辅助访问者访问为目标，为访问者在网站的浏览过程中定位导向等功能的超链接系统。导航系统通常可使网站各个分别独立的功能实现横向联系，引导访问者如何从本网页到达指定网页,并能方便地在不同部分之间跳转,以及能根据需要快速返回。4.5 网站导航网站导航4.5.1 规划导航结构规划导航结构1导航的基本分类导航的基本分类根据导航形式和作用域的不同,导航可分为全局导航栏、局部导航栏和辅助导航。全局导航：全局导航应以相同样式在相同位置出现于网站的所有页面中，使用户方便地在不同部分之间跳转。栏目结构是全局导航系统的最好候选者。由于对网站的栏目进行了总体的规划，又由于信息已经按主题区域进行了组织，因此可用栏目结构作为全局导航基础。全局导航栏除了像主页链接和联系信息等标准项目外，还应包含顶级内容组的链接。如果可能，把全局导航的元素限制在5至7个之间。限制链接数量是较为明智的，如果链接数量超过了八个或九个，你就需要考虑重新分配内容的方法，以减少组数。4.5 网站导航网站导航局部导航：此类导航专用于网站的某个节和指向单个顶级组中内容的链接。它有不同的形式：可以是主题的列表，如Yahoo；可以是选项菜单的形式，或者可以是一些相关条目的列表。你可以在局部导航中包含访问隐私政策、版权信息、保证等页面的链接和其他难于归类的信息。这些链接通常都包含在页面底部的小导航栏中。路径导航是小型导航条，小型导航条属于局部导航。辅助导航：使用辅助导航可以为用户提供备选的导航方式。使用这种方法，他们可以直接导航至希望的位置。搜索功能和网站地图（可以使用FrontPage非常方便地添加）是帮助用户快速定位特定信息的重要方法。导航系统设计完成后,一定要为全局导航系统和局部导航系统做文档，这些文档应能反映导航系统的各项细节。4.5 网站导航网站导航现举例说明一些网站的全局导航系统和局部导航系统。网易（）的全局导航栏如图4-19所示。这个导航栏在网易的任何一个页面里都可以看到。有了它，就可以在各个版块之间快速切换。4.5 网站导航网站导航4.5 网站导航网站导航2页面结构导航页面结构导航页面以结构化形式显现。将内容结构构建在一个页面中是非常有效的方式，能使一定范围的信息紧凑地展示出来，能使一定范围的用户随时访问信息。例如，有关鱼类饲养的页面可包括一个图像、拉丁名和通用名、基本的照料信息、适宜的温度范围、首选的食物、必需的设备以及每种鱼适宜的伴养鱼等，这些项目中的任意一项均可链接至更进一步的信息。这样可在一个快速浏览窗口中提供众多信息，且这些信息并非来自同一部分。4.5 网站导航网站导航页面使用书签。在页面顶部使用书签（即定位标记，可链接至该页面后面的信息）不仅能提供快速的页面内容概览，还能帮助用户查找特定信息。在框架内的网页中指定超链接时，利用超链接的“目标框架”属性可以构造出多种导航方式。因此，框架技术可以被广泛地应用到网站导航和文档浏览中，方便访问者对网页进行浏览，并能减少下载页面所需的时间。因为访问者的浏览器不需要为每个页面重新加载与导航相关的图形。框架一般有大小两块区域，其中一块较大的区域放置网页的主体内容，它通常占据整个屏幕的五分之四，而另一块较小的区域通常放置的是网站标志和导航条。4.5 网站导航网站导航4.5.2 导航的实现方法导航的实现方法1导航条导航条导航最常用的实现方法就是导航条。在导航条中，所有超链接所对应的网页在网站的层次型结构中是并列的，所以通过它可以快速地切换并列的其他网页。比如图4-21所示的当当网图书栏目首页中就有很多导航条。首先是网站第一层分类栏目的导航条，这个导航条几乎出现在当当网站的所有网页中，所以在任何一个网页通过它都可以立即跳转到图书、VCD、DVD等各个栏目的首页。因为是图书栏目的首页，所以又有一个图书分类的导航条，这个导航条在图书栏目的各个网页中，所以在任何一个介绍图书信息的网页中都可以通过它快速地跳转到图书栏目的不同分类网页。4.5 网站导航网站导航网站分类栏目导航条图书分类导航条4.5 网站导航网站导航几乎在所有的网站上都可以找到类似的导航条，不同之处可能只在表现形式上，导航条既可以是文本链接，也可以是一些图形按钮等。比如当当网的导航条采用类似图片按钮的形式，而首都之窗网站、微软公司网站、新浪网等的导航条则直接采用文字超链接的形式。使用超文本链接或图片链接，使人们能够在网站上自如地前进或后退，而不要让他们使用浏览器上的前进或后退。记住，在所有图片上使用ALT标识符注明图片名称或解释，以便那些不愿意自动加载图片的用户能够了解图片的含义。4.5 网站导航网站导航由于人们习惯于从左到右、从上到下阅读，一般情况下，主要的导航条应放在网页中较引人注目的位置，通常是在网页的顶部或左侧。导航条是对网站栏目的一个索引，无论在站点中如何跳转，导航条按钮始终出现在屏幕上。对于较长的页面来说，在最底部设置一个简单导航也很有必要。导航要清晰、便于浏览。应注意整个网站中各个页面间的联系，网页应该具有一致风格的导航系统，为用户浏览提供方便。导航条作为网页头部的一部分，经常采用主色调，比如首都之窗主页和易趣网主页就属于这种情况。另一方面，导航条因为介于网页的头部和内容中间，所以也经常作为头部和内容部分的过渡，这种情况下通常采用灰色系，比如IBM公司主页就采用了黑色导航条。4.5 网站导航网站导航导航条系统的构成主要有以下几种形式。（1）导航目录。导航目录是最完整的导航系统，通常作为网站建设的其中一项重要功能来设计。它反映了网站的逻辑结构，是网站内容的分类列表。导航目录一般采用文本链接的形式。导航目录作为一个单独的功能页面被其他页面链接，而目录内的各项又按分类链接至各个页面，构成了一张网站的地图。设计导航目录时主要采用树状结构的表格将网站的重要功能反映出来。在表格中的各个项目（包括一级页面、二级页面等等）都应该提供直接的链接。导航目录应该是相对稳定的，一般不提供最低级页面的链接，因为这些页面是可变的。4.5 网站导航网站导航4.5 网站导航网站导航（2）导航栏目。浏览过众多网站的读者都会留意到许多大型网站的页面顶部醒目的位置有一些固定的的分类链接，这些就是导般栏目。导航栏的作用是将整个网站的内容介绍给人，引导浏览者游历站点，它使浏览者对每一个分页面的内容有一个概括性的了解，知道哪些内容对自己重要，从而点击链接浏览。导航栏目是用户在规划好站点结构，开始设计主页时必须考虑的一项内容。事实上，导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。在设计站点中的诸网页时，可以在站点的每个网页上显示一个导航栏，这样，浏览者就可以既快又容易的转向站点的其他网页。4.5 网站导航网站导航导航栏目通常用条状表格制成，一般不超过两行，置于页面顶部，在网站Logo、首席广告条的下方，而在正文内容的上方。这样设置有两个好处。首先，对于整体页面设计来说，导航栏目和网站的Logo等信息是整个网站的标志，与网站内容应该鲜明区别，导航栏目在这里就起到了区分两者的作用；其次，上网多的读者都能意识到，这样的风格设计己经成为了大型网站的设计主流，因而成为了默认的浏览标准；导航栏目的设计以网站结构的设计为基础。导航栏目是网站导航系统的最重要组成部分之一，它的栏目设置对于访问者尤其是对于第一次进入网站的访问者的浏览兴趣影响十分大。栏目设置一定要清晰、彻底地反映网站的结构。导航栏中的按钮应该包括：主页、联系方式、反馈及其他些用户感兴趣的内容。4.5 网站导航网站导航网站结构图与导航栏的区别是：网站结构图可以而且也应该包括与导航栏类似的链接，供用户点击至相关网页，但它并不是一个单纯的导航工具。它的目的在于提供独特的、更详细的站点结构概况。有些网站许多页面的结构列表中有许多重复的项目，这些项目通常链接到网站的各大功能页面，其实这些项目就是以导航栏目的形式在各页面中实现的。将网站的各项一级功能、网站内容的分类标题、各大功能页面的标题，置于导航栏目中。4.5 网站导航网站导航导航栏目的样式设计是多样化的。最简单的形式就是用HTML中的tab功能实现。还因为导航栏在表现形式上就是一组分别指向不同超链接地址的按钮，所以通常情况下可用Fireworks软件制作按钮，在文档中通过复制按钮的方法快速构建导航栏。在复制了按钮后，分别为这些按钮指派不同的超链接地址并修改按钮上的文本，即可完成导航栏的创建。在网页中单击这些按钮就可以实现相应的跳转。由于这些按钮起到了很好的导航作用，因此被称为导航栏。为使网站更加美观，可以采用变化的动态图标来使导航栏目变得更加生动活泼。4.5 网站导航网站导航设计导航栏时应主要以下几点:（1）图表比单纯的文字效果更佳，但它必须能够清楚地体现出它所链接的内容。图表下应附有文字说明，以避免图像到达不清而引起的混淆。（2）使用常用颜色。避免在链接处使用特殊的颜色，应该使用标准、醒目的颜色。（3）无任何链接的内容不要做成按钮的形式。（4）每个页面应包含“返回”或“前进”的按钮。（5）栏目索引条因为分布在网页的各个部分，所以经常采用主色调中不同深度的颜色来烘托整体的效果，比如IBM公司主页采用不同的蓝色，首都之窗主页则采用不同的红色。4.5 网站导航网站导航2路径导航除了普通的导航条之外，导航另一种非常重要的实现方法是路径导航，即在网页上显示这个网页在网站层次型结构上的位置。比如图4-24所示的新浪网新闻网页上就有路径导航，从这个导航可以清楚地看到这个网页归属于新闻中心下的国内新闻栏目，而且通过它还可以直接跳转到新浪首页、科技时代首页或互联网国际首页。很多网站上也有类似的路径导航，比如图4-25路径导航举例所示的南京财经大学图书馆网站某网页，类似的从其上的路径导航便可知道这个网页是处于“南财图资源中心教学课件计算机网络”之下，同时通过它可以回到其上的任何一层网页。4.5 网站导航网站导航路径导航路径导航4.5 网站导航网站导航路径导航显示当前路径导航显示当前网页的位置网页的位置4.5 网站导航网站导航路径导航是一种专为辅助访问者前后定向的导航系统。通过路径导航，用户不仅可以了解当前所处的位置，还可以快速地返回到当前网页以上的任何一层网页。路径导航也称为小型导航条，它的特点是细小灵活。小型导航条在各种各样的网站中有不同的特色，在页面中所设置的方位也多种多样。置于正文页眉的导航条。如图4-24和4-25一样，经常浏览网站的读者就会发觉在许多网站都有类似的这种置于正文页眉的访问者定位提示：“你当前的位置是：首页-新闻-新闻专题-”这种导航条的作用是十分明显的：它所列出的就是访问者访问经过的路线，访问者可以清楚地知自己的访问经历和当前位置；在每一个经历点处都有超链接，访问者可以直接快速地回到刚才浏览过的页面。这种导航条是很受访问者欢迎的。4.5 网站导航网站导航置于正文边框的小导航条。这种小导航条主要是方便访问者在进行连续的阅读时设置的，如“上一页”、“下一页”、”返回”、“第二页”等等。还有一种形式是以辅助帧的方式出现在正文帧的一侧。相关键接的导航条目。现在的网站还十分注重相关链接，在阅读新闻时，新闻框的周边提供相关新闻的链接（如图4-26所示）；在阅读某一主题的内容时，对里面所涉及的一些不是十分流行的概念建立相关文摘的链接，以及对本主题所延伸的主题的链接等等，这对于浏览导航是很重要的。相关键接涉及到对原文建立索引，通常由网站管理员在输人原文之后，给出该文的关键字，以便于系统搜索。4.5 网站导航网站导航相关内容网页导航4.5 网站导航网站导航除了上述两种最为重要的实现方法之外，还有一些扩展的实现方法，如重点导航、相关导航等，这些导航可以让用户有更多灵活的方式找到自己所感兴趣的网页。下面我们通过实际的例子来看看这些导航。比如新浪网在每一个新闻内容网页的底部都有一个区域，里边罗列着与这个新闻相关的新闻网页的超链接，如图4-26所示，这就是相关导航。又比如图4-27所示的当当网主页，其上还有许多重点导航，比如精品数码产品导航、特价VCD导航、特惠图书导航等。导航栏目和导航目录部属于全局导航系统，小型导航条属于局部导航系统。4.5 网站导航网站导航精品数码产品导航特惠图书导航特价VCD导航4.5 网站导航网站导航4.5.3 导航的设计策略导航的设计策略还必须考虑以下的问题：当用户在你的网站结构中导航时，如何找到相关信息？是否会从主导航栏开始其浏览？可以有多少种从主页到达访问目标的不同路线选择？如果用户所需的信息在网站的某一页中，但用户通过另一页中的页面来访问，那么查找用户所需信息的方法是否清楚明白？多种指向内容的路线可以显著增加可用性。例如，用户到达特定页面的方式可能包括：单击导航栏中的链接、使用下拉列表框或网站搜索或转至网站地图页面查找。尽量提供至少三种从主页到达所有重要内容的明显途径。虽然导航有很多不同的实现方法，但是并不是所有的网站都需要使用这些方法，这通常取决于网站的规模。4.5 网站导航网站导航1设计网站导航时的一些基本策略：设计网站导航时的一些基本策略：首先，至少要使用一个一层栏目的导航条，如果栏目底下也有很多内容，可以分为很多子类的话，那么可以进一步设计栏目下的导航条。其次，如果网站的层次很深，比如三层以上（主页作为第一层），最好使用路径导航。路径导航可以从第三层以下的网页开始出现。如果网站的层次只有两层或者三层，那么不是特别需要路径导航，比如“小陶制图”个人网站就不必使用路径导航。其他导航方式作为辅助的导航手段，视实际需要而定。每一个网页都设置一个主页的链接。4.5 网站导航网站导航2设计导航栏时应主要以下几点设计导航栏时应主要以下几点:（1）对链接到本页的导航按钮作特别处理各页面若重复使用同一组的导航按钮，无可避免地会产生某一导航按钮链接到目标页的情形。为达成界面设计的一致性，并没有绝时的必要删除此导航按钮。但页面设计可让此按钮不再具有超链接的功能；或将此按钮的彩度、亮度降低（如：深绿色变成浅绿色、亮红色变成暗红色），使访问者可清楚地意识到：这个暗淡下来的导航按钮不再具有链接的功能。（2）不要在一篇短文里提供太多的超链接适当、有效率地使用超链接，是一个优良的导航系统不可或缺的要件之一。4.5 网站导航网站导航（3）让超链接的字串长短适中且行文自然抓住能传达主要信息的字眼当做起链接的锚点，可有效地控制住超链接的字串长度，避免字串过长（如：整行、整句都是锚点字串）或过短（如：仅一个字当做锚点），而不利于访问者的阅读或点取。（4）注意超链接颜色与单纯叙述文字的颜色呈现HTML允许网页设计者特别标明单纯叙述文字与超链接的用色，以便丰富页面的色彩呈现。如果网站充满知识性的信息，欲传达给访问者，建议将网页内的文字与超链接用色，设计成较干净素雅的色调，会较有利于阅读。4.5 网站导航网站导航（5）分析、说明提供的bookmark或coollink常常看到热心的网站设计者罗列了精心收集的bookmark或coollink，以分享访问者个人游览WWW的美好经验。提供bookmark或coollink，是一大善举，但未加以分析、说明，却变得失去意义。将提供的bookmark或coollink，稍加分类、注解，可提供访问者清晰的概念与很大的方便，也使同站的导航系统更加周全完善。（6）在前后连续顺序的文件里提供必要的链接将篇幅过长的文件分隔成数篇较小的网页大大地增加界面的亲和力，但在导航按钮与超链接的配置上，网页设计则要更细心周全地安排，使得访问者不论身处网站的哪一阶层，依然能够快速便捷地通往其他任何一个页面。4.5 网站导航网站导航（7）在较长的网页内提供目录表与大标题理想的网页长度以不超过3、4个屏幕长度为佳。但是如果基于某此特殊理由，网页一定要做得很长，那么不要忘了在此长篇的网页最上方，提供一个目录表，页面的内容也加上大小标题，以利消除阅读者的误会。尤其重要的是，在这些标题与目录表的HTMLsource里分别设置锚点，与链接到锚点，以使网页真正发挥WWW的高互动性、高便捷性。（8）暂时不提供链接到尚未完成的页面超链接或导航按钮应该引导访问者到一篇真正“有内容”的页面，而不是以挂羊卖狗肉的方式，事先将某一超链接描述得精彩、诱人，结果访问者兴致勃勃地链接过去，却根本看不到任何精彩、诱人的内容，唯一所见的，只是一张无聊的告示牌：施工中。