1、定位你的網站主題和名稱
2、定位你的網站CI形象
3、確定網站的欄目和版塊
4、確定網站的目錄結構和鏈接結構
5、確定網站的整體風格和創意設計
6、首頁的設計
7、版面佈局的原理
8、網頁色彩搭配的原理
9、字體的設定
10、網頁中表格的運用
很榮幸，能在這裏和大家一起探討關於網站設計的問題。目前，網絡上有關網頁製作的各種教程已經相當多，可以方便地學習到最新的技術和技巧。可是，有關網頁的設計,比如設計靈感的實現，風格的確定，發展策略，技術的篩選等的文章卻比較少，許多網友往往有好的材料，卻苦惱沒有好的具有表現力的設計。受到索易主持人的鼓勵，阿捷整理了一些網頁的設計心得，在這裏和大家交流一下，也算拋磚引玉了，希望得到您的指正，如果您有好的建議和心得，也請發稿給我[email protected],在此先道一聲謝謝！
網站設計，包含的內容非常多。大體分兩個方面：
一方面是純網站本身的設計比如文字排版，圖片製作，平面設計，三維立體設計，靜態無聲圖文，動態有聲影像等；
另一方面是網站的延伸設計，包括網站的主題定位和瀏覽羣的定位，智能交互，製作策劃，形象包裝，宣傳營銷等等。
這兩方面相輔相成（感覺有點象寫辨證論文：），加之網絡技術的飛速發展，要提出一個絕對正確和權威的設計思路是不可能的，要想在一篇文章中概括出來也很難，所以阿捷根據建設一個網站的思路，將自己幾年來網站設計製作的心得整理成一個系列“講座”，告訴給大家（注意：我並不會非常具體地講某一個技術或製作技巧，重點在於思路）希望能給您一些幫助。下面是大致的提綱：
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形象。
有網友要問了：我不是學廣告專業的，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,還沒有引入聲音，三維立體等因素。)
好了，看了以上的介紹，你應該對網站CI有了一個初步的概念。也許不是很明白，因爲那些道理太抽象了，你可能需要一些實際的，更生動的例子。阿捷會在自己的主頁上同時修改補充一些實例。下一節，我們來討論“確定網站的欄目版塊”，歡迎您參與，謝謝！
確定網站的欄目和版塊
《設計的思考》系列文章，今天開始寫第三篇。阿捷不是專業的網頁設計師，但阿捷將盡自己所能把這個系列文章寫好，儘可能將自己實踐過程中總結的經驗和心得告訴給大家，希望能給您一點收穫，一點啓發。文章中所列觀點如有不同意見，歡迎您來信討論，來信寄[email protected]，謝謝。
我們在前二篇文章裏學習了定位網站主題和確立網站的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個月嬰兒的信息，他們可能在找到需要的問題後就離開網站了。如何儘可能留住訪問者，是網站設計者未來必須考慮的問題。
講到這裏，阿捷忽然覺得自己很厲害，居然會總結出這麼大一套理論:)什麼，皮厚?可能吧，這麼多高手都沒發言呢！有意見請來信[email protected]
下次我們繼續討論“確定網站的整體風格創意設計”。
確定網站的整體風格和創意設計
網站的整體風格及其創意設計是站長們最希望掌握，也是最難以學習的。難就難在沒有一個固定的程式可以參照和模仿。給你一個主題，任何兩人都不可能設計出完全一樣的網站。當我們說："這個站點很cool，很有個性！"那麼，是什麼讓你覺得很cool呢？它到底和一般的網站有什麼區別呢？本文試圖用最簡明的語言來說明：
1.風格是什麼，如何樹立網站風格？
2.創意是什麼，如何產生創意？
●風格(style)是抽象的。是指站點的整體形象給瀏覽者的綜合感受。
這個“整體形象”包括站點的CI（標誌，色彩，字體，標語），版面佈局，瀏覽方式，交互性，文字，語氣，內容價值，存在意義，站點榮譽等等諸多因素。舉個例子：我們覺得網易是平易近人的，迪斯尼是生動活潑的，IBM是專業嚴肅的。這些都是網站給人們留下的不同感受。
風格是獨特的，是站點不同與其他網站的地方。或者色彩，或者技術，或者是交互方式，能讓瀏覽者明確分辨出這是你的網站獨有的。例如新世紀網絡(www.century.2000c.net)的黑白色,網易壁紙站的特有框架,即使你只看到其中一頁，也可以分辨出是哪個網站的。
風格是有人性的。通過網站的外表，內容，文字，交流可以概括出一個站點的個性，情緒。是溫文儒雅，是執著熱情，是活潑易變,是放任不羈。象詩詞中的“豪放派”和“婉約派”，你可以用人的性格來比喻站點。
有風格的網站與普通網站的區別在於：普通網站你看到的只是堆砌在一起的信息，你只能用理性的感受來描述，比如信息量大小，瀏覽速度快慢。但你瀏覽過有風格的網站後你能有更深一層的感性認識，比如站點有品位，和藹可親，是老師，是朋友。
看了以上描述，你可能對風格是什麼可能依然模糊。其實風格就是一句話：與衆不同！
如何樹立網站風格呢？我們可以分這樣幾個步驟：
第一，確信風格是建立在有價值內容之上的。一個網站有風格而沒有內容，就好比繡花枕頭一包草，好比一個性格傲慢但卻目不識丁的人。你首先必須保證內容的質量和價值性。這是最基本的，無須置疑。
第二，你需要徹底搞清楚自己希望站點給人的印象是什麼。可以從這幾方面來理清思路：
1.如果只用一句話來描述你的站點，應該是:_____________
參考答案：
有創意，專業，有(技術)實力，有美感，有衝擊力
2.想到你的站點，可以聯想到的色彩是：________________
參考答案：
熱情的紅色，幻想的天蘭色，聰明的金黃色
3.想到你的站點，可以聯想到的畫面是：________________
參考答案：
一份早報，一輛法拉利跑車，人羣擁擠的廣場，雜貨店
4.如果網站是一個人，他擁有的個性是：________________
參考答案：
思想成熟的中年人，狂野奔放的牛仔，自信憨厚的創業者
5.作爲站長，你希望給人的印象是：____________________
參考答案：
敬業，認真投入，有深度，負責，純真，直爽，淑女
6.用一種動物來比喻，你的網站最象：__________________
參考答案：
貓(神祕高貴)，鷹(目光銳利)，兔子(聰明敏感)，獅子(自信威信)
7.瀏覽者覺得你和其他網站的不同是：__________________
參考答案：
可以信賴，信息最快，交流方便，
8.瀏覽者和你交流合作的感受是：______________________
參考答案：
師生，同事，朋友，長幼。
你可以自己先填寫一份答案，然後讓其他網友填寫。比較後的結果會告訴你：你網站現在的差距，弱點及需要改進的地方。
第三，在明確自己的網站印象後，開始努力建立和加強這種印象。
經過第二步印象的的"量化"後，你需要進一步找出其中最有特色特點的東西，就是最能體現網站風格的東西。並以它作爲網站的特色加以重點強化，宣傳。例如：再次審查網站名稱，域名，欄目名稱是否符合這種個性，是否易記。審查網站標準色彩是否容易聯想到這種特色，是否能體現網站的性格等等。具體的做法，沒有定式。我這裏提供一些參考：
1.將你的標誌logo,儘可能的出現在每個頁面上。或者頁眉，或者頁腳，或則背景。
2.突出你的標準色彩。文字的鏈接色彩，圖片的主色彩，背景色，邊框等色彩儘量使用與標準色彩一致的色彩。
3.突出你的標準字體。在關鍵的標題，菜單，圖片裏使用統一的標準字體。
4.想一條朗朗上口宣傳標語。把它做在你的banner裏，或者放在醒目的位置，告訴大家你的網站的特色是...
5.使用統一的語氣和人稱。即使是多個人合作維護，也要讓讀者覺得是同一個人寫的。
6.使用統一的圖片處理效果。比如，陰影效果的方向，厚度，模糊度都必須一樣。
7.創造一個你的站點特有的符號或圖標。比如在一句鏈接前的一個點，可以使用,.。☆※○◇□△→（區位碼裏自己參看）等等。雖然很簡單的一個變化，卻給人與衆不同的感覺，(爲什麼我沒有想到呢？)
8.用自己設計的花邊，線條，點
9.展示你網站的榮譽和成功作品。
10.告訴網友關於你的真實的故事和想法。
風格的形成不是一次定位的，你可以在實踐中不斷強化，調整，修飾，直到有一天，網友們寫信告訴你："我喜歡你的站點，因爲它很有風格！"
● 創意(idea)是網站生存的關鍵。這一點相信大家都已經認同。然而作爲網頁設計師，最苦惱的就是沒有好的創意來源。
注意，這裏說的創意是指站點的整體創意，(因爲這個創意而產生這個站點，或者相同的內容，推出的創意不同),網頁的平面設計創意我將在後面的版面佈局竅門裏介紹。
創意到底是什麼，如何產生創意呢？
創意是引人入勝，精彩萬分，出奇不意的；
創意是捕捉出來的點子，是創作出來的奇招....
這些講法都說出了創意的一些特點，實質上，
創意是傳達信息的一種特別方式。
比如Webdesigner(網頁設計師)，我們將其中的E字母大寫一下: wEbdEsigEr，感覺怎麼樣，這其實就是一種創意！
創意並不是天才者的靈感，而是思考的結果。根據美國廣告學教授詹姆斯的研究，創意思考的過程分五階段
1.準備期--研究所蒐集的資料，根據舊經驗，啓發新創意；
2.孵化期--將資料咀嚼消化，使意識自由發展，任意結合；
3.啓示期--意識發展並結合，產生創意；
4.驗證期--將產生的創意討論修正；
5.形成期--設計製作網頁，將創意具體化。
創意是將現有的要素重新組合。
比如，網絡與電話結合，產生IP電話。從這一點上出發，任何人，包括你和我，都可以創造出不同凡響的創意。而且，資料越豐富，越容易產生創意。就好比萬花筒，筒內的玻璃片越多，所呈現的圖案越多。你如果有心可以發現，網絡上的最多的創意來自與現實生活的結合(或者虛擬現實)，例如在線書店，電子社區，在線拍賣。你是否想到了一種更好的創意呢？
創意思考的途徑最常用的是聯想，這裏提供了網站創意的25種聯想線索：
1.把它顛倒 2.把它縮小 3.把顏色換一下 4.使它更長
5.使它閃動 6.把它放進音樂裏 7.結合文字音樂圖畫 8.使它成爲年輕的
9.使它重複 10.使它變成立體 11.參加競賽 12.參加打賭
13.變更一部分 14.分裂它 15.使它羅曼蒂克 16.使它速度加快
17.增加香味 18.使它看起來流行 19.使它對稱 20.將它向兒童訴求
21.價格更低 22.給它起個綽號 23.把它打包 24.免費提供
25.以上各項延伸組合
-------------(轉載自樊志育《廣告製作》)
需要一提的是：創意的目的是更好的宣傳推廣網站。如果創意很好，卻對網站發展毫無意義，好比給奶牛穿高跟鞋，那麼，我們寧可放棄這個創意！
關於風格和創意，可以講得還有許多。感興趣的網友可以自己找一些廣告設計方面的書閱讀。希望本文能幫助您對網站的設計有一個更新的認識和提高。謝謝！
首頁的設計
在我們全面考慮好網站的欄目，鏈接結構和整體風格之後，我們就可以正式動手製作首頁了。
有這麼一句俗語："良好的開端是成功的一半"。
在網站設計上也是如此，首頁的設計是一個網站成功與否的關鍵。人們往往看到第一頁就已經對你的站點有一個整體的感覺。是不是能夠促使瀏覽者繼續點擊進入，是否能夠吸引瀏覽者留在站點上，全憑首頁設計的"功力"了。
所以，首頁的設計和製作是絕對要重視和花心思的。阿捷的經驗是：一般首頁設計和製作佔整個製作時間的40%。你寧可多花些時間在早期，以免出現全部做好以後再修改，那將是最浪費精力的事。
這裏，先插一個“封面”的問題。封面是指沒有具體內容，只放一個logo點擊進入或者只有簡單的圖形菜單的首頁。
是否需要爲站點設計一個“封面”？阿捷的個人觀點是：沒必要！
除非你是很藝術類的站點，或者可以確信內容獨特，可以吸引瀏覽者進一步點擊進入的站點，否則的話，封面式的首頁並不會給你的站點帶來什麼好處。我們上網瀏覽需要的是快速，有價值的信息，如果等待xx分鐘，只顯示出一個粗劣的“ENTER”圖標，那麼相信沒有人會再耐心等待進入下一頁。
因爲首頁的重要性，阿捷將着重用８篇文章來仔細討論有關首頁設計的方方面面，大致提綱如下：
○版面佈局的竅門
○色彩的搭配
○字體的設置和表格的嵌套
○細微之處見功力
○考慮不同的瀏覽器和分辨率
○設計好你的banner和位置
○meta標籤的重要性
○首頁設計的小建議
今天，只是關於首頁設計的一個引子。讓我們來大致瞭解一下首頁設計的步驟。
首頁，從根本上說就是全站內容的目錄，是一個索引。但只是羅列目錄顯然是不夠的，如何設計好一個首頁呢？一般的步驟是：
●確定首頁的功能模塊
●設計首頁的版面
●處理技術上的細節
一).確定首頁的功能模塊。
首頁的內容模塊是指你需要在首頁上實現的主要內容和功能。一般的站點都需要這樣一些模塊：
網站名稱(logo), 廣告條(banner), 主菜單(menu),
新聞(what's new), 搜索(search), 友情鏈接(links),
郵件列表(maillist),計數器(count), 版權(copyright).
選擇哪些模塊，實現哪些功能，是否需要添加其他模塊都是首頁設計首先需要確定的。
二).設計首頁的版面
在功能模塊確定後，開始設計首頁的版面。就象搭積木，每個模塊是一個單位積木，如何拼搭出一座漂亮的房子，就看你的創意和想象力了。
設計版面的最好方法是：找一張白紙，一支筆，先將你理想中的草圖勾勒出來，然後再用網頁製作軟件實現。
三).處理技術上的細節
阿捷經常收到的來信問題就是：我製作的主頁如何能在不同分辨率下保持不變形，如何能在IE和NC下看起來都不至於太醜陋，如何設置字體和鏈接顏色....等等,阿捷將在下面幾篇文章裏爲大家詳細介紹。
首頁設計是整個網站設計的難點和關鍵，阿捷希望能夠通過和大家的交流，總結出一套較爲合理易學的設計方法，從而舉一反三，使我們能夠更加輕鬆的完成整個站點的設計製作。如果你願意將你的心得體會和大家分享，請來信[email protected],謝謝！
版面佈局的原理
設計首頁的第一步是設計版面佈局。
就象傳統的報刊雜誌編輯一樣，我們將網頁看作一張報紙，一本雜誌來進行排版佈局。雖然動態網頁技術的發展使得我們開始趨向於學習場景編劇，但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。
版面指的是瀏覽器看到的完整的一個頁面（可以包含框架和層）。因爲每個人的顯示器分辨率不同，所以同一個頁面的大小可能出現640*480像素,800*600像素,1024*768像素等不同尺寸。
佈局，就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。你可能注意到：“最適合”是一個不確定的形容詞，什麼纔是最適合的呢？抱歉的是阿捷不能也不可能給您一個完整的正確的答案。就好比有人希望知道成功的祕訣是什麼，成功者只能建議您用什麼方法，什麼途徑才能最容易獲得成功，而不可能有一步成功的"祕訣"告訴您。
我們在設計思考系列文章第四篇講過站點整體的創意，版面佈局也是一個創意的問題，但要比站點整體的創意容易，有規律的多。讓我們先來了解一下版面佈局的步驟：
一.草案
新建頁面就象一張白紙，沒有任何表格，框架和約定俗成的東西，你可以儘可能的發揮你的想象力，將你想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆，當然用作圖軟件photoshop等也可以)。這屬於創造階段，不講究細膩工整，不必考慮細節功能，只以粗陋的線條勾畫出創意的輪廓即可。盡你的可能多畫幾張，最後選定一個滿意的作爲繼續創作的腳本。
二.粗略佈局
在草案的基礎上，將你確定需要放置的功能模塊安排到頁面上。(注：功能模塊我們在"首頁設計-引子"中提過，主要包含網站標誌,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計數器,版權信息等)。注意，這裏我們必須遵循突出重點、平衡諧調的原則，將網站標誌，主菜單等最重要的模塊放在最顯眼，最突出的位置，然後在考慮次要模塊的排放。
三.定案
將粗略佈局精細化，具體化。（靠你的智慧和經驗，旁敲側擊多方聯想，才能作出具有創意的佈局。）
在佈局過程中，我們可以遵循的原則有：
1、正常平衡---亦稱"勻稱"。多指左右、上下對照形式，主要強調秩序，能達到安定誠實、信賴的效果。
2、異常平衡---即非對照形式，但也要平衡和韻律，當然都是不均整的，此種佈局能達到強調性、不安性、高注目性的效果。
3、對比---所謂對比，不僅利用色彩、色調等技巧來作表現，在內容上也可涉及古與今、新與舊、貧與富等對比。
4、凝視---所謂凝視是利用頁面中人物視線，使瀏覽者仿照跟隨的心理，以達到注視頁面的效果，一般多用明星凝視狀。
5、空白---空白有兩種作用，一方面對其他網站表示突出卓越，另一方面也表示網頁品位的優越感，這種表現方法對體顯網頁的格調十分有效。
6、儘量用圖片解說---此法對不能用語言說服、或用語言無法表達的情感，特別有效。圖片解說的內容，可以傳達給瀏覽者的更多的心理因素。
------------(轉載自廣告大師樊志育《廣告製作》)
以上的設計原則，雖然枯燥，但是我們如果能領會並活用到頁面佈局裏，效果就大不一樣了。比如：
○網頁的白色背景太虛，則可以加些色快；
○版面零散，可以用線條和符號串聯；
○左面文字過多，右面則可以插一張圖片保持平衡；
○表格太規矩，可以改用導角試試。
經過不斷的嘗試和推敲，你的網頁一定會亮麗起來的哦:)
看看我們經常用到的版面佈局形式：
1."T"結構佈局。所謂"T"結構。就是指頁面頂部爲橫條網站標誌+廣告條，下方左面爲主菜單，右面顯示內容的佈局，因爲菜單條背景教深，整體效果類似英文字母"T",所以我們稱之爲"T"形佈局。這是網頁設計中用的最廣返的一種佈局方式。(圖略)
這種佈局的優點是頁面結構清晰，主次分明。是初學者最容易上手的佈局方法。缺點是規矩呆板，如果細節色彩上不注意，很容易讓人"看之無味"。
2."口"型佈局。這是一個象形的說法，就是頁面一般上下各有一個廣告條，左面是主菜單，右面放友情連接等，中間是主要內容。(圖略)
這種佈局的優點是充分利用版面，信息量大(我的主頁首頁即屬於這種佈局)。缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網易壁紙站。
3."三"型佈局。這種佈局多用於國外站點，國內用的不多。特點是頁面上橫向兩條色塊，將頁面整體分割爲四部分，色塊中大多放廣告條。
4.對稱對比佈局。顧名思義，採取左右或者上下對稱的佈局，一半深色，一半淺色，一般用於設計型站點。優點是視覺衝擊力強，缺點是將兩部分有機的結合比較困難。
5.POP佈局。POP引自廣告術語，就是指頁面佈局象一張宣傳海報，以一張精美圖片作爲頁面的設計中心。常用於時尚類站點，比如ELLE.com。優點顯而易見：漂亮吸引人。缺點就是速度慢。作爲版面佈局還是值得借鑑的。
以上總結了目前網絡上常見的佈局，其實還有許許多多別具一格的佈局，關鍵在於你的創意和設計了。對於版面佈局的技巧，這裏提供四個建議，您可以自己推敲：
1.加強視覺效果
2.加強文案的可視度和可讀性
3.統一感的視覺
4.新鮮和個性是佈局的最高境界
網頁的色彩是樹立網站形象的關鍵之一，色彩搭配卻是網友們感到頭疼的問題。網頁的背景，文字，圖標，邊框，超鏈接...，應該採用什麼樣的色彩，應該搭配什麼色彩才能最好的表達出預想的內涵呢？阿捷這裏談一些心得，希望對你有所啓發。
網頁色彩搭配的原理
首先我們先來了解一些色彩的基本知識：
1.顏色是因爲光的折射而產生的。
2.紅，黃，藍是三原色，其它的色彩都可以用這三種色彩調和而成。
網頁html語言中的色彩表達即是用這三種顏色的數值表示
例如：紅色是color(255,0,0)十六進制的表示方法爲(FF0000)
白色爲(FFFFFF), 我們經常看到的"bgColor=#FFFFFF"就是指背景色爲白色。
3.顏色分非彩色和彩色兩類。
非彩色是指黑，白，灰系統色。
彩色是指除了非彩色以外的所有色彩。
4.任何色彩都有飽和度和透明度的屬性，屬性的變化產生不同的色相，所以至少可以製作幾百萬種色彩。
網頁製作用彩色還是非彩色好呢？根據專業的研究機構研究表明：彩色的記憶效果是黑白的3.5倍。也就是說，在一般情況下，彩色頁面較完全黑白頁面更加吸引人。我們通常的做法是：主要內容文字用非彩色(黑色)，邊框，背景，圖片用彩色。這樣頁面整體不單調，看主要內容也不會眼花。
●非彩色的搭配
黑白是最基本和最簡單的搭配，白字黑底，黑底白字都非常清晰明瞭。灰色是萬能色，可以和任何彩色搭配，也可以幫助兩種對立的色彩和諧過渡。如果你實在找不出合適的色彩，那麼用灰色試試，效果絕對不會太差。
●彩色的搭配
色彩千變萬化，彩色的搭配是我們研究的重點。我們依然需要進一步學習一些色彩的知識。
一.色環。
我們將色彩按"紅->黃->綠->藍->紅"依次過度漸變，就可以得到一個色彩環。
色環的兩端是暖色和寒色，當中是中型色。(如下圖)
紅.橙.橙黃.黃.黃綠.綠.青綠.藍綠.藍.藍紫.紫.紫紅.紅
|___________| |____| |_________| |_________|
| | | |
暖色系 中性系 寒色系 中性系
二.色彩的心理感覺。不同的顏色會給瀏覽者不同的心理感受。
紅色---是一種激奮的色彩。刺激效果，能使人產生衝動，憤怒，熱情，活力的感覺。
綠色---介於冷暖兩中色彩的中間，顯得和睦，寧靜，健康，安全的感覺。
它和金黃，淡白搭配，可以產生優雅，舒適的氣氛。
橙色---也是一種激奮的色彩，具有輕快，歡欣，熱烈，溫馨，時尚的效果。
黃色---具有快樂，希望，智慧和輕快的個性，它的明度最高。
藍色---是最具涼爽，清新，專業的色彩。
它和白色混合，能體現柔順，淡雅，浪漫的氣氛(象天空的色彩:)
白色---具有潔白，明快，純真，清潔的感受。
黑色---具有深沉，神祕，寂靜，悲哀，壓抑的感受。
灰色---具有中庸，平凡，溫和，謙讓，中立和高雅的感覺。
每種色彩在飽和度，透明度上略微變化就會產生不同的感覺。以綠色爲例，黃綠色有青春，旺盛的視覺意境，而藍綠色則顯得幽寧，陰深。
網頁色彩搭配的原理
1.色彩的鮮明性。網頁的色彩要鮮豔，容易引人注目。
2.色彩的獨特性。要有與衆不同的色彩，使得大家對你的印象強烈。(參考設計思考第二篇網站CI的標準色彩一節)
3.色彩的合適性。就是說色彩和你表達的內容氣氛相適合。如用粉色體現女性站點的柔性。
4.色彩的聯想性。不同色彩會產生不同的聯想，藍色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和你網頁的內涵相關聯。
網頁色彩掌握的過程
隨着網頁製作經驗的積累，我們用色有這樣的一個趨勢:單色->五彩繽紛->標準色->單色。一開始因爲技術和知識缺乏，只能製作出簡單的網頁，色彩單一；在有一定基礎和材料後，希望製作一個漂亮的網頁，將自己收集的最好的圖片，最滿意色彩堆砌在頁面上；但是時間一長，卻發現色彩雜亂，沒有個性和風格；第三次重新定位自己的網站，選擇好切合自己的色彩，推出的站點往往比較成功；當最後設計理念和技術達到頂峯時，則又返樸歸真，用單一色彩甚至非彩色就可以設計出簡潔精美的站點。
網頁色彩搭配的技巧
文章寫到這裏，有心急的網友要問了：“到底用什麼色彩搭配好看呢？你能不能推薦幾種配色方案？”別急，這裏有一點技巧，可以幫助你迅速成爲調色大師:)
1.用一種色彩。這裏是指先選定一種色彩，然後調整透明度或者飽和度，(說得通俗些就是將色彩變淡或則加深)，產生新的色彩，用於網頁。這樣的頁面看起來色彩統一，有層次感。
2.用兩種色彩。先選定一種色彩，然後選擇它的對比色(在photoshop裏按ctrl+shift+I)。我的主頁用藍色和黃色就是這樣確定的。整個頁面色彩豐富但不花稍。
3.用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。確定色彩的方法各人不同，我是在photoshop裏按前景色方框，在跳出的拾色器窗中選擇"自定義"，然後在"色庫"中選就可以了:)
4.用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺很"跳"。
在網頁配色中，忌諱的是：
1.不要將所有顏色都用到，儘量控制在三種色彩以內。
2.背景和前文的對比儘量要大，(絕對不要用花紋繁複的圖案作背景)，以便突出主要文字內容。
好了，今天阿捷就爲大家講到這裏了。
字體的設定
大家好，網頁設計思考欄目今天繼續第八講。我們上次討論了首頁設計的版面佈局和色彩的搭配，今天我們來談談字體。
●字體(Font)的設置是網頁製作新手遇到的第一個難點。如何控制字體大小，如何取消超鏈接字體的下劃線是網友來信問得最多的。好，我們來徹底研究一下字體的各個方面：
字符集的設定。
在查看html文件原代碼時，我們經常可以在文件頭<head>和</head>之間看到這麼一句代碼：
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
這段代碼的作用是什麼呢？是否可以刪除呢？
其實這是meta標籤的設定語句，是給瀏覽器看的。它的作用就是告訴瀏覽器：這個HTML文件是採用gb2312字符集製作的。當瀏覽器讀到這一代碼，便以gb2312字符集來解釋和翻譯網頁原代碼，然後我們就可以看到正確的網頁。所以這個meta語句是非常重要的，儘量不要刪除。
gb2312就是我們最熟悉的GB簡體碼，英文是iso-8859-1字符集。其它還有BIG5,UTF-8,Shift-JIS,EUC,KOI8-2等字符集，分別用於不同的字體顯示。
字體的使用。
在網頁裏，字體的定義語句是：<font face="Arial">顯示文字</font>
其中Arial就是一種字體的名稱。
默認的瀏覽器定義的標準字體是中文宋體和英文times new Roma字體。也就是說，如果你沒有設置任何字體，網頁將以這兩種標準字體顯示。同時，着兩種字體也可以在任何操作系統和瀏覽器里正確顯示。
windows另外自帶了40多種英文字體和5種中文字體。這些字體，你也可以在網頁裏自由使用和設置。凡是使用windows操作系統的瀏覽器都可以正確顯示這些字體，但在其它操作系統裏，如unix 則不能完全正確顯示。
如果你需要用一種特殊的字體來體現你的風格，那麼如何讓大家可以真正看到你的設計頁面呢？解決的辦法是：用圖片。
將需要用這種字體的地方用圖片代替，以保證所有人看到的頁面是同一效果。
字體的樣式(style)。
字體的樣式有四種：正常體(regular),斜體(Italic),粗體(Bold),粗斜體(Bold Italic)。設置方法很簡單，阿捷就不多羅嗦了。
字體的效果。
這裏指通過html語言設定可以直接顯示的效果，在html裏的語句設定爲：
<span style="text-decoration: overline">顯示文字</span>
其中，overline是指上劃線效果。其它常用的效果還有：underline(下劃線)，uppercase(大寫)等等。
字體大小的控制。
字體大小的控制是本節的重點。
一般字體默認的大小是12pt(鎊).用<font size="+1">語句可以將文字增大2pt。這種方法我們都已經掌握了。而現在網絡上最流行的小中文字體大小爲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.第二種方法已經簡化了許多步驟，但是仍然不是最理想的方法，因爲你必須在每個頁面的head區都放置這麼一段代碼，擴大了文件的字節。另外這樣的做法還有一個重大缺點，就是如果我需要修改整個站點的字體大小，就必須一頁一頁的改！
所以推薦給你最終也是目前最好的方法---外部摸板文件調用法。
“外部摸板調用”就是說你將css的設定作成一個單獨的文件，在每個頁面裏都調用它。一旦你需要修改字體大小，只要修改一個.css文件，幾百個頁面就同時修改了。(這種方法類似子程序調用編寫過程序的網友很容易理解:)
調用的具體方法如下：
(1)將上面的css代碼copy成一個mycss.txt文件，然後修改後綴名爲mycss.css
(2)在html文件的<head></head>之間插入<LINK href="mycss.css" rel=stylesheet type=text/css>，
語句調用mycss.css(注意有關路徑的設置正確)OK!
字體超鏈接樣式的設定。
通常在網頁的<body>中設置連接的顏色，如：<body link="#FF00FF" vlink="#FF0000" alink="#008080">
其中：link -- Hyperlink（連接）的顏色
vlink-- visited Hyperlink（已訪問過的連接）顏色
alink-- active Hyperlink （當前活動的連接）顏色
顏色用rgb的16進制碼錶示如紅色是#FF0000。
同樣用CSS可以更簡便的設定網頁超連接的樣式，看下面這段代碼
<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區就可以了。其中link設定的是有超鏈接的顏色;visited是訪問過的超鏈接顏色；active是鼠標移上去的顏色；hover是鼠標點擊時的顏色。而"text-decoration:none"是指取消超鏈接的下劃線顯示。
關於CSS的設定還有更多的用法和技巧，比如在同一頁中設定不同的字體大小和超鏈接顏色，請學習有關CSS的專門知識(可以到阿捷的主頁http://pageone.yeah.net查閱)在這裏我們不在冗述。
●上面已經介紹了字體在技術上的各個方面。有關字體的設計使用，目前還沒有一個成熟的理論，下面是幾條網頁設計中字體的使用原則，僅供參考：
1.不要使用超過3種以上的字體。字體太多則顯得雜亂，沒有主題。
2.不要用太大的字。因爲版面是寶貴，有限的，粗陋的大字體不能帶給訪問者更多信息。
3.不要使用不停閃爍的文字。想讓瀏覽者多停留一會兒的話，就不要使用閃爍的文字。
4.原則上標題的字體較正文大，顏色也應有所區別。
●附：英文字體資源
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
關於字體，今天就寫到這裏，您有好的建議或意見，請來信[email protected]。下章我們繼續關於表格的設計探討。
網頁中表格的運用
表格(table)是頁面的重要元素,是頁面排版的主要手段。儘管DHTML中的層(layer)也可以實現網頁元素的自由定位，但是表格顯然更加方便編輯與修改。熟練掌握和運用表格的各種屬性，可以讓您的頁面看起來賞心悅目。
本文將分兩部分詳細介紹表格在網頁設計中的運用。包括表格的基本用法和表格運用的注意點。
一.表格的基本用法。
表格的基本用法相信您已經非常熟悉了。但爲了保證文章的完整性，阿捷在這裏還是再羅列一遍。
●表格的HTML基本語法
<table>...</table> - 定義表格
<tr> - 定義錶行
<th> - 定義表頭
<td> - 定義表元(表格的具體數據)
例如：
<table border>
<tr><th>1</th>
<th>2</th>
<th>3</th>
<tr><td>A</td>
<td>B</td>
<td>C</td>
</table>
| 1 | 2 | 3 |
|---|---|---|
| A | B | C |
●table標籤的參數。table標籤可以含下列參數。
border 表格邊框
cellspacing 表元之間的空白距離
cellpadding 表元內部的空白距離
width 表格寬度（可以用%或者具體數據表示）
height 表格高度
例如：
<table border=5 cellpadding=10>
<tr><th>1</th><th>2</th><th>3</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
| 1 | 2 | 3 |
|---|---|---|
| A | B | C |
●表格的對齊方式
１.表格內的文字對齊。
語法：<td align=#> 其中#可以設定的參數有：
left 橫向居左
center 橫向居中
right 橫向居右
top 縱向居頂
middle 縱向居中
bottom 縱向居底
例如：
<table border height=100>
<td valign=top>A</td>
<td valign=middle>B</td>
<td valign=bottom>C</td>
</table>
| A | B | C |
2.表格在頁面內的對齊。
如果你需要與表格並排放一段文字，就需要用到table標籤的另一個個參數：
<table align=＃> 其中#可以設定爲left(居左)，right(居右)
例如：
<table align="left" border >
<tr><th>1</th><th>2</th><th>3</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
這裏的文字<br>
是和表格並排排放的
| 1 | 2 | 3 |
|---|---|---|
| A | B | C |
這裏的文字是和表格並排排放的
●表格的嵌套
表格嵌套就是在表格裏插入表格，嵌套的排版方法就是將要插入的表格當做文字來處理同樣使用<td align=#>語句。
例如：
<table border width=200 height=100>
<tr> <td valign="top" >
<table border><tr><td></td></tr></table>
</td><td valign="bottom">
<table border><tr><td></td></tr></table>
</td></tr>
</table>
|
|
|
●表格的色彩
表格的色彩也在<table>標籤裏設置，參數有：
bgcolor 背景顏色
bordercolor 邊框顏色
bordercolorlight 立體邊框亮色
bordercolordark 立體邊框暗色
語法爲：<table bgcolor="#RRGGBB">其中RRGGBB分別爲RGB三色的16進制數值
例如：
<table width=100 border bgColor=#a9d7fb
borderColorDark=#ffffff borderColorLight=#000000 cellPadding=5
cellSpacing=0 bordercolorlight="#000000">
<tr><td bgColor=#FFE084></td>
</tr><tr><td></td></tr></table>
以上是表格的基本用法。現在frngtpage,dreamweaver等所見即所得的網頁編輯軟件都不用編寫代碼，就可以輕鬆的實現表格的排版和嵌套，但是掌握一些基本語法，關鍵時刻還是很有用處的。
表格的嵌套並不是表格處理最困難的地方，無論多複雜的版面，悉心琢磨一番總能找到解決的辦法。我們需要考慮的是：
○用什麼樣的嵌套排版方式使網頁的下載速度達到最快。
我們知道：瀏覽器在讀取網頁html原代碼時，是讀完整一個table再將它顯示出來。也就是說從<table>標籤開始，要讀到</table>標籤時，纔將表格中的內容顯示在屏幕上。而且顯示也有優先級，先讀到的先顯示。這樣的話，如果一個大表格中含有多個子表格，必須等大表格讀完，才能將子表格一起顯示出來。
我們在訪問一些站點時，等待多時無結果，按"停止"按鈕卻一下顯示出頁面就是這個原因。
因此，我們在設計頁面表格的時候，應該做到：
1.整個頁面不要都套在一個表格裏，儘量拆分成多個表格;
2.單一表格的結構儘量整齊；
3.表格嵌套層次儘量要少.
實驗證明：越複雜，嵌套層次越多的表格下載速度越慢。
關於網頁的表格設計今天就寫到這裏。阿捷沒有很多的技巧提供，關鍵在於您自己的實踐和運用，還是那句古話：“熟能生巧”。