網站設計，包含的內容非常多。大體分兩個方面:

　　一方面是純網站本身的設計比如文字排版，圖片制作，平面設計，三維立體設計，靜態無聲圖文，動態有聲影像等;另一方面是網站的延伸設計，包括網站的主題定位和瀏覽群的定位，智能交互，制作策劃，形象包裝，宣傳營銷等等。

　　下面是大致的提綱:

　　1.定位你的網站主題和名稱;

　　2.定位你的網站CI形象;

　　3.確定你的欄目和版塊;

　　4.網站的整體風格創意設計

　　5.網站的層次結構和鏈接結構

　　6.首頁的設計

　　7.版面布局的竅門

　　8.色彩的搭配

　　9.效果與速度

　　10.替瀏覽者考慮

　　11.細微之處見功力

　　12.建設完成度與推出時間

　　13.交互性與親和度

　　14.考慮不同的瀏覽器和分辨率

　　15.字體的設置和表格的嵌套

　　16.新技術的運用取舍

　　17.設計好你的banner和位置

　　18.語句文字--融入感情

　　19.對網站設計初學者的建議

　　以上是本“系列”文章的提綱，會根據實際撰寫情況作些變動。每星期一篇。我們開始之前，首先明確幾個前提:

　　一.網站設計與網站制作。我們說網站“設計”而不是網站“制作”，它們的區別在于設計是一個思考的過程，而制作只是將思考的結果表現出來。一個成功的網站首先需要一個優秀的設計，然后輔之優秀的制作。設計是網站的核心和靈魂，一個相同的設計可以有多種制作表現的方式。

　　二.我們說的“網站”是指有確定主題和明確目的的實用性站點，不包括純表現類或者純文字類網站。

　　三.在文章中，可能舉例說明或點評到某些具體站點。

　　一:定位你的網站主題和名稱

　　設計一個站點，首先遇到的問題就是定位網站主題。

　　所謂主題也就是你的網站的題材。網絡上的網站題材千奇百怪,琳瑯滿目。只要你想的到，就可以把它制作出來。下面是美國《個人電腦》雜志(PC Magazine)評出的99年度排名前100位的全美知名網站的十類題材，對我們有一些參考價值。

　　第1類:網上求職

　　第2類:網上聊天/即時信息/ ICQ

　　第3類:網上社區/討論 / 郵件列表

　　第4類:計算機技術

　　第5類:網頁/ 網站開發

　　第6類:娛樂網站

　　第7類:旅行

　　第8類:參考 /資訊

　　第9類:家庭/教育

　　第10類:生活/時尚

　　每個大類都可以繼續細分，比如娛樂類再分為體育 /電影/ 音樂大類，音樂又可以按格式分為MP3，VQF，Ra，按表現形式分古典，現代，搖滾等。以上都只是最常見的題材，還有許多專業的，另類的，獨特的題材可以選擇，比如中醫，熱帶魚，天氣預報等等，同時，各個題材相聯系和交叉結合可以產生新得題材，例如旅游論壇(旅游+討論)，經典入球播放(足球+影視)按這樣分下去，題材可以有成千上萬個，你不會再為題材重復，難以選擇而煩惱了吧:)

　　對于題材的選擇，我的建議是:

　　1.主題要小而精。定位要小，內容要精。如果你想制作一個包羅萬象的站點，把所有您認為精彩的東西都放在上面，那么往往會事與愿違，給人的感覺是沒有主題，沒有特色，樣樣有卻樣樣都很膚淺，因為您不可能有那么多的精力去維護它。網絡的最大特點就是新和快，目前最熱門的個人主頁都是天天更新甚至幾小時更新一次。最新的調查結果也顯示，網絡上的“主題站”比“萬全站”更受人們喜愛，就好比專賣店和百貨商店，如果我需要買某方面的東西，肯定會選擇專買店。再舉個例子，我的一位網友KK希望制作文學方面的題材，但是文學也包括許多許多內容，有小說，詩歌，散文;有科幻，武俠，推理;阿捷仔細了解了他的擅長和想要提供的主要內容，最后將題材定位在網絡文學上，刪除了原有的一些無關的文學作品，集中擴大和整理網絡文學作品。網站推出后，很快受到大家的喜愛。

　　2.題材最好是你自己擅長或者喜愛的內容。比如:您對擅長編程，就可以建立一個編程愛好者網站;對足球感興趣，可以報道最新的戰況，球星動態等。這樣在制作時，才不會覺得無聊或者力不從心。興趣是制作網站的動力，沒有熱情，很難設計制作出杰出的作品。

　　3.題材不要太濫或者目標太高。“太濫”是指到處可見，人人都有的題材;比如軟件下載，免費信息。“目標太高”是指在這一題材上已經有非常優秀，知名度很高的站點，你要超過它是很困難的。除非你下決心和有實力競爭并超過它，記住，在互聯網上只有第一，人們往往只記得最好的網站，第二第三名的印象則會淺得多。

　　OK，如果你已經有一個絕妙的主意了，那我們開始為網站起名字。您可能認為起名字與網站設計無關，其實網站名稱也是網站設計的一部分，而且是很關鍵的一個要素。你來看，“電腦學習室”和“電腦之家”顯然是后者簡練;“迷笛樂園”和“MIDI樂園”顯然是后者明晰;“兒童天地”和“中國幼兒園”顯然是后者大氣。我們都知道PIIICUP的中文名稱“奔騰”，如果改為“奔跑”，可能就沒有今天這么“火”了。和現實生活中一樣，網站名稱是否正氣，響亮，易記，對網站的形象和宣傳推廣也有很大影響。一般的建議是:

　　1. 名稱要正。這個“正”是阿捷自己的說法，其實就是要合法，和理，和情。不能用反動的，色情的，迷信的，危害社會安全的名詞語句。

　　2. 名稱要易記。根據中文網站瀏覽者的特點，除非特定需要，網站名稱最好用中文名稱，不要使用英文或者中英文混合型名稱。例如:beyond studio和超越工作室，后者更親切好記。另外，網站名稱的字數應該控制在六個字(最好四個字)以內，比如“XX閣”“XX設計室”，四個字的可以用成語，如“一網打進”。字數少還有個好處，一般友情鏈接的小logo尺寸是88X31，而六個字的寬度是78左右，適合于其他站點的鏈接排版。

　　3. 名稱要有特色。名稱平實就可以接受，如果能體現一定的內涵，給瀏覽者更多的視覺沖擊和空間想象力，則為上品。這里舉幾個阿捷認為很好的名稱:音樂前衛，網頁陶吧，天籟絕音。在體現出網站主題的同時，能點出特色之處。

　　總之，定位題材和名稱是設計一個網站的第一步，也是很重要的一部分。如果能找到一個滿意的名稱，花一天時間翻字典也是值得的。

　　定位你的網站CI形象。

　　所謂CI，是借用的廣告術語。(CI是英文corporate identity的縮寫)，意思是通過視覺來統一企業的形象。現實生活中的CI策劃比比皆是，杰出的例子如:可口可樂公司，全球統一的標志，色彩和產品包裝，給我們的印象極為深刻。更多的例子如SONY,三菱，麥當勞等等。

　　一個杰出的網站，和實體公司一樣，也需要整體的形象包裝和設計。準確的，有創意的CI 設計，對網站的宣傳推廣有事半功倍的效果。在您的網站主題和名稱定下來之后，需要思考的就是網站的CI形象。

　　1.設計網站的標志(logo).首先你需要設計制作一個網站的標志(logo)。就如同商標一樣，logo是你站點特色和內涵的集中體現，看見logo就讓大家聯想起你的站點。注意:這里的logo不是指88X31的小圖標banner,而是網站的標志。

　　標志可以是中文，英文字母，可以是符號，圖案，可以是動物或者人物等等。比如:soim是用soim的英文作為標志，新浪用字母sina+眼睛作為標志。標志的設計創意來自你網站的名稱和內容。

　　(1).網站有代表性的人物，動物，花草，可以用它們作為設計的藍本，加以卡通化和藝術化，例如迪斯尼的米老鼠，搜狐的卡通狐貍，鯊威體壇的籃球鯊魚。

　　(2).網站有專業性的，可以以本專業有代表的物品作為標志。比如中國銀行的銅板標志，奔馳汽車的方向盤標志。

　　(3).最常用和最簡單的方式是用自己網站的英文名稱作標志。采用不同的字體， 字母的變形，字母的組合可以很容易制作好自己的標志。

　　2.設計網站的標準色彩。網站給人的第一印象來自視覺沖擊，確定網站的標準色彩是相當重要的一步。不同的色彩搭配產生不同的效果，并可能影響到訪問者的情緒。

　　“標準色彩”是指能體現網站型象和延伸內涵的色彩。舉個實際的例子就明白了:IBM的深藍色，肯得基的紅色條型，windows視窗標志上的紅藍黃綠色塊，都使我們覺得很貼切，很和諧。如果將IBM改用綠色或金黃色，我們會有什么感覺?

　　一般來說，一個網站的標準色彩不超過3種，太多則讓人眼花繚亂。標準色彩要用于網站的標志，標題，主菜單和主色塊。給人以整體統一的感覺。至于其它色彩也可以使用，只是作為點綴和襯托，絕不能喧賓奪主。

　　一般來說，適合于網頁標準色的顏色有:藍色，黃/橙色，黑/灰/白色三大系列色。

　　3.設計網站的標準字體。和標準色彩一樣，標準字體是指用于標志，標題，主菜單的特有字體。一般我們網頁默認的字體是宋體。為了體現站點的“與眾不同”和特有風格，我們可以根據需要選擇一些特別字體。例如，為了體現專業可以使用粗仿宋體，體現設計精美可以用廣告體，體現親切隨意可以用手寫體等等。當然這些都是阿捷的個人看法，你可以根據自己網站所表達的內涵，選擇更貼切的字體。目前常見的中文字體有二三十種，常見的英文字體有近百種。需要說明的是:使用非默認字體只能用圖片的形式，因為很可能瀏覽者的PC里沒有安裝你的特別字體，那么您的辛苦設計制作便付之東流啦!

　　4.設計網站的宣傳標語。也可以說是網站的精神，網站的目標。用一句話甚至一個詞來高度概括。類似實際生活中的廣告金句。例如:鵲巢的“味道好極了”;麥斯威爾的“好東西和好朋友一起分享”;Intel的“給你一個奔騰的心”。

　　以上四方面:標志，色彩，字體，標語，是一個網站樹立CI形象的關鍵，確切的說是網站的表面文章，設計并完成這幾步，你的網站將脫胎換骨，整體形象有一個提高。形象地說:你從一個土氣的農民轉變為一位西裝革履的白領人士。(注意:我們只是以平面靜態來設計CI,還沒有引入聲音，三維立體等因素。)

　　確定網站的欄目和版塊

　　經驗告訴我們，建立一個網站好比寫一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰;也好比造一座高樓，首先要設計好框架圖紙，才能使樓房結構合理。

　　初學者，最容易犯的錯誤就是:確定題材后立刻開始制作。當你一頁一頁制作完畢后才發現:網站結構不清晰，目錄龐雜，內容東一塊西一塊。結果不但瀏覽者看得糊涂，自己擴充和維護網站也相當困難，您的網站或許就此半途而廢，更糟糕的是:你因此失去了制作主頁的信心和興趣!

　　所以，我們在動手制作網頁前，一定要考慮好以下三方面:

　　1.確定欄目和版塊;

　　2.確定網站的目錄結構和鏈接結構

　　3.確定網站的整體風格創意設計

　　今天我們首先來討論“確定網站的欄目和版塊”。

　　網站的題材確定后，相信你已經收集和組織了許多相關的資料內容。你一定認為這些都是最好的，肯定能吸引網友們來瀏覽網站。但是你有沒有將最好的，最吸引人的內容放在最突出的位置呢?有沒有讓好東西在版面分布上占絕對優勢呢?

　　我看見許多個人主頁的欄目(主菜單)并不是這樣的。舉個例子:有一個以提供動畫素材為主題的站點，它的主欄目是:關于站長，本站導航，動畫寶庫，本站論壇，本站留言本，聯系站長。首頁上寫著本站網址和版權申明(居然還有將本站設為首頁字樣)。最主要的，最吸引人的動畫素材在主欄目里占1/6，在首頁上一字沒提。我想即使這個站點的確有大量的，精美的動畫素材，也很難吸引瀏覽者繼續挖掘。

　　欄目的實質是一個網站的大綱索引，索引應該將網站的主體明確顯示出來。在制定欄目的時候，要仔細考慮，合理安排。一般的網站欄目安排要注意以下幾方面:

　　1.一定記住要緊扣你的主題!

　　一般的做法是:將你的主題按一定的方法分類并將它們作為網站的主欄目。例如上面的例子，可以將欄目分為動物動畫，標志動畫，三維動畫，卡通動畫等，在首頁上標明最近更新的動畫。記住:主題欄目個數在總欄目中要占絕對優勢，這樣的網站顯的專業，主題突出，容易給人留下深刻印象。

　　2.設一個最近更新或網站指南欄目

　　如果你的首頁沒有安排版面放置最近更新內容信息，就有必要設立一個“最近更新”的欄目。這樣做是為了照顧常來的訪客，讓你的主頁更有人性化。

　　如果你的主頁內容龐大(超過15MB)，層次較多，而又沒有站內的搜索引擎，建議您設置“本站指南”欄目。可以幫助初訪者快速找到他們想要的內容。

　　3.設定一個可以雙向交流的欄目

　　不需要很多，但一定要有。比如論壇，留言本，郵件列表等，可以讓瀏覽者留下他們的信息。有調查表明，提供雙向交流的站點比簡單的留一個"Email me"的站點更具有親和力。

　　4.設一個下載或常見問題回答欄目

　　網絡的特點是信息共享。如果你看到一個站點有大量的優秀的有價值的資料，你肯定希望能一次性下載，而不是一頁一頁瀏覽存盤。“將心比心”在你自己的主頁上設置一個資料下載欄目，會得到大家的喜歡。有些站點為了廣告顯示量，一篇文章還要分幾頁顯示，我覺得遲早會因訪問量下降而淘汰(個人意見:)。另外，如果您的站點經常收到網友關于某方面的問題來信，你最好設立一個常見問題回答的欄目，既方便了網友，也可以節約自己更多時間用以學習。

　　至于其他的輔助內容，如關于本站，版權信息等可以不放在主欄目里，以免沖淡主題。總結以上幾點，我們得出劃分欄目需要注意的是:

　　●盡可能刪除與主題無關的欄目

　　●盡可能將網站最有價值的內容列在欄目上

　　●盡可能方便訪問者的瀏覽和查詢

　　上面說的是欄目，我們再看看版塊設置。版塊比欄目的概念要大一些，每個版塊都有自己的欄目。舉個例子:網易的站點分新聞，體育，財經，娛樂，教育等版塊，每個版塊下面有各有自己的主欄目。一般的個人站點內容少，只有主欄目(主菜單)就夠了，不需要設置版塊。如果你覺得的確有必要設置版塊的，應該注意1.各版塊要有相對獨立性。2.各版塊要有相互關聯。3.版塊的內容要圍繞站點主題。關于版塊方面，主要是門戶站點等較大ICP需要考慮的問題，阿捷在此

　　不再作展開討論。

　　確定網站的目錄結構和鏈接結構

　　上篇講到:我們在動手制作網頁前，一定要考慮好以下三方面:

　　1.確定欄目和版塊;

　　2.確定網站的目錄結構和鏈接結構

　　3.確定網站的整體風格創意設計

　　今天我們繼續來討論“確定網站的目錄結構和鏈接結構”。

　　一.網站的目錄結構

　　網站的目錄是指你建立網站時創建的目錄。例如:在用frontpage98建立網站時都默認建立了根目錄和images子目錄。目錄的結構是一個容易忽略的問題，大多數站長都是未經規劃，隨意創建子目錄。目錄結構的好壞，對瀏覽者來說并沒有什么太大的感覺，但是對于站點本身的上傳維護，內容未來的擴充和移植有著重要的影響。下面是建立目錄結構的一些建議:

　　●不要將所有文件都存放在根目錄下。

　　有網友為了方便，將所有文件都放在根目錄下。這樣做造成的不利影響在于:

　　1.文件管理混亂。你常常搞不清哪些文件需要編輯和更新，哪些無用的文件可以刪除，哪些是相關聯的文件，影響工作效率。

　　2.上傳速度慢。服務器一般都會為根目錄建立一個文件索引。當您將所有文件都放在根目錄下，那么即使你只上傳更新一個文件，服務器也需要將所有文件再檢索一遍，建立新的索引文件。很明顯，文件量越大，等待的時間也將越長。所以，給您的建議是:盡可能減少根目錄的文件存放數。

　　●按欄目內容建立子目錄。

　　子目錄的建立，首先按主菜單欄目建立。例如:網頁教程類站點可以根據技術類別分別建立相應的目錄，象Flash,Dhtml,javascript等;企業站點可以按公司簡介，產品介紹，價格，在線定單，反饋聯系等建立相應目錄。

　　其他的次要欄目，類似what's new，友情連接內容較多，需要經常更新的可以建立獨立的子目錄。而一些相關性強，不需要經常更新的欄目，例如:關于本站，關于站長，站點經歷等可以合并放在一個統一目錄下。

　　所有程序一般都存放在特定目錄。例如:CGI程序放在cgi-bin目錄。便于維護管理。所有需要下載的內容也最好放在一個目錄下。

　　●在每個主目錄下都建立獨立的images目錄。

　　默認的，一個站點根目錄下都有一個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個月嬰兒的信息，他們可能在找到需要的問題后就離開網站了。如何盡可能留住訪問者，是網站設計者未來必須考慮的問題。