?? 00413a.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%" height="1125"></td>
<td rowspan="2" height="1125">
<p><b class="green"><span class="sfont">確定網站的欄目和版塊</span></b><span class="sfont"><br>
<br>
《設計的思考》系列文章，今天開始寫第三篇。阿捷不是專業的網頁設計師，但阿捷將盡自己所能把這個系列文章寫好，盡可能將自己實踐過程中總結的經驗和心得告訴給大家，希望能給您一點收獲，一點啟發。文章中所列觀點如有不同意見，歡迎您來信討論，來信寄ajie@soim.com，謝謝。<br>
<br>
我們在前二篇文章里學習了定位網站主題和確立網站的CI形象。下面是否該進入實質性的設計制作階段呢？答案是：不能。經驗告訴我們，建立一個網站好比寫一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰；也好比造一座高樓，首先要設計好框架圖紙，才能使樓房結構合理。</span></p>
<p><span class="sfont"> 初學者(包括我自己:-)，最容易犯的錯誤就是：確定題材后立刻開始制作。當你一頁一頁制作完畢后才發現：網站結構不清晰，目錄龐雜，內容東一塊西一塊。結果不但瀏覽者看得糊涂，自己擴充和維護網站也相當困難，您的網站或許就此半途而廢，更糟糕的是：你因此失去了制作主頁的信心和興趣！<br>
<br>
所以，我們在動手制作網頁前，一定要考慮好以下三方面：<br>
1.確定欄目和版塊；<br>
2.確定網站的目錄結構和鏈接結構<br>
3.確定網站的整體風格創意設計</span></p>
<p><span class="sfont"> 今天我們首先來討論“確定網站的欄目和版塊”。<br>
<br>
網站的題材確定后，相信你已經收集和組織了許多相關的資料內容。你一定認為這些都是最好的，肯定能吸引網友們來瀏覽網站。但是你有沒有將最好的，最吸引人的內容放在最突出的位置呢？有沒有讓好東西在版面分布上占絕對優勢呢？</span></p>
<p><span class="sfont"> 我看見許多個人主頁的欄目(主菜單)并不是這樣的。舉個例子：有一個以提供動畫素材為主題的站點，它的主欄目是：關于站長，本站導航，動畫寶庫，本站論壇，本站留言本，聯系站長。首頁上寫著本站網址和版權申明(居然還有將本站設為首頁字樣)。最主要的，最吸引人的動畫素材在主欄目里占1/6，在首頁上一字沒提。我想即使這個站點的確有大量的，精美的動畫素材，也很難吸引瀏覽者繼續挖掘。<br>
<br>
欄目的實質是一個網站的大綱索引，索引應該將網站的主體明確顯示出來。在制定欄目的時候，要仔細考慮，合理安排。一般的網站欄目安排要注意以下幾方面：<br>
<br>
1.一定記住要緊扣你的主題！<br>
一般的做法是：將你的主題按一定的方法分類并將它們作為網站的主欄目。例如上面的例子，可以將欄目分為動物動畫，標志動畫，三維動畫，卡通動畫等，在首頁上標明最近更新的動畫。記住：主題欄目個數在總欄目中要占絕對優勢，這樣的網站顯的專業，主題突出，容易給人留下深刻印象。<br>
<br>
2.設一個最近更新或網站指南欄目<br>
如果你的首頁沒有安排版面放置最近更新內容信息，就有必要設立一個“最近更新”的欄目。這樣做是為了照顧常來的訪客，讓你的主頁更有人性化。</span></p>
<p><span class="sfont"> 如果你的主頁內容龐大(超過15MB)，層次較多，而又沒有站內的搜索引擎，建議您設置“本站指南”欄目。可以幫助初訪者快速找到他們想要的內容。<br>
<br>
3.設定一個可以雙向交流的欄目<br>
不需要很多，但一定要有。比如論壇，留言本，郵件列表等，可以讓瀏覽者留下他們的信息。有調查表明，提供雙向交流的站點比簡單的留一個"Email
me"的站點更具有親和力。<br>
<br>
4.設一個下載或常見問題回答欄目<br>
網絡的特點是信息共享。如果你看到一個站點有大量的優秀的有價值的資料，你肯定希望能一次性下載，而不是一頁一頁瀏覽存盤。“將心比心”在你自己的主頁上設置一個資料下載欄目，會得到大家的喜歡。有些站點為了廣告顯示量，一篇文章還要分幾頁顯示，我覺得遲早會因訪問量下降而淘汰(個人意見:)。另外，如果您的站點經常收到網友關于某方面的問題來信，你最好設立一個常見問題回答的欄目，既方便了網友，也可以節約自己更多時間用以學習。<br>
<br>
至于其他的輔助內容，如關于本站，版權信息等可以不放在主欄目里，以免沖淡主題。總結以上幾點，我們得出劃分欄目需要注意的是：<br>
<br>
●盡可能刪除與主題無關的欄目<br>
●盡可能將網站最有價值的內容列在欄目上<br>
●盡可能方便訪問者的瀏覽和查詢<br>
<br>
上面說的是欄目，我們再看看版塊設置。版塊比欄目的概念要大一些，每個版塊都有自己的欄目。舉個例子：網易的站點分新聞，體育，財經，娛樂，教育等版塊，每個版塊下面有各有自己的主欄目。一般的個人站點內容少，只有主欄目(主菜單)就夠了，不需要設置版塊。如果你覺得的確有必要設置版塊的，應該注意1.各版塊要有相對獨立性。2.各版塊要有相互關聯。3.版塊的內容要圍繞站點主題。關于版塊方面，主要是門戶站點等較大ICP需要考慮的問題，阿捷在此<br>
不再作展開討論。<br>
<br>
好，已經深夜了，今天就寫到這。阿捷下次繼續和大家探討如何"確定網站的目錄結構和鏈接結構"，謝謝。<br>
</span> </p>
<p align="center"><a href="00412a.htm">上一篇</a> <a href="00414a.htm">下一篇
</a>
<p align="center"><a href="index3.htm">[返回]</a>
</td>
<td width="1%" height="1125"></td>
</tr>
<tr>
<td width="2%"></td>
<td width="1%"></td>
</tr>
<tr>
<td width="2%"></td>
<td width="97%" align="center"> </td>
<td width="1%"></td>
</tr>
<tr>
<td width="2%"></td>
<td width="97%" align="center"> </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 + -