网站结构与网站设计【稀缺资源，路过别错过】

网站结构与网站设计 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 页面 9 4.2 网站的逻辑链接结构 2线性结构（星状链接结构） 线性结构类似于数据结构中的线性表，用于组织线性顺序形式 存在的信息，可以引导浏览者按部就班地浏览整个网站文件。 它类似网络服务器的链接，每个页面相互之间都建立有链接。 线性结构浏览方便高效 ，随时可以到达自己喜欢的页面。缺点 是 链接太多 ,页面之间的层次结构不清晰 ,容易使访问者“迷路” , 搞不清自己所在的位臵，也不能确定自己已经浏览过的内容。 通常情况下，网站文件的结构是层状结构和线性结构相结合 的。最好的办法是：首页和一级页面之间用星状链接结构，一 级和二级页面之间用树状链接结构。 4.2 网站的逻辑链接结构 线性结构常用于需要按步骤进行的栏目上，比如用户注册、建 立定单、教程等。图 4-5所示的就是一个典型的用户注册的例 子，从这个图可以看出，一个新用户要完成注册需要经历四个 步骤，而且必须按顺序进行，否则就不能完成注册。 开始注册 接受条款 填写注册信息 完成注册 4.2 网站的逻辑链接结构 又比如在当当网购买图书或者音像制品，也必须按顺序进行选 择商品、图 4-6所示的只是最简单的线性结构，在这个基础上 进行扩展可以演变出更具灵活性的线性结构，以满足各种不同 的需求。如图 4-7所示的带抉择的线性结构，可以根据用户不 同的抉择来访问不同的下一个网页。 选择商品 确认购物车 填写定单 生成定单 首页面 一级子页面 二级子页面 三级子页面 四级子页面 一级子页面 4.2 网站的逻辑链接结构 又比如图 4-8所示的带选项的线性结构，可以让用户直接跳转 到后面的步骤以加快任务的完成。 首页面 一级子页面 二级子页面 三级子页面 四级子页面 上述基本结构都只是理想方式， 在实际的网站设计中，总是将 这两种结构混合起来使用 。我们希望浏览者既可以方便快速地 达到自己需要的页面，又可以清晰地知道自己的位臵。所以， 最好的办法是首页和一级页面之间用星状链接结构，一级和二 级页面之间用树状链接结构。 4.2 网站的逻辑链接结构 3 Web结构（混合链接结构） Web结构又称为网络型结构。 Web结构是层状结构和线性结 构两种结构方式的混合，它能使访问者既可快速方便到达所需 页面，又可清楚知道自己的位臵。如图 4-9所示。 主 页 页面 1 页面 2 页面 3 页面 4 页面 5 页面 7 页面 8 一级标题 二级标题 页面 6 4.2 网站的逻辑链接结构 Web结构类似于 Internet的组成结构，各网页之间形成网状连接，允许用 户随意浏览。这些网页可以是层次结构上的任意网页，但是因为导航的需 要或者内容上的相关性而链接在一起。 重点栏目导航 首都之窗的网站标志 网站即时新闻 4.2 网站的逻辑链接结构 又比如图 4-11所示的网页，这个网页的右边设臵了到其他几个具有相关内 容网页的超链接，其他几个网页的情况也一样。所以这几个网页之间就形 成了一个简单的网络型结构 . 到其他内容网页的超链接 4.2 网站的逻辑链接结构 网络型结构的实现就在于在所有相关的网页上保留到其他网页 的超链接。这种结构使用户能更方便地在网站上游弋，但同时 也带来一个庞大超链接数的问题。我们可以简单地计算一下， 总的超链接数应该等于网页数乘以网页数减一，所以四个网页 的网络型结构的超链接总数为 4 3=12， 10个网页的网络型 结构的超链接总数就达到 10 9=90。这么庞大的超链接数维 护起来相当麻烦，某个网页的改动就可能同时需要对所有的网 页进行相应的的修改，这是谁都不愿意做的。 关于链接结构的设计，在实际的网页制作中是非常重要的一、 环。采用什么样的链接结构直接影响到版面的布局。 4.3 网站的目录结构 目录结构又称为物理结构，是指网站组织和存放站内所有文档 的目录设臵情况。它的设计解决的是如何在硬盘上更好在存放 包括网页、图片、 Flash动画、 Java Applet、数据库等各种 资源在内的所有网站资源。 任何网站都有一定的目录结构，大型网站的目录数量多，层次 关系复杂。网站的目录结构是一个容易忽略的问题，不少网站 设计者都未经周密规划，随意创建子目录，这对未来网站的性 能、创建效率、上传维护、内容的扩充和移植等会带来诸多的 不便。 目录结构的好坏，目录结构是否合理，对浏览者来说并没有多 少影响，但是对网站的本身有着重要的影响。所以，在网站设 计中需要合理定义目录结构和组织好所有的文档。 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、 quick time等多媒体文件。 4.3 网站的目录结构 4目录的层次不要太深 为便于维护和管理，建议目录结构不应十分复杂，网站的层次 不要超过 3层。应该根据网站文件的功能，地位和大致的逻辑 结构来建立树状的目录结构。 5不要使用过长的目录名 目录的命名方法： （ 1）目录命名不要使用中文目录和中文文件名。使用中文目录可能对网址的正确显示造成困难，某些 Web服务器不支持对中文名称的目录和文件的访问。 （ 2）不要使用过长的目录名，尽管服务器支持长文件名，但是太长的目录名不便于记忆，也不便于管理。 （ 3）尽量使用意义明确的目录，便于记忆和管理。 4.3 网站的目录结构 6不要使用中文目录 因为你的站点是对 Internet所有用户开放的，所以你得考虑到使用非中文操作系统的客户也能正常访问你的站点，因为编码的差异以及异地服务器解释程序的差异可能使中文目录网址的正确显示造成困难。对于目录名，最好都使用英文。 7可执行文件和不可执行文件分开放臵 将可执行的动态服务器网页文件和不可执行的的静态网页文件分别放在两个目录下，然后将存放可执行网页文件的目录设为不可读和执行。这样做的好处就是可以避免动态服务器网页文件被读起。 4.3 网站的目录结构 8数据库文件单独放臵 数据库文件因为安全需求很高，所以最好放臵在 HTTP所不能 访问到的目录底下。这样就可以避免恶意的用户通过 HTTP方 式取到数据库文件。 随着网页技术的不断发展，利用数据库或者其他后台程序自动 生成网页越来越普遍，网站的目录结构设计也必将上升到一个 新的层次。 Images Images WoDeTuPian JingYanZhiTan Images Web WoDeJianJie Images Images Images WoDeZuoPin TuPianXinShang LiuYanBan Images GuangGao DongWu KaTong QuWei Images Images Images ZuiXinDongTai GuanYuWangZhan WangZhanLianJie 4.3 网站的目录结构 从这个图可以看到： 1网站的目录结构也应用了网站的层次型结构，即网站的目录结构和网站的层次型结构是可对应的。 2并不是将所有文件都存放在根目录下，采用了分层结构，网站的层次没有超过 3层。 3每个主栏目目录下都建立了独立的 images目录。 4没有使用过长的目录名，没有使用中文目录。 4.3 网站的目录结构 4.3.2 网站结构设计举例 假设根据网站策划阶段 网站规划方案 文档，得到这个商业 网站系统的目标定位为：主要为网民提供快速、大量、有价值 的 IT营销信息，注册用户还可以使用网站提供的论坛功能。 根据这个目标，知道系统需要实现的核心功能如下： 新闻浏览 用户注册 发表评论 社区讨论 广告记费 后台管理。包括数据的维护、新闻更新、评论的管理、讨论社区、用户的管理等。 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文件）以及各页面的公共样式 （ CSS Style）等。 在 Management目录中也包含 include和 image目录，其作用 与 Public部分是相同的，区别在于管理员部分不会出现一些暂 时性的图片，也不用过分地修饰页面。 整个网站的详细目录结构如图 4-13所示。 4.3 网站的目录结构 Website Global image Management imclude Public image banner image include pictrue 图 4-13 示例网站的目录结构 4.3 网站的目录结构 2网站公众部分的结构列表 首先，考虑主页的链接功能，为了让网站的重要功能方便使 用，将最重要的功能放在了首页：用户登录；新用户注册；链 接至新闻专题、栏目及标题页面；链接至社区讨论；链接至新 闻搜索。以上几项作为主页的基本链接，放在了页面较显眼的 地方以方便链接。而在主页中间的内容中，除了一些友好界面 的部分（如当前时间、显示访问人数、动画效果、向访问者问 好等内容），为了突出当前的某些主题或者焦点新闻，提供了 某些重要专题和新闻的直接链接。而对于新闻专目的分类链 接，在“精彩栏目”栏，分别给出了新闻专题的二级目录和它们 以下的三级目录，二级目录和三级目录的名字采用不同颜色的 字体区分。另外，在主页底部提供通常的介绍性和联系性的链 接，如广告联系、管理员联系、招聘信息、版权信息等等。 4.3 网站的目录结构 下面给出主页的链接结构。 1 P主页 1.1首页（链接本主页） 1.2焦点新闻（链接至焦点新闻页面） 1.3 IT社区（链接至 IT社区页面） 1.4搜索引擎（链接至搜索引擎页面） 1.5精彩栏目 1.5.1营销新闻 营销总议 网上寻宝 促销活动 公关活动 营销专题 1.5.2各地市场 广州市场 1.6 IT社区 1.6.1社区论坛 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 网站的目录结构 1 M主页 1.1添加新闻 1.2管理新闻 1.3管理评论 1.4管理栏目 1.5社区管理 1.6添加栏目 1.6.l添加一级新闻栏目 1.6.2添加二级新闻栏目 1.6.3添加三级新闻栏目 1.6.4添加四级新闻栏目 1.6.5添加讨论区专题 1.6.6添加讨论区栏目 1.6.7添加新闻来源 1.7管理用户 1.8管理广告用户 1.9管理广告 1.10每页的公共链接：添加新闻、管理新闻、管理评论、管理栏目、管理社区、添加栏目、管理用户 4.4 网站结构蓝图 栏目规划最基本的任务