?? 00414a.htm
字號:
<html><!-- #BeginTemplate "/Templates/zpxs.dwt" -->
<head>
<title>|><| 太平洋電腦網 -> 網絡學院 -> 設計教室</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
-->
</style>
<link rel="stylesheet" href="/pcedu/style/text.css"></head>
<body bgcolor="#FFFFFF" topmargin=0 leftmargin=0 marginheight="0">
<script language="JavaScript" src="/pcedu/script/top.js">
</script>
<table width=760 border=0 cellspacing=0 cellpadding=0 align=center>
<tr>
<td width=194 height="56"><a href=http://www.pconline.com.cn><img src=http://www.pconline.com.cn/images/pconlinelogo.gif width=162 height=35 vspace=10 border=0></a></td>
<td width=406 height="56">
<script language="JavaScript" src="/pcedu/script/sj_ad.js">
</script>
</td>
<td width=158 align=right height="56">
<div align="right">
<script language="JavaScript" src="/pcedu/script/sj_ad1.js">
</script>
</div>
</td>
<td align=right width=2 height="56"> </td>
</tr>
</table>
<table border=0 cellpadding=0 cellspacing=0 width=760 align="center">
<tbody>
<tr valign=bottom>
<td rowspan=2 width=172><a href="/pcedu/"><img height=32 src="/pcedu/images/pcedu_lo.gif"
width=172 border="0"></a></td>
<td height=30 rowspan=2>
<table cellpadding=0 cellspacing=0 width="588" bgcolor="#FFA000" background="/pcedu/images/e_menu4.gif"border="0">
<tbody>
<tr valign="bottom">
<td height="17">
<script language="JavaScript" src="/pcedu/script/title_sj.js">
</script>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr></tr>
<tr bgcolor="#303880">
<td colspan=2 height=1 valign=bottom><img height=1
src="/pcedu/images/blank.gif" width=1></td>
</tr>
<tr>
<td colspan=2 height=5 valign=bottom><img height=5
src="/pcedu/images/blank.gif" width=1></td>
</tr>
</tbody>
</table>
<table width="760" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="170" valign="top">
<table border="0" width="170" height="100%"
cellspacing="1" bgcolor="#000000">
<tr bgcolor="#F8F8D2">
<td width="100%" valign="top">
<script language="JavaScript" src="/pcedu/script/left_sj0.js">
</script>
</td>
</tr>
</table>
</td>
<td width="10"> </td>
<td width="580" valign="top" class="article"> <!-- #BeginEditable "content" -->
<p> </p>
<p align="center"><b><font size="3" class="coffee">網站設計的思考（四）</font></b></p>
<p align="right">作者：<a href="mailto:fujie@163.net">阿捷</a></p>
<p align="right">出處：<a href="http://pageone.yeah.net" target="_blank">《網頁設計師》</a></p>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td rowspan="4">
<p><b class="green"><span class="sfont">確定網站的目錄結構和鏈接結構</span></b><span class="sfont"><br>
<br>
大家好。這是《設計的思考》系列文章第四篇。如果你需要前幾期文章可以到索易下載《多媒體與網站開發(fā)》電子雜志，也可以到我個人主頁《網頁設計師》瀏覽。<br>
<br>
上篇講到：我們在動手制作網頁前，一定要考慮好以下三方面：<br>
1.確定欄目和版塊；<br>
2.確定網站的目錄結構和鏈接結構<br>
3.確定網站的整體風格創(chuàng)意設計<br>
今天我們繼續(xù)來討論“確定網站的目錄結構和鏈接結構”。<br>
一.網站的目錄結構<br>
<br>
網站的目錄是指你建立網站時創(chuàng)建的目錄。例如：在用frontpage98建立網站時都默認建立了根目錄和images子目錄。目錄的結構是一個容易忽略的問題，大多數站長都是未經規(guī)劃，隨意創(chuàng)建子目錄。目錄結構的好壞，對瀏覽者來說并沒有什么太大的感覺，但是對于站點本身的上傳維護，內容未來的擴充和移植有著重要的影響。下面是建立目錄結構的一些建議：<br>
<br>
●不要將所有文件都存放在根目錄下。<br>
有網友為了方便，將所有文件都放在根目錄下。這樣做造成的不利影響在于：<br>
1.文件管理混亂。你常常搞不清哪些文件需要編輯和更新，哪些無用的文件可以刪除，哪些是相關聯的文件，影響工作效率。<br>
2.上傳速度慢。服務器一般都會為根目錄建立一個文件索引。當您將所有文件都放在根目錄下，那么即使你只上傳更新一個文件，服務器也需要將所有文件再檢索一遍，建立新的索引文件。很明顯，文件量越大，等待的時間也將越長。所以，給您的建議是：盡可能減少根目錄的文件存放數。<br>
<br>
●按欄目內容建立子目錄。<br>
子目錄的建立，首先按主菜單欄目建立。例如:網頁教程類站點可以根據技術類別分別建立相應的目錄，象Flash,Dhtml,Javascript等；企業(yè)站點可以按公司簡介，產品介紹，價格，在線定單，反饋聯系等建立相應目錄。<br>
其他的次要欄目，類似what's new，友情連接內容較多，需要經常更新的可以建立獨立的子目錄。而一些相關性強，不需要經常更新的欄目，例如：關于本站，關于站長，站點經歷等可以合并放在一個統一目錄下。<br>
所有程序一般都存放在特定目錄。例如：CGI程序放在cgi-bin目錄。便于維護管理。所有需要下載的內容也最好放在一個目錄下。<br>
<br>
●在每個主目錄下都建立獨立的images目錄。<br>
默認的，一個站點根目錄下都有一個images目錄。剛開始學習主頁制作時，阿捷習慣將所有圖片都存放在這個目錄里。可是后來發(fā)現很不方便，當我需要將某個主欄目打包供網友下載，或者將某個欄目刪除時，圖片的管理相當麻煩。經過實踐發(fā)現：為每個主欄目建立一個獨立的images目錄是最方便管理的。而根目錄下的images目錄只是用來放首頁和一些次要欄目的圖片。<br>
<br>
●目錄的層次不要太深。<br>
目錄的層次建議不要超過3層。原因很簡單，維護管理方便。<br>
<br>
其它需要注意的還有：<br>
1.不要使用中文目錄；網絡無國界，使用中文目錄可能對網址的正確顯示造成困難。<br>
2.不要使用過長的目錄；盡管服務器支持長文件名，但是太長的目錄名不便于記憶。<br>
3.盡量使用意義明確的目錄；上面的例子中，你可以用Flash,Dhtml,Javascript來建立目錄，也可以用1，2，3建立目錄，但是哪一個更明確，更便于記憶和管理呢？顯然是前者！<br>
<br>
隨著網頁技術的不斷發(fā)展，利用數據庫或者其他后臺程序自動生成網頁越來越普遍，網站的目錄結構也必將飛躍到一個新的結構層次。<br>
<br>
二.網站的鏈接結構<br>
<br>
網站的鏈接結構是指頁面之間相互鏈接的拓撲結構。它建立在目錄結構基礎之上，但可以跨越目錄。形象的說：每個頁面都是一個固定點，鏈接則是在兩個固定點之間的連線。一個點可以和一個點連接，也可以和多個點連接。更重要的是，這些點并不是分布在一個平面上，而是存在于一個立體的空間中。<br>
<br>
●我們研究網站的鏈接結構的目的在于：用最少的鏈接，使得瀏覽最有效率。<br>
<br>
一般的，建立網站的鏈接結構有兩種基本方式：<br>
1.樹狀鏈接結構（一對一）。類似DOS的目錄結構，首頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。立體結構看起來就象蒲公英。這樣的鏈接結構瀏覽時，一級級進入，一級級退出。優(yōu)點是條理清晰，訪問者明確知道自己在什么位置，不會"迷"路。缺點是瀏覽效率低，一個欄目下的子頁面到另一個欄目下的子頁面，必須繞經首頁。<br>
<br>
2.星狀鏈接結構（一對多）。類似網絡服務器的鏈接，每個頁面相互之間都建立有鏈接。立體結構象東方明珠電視塔上的鋼球。這種鏈接結構的優(yōu)點是瀏覽方便，隨時可以到達自己喜歡的頁面。缺點是鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了多少內容。<br>
<br>
這兩種基本結構都只是理想方式，在實際的網站設計中，總是將這兩種結構混合起來使用。我們希望瀏覽者既可以方便快速的達到自己需要的頁面，又可以清晰的知道自己的位置。所以，最好的辦法是：<br>
<br>
●首頁和一級頁面之間用星狀鏈接結構，一級和二級頁面之間用樹狀鏈接結構。<br>
<br>
舉個例子。一個新聞站點的頁面結構如下：<br>
---------------------------------------------------<br>
<br>
一級頁面 二級頁面 <br>
<br>
財經新聞頁 -- [財經新聞1，財經新聞2...]<br>
/ |<br>
首頁 -- 娛樂新聞頁 -- [娛樂新聞1，娛樂新聞2...]<br>
\ |<br>
IT新聞頁 -- [IT新聞1，IT新聞2...]<br>
<br>
----------------------------------------------------<br>
其中，首頁，財經新聞頁，娛樂新聞頁，IT新聞頁之間是星狀鏈接，可以互相點擊，直接到達。而財經新聞頁和它的子頁面之間是樹狀連接，瀏覽財經新聞1后，你必須回到財經新聞頁，才能瀏覽IT新聞2。所以,有站點為了免去返回一級頁面的麻煩，將二級頁面直接用新開窗口(POP
up windows)打開，瀏覽結束后關閉即可。<br>
<br>
注意：以上我們都是用的三級頁面舉例。如果您的站點內容龐大，分類明細，需要超過三級頁面，那么建議你在頁面里顯示導航條，可以幫助瀏覽者明確自己所處的位置。就是您經常看到許多網站頁面頂部的，類似這樣：“您現在的位置是：首頁->財經新聞->股市信息->深圳股->深發(fā)展”<br>
<br>
關于鏈接結構的設計，在實際的網頁制作中是非常重要一環(huán)。采用什么樣的鏈接結構直接影響到版面的布局。例如你的主菜單放在什么位置，是否每頁都需要放置，是否需要用分幀框架，是否需要加入返回首頁的鏈接。在連接結構確定后，再開始考慮鏈接的效果和形式，是采用下拉表單，還是用DHTML動態(tài)菜單等等。<br>
<br>
隨著電子商務的推廣，網站競爭的越來越激烈，對鏈接結構設計的要求已經不僅僅局限于可以方便快速的瀏覽，更加注重個性化和相關性。例如，一個愛嬰主題網站里，在8個月嬰兒的營養(yǎng)問題頁面上，你需要加入8個月嬰兒的健康問題鏈接，智力培養(yǎng)鏈接，或者是有關奶粉宣傳的鏈接，一本圖書，一個玩具的鏈接。因為父母不可能到每個欄目下去尋找關于8個月嬰兒的信息，他們可能在找到需要的問題后就離開網站了。如何盡可能留住訪問者，是網站設計者未來必須考慮的問題。<br>
<br>
講到這里，阿捷忽然覺得自己很厲害，居然會總結出這么大一套理論:)什么，皮厚?可能吧，這么多高手都沒發(fā)言呢！有意見請來信ajie@soim.com<br>
<br>
下次我們繼續(xù)討論“確定網站的整體風格創(chuàng)意設計”，歡迎您的參與。</span></p>
<p align="center"><span class="sfont"><a href="00413a.htm">上一篇</a> <a href="00415a.htm">下一篇</a><br>
</span> </p>
<p align="center"><span class="sfont"> <a href="index3.htm">[返回]</a></span></p>
<p align="center">
</td>
<td width="1%"></td>
</tr>
<tr>
<td width="2%"></td>
<td width="1%"></td>
</tr>
<tr>
<td width="2%"></td>
<td width="1%"></td>
</tr>
<tr>
<td width="2%"></td>
<td width="1%"></td>
</tr>
</table>
<!-- #EndEditable -->
<table width="100%" border="0">
<tr class="sfont">
<td>
<div align="center"><a href="javascript:history.go(-1)">[返回]</a> </div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr noshade size="2" width="760">
<p align="center">
<script language="JavaScript" src="/pcedu/script/title_edu.js">
</script>
<br>
版權所有©2000 太平洋電腦網<br>
<font face="Arial, Helvetica, sans-serif"><a href=mailto:webmaster@pconline.com.cn>
<script>
document.write("<a href=http://best.netease.com/cgi-bin/view/viewbasic.cgi?exp target=_blank><img src=http://best.netease.com/cgi-bin/log.cgi?user=exp&refer="+escape(document.referrer)+"&cur="+escape(document.URL)+" border=0 alt='網易中文排行榜' width=1 height=1></a>");
</script>
</a></font><font face="Arial, Helvetica, sans-serif"><a href=mailto:webmaster@pconline.com.cn>webmaster@pconline.com.cn
<script language="">document.write("<a href=http://best.netease.com/cgi-bin/view/viewbasic.cgi?pconline1 target=_blank><img src=http://best.netease.com/cgi-bin/log.cgi?user=pconline1&refer="+escape(document.referrer)+"&cur="+escape(document.URL)+" border=0 width=1 height=1 ></a>");</script>
</a>
<script language="">
document.write("<a href=http://www0.pconline.com.cn:8810/pccount/index.php target=_blank><img src=http://www0.pconline.com.cn:8810/cgi-bin/test.cgi?user=pcedu&refer="+escape(document.referrer)+"&cur="+escape(document.URL)+" border=0 width=0 height=0 alt='' ></a>");
</script>
</font></p>
</body>
<!-- #EndTemplate --></html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -