關於網站設計的思考[4/11]（轉）

確定網站的目錄結構和鏈接結構
) X, g# q. `. x/ M' |/ P- E5 T' H- X8 |　　　　　　　　　　
# O* I* L- X7 d' X　　大家好。這是《設計的思考》系列文章第四篇。如果你需要前幾期文章可以到索易下載《多媒體與網站開發》電子雜誌，也可以到我個人主頁《網頁設計師》瀏覽。
% {6 ~) q, O4 f
　　上篇講到：我們在動手製作網頁前，一定要考慮好以下三方面：
, j0 E9 V; z; B" S3 H3 ~' D1.確定欄目和版塊；
5 g' A8 l( k( R' w2.確定網站的目錄結構和鏈接結構
7 c0 y/ Q2 K* A; X3 ?/ A4 x  Q3.確定網站的整體風格創意設計
　　今天我們繼續來討論「確定網站的目錄結構和鏈接結構」。
! Y6 u, R' ]7 R5 b; e; q　　一.網站的目錄結構
% n6 S0 o2 m- ?% m% v- l
　　網站的目錄是指你建立網站時創建的目錄。例如：在用frontpage98建立網站時都默認建立了根目錄和images子目錄。目錄的結構是一個容易忽略的問題，大多數站長都是未經規劃，隨意創建子目錄。目錄結構的好壞，對瀏覽者來說並沒有什麼太大的感覺，但是對於站點本身的上傳維護，內容未來的擴充和移植有著重要的影響。下面是建立目錄結構的一些建議：
+ \$ g, i* l2 f- i
●不要將所有文件都存放在根目錄下。
3 O. R* V3 r, X6 H* i　　有網友為了方便，將所有文件都放在根目錄下。這樣做造成的不利影響在於：
5 g9 e0 k$ p3 @% K1.文件管理混亂。你常常搞不清哪些文件需要編輯和更新，哪些無用的文件可以刪除，哪些是相關聯的文件，影響工作效率。
2.上傳速度慢。服務器一般都會為根目錄建立一個文件索引。當您將所有文件都放在根目錄下，那麼即使你只上傳更新一個文件，服務器也需要將所有文件再檢索一遍，建立新的索引文件。很明顯，文件量越大，等待的時間也將越長。所以，給您的建議是：盡可能減少根目錄的文件存放數。
& f6 L% N! I7 Z  Q$ P% _" X
●按欄目內容建立子目錄。
　　子目錄的建立，首先按主菜單欄目建立。例如:網頁教程類站點可以根據技術類別分別建立相應的目錄，像Flash,Dhtml,Javascript等；企業站點可以按公司簡介，產品介紹，價格，在線定單，反饋聯繫等建立相應目錄。
$ }9 K: ?. [% ]. v    其他的次要欄目，類似what's new，友情連接內容較多，需要經常更新的可以建立獨立的子目錄。而一些相關性強，不需要經常更新的欄目，例如：關於本站，關於站長，站點經歷等可以合併放在一個統一目錄下。
6 P! c% z  K/ k( |1 V& v    所有程序一般都存放在特定目錄。例如：CGI程序放在cgi-bin目錄。便於維護管理。所有需要下載的內容也最好放在一個目錄下。
( O# F( _+ n* j, Y, L( T
) S, C# \8 |" ]●在每個主目錄下都建立獨立的images目錄。
( M' T! V, G% I/ r: O　　默認的，一個站點根目錄下都有一個images目錄。剛開始學習主頁製作時，阿捷習慣將所有圖片都存放在這個目錄裡。可是後來發現很不方便，當我需要將某個主欄目打包供網友下載，或者將某個欄目刪除時，圖片的管理相當麻煩。經過實踐發現：為每個主欄目建立一個獨立的images目錄是最方便管理的。而根目錄下的images目錄只是用來放首頁和一些次要欄目的圖片。

●目錄的層次不要太深。
! ^9 v- _/ a! Q! l' n　　目錄的層次建議不要超過3層。原因很簡單，維護管理方便。

% N  ]: K8 G* {+ f* v　　其它需要注意的還有：
8 x+ J# F' Z, U- j1 m" ]# g0 C+ Y1.不要使用中文目錄；網絡無國界，使用中文目錄可能對網址的正確顯示造成困難。
6 i: m; h* [& \3 d2.不要使用過長的目錄；儘管服務器支持長文件名，但是太長的目錄名不便於記憶。
, Q. V& {. j$ _3.盡量使用意義明確的目錄；上面的例子中，你可以用Flash,Dhtml,Javascript來建立目錄，也可以用1，2，3建立目錄，但是哪一個更明確，更便於記憶和管理呢？顯然是前者！
5 M4 h, H- [4 {7 s+ x+ c8 \# T' P; K
　　隨著網頁技術的不斷發展，利用數據庫或者其他後台程序自動生成網頁越來越普遍，網站的目錄結構也必將飛躍到一個新的結構層次。

+ G; a# M/ n) E二.網站的鏈接結構
; O$ N( T/ e- ^$ ~* s, c. N
　　網站的鏈接結構是指頁面之間相互鏈接的拓撲結構。它建立在目錄結構基礎之上，但可以跨越目錄。形象的說：每個頁面都是一個固定點，鏈接則是在兩個固定點之間的連線。一個點可以和一個點連接，也可以和多個點連接。更重要的是，這些點並不是分佈在一個平面上，而是存在於一個立體的空間中。
% t  m9 S2 H6 }' E) y0 t* k
●我們研究網站的鏈接結構的目的在於：用最少的鏈接，使得瀏覽最有效率。

1 f, |( N" ?1 a$ i  s/ B; o　　一般的，建立網站的鏈接結構有兩種基本方式：
　　1.樹狀鏈接結構（一對一）。類似DOS的目錄結構，首頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。立體結構看起來就像蒲公英。這樣的鏈接結構瀏覽時，一級級進入，一級級退出。優點是條理清晰，訪問者明確知道自己在什麼位置，不會"迷"路。缺點是瀏覽效率低，一個欄目下的子頁面到另一個欄目下的子頁面，必須繞經首頁。
0 n- a& F7 H4 J5 N
& e3 s$ v  w) D4 p　　2.星狀鏈接結構（一對多）。類似網絡服務器的鏈接，每個頁面相互之間都建立有鏈接。立體結構象東方明珠電視塔上的鋼球。這種鏈接結構的優點是瀏覽方便，隨時可以到達自己喜歡的頁面。缺點是鏈接太多，容易使瀏覽者迷路，搞不清自己在什麼位置，看了多少內容。
0 X: u4 ?8 q( P& s8 S& y1 V
　　這兩種基本結構都只是理想方式，在實際的網站設計中，總是將這兩種結構混合起來使用。我們希望瀏覽者既可以方便快速的達到自己需要的頁面，又可以清晰的知道自己的位置。所以，最好的辦法是：
" F5 A7 q, U' V% L8 \: B+ C
* i" f) X1 E0 n* Z7 G) u8 Q●首頁和一級頁面之間用星狀鏈接結構，一級和二級頁面之間用樹狀鏈接結構。
2 s; x7 Z) b+ h. d
　　舉個例子。一個新聞站點的頁面結構如下：
# H7 l+ W! n" C7 Q5 Y2 ~# b7 H: b---------------------------------------------------
" u, b1 G* U! \; t% Y; F
, W2 i" c& Z" `4 o9 g8 x& Z一級頁面 二級頁面
" y8 ^9 d! N/ @) X( g
! b5 U- q* B# W, y) r2 D& g財經新聞頁 -- [財經新聞1，財經新聞2...]
/ |
4 |$ q# L/ V4 O$ ~7 g/ [2 s首頁 -- 娛樂新聞頁 -- [娛樂新聞1，娛樂新聞2...]
\ |
IT新聞頁 -- [IT新聞1，IT新聞2...]
; O& @/ v9 v9 o0 g
$ ?% j- `5 H( R# U----------------------------------------------------
　　其中，首頁，財經新聞頁，娛樂新聞頁，IT新聞頁之間是星狀鏈接，可以互相點擊，直接到達。而財經新聞頁和它的子頁面之間是樹狀連接，瀏覽財經新聞1後，你必須回到財經新聞頁，才能瀏覽IT新聞2。所以,有站點為了免去返回一級頁面的麻煩，將二級頁面直接用新開窗口(POP up windows)打開，瀏覽結束後關閉即可。

　　注意：以上我們都是用的三級頁面舉例。如果您的站點內容龐大，分類明細，需要超過三級頁面，那麼建議你在頁面裡顯示導航條，可以幫助瀏覽者明確自己所處的位置。就是您經常看到許多網站頁面頂部的，類似這樣：「您現在的位置是：首頁->財經新聞->股市信息->深圳股->深發展」
% @3 O' n* K; F; Y% s2 H
6 f( L% K1 d( i5 E$ c1 X　　關於鏈接結構的設計，在實際的網頁製作中是非常重要一環。採用什麼樣的鏈接結構直接影響到版面的佈局。例如你的主菜單放在什麼位置，是否每頁都需要放置，是否需要用分幀框架，是否需要加入返回首頁的鏈接。在連接結構確定後，再開始考慮鏈接的效果和形式，是採用下拉表單，還是用DHTML動態菜單等等。
% U. r0 O4 b& e" j2 i
　　隨著電子商務的推廣，網站競爭的越來越激烈，對鏈接結構設計的要求已經不僅僅局限於可以方便快速的瀏覽，更加注重個性化和相關性。例如，一個愛嬰主題網站裡，在8個月嬰兒的營養問題頁面上，你需要加入8個月嬰兒的健康問題鏈接，智力培養鏈接，或者是有關奶粉宣傳的鏈接，一本圖書，一個玩具的鏈接。因為父母不可能到每個欄目下去尋找關於8個月嬰兒的信息，他們可能在找到需要的問題後就離開網站了。如何盡可能留住訪問者，是網站設計者未來必須考慮的問題。

　　講到這裡，阿捷忽然覺得自己很厲害，居然會總結出這麼大一套理論什麼，皮厚?可能吧，這麼多高手都沒發言呢！有意見請來信[email protected]

　　下次我們繼續討論「確定網站的整體風格創意設計」，歡迎您的參與

接著前天的連載~

各位真是大好人呢

支持