1.5.4 网站结构设计

网站结构包含两方面的含义，一是目录结构或物理结构，即网站真实的目录及文件存储的位置所决定的结构；二是链接结构或逻辑结构，即网页内部链接所形成的逻辑的或链接的网络图。此外，在考虑网站结构设计时，还应该做好页面元素的布局工作。

1. 网站的目录结构

网站的目录结构是指网站组织和存放站内所有文档的目录设置情况。任何网站都有一定的目录结构，用FrontPage建立网站时都默认建立了根目录和images子目录，大型网站的目录数量多、层次深、关系复杂。网站的目录结构是一个容易忽略的问题，许多网站设计者都未经周密规划，随意创建子目录，给日后的维护工作带来许多不便。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护、内容的扩充和移植有着重要的影响。所以在网站设计中需要合理定义目录结构和组织好所有文档。在设计网站目录结构时，应注意以下几个方面。

（1）不要将所有文件都存放在根目录下

一些网站设计人员为了方便，将所有文件都放在根目录下。这样做造成的不利影响主要体现在以下两个方面。

1）文件管理混乱。项目开发到一定时期后，设计者常常搞不清楚哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，影响工作效率。

2）上传速度慢。服务器一般都会为根目录建立一个文件索引。如果将所有文件都放在根目录下，那么即使只上传更新一个文件，服务器也需要将所有文件都检索一遍，建立新的索引文件。很明显，文件量越大，等待的时间也将越长。

（2）按栏目内容建立子目录

建立子目录的做法首先是按主菜单的栏目来建立。例如，企业站点可以按公司简介、产品介绍、价格、在线订单、意见反馈等栏目建立相应的目录。其他的次要栏目，如新闻、行业动态等内容较多，需要经常更新的可以建立独立的子目录；而一些相关性强，不需要经常更新的栏目，如关于本站、关于站长、站点经历等则可以合并放在一个统一的目录下。所有的程序一般都存放在特定目录下，以便于维护和管理。例如：CGI程序放在cgi-bin目录下，ASP.NET网页放在aspnet目录下。所有供客户下载的内容应该放在一个目录下，以方便系统设置文件目录的访问权限。

（3）在每个主目录下都建立独立的images目录

在默认的设置中，每个站点根目录下都有一个images目录，可以将所有图片都存放在这个目录里。但是，这样做也有不方便的时候，当需要将某个主栏目打包供用户下载或者将某个栏目删除时，图片的管理将会相当麻烦。经过实践发现，为每个主栏目建立一个独立的images目录是最方便管理的。而根目录下的images目录只用来放首页和一些次要栏目的图片。

（4）目录的层次不要太深

为了使维护和管理方便，目录的层次建议不要超过三层。

（5）目录的命名方法

不要使用中文目录和中文文件名。使用中文目录可能对网址的正确显示造成困难，某些Web服务器不支持对中文名称的目录和文件的访问。不要使用过长的目录名，尽管服务器支持长文件名，但是太长的目录名既不便于记忆，也不便于管理。尽量使用意义明确的目录名，以便于记忆和管理。

2. 网站的链接结构

网站的链接结构是指页面之间相互链接的拓扑结构，它建立在目录结构基础之上，但可以跨越目录。形象地说，每个页面都可以看作是一个节点，链接则是在两个节点之间的连线。一个点可以和一个点链接，也可以和多个点链接。从逻辑上看，这些链接可以不分布在一个平面上，但可以形成一个立体空间。

研究网站链接结构的目的在于用最少的链接，使得浏览最有效率。一般建立网站的链接结构有以下两种基本方式：树状链接结构和网状链接结构。

（1）树状链接结构（一对一）。这是类似计算机文件管理的目录结构方式，其立体结构看起来就像一棵多层二叉树。这种链接结构的特点是条理清晰，访问者明确知道自己在什么位置。一般来说，在这种结构中首页的链接指向一级页面，一级页面的链接指向二级页面。

因此，浏览该链接结构的网站时，必须一级级进入，再一级级退出。其缺点是浏览效率低，从一个栏目下的子页面进入另一个栏目下的子页面时，必须绕经首页。

（2）网状链接结构（一对多）。这种结构类似于网络服务器的链接，其立体结构像一张网。这种链接结构的特点是浏览方便。通常，在这种结构中每个页面相互之间都建立有链接，访问者随时可以到达自己喜欢的页面。缺点是链接太多，容易使访问者弄不清自己的位置以及看过的内容。

目前较好的结构设计是在网站首页与一级页面之间采用星型链接结构，在一级页面与下一级页面之间采用树型链接结构；若站点内容较多，超过三级页面，可设置导航条。

例如，某个网站的公共新闻子系统有财经新闻、体育新闻、IT新闻、娱乐新闻等栏目，分为一级页面和二级页面。一级页面包括首页、财经新闻、体育新闻、IT新闻、娱乐新闻等导航页面；二级页面包含更下一级的子栏目，如财经新闻l、财经新闻2等。

在这种情况下，首页、财经新闻页、娱乐新闻页、IT新闻页之间可设计为网状链接，可以互相单击，直接到达。而财经新闻页和它的子页面之间设计为树状链接，浏览财经新闻1后，必须回到财经新闻页，才能浏览财经新闻2。所以，有的站点为了免去返回一级页面的麻烦，将二级页面直接用新窗口打开，浏览结束后关闭即可。

需要指出的是，在上面的例子中采用三级页面来举例。如果站点的内容更庞大，分类更详细，需要超过三级页面，那么在页面里增加导航条，以帮助浏览者明确自己所处的位置。

3. 网站的页面布局

网站设计不是把所有内容放置到网页中就行了，还需要对网页内容进行合理的排版布局，以给浏览者赏心悦目的感觉，增强网站的吸引力。在设计页面布局的时候我们要注意把文字、图片在网页空间上均匀分布并且不同形状、色彩的网页元素要相互对比，以形成鲜明的视觉效果。常见的布局结构有“同”字形布局、“国”字形布局、“匡”字形布局、“三”字形布局和“川”字形布局等。

（1）“同”字形布局：所谓“同”字形结构，就是整个页面布局类似“同”字，页面顶部是主导航栏，下面左右两侧是二级导航条、登录区、搜索区等，中间是主内容区，如图1.1所示。这种布局的优点是页面结构清晰，左右对称，主次分明；缺点是版式呆板，如果主内容较多，则页面容易显示过长。

（2）“国”字形布局：在“同”字形布局基础上演化而来，在保留“同”字形的同时，在页面的下方增加一横条状的菜单或广告，如图1.2所示。

（3）“匡”字形布局：这种布局结构去掉了“国”字形布局的右边的边框部分，给主内容区释放了更多空间。这种布局上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面是一些网站的辅助信息，如图1.3所示。

（4）“三”字形布局：一般应用在简洁明快的艺术型网页布局上。这种布局的特点是在页面上由横向两条色块将网页整体分割为三部分，色块中大多放置广告条与更新和版权提示，一般采用简单的图片和线条来代替拥挤的文字，给浏览者以强烈的视觉冲击，如图1.4所示。

（5）“川”字形布局：整个页面在垂直方向分为三列，网站的内容按栏目分布在三列中，最大限度地突出主页的索引功能，一般适用于栏目较多的网站，如图1.5所示。