確定網站的目錄結構和鏈接結構
0 k# u; ^! L5 Q( K6 K
1 @; ?& c. }2 @! M8 o, l 大家好。這是《設計的思考》系列文章第四篇。如果你需要前幾期文章可以到索易下載《多媒體與網站開發》電子雜誌,也可以到我個人主頁《網頁設計師》瀏覽。0 G3 B4 R$ ~/ t6 ^
2 p# s6 [6 k2 d+ P
上篇講到:我們在動手製作網頁前,一定要考慮好以下三方面:
! K0 A" e/ ^, l: |# {; Z1.確定欄目和版塊;
& h6 M5 I5 ?# M' c2.確定網站的目錄結構和鏈接結構" t' m1 y5 d! N% ]3 `' a( t+ O+ G
3.確定網站的整體風格創意設計
. }( a, q; K1 s) s# y 今天我們繼續來討論「確定網站的目錄結構和鏈接結構」。
' H+ y X1 ]' y$ V4 g$ s4 @4 G; v 一.網站的目錄結構7 H6 `4 \' k0 ~+ Z- U. A4 M
5 ?- y3 {1 @6 q7 ?- }
網站的目錄是指你建立網站時創建的目錄。例如:在用frontpage98建立網站時都默認建立了根目錄和images子目錄。目錄的結構是一個容易忽略的問題,大多數站長都是未經規劃,隨意創建子目錄。目錄結構的好壞,對瀏覽者來說並沒有什麼太大的感覺,但是對於站點本身的上傳維護,內容未來的擴充和移植有著重要的影響。下面是建立目錄結構的一些建議:& a) ^- j% L8 X3 a; a' ]: J0 G
# a/ d$ C; Z( m9 d* g( z
●不要將所有文件都存放在根目錄下。2 P4 n) e1 X( o
有網友為了方便,將所有文件都放在根目錄下。這樣做造成的不利影響在於:
* `/ E+ F- c. v% v1.文件管理混亂。你常常搞不清哪些文件需要編輯和更新,哪些無用的文件可以刪除,哪些是相關聯的文件,影響工作效率。+ L; Y2 S1 m& Q E3 N6 G
2.上傳速度慢。服務器一般都會為根目錄建立一個文件索引。當您將所有文件都放在根目錄下,那麼即使你只上傳更新一個文件,服務器也需要將所有文件再檢索一遍,建立新的索引文件。很明顯,文件量越大,等待的時間也將越長。所以,給您的建議是:盡可能減少根目錄的文件存放數。
2 d6 m j8 t! ~: j! k. ? q" j" N( I) G1 w# L/ A* O
●按欄目內容建立子目錄。( N$ }$ y! }2 d+ Y3 ^
子目錄的建立,首先按主菜單欄目建立。例如:網頁教程類站點可以根據技術類別分別建立相應的目錄,像Flash,Dhtml,Javascript等;企業站點可以按公司簡介,產品介紹,價格,在線定單,反饋聯繫等建立相應目錄。
& B6 N* l% g9 W' g) S. m 其他的次要欄目,類似what's new,友情連接內容較多,需要經常更新的可以建立獨立的子目錄。而一些相關性強,不需要經常更新的欄目,例如:關於本站,關於站長,站點經歷等可以合併放在一個統一目錄下。; m- \% V+ a- _1 _ K
所有程序一般都存放在特定目錄。例如:CGI程序放在cgi-bin目錄。便於維護管理。所有需要下載的內容也最好放在一個目錄下。4 [# `0 y1 S5 \9 M, b" y2 u2 G
- Y2 ^( d; \, W+ k( V
●在每個主目錄下都建立獨立的images目錄。. h, S9 c# ~. b! c' H
默認的,一個站點根目錄下都有一個images目錄。剛開始學習主頁製作時,阿捷習慣將所有圖片都存放在這個目錄裡。可是後來發現很不方便,當我需要將某個主欄目打包供網友下載,或者將某個欄目刪除時,圖片的管理相當麻煩。經過實踐發現:為每個主欄目建立一個獨立的images目錄是最方便管理的。而根目錄下的images目錄只是用來放首頁和一些次要欄目的圖片。& p/ I' `6 _& k' M+ Y0 B2 ~
e9 k. e& F& i- M- b; m- n●目錄的層次不要太深。
* O5 j* M3 @- j" d" k" O; M 目錄的層次建議不要超過3層。原因很簡單,維護管理方便。% l& @' T1 U& @4 E3 p2 s
% P8 O( @7 l6 _% E( i9 ]6 G; D% X
其它需要注意的還有:( W* @" g' _% q( Q, Y0 ~0 P
1.不要使用中文目錄;網絡無國界,使用中文目錄可能對網址的正確顯示造成困難。" j' W# S5 ~6 d$ @, m
2.不要使用過長的目錄;儘管服務器支持長文件名,但是太長的目錄名不便於記憶。
. R3 I: ~2 j# b7 y3 Y3.盡量使用意義明確的目錄;上面的例子中,你可以用Flash,Dhtml,Javascript來建立目錄,也可以用1,2,3建立目錄,但是哪一個更明確,更便於記憶和管理呢?顯然是前者!
" M5 J" T" ]* n% j7 o
* ?) [, j- }$ u; o 隨著網頁技術的不斷發展,利用數據庫或者其他後台程序自動生成網頁越來越普遍,網站的目錄結構也必將飛躍到一個新的結構層次。1 r8 a. u0 G3 z
Z8 f" ~0 A B. W二.網站的鏈接結構! Z: x& k, U8 ^" U. x
& o/ e/ F x$ G5 Q* c 網站的鏈接結構是指頁面之間相互鏈接的拓撲結構。它建立在目錄結構基礎之上,但可以跨越目錄。形象的說:每個頁面都是一個固定點,鏈接則是在兩個固定點之間的連線。一個點可以和一個點連接,也可以和多個點連接。更重要的是,這些點並不是分佈在一個平面上,而是存在於一個立體的空間中。/ d& x1 c ` @! N& `& S
: m( z5 U8 _2 ~& c
●我們研究網站的鏈接結構的目的在於:用最少的鏈接,使得瀏覽最有效率。
# V& y u$ S: ?/ @. {1 [% X
$ a/ l3 `4 \" K 一般的,建立網站的鏈接結構有兩種基本方式:: q: {5 h+ ?- i: V+ O5 h" ]
1.樹狀鏈接結構(一對一)。類似DOS的目錄結構,首頁鏈接指向一級頁面,一級頁面鏈接指向二級頁面。立體結構看起來就像蒲公英。這樣的鏈接結構瀏覽時,一級級進入,一級級退出。優點是條理清晰,訪問者明確知道自己在什麼位置,不會"迷"路。缺點是瀏覽效率低,一個欄目下的子頁面到另一個欄目下的子頁面,必須繞經首頁。5 h2 `7 ~$ T$ \6 [! r
7 X" y! {# m7 N8 | i* z
2.星狀鏈接結構(一對多)。類似網絡服務器的鏈接,每個頁面相互之間都建立有鏈接。立體結構象東方明珠電視塔上的鋼球。這種鏈接結構的優點是瀏覽方便,隨時可以到達自己喜歡的頁面。缺點是鏈接太多,容易使瀏覽者迷路,搞不清自己在什麼位置,看了多少內容。- q8 c% v# g. t9 s# L* V, F
: t) r( U" o$ s 這兩種基本結構都只是理想方式,在實際的網站設計中,總是將這兩種結構混合起來使用。我們希望瀏覽者既可以方便快速的達到自己需要的頁面,又可以清晰的知道自己的位置。所以,最好的辦法是:$ v$ W) z' I; h6 w. j1 j- I9 a9 e+ Q
" l M) R4 }0 O2 e9 w
●首頁和一級頁面之間用星狀鏈接結構,一級和二級頁面之間用樹狀鏈接結構。
8 J- |" r7 c/ {$ _9 G' T$ U$ x7 [3 `, F8 Q$ [1 p7 m
舉個例子。一個新聞站點的頁面結構如下:8 H9 f! A$ ~7 q+ S- t
---------------------------------------------------
5 l% a+ a; y4 ^0 @1 N
5 a! x _6 v: H. x2 }0 c4 }一級頁面 二級頁面 7 V' y: d5 \& u
! V+ k1 t; G, @0 A" @財經新聞頁 -- [財經新聞1,財經新聞2...]
D( e0 d& L" _$ p/ A/ y/ |
8 k$ ?# _4 V7 M; t( T6 u( }$ s3 _首頁 -- 娛樂新聞頁 -- [娛樂新聞1,娛樂新聞2...]/ l& K% c7 m8 I' a" N
\ |5 c; F" \' X% ?0 A5 K
IT新聞頁 -- [IT新聞1,IT新聞2...]( C0 f/ l: Z Q' [' |
/ j, \8 i2 _6 `0 h6 }----------------------------------------------------4 L5 q- L1 s" w: o
其中,首頁,財經新聞頁,娛樂新聞頁,IT新聞頁之間是星狀鏈接,可以互相點擊,直接到達。而財經新聞頁和它的子頁面之間是樹狀連接,瀏覽財經新聞1後,你必須回到財經新聞頁,才能瀏覽IT新聞2。所以,有站點為了免去返回一級頁面的麻煩,將二級頁面直接用新開窗口(POP up windows)打開,瀏覽結束後關閉即可。
# \& J; j! q7 c* b0 P8 w) r, c1 R; h1 g& g2 ]: E, M
注意:以上我們都是用的三級頁面舉例。如果您的站點內容龐大,分類明細,需要超過三級頁面,那麼建議你在頁面裡顯示導航條,可以幫助瀏覽者明確自己所處的位置。就是您經常看到許多網站頁面頂部的,類似這樣:「您現在的位置是:首頁->財經新聞->股市信息->深圳股->深發展」
1 J1 J# @" Z- }) v+ b. C$ |. E2 U8 @, w7 j: f8 [" c* s6 j# R" K0 K6 i
關於鏈接結構的設計,在實際的網頁製作中是非常重要一環。採用什麼樣的鏈接結構直接影響到版面的佈局。例如你的主菜單放在什麼位置,是否每頁都需要放置,是否需要用分幀框架,是否需要加入返回首頁的鏈接。在連接結構確定後,再開始考慮鏈接的效果和形式,是採用下拉表單,還是用DHTML動態菜單等等。! D% [8 G$ T6 s; ?5 g, e; g2 x0 e& o
1 \; q# P! I9 M0 Y% a( d& d" ^ 隨著電子商務的推廣,網站競爭的越來越激烈,對鏈接結構設計的要求已經不僅僅局限於可以方便快速的瀏覽,更加注重個性化和相關性。例如,一個愛嬰主題網站裡,在8個月嬰兒的營養問題頁面上,你需要加入8個月嬰兒的健康問題鏈接,智力培養鏈接,或者是有關奶粉宣傳的鏈接,一本圖書,一個玩具的鏈接。因為父母不可能到每個欄目下去尋找關於8個月嬰兒的信息,他們可能在找到需要的問題後就離開網站了。如何盡可能留住訪問者,是網站設計者未來必須考慮的問題。- q, s: `, `3 ?5 G' W9 u
5 `1 l( C j6 r7 {
講到這裡,阿捷忽然覺得自己很厲害,居然會總結出這麼大一套理論什麼,皮厚?可能吧,這麼多高手都沒發言呢!有意見請來信[email protected]
" F# X" Y5 F& d* b9 E' i
3 A+ U. x% r: ?. o7 ~- q$ j4 c) u+ c 下次我們繼續討論「確定網站的整體風格創意設計」,歡迎您的參與 |
|