网站设计思考:网站的目录结构和链接结构

2016-02-19 15:45 18 1 收藏

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享网站设计思考:网站的目录结构和链接结构,希望可以对大家能有小小的帮助。

【 tulaoshi.com - Web开发 】

  今天我们来讨论“确定网站的目录结构和链接结构”。

  一.网站的目录结构

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  网站的目录是指你建立网站时创建的目录。例如:在用frontpage98建立网站时都默认建立了根目录和images子目录。目录的结构是一个容易忽略的问题,大多数站长都是未经规划,随意创建子目录。目录结构的好坏,对浏览者来说并没有什么太大的感觉,但是对于站点本身的上传维护,内容未来的扩充和移植有着重要的影响。下面是建立目录结构的一些建议:

  ●不要将所有文件都存放在根目录下。

  有网友为了方便,将所有文件都放在根目录下。这样做造成的不利影响在于:

  1.文件管理混乱。你常常搞不清哪些文件需要编辑和更新,哪些无用的文件可以删除,哪些是相关联的文件,影响工作效率。

  2.上传速度慢。服务器一般都会为根目录建立一个文件索引。当您将所有文件都放在根目录下,那么即使你只上传更新一个文件,服务器也需要将所有文件再检索一遍,建立新的索引文件。很明显,文件量越大,等待的时间也将越长。所以,给您的建议是:尽可能减少根目录的文件存放数。

  ●按栏目内容建立子目录。

  子目录的建立,首先按主菜单栏目建立。例如:网页教程类站点可以根据技术类别分别建立相应的目录,象Flash,Dhtml,Javascript等;企业站点可以按公司简介,产品介绍,价格,在线定单,反馈联系等建立相应目录。

  其他的次要栏目,类似what's new,友情连接内容较多,需要经常更新的可以建立独立的子目录。而一些相关性强,不需要经常更新的栏目,例如:关于本站,关于站长,站点经历等可以合并放在一个统一目录下。

  所有程序一般都存放在特定目录。例如:CGI程序放在cgi-bin目录。便于维护管理。所有需要下载的内容也最好放在一个目录下。

  ●在每个主目录下都建立独立的images目录。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

  默认的,一个站点根目录下都有一个images目录。刚开始学习主页制作时,阿捷习惯将所有图片都存放在这个目录里。可是后来发现很不方便,当我需要将某个主栏目打包供网友下载,或者将某个栏目删除时,图片的管理相当麻烦。经过实践发现:为每个主栏目建立一个独立的images目录是最方便管理的。而根目录下的images目录只是用来放首页和一些次要栏目的图片。

  ●目录的层次不要太深。

  目录的层次建议不要超过3层。原因很简单,维护管理方便。

  其它需要注意的还有:

  1.不要使用中文目录;网络无国界,使用中文目录可能对网址的正确显示造成困难。

  2.不要使用过长的目录;尽管服务器支持长文件名,但是太长的目录名不便于记忆。

  3.尽量使用意义明确的目录;上面的例子中,你可以用Flash,Dhtml,Javascript来建立目录,也可以用1,2,3建立目录,但是哪一个更明确,更便于记忆和管理呢?显然是前者!

  随着网页技术的不断发展,利用数据库或者其他后台程序自动生成网页越来越普遍,网站的目录结构也必将飞跃到一个新的结构层次。

  二.网站的链接结构

  网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上,但可以跨越目录。形象的说:每个页面都是一个固定点,链接则是在两个固定点之间的连线。一个点可以和一个点连接,也可以和多个点连接。更重要的是,这些点并不是分布在一个平面上,而是存在于一个立体的空间中。

  ●我们研究网站的链接结构的目的在于:用最少的链接,使得浏览最有效率。

  一般的,建立网站的链接结构有两种基本方式:

  1.树状链接结构(一对一)。类似DOS的目录结构,首页链接指向一级页面,一级页面链接指向二级页面。立体结构看起来就象蒲公英。这样的链接结构浏览时,一级级进入,一级级退出。优点是条理清晰,访问者明确知道自己在什么位置,不会"迷"路。缺点是浏览效率低,一个栏目下的子页面到另一个栏目下的子页面,必须绕经首页。

  2.星状链接结构(一对多)。类似网络服务器的链接,每个页面相互之间都建立有链接。立体结构象东方明珠电视塔上的钢球。这种链接结构的优点是浏览方便,随时可以到达自己喜欢的页面。缺点是链接太多,容易使浏览者迷路,搞不清自己在什么位置,看了多少内容。

  这两种基本结构都只是理想方式,在实际的网站设计中,总是将这两种结构混合起来使用。我们希望浏览者既可以方便快速的达到自己需要的页面,又可以清晰的知道自己的位置。所以,最好的办法是:

  ●首页和一级页面之间用星状链接结构,一级和二级页面之间用树状链接结构。

  举个例子。一个新闻站点的页面结构如下:

  ---------------------------------------------------

  一级页面 二级页面

  财经新闻页 -- [财经新闻1,财经新闻2...]

  / |

  首页 -- 娱乐新闻页 -- [娱乐新闻1,娱乐新闻2...]

  / |

  IT新闻页 -- [IT新闻1,IT新闻2...]

  ----------------------------------------------------

  其中,首页,财经新闻页,娱乐新闻页,IT新闻页之间是星状链接,可以互相点击,直接到达。而财经新闻页和它的子页面之间是树状连接,浏览财经新闻1后,你必须回到财经新闻页,才能浏览IT新闻2。所以,有站点为了免去返回一级页面的麻烦,将二级页面直接用新开窗口(POP up windows)打开,浏览结束后关闭即可。

  注意:以上我们都是用的三级页面举例。如果您的站点内容庞大,分类明细,需要超过三级页面,那么建议你在页面里显示导航条,可以帮助浏览者明确自己所处的位置。就是您经常看到许多网站页面顶部的,类似这样:“您现在的位置是:首页-财经新闻-股市信息-深圳股-深发展”

  关于链接结构的设计,在实际的网页制作中是非常重要一环。采用什么样的链接结构直接影响到版面的布局。例如你的主菜单放在什么位置,是否每页都需要放置,是否需要用分帧框架,是否需要加入返回首页的链接。在连接结构确定后,再开始考虑链接的效果和形式,是采用下拉表单,还是用DHTML动态菜单等等。

  随着电子商务的推广,网站竞争的越来越激烈,对链接结构设计的要求已经不仅仅局限于可以方便快速的浏览,更加注重个性化和相关性。例如,一个爱婴主题网站里,在8个月婴儿的营养问题页面上,你需要加入8个月婴儿的健康问题链接,智力培养链接,或者是有关奶粉宣传的链接,一本图书,一个玩具的链接。因为父母不可能到每个栏目下去寻找关于8个月婴儿的信息,他们可能在找到需要的问

题后就离开网站了。如何尽可能留住访问者,是网站设计者未来必须考虑的问题。

  讲到这里,阿捷忽然觉得自己很厉害,居然会总结出这么大一套理论:)什么,皮厚?可能吧,这么多高手都没发言呢!有意见请来信ajie@soim.com

来源:https://www.tulaoshi.com/n/20160219/1610330.html

延伸阅读
这是最近看到的一篇很不错很实用的文章,主要侧重于设计前的思考、思路,看完有很大的启发,所以推荐给大家,因为是翻译的,翻译不准确的地方还请见谅。 在生活中,拥有目标是非常重要的。 特别对于网站设计而言,因为没有目标就没有动力,更无法衡量你的成功与否。 目标有助于设计师专注于重要的事情,把握设计方案的走向。目标能帮助设...
什么是工具型网站 我们先从wikipedia上了解三组概念: 工具:是指能够方便人们完成工作的器具。 application:用来帮助用户完成某个单独的或是一组相关的工作的计算机软件。 web application:指通过使用Web和Web浏览器技术,跨越网络完成一个或多个任务的应用程序,通常需要使用Web浏览器。 由此可见,应用就是计算机领域的工具,工具型...
标签: MySQL mysql数据库
MySQL数据目录结构(2) [晏子]   3 重定位数据库目录 前面讨论的数据目录结构是缺省配置,所有数据库和状态文件均包含其中,然而,你有某些自由决定数据目录内容的位置,本节讨论为什么你可能移走部分数据目录(或甚至目录本身)、你能移走什么以及你如何做这些改变。 MySQL允许你重定位数据目录或其中的成员,由几个原因你为什...
标签: Web开发
您或许已经对网站链接有了一些了解,网站链接就是出现在第一条搜索结果下方并指向该网站某具体页面的链接。网站链接使用户可以直接浏览一个网站的某个重要部分,对于较大型和较复杂的网站来说,这个功能尤其有用。网站链接还能通过突出显示网站最受欢迎的频道从而帮助用户对这个网站的内容有一个宏观的了解。对网站管理员来说,网站链接可...
标签: ASP
本程序有两文件test.asp 和tree.asp 还有一些图标文件 1。test.asp 调用类生成树 代码如下 <%@ Language=VBScript % <html <head <link rel="stylesheet" href="tree.css" <titletree</title </head <!-- #include file="tree.asp" -- <% '======================================== ' BUILDING A TREE PROGRAMATIC...

经验教程

332

收藏

66
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部