網(wǎng)站設計，包含的內(nèi)容非常多。大體分兩個方面:

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

　　下面是大致的提綱:

　　1.定位你的網(wǎng)站主題和名稱;

　　2.定位你的網(wǎng)站CI形象;

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

　　4.網(wǎng)站的整體風格創(chuàng)意設計

　　5.網(wǎng)站的層次結(jié)構(gòu)和鏈接結(jié)構(gòu)

　　6.首頁的設計

　　7.版面布局的竅門

　　8.色彩的搭配

　　9.效果與速度

　　10.替瀏覽者考慮

　　11.細微之處見功力

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

　　13.交互性與親和度

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

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

　　16.新技術的運用取舍

　　17.設計好你的banner和位置

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

　　19.對網(wǎng)站設計初學者的建議

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

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

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

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

　　一:定位你的網(wǎng)站主題和名稱

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

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

　　第1類:網(wǎng)上求職

　　第2類:網(wǎng)上聊天/即時信息/ ICQ

　　第3類:網(wǎng)上社區(qū)/討論 / 郵件列表

　　第4類:計算機技術

　　第5類:網(wǎng)頁/ 網(wǎng)站開發(fā)

　　第6類:娛樂網(wǎng)站

　　第7類:旅行

　　第8類:參考 /資訊

　　第9類:家庭/教育

　　第10類:生活/時尚

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

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

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

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

　　3.題材不要太濫或者目標太高?！疤珵E”是指到處可見，人人都有的題材;比如軟件下載，免費信息?！澳繕颂摺笔侵冈谶@一題材上已經(jīng)有非常優(yōu)秀，知名度很高的站點，你要超過它是很困難的。除非你下決心和有實力競爭并超過它，記住，在互聯(lián)網(wǎng)上只有第一，人們往往只記得最好的網(wǎng)站，第二第三名的印象則會淺得多。

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

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

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

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

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

　　定位你的網(wǎng)站CI形象。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　確定網(wǎng)站的欄目和版塊

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

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

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

　　1.確定欄目和版塊;

　　2.確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)

　　3.確定網(wǎng)站的整體風格創(chuàng)意設計

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

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

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

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

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

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

　　2.設一個最近更新或網(wǎng)站指南欄目

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

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

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

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

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

　　網(wǎng)絡的特點是信息共享。如果你看到一個站點有大量的優(yōu)秀的有價值的資料，你肯定希望能一次性下載，而不是一頁一頁瀏覽存盤?！皩⑿谋刃摹痹谀阕约旱闹黜撋显O置一個資料下載欄目，會得到大家的喜歡。有些站點為了廣告顯示量，一篇文章還要分幾頁顯示，我覺得遲早會因訪問量下降而淘汰(個人意見:)。另外，如果您的站點經(jīng)常收到網(wǎng)友關于某方面的問題來信，你最好設立一個常見問題回答的欄目，既方便了網(wǎng)友，也可以節(jié)約自己更多時間用以學習。

　　至于其他的輔助內(nèi)容，如關于本站，版權(quán)信息等可以不放在主欄目里，以免沖淡主題?？偨Y(jié)以上幾點，我們得出劃分欄目需要注意的是:

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

　　●盡可能將網(wǎng)站最有價值的內(nèi)容列在欄目上

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

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

　　不再作展開討論。

　　確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)

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

　　1.確定欄目和版塊;

　　2.確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)

　　3.確定網(wǎng)站的整體風格創(chuàng)意設計

　　今天我們繼續(xù)來討論“確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)”。

　　一.網(wǎng)站的目錄結(jié)構(gòu)

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

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

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

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

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

　　●按欄目內(nèi)容建立子目錄。

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

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

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

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

　　默認的，一個站點根目錄下都有一個images目錄。剛開始學習主頁制作時，阿捷習慣將所有圖片都存放在這個目錄里。可是后來發(fā)現(xiàn)很不方便，當我需要將某個主欄目打包供網(wǎng)友下載，或者將某個欄目刪除時，圖片的管理相當麻煩。經(jīng)過實踐發(fā)現(xiàn):為每個主欄目建立一個獨立的images目錄是最方便管理的。而根目錄下的images目錄只是用來放首頁和一些次要欄目的圖片。

　　●目錄的層次不要太深。

　　目錄的層次建議不要超過3層。原因很簡單，維護管理方便。

　　其它需要注意的還有:

　　1.不要使用中文目錄;網(wǎng)絡無國界，使用中文目錄可能對網(wǎng)址的正確顯示造成困難。

　　2.不要使用過長的目錄;盡管服務器支持長文件名，但是太長的目錄名不便于記憶。

　　3.盡量使用意義明確的目錄;上面的例子中，你可以用Flash,Dhtml,javascript來建立目錄，也可以用1，2，3建立目錄，但是哪一個更明確，更便于記憶和管理呢?顯然是前者!

　　隨著網(wǎng)頁技術的不斷發(fā)展，利用數(shù)據(jù)庫或者其他后臺程序自動生成網(wǎng)頁越來越普遍，網(wǎng)站的目錄結(jié)構(gòu)也必將飛躍到一個新的結(jié)構(gòu)層次。

　　二.網(wǎng)站的鏈接結(jié)構(gòu)

　　網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接的拓撲結(jié)構(gòu)。它建立在目錄結(jié)構(gòu)基礎之上，但可以跨越目錄。形象的說:每個頁面都是一個固定點，鏈接則是在兩個固定點之間的連線。一個點可以和一個點連接，也可以和多個點連接。更重要的是，這些點并不是分布在一個平面上，而是存在于一個立體的空間中。

　　●我們研究網(wǎng)站的鏈接結(jié)構(gòu)的目的在于:用最少的鏈接，使得瀏覽最有效率。

　　一般的，建立網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本方式:

　　1.樹狀鏈接結(jié)構(gòu)(一對一)。類似DOS的目錄結(jié)構(gòu)，首頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。立體結(jié)構(gòu)看起來就象蒲公英。這樣的鏈接結(jié)構(gòu)瀏覽時，一級級進入，一級級退出。優(yōu)點是條理清晰，訪問者明確知道自己在什么位置，不會"迷"路。缺點是瀏覽效率低，一個欄目下的子頁面到另一個欄目下的子頁面，必須繞經(jīng)首頁。

　　2.星狀鏈接結(jié)構(gòu)(一對多)。類似網(wǎng)絡服務器的鏈接，每個頁面相互之間都建立有鏈接。立體結(jié)構(gòu)象東方明珠電視塔上的鋼球。這種鏈接結(jié)構(gòu)的優(yōu)點是瀏覽方便，隨時可以到達自己喜歡的頁面。缺點是鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了多少內(nèi)容。

　　這兩種基本結(jié)構(gòu)都只是理想方式，在實際的網(wǎng)站設計中，總是將這兩種結(jié)構(gòu)混合起來使用。我們希望瀏覽者既可以方便快速的達到自己需要的頁面，又可以清晰的知道自己的位置。所以，最好的辦法是:

　　●首頁和一級頁面之間用星狀鏈接結(jié)構(gòu)，一級和二級頁面之間用樹狀鏈接結(jié)構(gòu)。

　　舉個例子。一個新聞站點的頁面結(jié)構(gòu)如下:

　　---------------------------------------------------

　　一級頁面 二級頁面

　　財經(jīng)新聞頁 -- [財經(jīng)新聞1，財經(jīng)新聞2...]

　　/ |

　　首頁 -- 娛樂新聞頁 -- [娛樂新聞1，娛樂新聞2...]

　　\ |

　　IT新聞頁 -- [IT新聞1，IT新聞2...]

　　----------------------------------------------------

　　其中，首頁，財經(jīng)新聞頁，娛樂新聞頁，IT新聞頁之間是星狀鏈接，可以互相點擊，直接到達。而財經(jīng)新聞頁和它的子頁面之間是樹狀連接，瀏覽財經(jīng)新聞1后，你必須回到財經(jīng)新聞頁，才能瀏覽IT新聞2。所以,有站點為了免去返回一級頁面的麻煩，將二級頁面直接用新開窗口(POP up windows)打開，瀏覽結(jié)束后關閉即可。

　　注意:以上我們都是用的三級頁面舉例。如果您的站點內(nèi)容龐大，分類明細，需要超過三級頁面，那么建議你在頁面里顯示導航條，可以幫助瀏覽者明確自己所處的位置。就是您經(jīng)?？吹皆S多網(wǎng)站頁面頂部的，類似這樣:“您現(xiàn)在的位置是:首頁->財經(jīng)新聞->股市信息->深圳股->深圳發(fā)展”。

　　關于鏈接結(jié)構(gòu)的設計，在實際的網(wǎng)頁制作中是非常重要一環(huán)。采用什么樣的鏈接結(jié)構(gòu)直接影響到版面的布局。例如你的主菜單放在什么位置，是否每頁都需要放置，是否需要用分幀框架，是否需要加入返回首頁的鏈接。在連接結(jié)構(gòu)確定后，再開始考慮鏈接的效果和形式，是采用下拉表單，還是用DHTML動態(tài)菜單等等。

　　隨著電子商務的推廣，網(wǎng)站競爭的越來越激烈，對鏈接結(jié)構(gòu)設計的要求已經(jīng)不僅僅局限于可以方便快速的瀏覽，更加注重個性化和相關性。例如，一個愛嬰主題網(wǎng)站里，在8個月嬰兒的營養(yǎng)問題頁面上，你需要加入8個月嬰兒的健康問題鏈接，智力培養(yǎng)鏈接，或者是有關奶粉宣傳的鏈接，一本圖書，一個玩具的鏈接。因為父母不可能到每個欄目下去尋找關于8個月嬰兒的信息，他們可能在找到需要的問題后就離開網(wǎng)站了。如何盡可能留住訪問者，是網(wǎng)站設計者未來必須考慮的問題。

　　首頁的設計

　　在我們?nèi)婵紤]好網(wǎng)站的欄目，鏈接結(jié)構(gòu)和整體風格之后，我們就可以正式動手制作首頁了。

　　有這么一句俗語:"良好的開端是成功的一半"。

　　在網(wǎng)站設計上也是如此，首頁的設計是一個網(wǎng)站成功與否的關鍵。人們往往看到第一頁就已經(jīng)對你的站點有一個整體的感覺。是不是能夠促使瀏覽者繼續(xù)點擊進入，是否能夠吸引瀏覽者留在站點上，全憑首頁設計的"功力"了。

　　所以，首頁的設計和制作是絕對要重視和花心思的。阿捷的經(jīng)驗是:一般首頁設計和制作占整個制作時間的40%。你寧可多花些時間在早期，以免出現(xiàn)全部做好以后再修改，那將是最浪費精力的事。

　　這里，先插一個“封面”的問題。封面是指沒有具體內(nèi)容，只放一個logo點擊進入或者只有簡單的圖形菜單的首頁。

　　是否需要為站點設計一個“封面”?阿捷的個人觀點是:沒必要!

　　除非你是很藝術類的站點，或者可以確信內(nèi)容獨特，可以吸引瀏覽者進一步點擊進入的站點，否則的話，封面式的首頁并不會給你的站點帶來什么好處。我們上網(wǎng)瀏覽需要的是快速，有價值的信息，如果等待xx分鐘，只顯示出一個粗劣的“ENTER”圖標，那么相信沒有人會再耐心等待進入下一頁。

　　因為首頁的重要性，阿捷將著重用8篇文章來仔細討論有關首頁設計的方方面面，大致提綱如下:

　　○版面布局的竅門

　　○色彩的搭配

　　○字體的設置和表格的嵌套

　　○細微之處見功力

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

　　○設計好你的banner和位置

　　○meta標簽的重要性

　　○首頁設計的小建議

　　今天，只是關于首頁設計的一個引子。讓我們來大致了解一下首頁設計的步驟。

　　首頁，從根本上說就是全站內(nèi)容的目錄，是一個索引。但只是羅列目錄顯然是不夠的，如何設計好一個首頁呢?一般的步驟是:

　　●確定首頁的功能模塊

　　●設計首頁的版面

　　●處理技術上的細節(jié)

　　一).確定首頁的功能模塊。

　　首頁的內(nèi)容模塊是指你需要在首頁上實現(xiàn)的主要內(nèi)容和功能。一般的站點都需要這樣一些模塊:網(wǎng)站名稱(logo), 廣告條(banner), 主菜單(menu),新聞(what's new), 搜索(search), 友情鏈接(links),郵件列表(maillist),計數(shù)器(count), 版權(quán)(copyright)。

　　選擇哪些模塊，實現(xiàn)哪些功能，是否需要添加其他模塊都是首頁設計首先需要確定的。

　　二).設計首頁的版面

　　在功能模塊確定后，開始設計首頁的版面。就象搭積木，每個模塊是一個單位積木，如何拼搭出一座漂亮的房子，就看你的創(chuàng)意和想象力了。

　　設計版面的最好方法是:找一張白紙，一支筆，先將你理想中的草圖勾勒出來，然后再用網(wǎng)頁制作軟件實現(xiàn)。

　　三).處理技術上的細節(jié)

　　阿捷經(jīng)常收到的來信問題就是:我制作的主頁如何能在不同分辨率下保持不變形，如何能在IE和NC下看起來都不至于太丑陋，如何設置字體和鏈接顏色....等等,阿捷將在下面幾篇文章里為大家詳細介紹。

　　版面布局的原理

　　設計首頁的第一步是設計版面布局。

　　就象傳統(tǒng)的報刊雜志編輯一樣，我們將網(wǎng)頁看作一張報紙，一本雜志來進行排版布局。雖然動態(tài)網(wǎng)頁技術的發(fā)展使得我們開始趨向于學習場景編劇，但是固定的網(wǎng)頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。

　　版面指的是瀏覽器看到的完整的一個頁面(可以包含框架和層)。因為每個人的顯示器分辨率不同，所以同一個頁面的大小可能出現(xiàn)640*480像素,800*600像素,1024*768像素等不同尺寸。

　　布局，就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。你可能注意到:“最適合”是一個不確定的形容詞，什么才是最適合的呢?抱歉的是阿捷不能也不可能給您一個完整的正確的答案。就好比有人希望知道成功的秘訣是什么，成功者只能建議您用什么方法，什么途徑才能最容易獲得成功，而不可能有一步成功的"秘訣"告訴您。

　　我們在設計思考系列文章第四篇講過站點整體的創(chuàng)意，版面布局也是一個創(chuàng)意的問題，

　　但要比站點整體的創(chuàng)意容易，有規(guī)律的多。讓我們先來了解一下版面布局的步驟:

　　一.草案

　　新建頁面就象一張白紙，沒有任何表格，框架和約定俗成的東西，你可以盡可能的發(fā)揮你的想象力，將你想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆，當然用作圖軟件photoshop等也可以)。這屬于創(chuàng)造階段，不講究細膩工整，不必考慮細節(jié)功能，只以粗陋的線條勾畫出創(chuàng)意的輪廓即可。盡你的可能多畫幾張，最后選定一個滿意的作為繼續(xù)創(chuàng)作的腳本。

　　二.粗略布局

　　在草案的基礎上，將你確定需要放置的功能模塊安排到頁面上。(注:功能模塊我們在"首頁設計-引子"中提過，主要包含網(wǎng)站標志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計數(shù)器,版權(quán)信息等)。注意，這里我們必須遵循突出重點、平衡諧調(diào)的原則，將網(wǎng)站標志，主菜單等最重要的模塊放在最顯眼，最突出的位置，然后在考慮次要模塊的排放。

　　三.定案

　　將粗略布局精細化，具體化。(靠你的智慧和經(jīng)驗，旁敲側(cè)擊多方聯(lián)想，才能作出具有創(chuàng)意的布局。)

　　在布局過程中，我們可以遵循的原則有:

　　1、正常平衡---亦稱"勻稱"。多指左右、上下對照形式，主要強調(diào)秩序，能達到安定誠實、信賴的效果。

　　2、異常平衡---即非對照形式，但也要平衡和韻律，當然都是不均整的，此種布局能達到強調(diào)性、不安性、高注目性的效果。

　　3、對比---所謂對比，不僅利用色彩、色調(diào)等技巧來作表現(xiàn)，在內(nèi)容上也可涉及古與今、新與舊、貧與富等對比。

　　4、凝視---所謂凝視是利用頁面中人物視線，使瀏覽者仿照跟隨的心理，以達到注視頁面的效果，一般多用明星凝視狀。

　　5、空白---空白有兩種作用，一方面對其他網(wǎng)站表示突出卓越，另一方面也表示網(wǎng)頁品位的優(yōu)越感，這種表現(xiàn)方法對體顯網(wǎng)頁的格調(diào)十分有效。

　　6、盡量用圖片解說---此法對不能用語言說服、或用語言無法表達的情感，特別有效。圖片解說的內(nèi)容，可以傳達給瀏覽者的更多的心理因素。

　　------------(轉(zhuǎn)載自廣告大師樊志育《廣告制作》)

　　以上的設計原則，雖然枯燥，但是我們?nèi)绻茴I會并活用到頁面布局里，效果就大不一樣了。比如，

　　○網(wǎng)頁的白色背景太虛，則可以加些色快;

　　○版面零散，可以用線條和符號串聯(lián);

　　○左面文字過多，右面則可以插一張圖片保持平衡;

　　○表格太規(guī)矩，可以改用導角試試。

　　經(jīng)過不斷的嘗試和推敲，你的網(wǎng)頁一定會亮麗起來的。

　　看看我們經(jīng)常用到的版面布局形式:

　　1."T"結(jié)構(gòu)布局。所謂"T"結(jié)構(gòu)。就是指頁面頂部為橫條網(wǎng)站標志+廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因為菜單條背景教深，整體效果類似英文字母"T",所以我們稱之為"T"形布局。這是網(wǎng)頁設計中用的最廣返的一種布局方式。(圖略)

　　這種布局的優(yōu)點是頁面結(jié)構(gòu)清晰，主次分明。是初學者最容易上手的布局方法。缺點是規(guī)矩呆板，如果細節(jié)色彩上不注意，很容易讓人"看之無味"。

　　2."口"型布局。這是一個象形的說法，就是頁面一般上下各有一個廣告條，左面是主菜單，右面放友情連接等，中間是主要內(nèi)容。(圖略)

　　這種布局的優(yōu)點是充分利用版面，信息量大(我的主頁首頁即屬于這種布局)。缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網(wǎng)易壁紙站。

　　3."三"型布局。這種布局多用于國外站點，國內(nèi)用的不多。特點是頁面上橫向兩條色塊，將頁面整體分割為四部分，色塊中大多放廣告條。

　　4.對稱對比布局。顧名思義，采取左右或者上下對稱的布局，一半深色，一半淺色，一般用于設計型站點。優(yōu)點是視覺沖擊力強，缺點是將兩部分有機的結(jié)合比較困難。

　　5.POP布局。POP引自廣告術語，就是指頁面布局象一張宣傳海報，以一張精美圖片作為頁面的設計中心。常用于時尚類站點，比如ELLE.com。優(yōu)點顯而易見:漂亮吸引人。缺點就是速度慢。作為版面布局還是值得借鑒的。

　　以上總結(jié)了目前網(wǎng)絡上常見的布局，其實還有許許多多別具一格的布局，關鍵在于你的創(chuàng)意和設計了。對于版面布局的技巧，這里提供四個建議，您可以自己推敲:

　　1.加強視覺效果

　　2.加強文案的可視度和可讀性

　　3.統(tǒng)一感的視覺

　　4.新鮮和個性是布局的最高境界

　　網(wǎng)頁的色彩

　　網(wǎng)頁的色彩是樹立網(wǎng)站形象的關鍵之一，色彩搭配卻是網(wǎng)友們感到頭疼的問題。網(wǎng)頁的背景，文字，圖標，邊框，超鏈接...，應該采用什么樣的色彩，應該搭配什么色彩才能最好的表達出預想的內(nèi)涵呢?阿捷這里談一些心得，希望對你有所啟發(fā)。

　　首先我們先來了解一些色彩的基本知識:

　　1.顏色是因為光的折射而產(chǎn)生的。

　　2.紅，黃，藍是三原色，其它的色彩都可以用這三種色彩調(diào)和而成。網(wǎng)頁html語言中的色彩表達即是用這三種顏色的數(shù)值表示，例如:紅色是color(255,0,0)十六進制的表示方法為(FF0000)。

　　3.顏色分非彩色和彩色兩類。非彩色是指黑，白，灰系統(tǒng)色。彩色是指除了非彩色以外的所有色彩。

　　4.任何色彩都有飽和度和透明度的屬性，屬性的變化產(chǎn)生不同的色相，所以至少可以制作幾百萬種色彩。 網(wǎng)頁制作用彩色還是非彩色好呢?根據(jù)專業(yè)的研究機構(gòu)研究表明:彩色的記憶效果是黑白的3.5倍。也就是說，在一般情況下，彩色頁面較完全黑白頁面更加吸引人。

　　我們通常的做法是:主要內(nèi)容文字用非彩色(黑色)，邊框，背景，圖片用彩色。這樣頁面整體不單調(diào)，看主要內(nèi)容也不會眼花。

　　●非彩色的搭配

　　黑白是最基本和最簡單的搭配，白字黑底，黑底白字都非常清晰明了?；疑侨f能色，可以和任何彩色搭配，也可以幫助兩種對立的色彩和諧過渡。如果你實在找不出合適的色彩，那么用灰色試試，效果絕對不會太差。

　　●彩色的搭配

　　色彩千變?nèi)f化，彩色的搭配是我們研究的重點。我們依然需要進一步學習一些色彩的知識。

　　一.色環(huán)。我們將色彩按"紅->黃->綠->藍->紅"依次過度漸變，就可以得到一個色彩環(huán)。色環(huán)的兩端是暖色和寒色，當中是中型色。(如下圖)

　　紅.橙.橙黃.黃.黃綠.綠.青綠.藍綠.藍.藍紫.紫.紫紅.紅

　　|___________| |____| |_________| |_________|

　　| | | |

　　暖色系 中性系 寒色系 中性系

　　二.色彩的心理感覺。不同的顏色會給瀏覽者不同的心理感受。

　　紅色---是一種激奮的色彩。刺激效果，能使人產(chǎn)生沖動，憤怒，熱情，活力的感覺。

　　綠色---介于冷暖兩中色彩的中間，顯得和睦，寧靜，健康，安全的感覺。

　　它和金黃，淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。

　　橙色---也是一種激奮的色彩，具有輕快，歡欣，熱烈，溫馨，時尚的效果。

　　黃色---具有快樂，希望，智慧和輕快的個性，它的明度最高。藍色---是最具涼爽，清新，專業(yè)的色彩。

　　它和白色混合，能體現(xiàn)柔順，淡雅，浪漫的氣氛(象天空的色彩:)

　　白色---具有潔白，明快，純真，清潔的感受。

　　黑色---具有深沉，神秘，寂靜，悲哀，壓抑的感受。

　　灰色---具有中庸，平凡，溫和，謙讓，中立和高雅的感覺。

　　每種色彩在飽和度，透明度上略微變化就會產(chǎn)生不同的感覺。以綠色為例，黃綠色有青春，旺盛的視覺意境，而藍綠色則顯得幽寧，陰深。

　　○網(wǎng)頁色彩搭配的原理

　　1.色彩的鮮明性。網(wǎng)頁的色彩要鮮艷，容易引人注目。

　　2.色彩的獨特性。要有與眾不同的色彩，使得大家對你的印象強烈。3.色彩的合適性。就是說色彩和你表達的內(nèi)容氣氛相適合。如用粉色體現(xiàn)女性站點的柔性。

　　4.色彩的聯(lián)想性。不同色彩會產(chǎn)生不同的聯(lián)想，藍色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和你網(wǎng)頁的內(nèi)涵相關聯(lián)。

　　○網(wǎng)頁色彩掌握的過程

　　隨著網(wǎng)頁制作經(jīng)驗的積累，我們用色有這樣的一個趨勢:單色->五彩繽紛->標準色->單色。一開始因為技術和知識缺乏，只能制作出簡單的網(wǎng)頁，色彩單一;在有一定基礎和材料后，希望制作一個漂亮的網(wǎng)頁，將自己收集的最好的圖片，最滿意色彩堆砌在頁面上;但是時間一長，卻發(fā)現(xiàn)色彩雜亂，沒有個性和風格;第三次重新定位自己的網(wǎng)站，選擇好切合自己的色彩，推出的站點往往比較成功;當最后設計理念和技術達到頂峰時，則又返樸歸真，用單一色彩甚至非彩色就可以設計出簡潔精美的站點。

　　○網(wǎng)頁色彩搭配的技巧

　　文章寫到這里，有心急的網(wǎng)友要問了:“到底用什么色彩搭配好看呢?你能不能推薦幾種配色方案?”別急，這里有一點技巧，可以幫助你迅速成為調(diào)色大師:

　　1.用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，(說得通俗些就是將色彩變淡或則加深)，產(chǎn)生新的色彩，用于網(wǎng)頁。這樣的頁面看起來色彩統(tǒng)一，有層次感。

　　2.用兩種色彩。先選定一種色彩，然后選擇它的對比色(在photoshop里按ctrl+shift+I)。我的主頁用藍色和黃色就是這樣確定的。整個頁面色彩豐富但不花稍。

　　3.用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠;或者土黃，土灰，土藍。確定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中選擇"自定義"，然后在"色庫"中選就可以了。

　　4.用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺很"跳"。

　　在網(wǎng)頁配色中，忌諱的是:

　　1.不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)。

　　2.背景和前文的對比盡量要大，(絕對不要用花紋繁復的圖案作背景)，以便突出主要文字內(nèi)容。

　　網(wǎng)頁字體的設置
　　●字體(Font)的設置是網(wǎng)頁制作新手遇到的第一個難點。如何控制字體大小，如何取消超鏈接字體的下劃線是網(wǎng)友來信問得最多的。好，我們來徹底研究一下字體的各個方面：
　　○字符集的設定。
　　在查看html文件原代碼時，我們經(jīng)?？梢栽谖募^<head>和</head>之間看到這么一句代碼：
　　<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
　　這段代碼的作用是什么呢？是否可以刪除呢？其實這是meta標簽的設定語句，是給瀏覽器看的。它的作用就是告訴瀏覽器：這個HTML文件是采用gb2312字符集制作的。當瀏覽器讀到這一代碼，便以gb2312字符集來解釋和翻譯網(wǎng)頁原代碼，然后我們就可以看到正確的網(wǎng)頁。所以這個meta語句是非常重要的，盡量不要刪除。
　　gb2312就是我們最熟悉的GB簡體碼，英文是iso-8859-1字符集。其它還有BIG5,UTF-8,Shift-JIS,EUC,KOI8-2等字符集，分別用于不同的字體顯示。
　　○字體的使用。
　　在網(wǎng)頁里，字體的定義語句是：<font face="Arial">顯示文字</font>
　　其中Arial就是一種字體的名稱。
　　默認的瀏覽器定義的標準字體是中文宋體和英文times new Roma字體。也就是說，如果你沒有設置任何字體，網(wǎng)頁將以這兩種標準字體顯示。同時，著兩種字體也可以在任何操作系統(tǒng)和瀏覽器里正確顯示。
    windows另外自帶了40多種英文字體和5種中文字體。這些字體，你也可以在網(wǎng)頁里自由使用和設置。凡是使用windows操作系統(tǒng)的瀏覽器都可以正確顯示這些字體，但在其它操作系統(tǒng)里，如unix 則不能完全正確顯示。
　　如果你需要用一種特殊的字體來體現(xiàn)你的風格，那么如何讓大家可以真正看到你的設計頁面呢？解決的辦法是：用圖片。
　　將需要用這種字體的地方用圖片代替，以保證所有人看到的頁面是同一效果。
　　○字體的樣式(style)。
字體的樣式有四種：正常體(regular),斜體(Italic),粗體(Bold),粗斜體(Bold Italic)。設置方法很簡單，阿捷就不多羅嗦了。
　　○字體的效果。
　　這里指通過html語言設定可以直接顯示的效果，在html里的語句設定為：
　　<span style="text-decoration: overline">顯示文字</span>
　　其中，overline是指上劃線效果。其它常用的效果還有：underline(下劃線)，uppercase(大寫)等等。
　　○字體大小的控制。
　　字體大小的控制是本節(jié)的重點。
　　一般字體默認的大小是12pt(鎊).用<font size="+1">語句可以將文字增大2pt。這種方法我們都已經(jīng)掌握了。而現(xiàn)在網(wǎng)絡上最流行的小中文字體大小為9pt，是如何設定的呢？有三種方法：
　　1.用"<span style="font-size:9pt">顯示文字</span>"語句來設定。
　　顯然這種方法非常麻煩，你必須為每段文字都設定大小。
　　 2.用CSS層疊樣式表。CSS是DHTML的一個組成部分，它可以定義整個頁面的字體顯示風格和大小。是較為簡便的方法。比如，這里需要設定整個頁面文字大小為9pt,只要將下面這段代碼加入html代碼的<head>和</head>之間：
　　　<style type="text/css"><--
　　　body {FONT-SIZE: 9pt}
　　　th　{FONT-SIZE: 9pt}
　　　td　{FONT-SIZE: 9pt}
　　　--></style>
其中FONT-SIZE:9pt指字體的大小為9鎊
　　3.第二種方法已經(jīng)簡化了許多步驟，但是仍然不是最理想的方法，因為你必須在每個頁面的head區(qū)都放置這么一段代碼，擴大了文件的字節(jié)。另外這樣的做法還有一個重大缺點，就是如果我需要修改整個站點的字體大小，就必須一頁一頁的改！
　　所以推薦給你最終也是目前最好的方法---外部摸板文件調(diào)用法。
　　“外部摸板調(diào)用”就是說你將css的設定作成一個單獨的文件，在每個頁面里都調(diào)用它。一旦你需要修改字體大小，只要修改一個.css文件，幾百個頁面就同時修改了。(這種方法類似子程序調(diào)用編寫過程序的網(wǎng)友很容易理解:)
　　調(diào)用的具體方法如下：
(1)將上面的css代碼copy成一個mycss.txt文件，然后修改后綴名為mycss.css
(2)在html文件的<head></head>之間插入<LINK href="mycss.css" rel=stylesheet type=text/css>，
語句調(diào)用mycss.css(注意有關路徑的設置正確)OK!
　　○字體超鏈接樣式的設定。
　　通常在網(wǎng)頁的<body>中設置連接的顏色，如：
<body link="#FF00FF" vlink="#FF0000" alink="#008080">
其中：link -- Hyperlink（連接）的顏色
　　　vlink-- visited Hyperlink（已訪問過的連接）顏色
　　　alink-- active Hyperlink （當前活動的連接）顏色
　　　顏色用rgb的16進制碼表示如紅色是#FF0000。
　　同樣用CSS可以更簡便的設定網(wǎng)頁超連接的樣式，看下面這段代碼
<style type="text/css">
A:link {TEXT-DECORATION: none;COLOR: #0000FF}
A:visited {TEXT-DECORATION: none;COLOR: #000000}
A:active {TEXT-DECORATION: none;COLOR: #FF0000}
A:hover {COLOR: #FF0000}
</style>
將它插入html文件的head區(qū)就可以了。其中l(wèi)ink設定的是有超鏈接的顏色;visited是訪問過的超鏈接顏色；active是鼠標移上去的顏色；hover是鼠標點擊時的顏色。而"text-decoration:none"是指取消超鏈接的下劃線顯示。
　　關于CSS的設定還有更多的用法和技巧，比如在同一頁中設定不同的字體大小和超鏈接顏色，請學習有關CSS的專門知識(可以到阿捷的主頁http://pageone.yeah.net查閱)在這里我們不在冗述。

　　●上面已經(jīng)介紹了字體在技術上的各個方面。有關字體的設計使用，目前還沒有一個成熟的理論，下面是幾條網(wǎng)頁設計中字體的使用原則，僅供參考:

　　1.不要使用超過3種以上的字體。字體太多則顯得雜亂，沒有主題。

　　2.不要用太大的字。因為版面是寶貴，有限的，粗陋的大字體不能帶給訪問者更多信息。

　　3.不要使用不停閃爍的文字。想讓瀏覽者多停留一會兒的話，就不要使用閃爍的文字。

　　4.原則上標題的字體較正文大，顏色也應有所區(qū)別。

　　●附:英文字體資源

　　http://www.pambytes.com

　　http://www.freestuff101.com/Fonts

　　http://www.typearound.com/mainfont.html

　　http://205.177.231.33/sofontes/us/pc_us.htm