試談網(wǎng)站的總體設(shè)計

網(wǎng)站的總體設(shè)計中州大學(xué)信息工程學(xué)院第一頁，共一百二十頁。1網(wǎng)站與網(wǎng)頁網(wǎng)站和網(wǎng)頁是兩個完全不同的概念：網(wǎng)站是一個主體，是“框架”。網(wǎng)頁是包含在網(wǎng)站之中的個體，是“磚瓦”。網(wǎng)站突出一個主題，網(wǎng)頁是圍繞這個主題的各個分項，豐富和烘托該主題。網(wǎng)站的目標(biāo)是組織，網(wǎng)頁的目標(biāo)是表現(xiàn)。網(wǎng)站好比一本畫冊，而網(wǎng)頁好比畫冊中的每一個分頁第二頁，共一百二十頁。簡而言之，網(wǎng)站是由網(wǎng)頁通過超鏈接有機的集合在一起，通過瀏覽器看到的畫面就是網(wǎng)頁。第三頁，共一百二十頁。2網(wǎng)站建設(shè)流程企業(yè)網(wǎng)站建設(shè)流程第一步：客戶提出需求：客戶通過電話、電子郵件或在線訂單方式提出自己網(wǎng)站建設(shè)方面的“基本需求”。涉及內(nèi)容包括：1、公司介紹2、欄目描述3、網(wǎng)站基本功能需求4、基本設(shè)計要求第四頁，共一百二十頁。第二步：設(shè)計建站方案首先，根據(jù)企業(yè)的要求和實際狀況，設(shè)計適合企業(yè)的網(wǎng)站方案。是選擇虛擬主機服務(wù)，還是自己購置服務(wù)器；根據(jù)企業(yè)風(fēng)格度身定制；一切根據(jù)企業(yè)的實際需要選擇，最合適的才是最好的。第五頁，共一百二十頁。第六頁，共一百二十頁。第四步：網(wǎng)站系統(tǒng)規(guī)劃

網(wǎng)站是發(fā)布公司產(chǎn)品與服務(wù)信息的平臺，所以網(wǎng)站內(nèi)容非常重要。一個好的網(wǎng)站，不僅僅是一本網(wǎng)絡(luò)版的企業(yè)全貌和產(chǎn)品目錄，它還必須給網(wǎng)站瀏覽者，即企業(yè)的潛在客戶提供方便的瀏覽導(dǎo)航，合理的動態(tài)結(jié)構(gòu)設(shè)計，適合企業(yè)商務(wù)發(fā)展的功能構(gòu)件，如信息發(fā)布系統(tǒng)、在線調(diào)查系統(tǒng)等，豐富實用的資訊和互動空間。我們將根據(jù)客戶的簡單材料，精心進行規(guī)劃，提交出一份網(wǎng)站建設(shè)方案書。第七頁，共一百二十頁。第五步確定合作意向：雙方以面談、電話或電子郵件等方式，針對項目內(nèi)容和具體需求進行協(xié)商。雙方認可后，簽署《網(wǎng)站建設(shè)合同書》。第八頁，共一百二十頁。第六步：網(wǎng)站內(nèi)容整理

根據(jù)網(wǎng)站建設(shè)方案書，由客戶組織出一份與企業(yè)網(wǎng)站欄目相關(guān)的內(nèi)容材料（電子文檔文字和圖片等），我們將對相關(guān)文字和圖片進行詳細的處理、設(shè)計、排版、掃描、制作，這一過程需要客戶給予積極的配合。第九頁，共一百二十頁。第七步：網(wǎng)頁設(shè)計制作

一旦網(wǎng)站的內(nèi)容與結(jié)構(gòu)確定了，下一步的工作就是進行網(wǎng)頁的設(shè)計和程序的開發(fā)。網(wǎng)頁設(shè)計關(guān)乎企業(yè)的形象，一個好的網(wǎng)頁設(shè)計，能夠在信息發(fā)布的同時對公司的意念以及宗旨作出準(zhǔn)確的詮釋。很多國際大型公司都不惜花費巨大的投入在網(wǎng)頁的設(shè)計上。我們擁有專業(yè)的技術(shù)人員，將給您提供最專業(yè)的網(wǎng)頁設(shè)計，使您的網(wǎng)站表現(xiàn)不凡，脫穎而出。第十頁，共一百二十頁。第八步：網(wǎng)站推廣維護在網(wǎng)絡(luò)上建立了一個家，是企業(yè)上網(wǎng)的一個重要標(biāo)志，但還不等于說就可以大功告成了。因為一個設(shè)計新穎，功能齊全的網(wǎng)站，如果沒有人來看就起不到應(yīng)有的作用了。為了能讓更多的人來瀏覽企業(yè)的網(wǎng)站，必須有一個詳盡而專業(yè)的網(wǎng)站推廣方案，包括著名網(wǎng)絡(luò)搜索引擎登錄，網(wǎng)絡(luò)廣告發(fā)布，郵件群發(fā)推廣，Logo互換鏈接等等。這一部分尤其重要，專業(yè)的網(wǎng)絡(luò)營銷推廣策劃必不可少。廈門乙天科技可給您提供國內(nèi)外搜索引擎登陸服務(wù)、門戶網(wǎng)站分類廣告、分布式批量電子郵件廣告、電子雜志貼片等多種推廣方案。另外，我們還將根據(jù)您具體的需要，與您簽訂“網(wǎng)站維護更新協(xié)議”，對您的網(wǎng)站頁面和內(nèi)容進行及時的修改、更新、維護服務(wù)。第十一頁，共一百二十頁。3定位網(wǎng)站主題定位網(wǎng)站主題就是確定網(wǎng)站的題材。一般來說，網(wǎng)站的主題應(yīng)該比較鮮明，是判斷一個網(wǎng)站成功與否的關(guān)鍵。對于題材的選擇，應(yīng)注意：主題要小而精題材最好是你擅長或者喜愛的內(nèi)容題材不要太濫或者目標(biāo)太高第十二頁，共一百二十頁。摩托羅拉主頁第十三頁，共一百二十頁。摩托羅拉公司主頁上主題是手機產(chǎn)品，具有鮮明的主題，精細的Flash動畫，響亮地口號“MOTO手寫帝國”，具有強烈特征的風(fēng)格，富有情感的背景音樂。第十四頁，共一百二十頁。4為網(wǎng)站起名網(wǎng)站的名字要正、響亮、易記。名稱要正名稱要易記如：百度、搜狐等名稱要有特色第十五頁，共一百二十頁。5定位網(wǎng)站CI形象CI是英文CorporateIdentity的英文縮寫，直譯為“企業(yè)形象規(guī)范體系”。這是指一個企業(yè)為了獲得社會的理解與信任，將其企業(yè)的宗旨和產(chǎn)品包含的文化內(nèi)涵傳達給公眾，而建立自己的視覺體系形象系統(tǒng)。

CI由MI(理念識別系統(tǒng))、BI(行為識別系統(tǒng))、VI(視覺識別系統(tǒng))三部分組成。

如果說傳統(tǒng)企業(yè)出售的是產(chǎn)品的話，那么，現(xiàn)代企業(yè)推銷的是企業(yè)形象。從某種意義上說CI活動就是創(chuàng)造、生產(chǎn)和推銷企業(yè)形象的過程。

企業(yè)LOGO及專用字體設(shè)計、企業(yè)CIS設(shè)計，塑造和傳播企業(yè)識別形象，在市場競爭中發(fā)揮品牌攻心、形象制勝的營銷作用。

第十六頁，共一百二十頁?，F(xiàn)實生活中的CI策劃比比皆是，杰出的例子如：可口可樂公司，全球統(tǒng)一的標(biāo)志，色彩和產(chǎn)品包裝，給我們的印象極為深刻。更多的例子如SONY,三菱，麥當(dāng)勞等等。

一個杰出的網(wǎng)站，和實體公司一樣，也需要整體的形象包裝和設(shè)計。準(zhǔn)確的，有創(chuàng)意的CI設(shè)計，對網(wǎng)站的宣傳推廣有事半功倍的效果。在您的網(wǎng)站主題和名稱定下來之后，需要思考的就是網(wǎng)站的CI形象。第十七頁，共一百二十頁。CI設(shè)計常用作法1.設(shè)計網(wǎng)站的標(biāo)志(logo).首先你需要設(shè)計制作一個網(wǎng)站的標(biāo)志(logo)。就如同商標(biāo)一樣，logo是你站點特色和內(nèi)涵的集中體現(xiàn)，看見logo就讓大家聯(lián)想起你的站點。注意：這里的logo不是指88X31的小圖標(biāo)banner,而是網(wǎng)站的標(biāo)志。第十八頁，共一百二十頁。標(biāo)志可以是中文，英文字母，可以是符號，圖案，可以是動物或者人物等等。比如：soim是用soim的英文作為標(biāo)志，新浪用字母sina+眼睛作為標(biāo)志。標(biāo)志的設(shè)計創(chuàng)意來自你網(wǎng)站的名稱和內(nèi)容。第十九頁，共一百二十頁。

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

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

(3).最常用和最簡單的方式是用自己網(wǎng)站的英文名稱作標(biāo)志。采用不同的字體，字母的變形，字母的組合可以很容易制作好自己的標(biāo)志第二十頁，共一百二十頁。2.設(shè)計網(wǎng)站的標(biāo)準(zhǔn)色彩。網(wǎng)站給人的第一印象來自視覺沖擊，確定網(wǎng)站的標(biāo)準(zhǔn)色彩是相當(dāng)重要的一步。不同的色彩搭配產(chǎn)生不同的效果，并可能影響到訪問者的情緒。

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

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

一般來說，適合于網(wǎng)頁標(biāo)準(zhǔn)色的顏色有：藍色，黃/橙色，黑/灰/白色三大系列色。(注：關(guān)于色彩搭配的具體方法，我們會在本系列文章的第八篇介紹)。

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

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

以上四方面：標(biāo)志，色彩，字體，標(biāo)語，是一個網(wǎng)站樹立CI形象的關(guān)鍵，確切的說是網(wǎng)站的表面文章，設(shè)計并完成這幾步，你的網(wǎng)站將脫胎換骨，整體形象有一個提高。形象地說：你從一個土氣的農(nóng)民轉(zhuǎn)變?yōu)橐晃晃餮b革履的白領(lǐng)人士。(注意：我們只是以平面靜態(tài)來設(shè)計CI,還沒有引入聲音，三維立體等因素。第二十四頁，共一百二十頁。6確定網(wǎng)站的欄目和板塊我們在前面學(xué)習(xí)了定位網(wǎng)站主題和確立網(wǎng)站的CI形象。下面是否該進入實質(zhì)性的設(shè)計制作階段呢？答案是：不能。經(jīng)驗告訴我們，建立一個網(wǎng)站好比寫一篇文章，首先要擬好提綱，文章才能主題明確，層次清晰；也好比造一座高樓，首先要設(shè)計好框架圖紙，才能使樓房結(jié)構(gòu)合理。第二十五頁，共一百二十頁。初學(xué)者最容易犯的錯誤就是：確定題材后立刻開始制作。當(dāng)你一頁一頁制作完畢后才發(fā)現(xiàn)：網(wǎng)站結(jié)構(gòu)不清晰，目錄龐雜，內(nèi)容東一塊西一塊。結(jié)果不但瀏覽者看得糊涂，自己擴充和維護網(wǎng)站也相當(dāng)困難，您的網(wǎng)站或許就此半途而廢，更糟糕的是：你因此失去了制作主頁的信心和興趣！第二十六頁，共一百二十頁。所以，我們在動手制作網(wǎng)頁前，一定要考慮好以下三方面：1.確定欄目和版塊；

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

3.確定網(wǎng)站的整體風(fēng)格創(chuàng)意設(shè)計第二十七頁，共一百二十頁。網(wǎng)站的題材確定后，相信你已經(jīng)收集和組織了許多相關(guān)的資料內(nèi)容。你一定認為這些都是最好的，肯定能吸引網(wǎng)友們來瀏覽網(wǎng)站。但是你有沒有將最好的，最吸引人的內(nèi)容放在最突出的位置呢？有沒有讓好東西在版面分布上占絕對優(yōu)勢呢？第二十八頁，共一百二十頁。許多個人主頁的欄目(主菜單)并不是這樣的。舉個例子：有一個以提供動畫素材為主題的站點，它的主欄目是：關(guān)于站長，本站導(dǎo)航，動畫寶庫，本站論壇，本站留言本，聯(lián)系站長。首頁上寫著本站網(wǎng)址和版權(quán)申明(居然還有將本站設(shè)為首頁字樣)。最主要的，最吸引人的動畫素材在主欄目里占1/6，在首頁上一字沒提。我想即使這個站點的確有大量的，精美的動畫素材，也很難吸引瀏覽者繼續(xù)挖掘。第二十九頁，共一百二十頁。欄目的實質(zhì)是一個網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主體明確顯示出來。在制定欄目的時候，要仔細考慮，合理安排。一般的網(wǎng)站欄目安排要注意以下幾方面：1.一定記住要緊扣你的主題！一般的做法是：將你的主題按一定的方法分類并將它們作為網(wǎng)站的主欄目。例如上面的例子，可以將欄目分為動物動畫，標(biāo)志動畫，三維動畫，卡通動畫等，在首頁上標(biāo)明最近更新的動畫。記?。褐黝}欄目個數(shù)在總欄目中要占絕對優(yōu)勢，這樣的網(wǎng)站顯的專業(yè)，主題突出，容易給人留下深刻印象。第三十頁，共一百二十頁。2.設(shè)一個最近更新或網(wǎng)站指南欄目如果你的首頁沒有安排版面放置最近更新內(nèi)容信息，就有必要設(shè)立一個“最近更新”的欄目。這樣做是為了照顧常來的訪客，讓你的主頁更有人性化。如果你的主頁內(nèi)容龐大(超過15MB)，層次較多，而又沒有站內(nèi)的搜索引擎，建議您設(shè)置“本站指南”欄目?？梢詭椭踉L者快速找到他們想要的內(nèi)容。第三十一頁，共一百二十頁。3.設(shè)定一個可以雙向交流的欄目不需要很多，但一定要有。比如論壇，留言本，郵件列表等，可以讓瀏覽者留下他們的信息。有調(diào)查表明，提供雙向交流的站點比簡單的留一個"Emailme"的站點更具有親和力。第三十二頁，共一百二十頁。4.設(shè)一個下載或常見問題回答欄目網(wǎng)絡(luò)的特點是信息共享。如果你看到一個站點有大量的優(yōu)秀的有價值的資料，你肯定希望能一次性下載，而不是一頁一頁瀏覽存盤。“將心比心”在你自己的主頁上設(shè)置一個資料下載欄目，會得到大家的喜歡。有些站點為了廣告顯示量，一篇文章還要分幾頁顯示，我覺得遲早會因訪問量下降而淘汰(個人意見:)。另外，如果您的站點經(jīng)常收到網(wǎng)友關(guān)于某方面的問題來信，你最好設(shè)立一個常見問題回答的欄目，既方便了網(wǎng)友，也可以節(jié)約自己更多時間用以學(xué)習(xí)第三十三頁，共一百二十頁。至于其他的輔助內(nèi)容，如關(guān)于本站，版權(quán)信息等可以不放在主欄目里，以免沖淡主題。總結(jié)以上幾點，我們得出劃分欄目需要注意的是：●盡可能刪除與主題無關(guān)的欄目

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

●盡可能方便訪問者的瀏覽和查詢第三十四頁，共一百二十頁。面說的是欄目，我們再看看版塊設(shè)置。版塊比欄目的概念要大一些，每個版塊都有自己的欄目。舉個例子：網(wǎng)易的站點分新聞，體育，財經(jīng)，娛樂，教育等版塊，每個版塊下面有各有自己的主欄目。一般的個人站點內(nèi)容少，只有主欄目(主菜單)就夠了，不需要設(shè)置版塊。如果你覺得的確有必要設(shè)置版塊的，應(yīng)該注意1.各版塊要有相對獨立性。2.各版塊要有相互關(guān)聯(lián)。3.版塊的內(nèi)容要圍繞站點主題。關(guān)于版塊方面，主要是門戶站點需要考慮的問題，在此不再作展開討論。第三十五頁，共一百二十頁。7確定網(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)的一些建議：●不要將所有文件都存放在根目錄下。將所有文件都放在根目錄下。這樣做造成的不利影響在于：

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

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

第三十七頁，共一百二十頁?！癜礄谀績?nèi)容建立子目錄。

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

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

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

第三十八頁，共一百二十頁?！裨诿總€主目錄下都建立獨立的images目錄。

默認的，一個站點根目錄下都有一個images目錄。剛開始學(xué)習(xí)主頁制作時，阿捷習(xí)慣將所有圖片都存放在這個目錄里?？墒呛髞戆l(fā)現(xiàn)很不方便，當(dāng)我需要將某個主欄目打包供網(wǎng)友下載，或者將某個欄目刪除時，圖片的管理相當(dāng)麻煩。經(jīng)過實踐發(fā)現(xiàn)：為每個主欄目建立一個獨立的images目錄是最方便管理的。而根目錄下的images目錄只是用來放首頁和一些次要欄目的圖片第三十九頁，共一百二十頁?！衲夸浀膶哟尾灰?。

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

其它需要注意的還有：

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

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

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

隨著網(wǎng)頁技術(shù)的不斷發(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)基礎(chǔ)之上，但可以跨越目錄。形象的說：每個頁面都是一個固定點，鏈接則是在兩個固定點之間的連線。一個點可以和一個點連接，也可以和多個點連接。更重要的是，這些點并不是分布在一個平面上，而是存在于一個立體的空間中。

第四十一頁，共一百二十頁?！裎覀冄芯烤W(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)絡(luò)服務(wù)器的鏈接，每個頁面相互之間都建立有鏈接。立體結(jié)構(gòu)象東方明珠電視塔上的鋼球。這種鏈接結(jié)構(gòu)的優(yōu)點是瀏覽方便，隨時可以到達自己喜歡的頁面。缺點是鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了多少內(nèi)容。

第四十三頁，共一百二十頁。8確定網(wǎng)站的整體風(fēng)格和創(chuàng)意設(shè)計

網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計是站長們最希望掌握，也是最難以學(xué)習(xí)的。難就難在沒有一個固定的程式可以參照和模仿。給你一個主題，任何兩人都不可能設(shè)計出完全一樣的網(wǎng)站。當(dāng)我們說：“這個站點很cool，很有個性！”那么，是什么讓你覺得很cool呢？它到底和一般的網(wǎng)站有什么區(qū)別呢？用最簡明的語言來說明：1.風(fēng)格是什么，如何樹立網(wǎng)站風(fēng)格？2.創(chuàng)意是什么，如何產(chǎn)生創(chuàng)意？

第四十四頁，共一百二十頁。A、風(fēng)格(style)是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個“整體形象”包括站點的CI（標(biāo)志，色彩，字體，標(biāo)語），版面布局，瀏覽方式，交互性，文字，語氣，內(nèi)容價值，存在意義，站點榮譽等等諸多因素。舉個例子：我們覺得網(wǎng)易是平易近人的，迪斯尼是生動活潑的，IBM是專業(yè)嚴(yán)肅的。這些都是網(wǎng)站給人們留下的不同感受。第四十五頁，共一百二十頁。第四十六頁，共一百二十頁。C、風(fēng)格是有人性的。通過網(wǎng)站的外表，內(nèi)容，文字，交流可以概括出一個站點的個性，情緒。是溫文儒雅，是執(zhí)著熱情，是活潑易變,是放任不羈。象詩詞中的“豪放派”和“婉約派”，你可以用人的性格來比喻站點。第四十七頁，共一百二十頁。有風(fēng)格的網(wǎng)站與普通網(wǎng)站的區(qū)別在于：普通網(wǎng)站你看到的只是堆砌在一起的信息，你只能用理性的感受來描述，比如信息量大小，瀏覽速度快慢。但你瀏覽過有風(fēng)格的網(wǎng)站后你能有更深一層的感性認識，比如站點有品位，和藹可親，是老師，是朋友。其實風(fēng)格就是一句話：與眾不同！第四十八頁，共一百二十頁。如何樹立網(wǎng)站風(fēng)格呢？我們可以分這樣幾個步驟：

第一，確信風(fēng)格是建立在有價值內(nèi)容之上的。一個網(wǎng)站有風(fēng)格而沒有內(nèi)容，就好比繡花枕頭一包草，好比一個性格傲慢但卻目不識丁的人。你首先必須保證內(nèi)容的質(zhì)量和價值性。這是最基本的，無須置疑第四十九頁，共一百二十頁。第二，你需要徹底搞清楚自己希望站點給人的印象是什么。可以從這幾方面來理清思路：1.如果只用一句話來描述你的站點，應(yīng)該是:_____________

參考答案：

有創(chuàng)意，專業(yè)，有(技術(shù))實力，有美感，有沖擊力

2.想到你的站點，可以聯(lián)想到的色彩是：________________

參考答案：

熱情的紅色，幻想的天蘭色，聰明的金黃色

第五十頁，共一百二十頁。3.想到你的站點，可以聯(lián)想到的畫面是：________________

參考答案：

一份早報，一輛法拉利跑車，人群擁擠的廣場，雜貨店

4.如果網(wǎng)站是一個人，他擁有的個性是：________________

參考答案：

思想成熟的中年人，狂野奔放的牛仔，自信憨厚的創(chuàng)業(yè)者

5.作為站長，你希望給人的印象是：____________________

參考答案：

敬業(yè)，認真投入，有深度，負責(zé)，純真，直爽，淑女第五十一頁，共一百二十頁。6.用一種動物來比喻，你的網(wǎng)站最象：__________________

參考答案：

貓(神秘高貴)，鷹(目光銳利)，兔子(聰明敏感)，獅子(自信威信)

7.瀏覽者覺得你和其他網(wǎng)站的不同是：__________________

參考答案：

可以信賴，信息最快，交流方便，

8.瀏覽者和你交流合作的感受是：______________________

參考答案：

師生，同事，朋友，長幼。

你可以自己先填寫一份答案，然后讓其他網(wǎng)友填寫。比較后的結(jié)果會告訴你：你網(wǎng)站現(xiàn)在的差距，弱點及需要改進的地方。

第五十二頁，共一百二十頁。第三，在明確自己的網(wǎng)站印象后，開始努力建立和加強這種印象。

經(jīng)過第二步印象的的"量化"后，你需要進一步找出其中最有特色特點的東西，就是最能體現(xiàn)網(wǎng)站風(fēng)格的東西。并以它作為網(wǎng)站的特色加以重點強化，宣傳。例如：再次審查網(wǎng)站名稱，域名，欄目名稱是否符合這種個性，是否易記。審查網(wǎng)站標(biāo)準(zhǔn)色彩是否容易聯(lián)想到這種特色，是否能體現(xiàn)網(wǎng)站的性格等等。具體的做法，沒有定式。這里提供一些參考第五十三頁，共一百二十頁。1.將你的標(biāo)志logo,盡可能的出現(xiàn)在每個頁面上?；蛘唔撁?，或者頁腳，或則背景。

2.突出你的標(biāo)準(zhǔn)色彩。文字的鏈接色彩，圖片的主色彩，背景色，邊框等色彩盡量使用與標(biāo)準(zhǔn)色彩一致的色彩。

3.突出你的標(biāo)準(zhǔn)字體。在關(guān)鍵的標(biāo)題，菜單，圖片里使用統(tǒng)一的標(biāo)準(zhǔn)字體。

4.想一條朗朗上口宣傳標(biāo)語。把它做在你的banner里，或者放在醒目的位置，告訴大家你的網(wǎng)站的特色是...

5.使用統(tǒng)一的語氣和人稱。即使是多個人合作維護，也要讓讀者覺得是同一個人寫的。

第五十四頁，共一百二十頁。6.使用統(tǒng)一的圖片處理效果。比如，陰影效果的方向，厚度，模糊度都必須一樣。

7.創(chuàng)造一個你的站點特有的符號或圖標(biāo)。比如在一句鏈接前的一個點，可以使用,.?！睢?/p>

□△→（區(qū)位碼里自己參看）等等。雖然很簡單的一個變化，卻給人與眾不同的感覺，(為什么我沒有想到呢？)

8.用自己設(shè)計的花邊，線條，點

9.展示你網(wǎng)站的榮譽和成功作品。

告訴網(wǎng)友關(guān)于你的真實的故事和想法。

風(fēng)格的形成不是一次定位的，你可以在實踐中不斷強化，調(diào)整，修飾，直到有一天，網(wǎng)友們寫信告訴你："我喜歡你的站點，因為它很有風(fēng)格！"

第五十五頁，共一百二十頁?！駝?chuàng)意(idea)是網(wǎng)站生存的關(guān)鍵。這一點相信大家都已經(jīng)認同。然而作為網(wǎng)頁設(shè)計師，最苦惱的就是沒有好的創(chuàng)意來源。

注意，這里說的創(chuàng)意是指站點的整體創(chuàng)意，(因為這個創(chuàng)意而產(chǎn)生這個站點，或者相同的內(nèi)容，推出的創(chuàng)意不同)。

第五十六頁，共一百二十頁。創(chuàng)意到底是什么，如何產(chǎn)生創(chuàng)意呢？

創(chuàng)意是引人入勝，精彩萬分，出奇不意的；

創(chuàng)意是捕捉出來的點子，是創(chuàng)作出來的奇招

這些講法都說出了創(chuàng)意的一些特點，實質(zhì)上，○創(chuàng)意是傳達信息的一種特別方式。

比如Webdesigner(網(wǎng)頁設(shè)計師)，我們將其中的E字母大寫一下:wEbdEsigEr，感覺怎么樣，這其實就是一種創(chuàng)意！

第五十七頁，共一百二十頁。創(chuàng)意并不是天才者的靈感，而是思考的結(jié)果。根據(jù)美國廣告學(xué)教授詹姆斯的研究，創(chuàng)意思考的過程分五階段：

1.準(zhǔn)備期--研究所搜集的資料，根據(jù)舊經(jīng)驗，啟發(fā)新創(chuàng)意；

2.孵化期--將資料咀嚼消化，使意識自由發(fā)展，任意結(jié)合；

3.啟示期--意識發(fā)展并結(jié)合，產(chǎn)生創(chuàng)意；

4.驗證期--將產(chǎn)生的創(chuàng)意討論修正；

5.形成期--設(shè)計制作網(wǎng)頁，將創(chuàng)意具體化。

第五十八頁，共一百二十頁?！饎?chuàng)意是將現(xiàn)有的要素重新組合。

比如，網(wǎng)絡(luò)與電話結(jié)合，產(chǎn)生IP電話。從這一點上出發(fā)，任何人，包括你和我，都可以創(chuàng)造出不同凡響的創(chuàng)意。而且，資料越豐富，越容易產(chǎn)生創(chuàng)意。就好比萬花筒，筒內(nèi)的玻璃片越多，所呈現(xiàn)的圖案越多。你如果有心可以發(fā)現(xiàn)，網(wǎng)絡(luò)上的最多的創(chuàng)意來自與現(xiàn)實生活的結(jié)合(或者虛擬現(xiàn)實)，例如在線書店，電子社區(qū)，在線拍賣。你是否想到了一種更好的創(chuàng)意呢？

第五十九頁，共一百二十頁。創(chuàng)意思考的途徑最常用的是聯(lián)想，這里提供了網(wǎng)站創(chuàng)意的25種聯(lián)想線索：

1.把它顛倒2.把它縮小3.把顏色換一下4.使它更長

5.使它閃動6.把它放進音樂里7.結(jié)合文字音樂圖畫8.使它成為年輕的

9.使它重復(fù)使它變成立體11.參加競賽12.參加打賭

13.變更一部分14.分裂它15.使它羅曼蒂克16.使它速度加快

17.增加香味18.使它看起來流行19.使它對稱20.將它向兒童訴求

21.價格更低22.給它起個綽號23.把它打包24.免費提供

25.以上各項延伸組合

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

第六十頁，共一百二十頁。需要一提的是：創(chuàng)意的目的是更好的宣傳推廣網(wǎng)站。如果創(chuàng)意很好，卻對網(wǎng)站發(fā)展毫無意義，好比給奶牛穿高跟鞋，那么，我們寧可放棄這個創(chuàng)意！

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

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

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

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

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

●確定首頁的功能模塊

●設(shè)計首頁的版面

●處理技術(shù)上的細節(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)哪些功能，是否需要添加其他模塊都是首頁設(shè)計首先需要確定的。

第六十四頁，共一百二十頁。二).設(shè)計首頁的版面

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

設(shè)計版面的最好方法是：找一張白紙，一支筆，先將你理想中的草圖勾勒出來，然后再用網(wǎng)頁制作軟件實現(xiàn)第六十五頁，共一百二十頁。版面指的是瀏覽器看到的完整的一個頁面（可以包含框架和層）。因為每個人的顯示器分辨率不同，所以同一個頁面的大小可能出現(xiàn)640*480像素,800*600像素,1024*768像素等不同尺寸。

第六十六頁，共一百二十頁。布局，就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。你可能注意到：“最適合”是一個不確定的形容詞，什么才是最適合的呢？抱歉的是阿捷不能也不可能給您一個完整的正確的答案。就好比有人希望知道成功的秘訣是什么，成功者只能建議您用什么方法，什么途徑才能最容易獲得成功，而不可能有一步成功的"秘訣"告訴您。第六十七頁，共一百二十頁。我們在設(shè)計思考系列文章第四篇講過站點整體的創(chuàng)意，版面布局也是一個創(chuàng)意的問題，但要比站點整體的創(chuàng)意容易，有規(guī)律的多。讓我們先來了解一下版面布局的步驟：第六十八頁，共一百二十頁。一.草案新建頁面就象一張白紙，沒有任何表格，框架和約定俗成的東西，你可以盡可能的發(fā)揮你的想象力，將你想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆，當(dāng)然用作圖軟件photoshop等也可以)。這屬于創(chuàng)造階段，不講究細膩工整，不必考慮細節(jié)功能，只以粗陋的線條勾畫出創(chuàng)意的輪廓即可。盡你的可能多畫幾張，最后選定一個滿意的作為繼續(xù)創(chuàng)作的腳本。第六十九頁，共一百二十頁。二.粗略布局在草案的基礎(chǔ)上，將你確定需要放置的功能模塊安排到頁面上。(注：功能模塊我們在"首頁設(shè)計-引子"中提過，主要包含網(wǎng)站標(biāo)志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計數(shù)器,版權(quán)信息等)。注意，這里我們必須遵循突出重點、平衡諧調(diào)的原則，將網(wǎng)站標(biāo)志，主菜單等最重要的模塊放在最顯眼，最突出的位置，然后在考慮次要模塊的排放。第七十頁，共一百二十頁。三.定案將粗略布局精細化，具體化。（靠你的智慧和經(jīng)驗，旁敲側(cè)擊多方聯(lián)想，才能作出具有創(chuàng)意的布局。）在布局過程中，我們可以遵循的原則有：1、正常平衡亦稱"勻稱"。多指左右、上下對照形式，主要強調(diào)秩序，能達到安定誠實、信賴的效果。2、異常平衡即非對照形式，但也要平衡和韻律，當(dāng)然都是不均整的，此種布局能達到強調(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)載自廣告大師樊志育《廣告制作》)第七十二頁，共一百二十頁。以上的設(shè)計原則，雖然枯燥，但是我們?nèi)绻茴I(lǐng)會并活用到頁面布局里，效果就大不一樣了。比如，○網(wǎng)頁的白色背景太虛，則可以加些色快；○版面零散，可以用線條和符號串聯(lián)；○左面文字過多，右面則可以插一張圖片保持平衡；○表格太規(guī)矩，可以改用導(dǎo)角試試。經(jīng)過不斷的嘗試和推敲，你的網(wǎng)頁一定會亮麗起來的哦:)第七十三頁，共一百二十頁。看看我們經(jīng)常用到的版面布局形式:

1."T"結(jié)構(gòu)布局。所謂"T"結(jié)構(gòu)。就是指頁面頂部為橫條網(wǎng)站標(biāo)志+廣告條，下方左面為主菜單，右面顯示內(nèi)容的布局，因為菜單條背景教深，整體效果類似英文字母"T",所以我們稱之為"T"形布局。這是網(wǎng)頁設(shè)計中用的最廣返的一種布局方式。(圖略)這種布局的優(yōu)點是頁面結(jié)構(gòu)清晰，主次分明。是初學(xué)者最容易上手的布局方法。缺點是規(guī)矩呆板，如果細節(jié)色彩上不注意，很容易讓人"看之無味"。

第七十四頁，共一百二十頁。2."口"型布局。這是一個象形的說法，就是頁面一般上下各有一個廣告條，左面是主菜單，右面放友情連接等，中間是主要內(nèi)容。(圖略)這種布局的優(yōu)點是充分利用版面，信息量大(我的主頁首頁即屬于這種布局)。缺點是頁面擁擠，不夠靈活。也有將四邊空出，只用中間的窗口型設(shè)計，例如網(wǎng)易壁紙站。第七十五頁，共一百二十頁。3."三"型布局。這種布局多用于國外站點，國內(nèi)用的不多。特點是頁面上橫向兩條色塊，將頁面整體分割為四部分，色塊中大多放廣告條。4.對稱對比布局。顧名思義，采取左右或者上下對稱的布局，一半深色，一半淺色，一般用于設(shè)計型站點。優(yōu)點是視覺沖擊力強，缺點是將兩部分有機的結(jié)合比較困難。第七十六頁，共一百二十頁。5.POP布局。POP引自廣告術(shù)語，就是指頁面布局象一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心。常用于時尚類站點，比如ELLE.com。優(yōu)點顯而易見：漂亮吸引人。缺點就是速度慢。作為版面布局還是值得借鑒的。以上總結(jié)了目前網(wǎng)絡(luò)上常見的布局，其實還有許許多多別具一格的布局，關(guān)鍵在于你的創(chuàng)意和設(shè)計了。第七十七頁，共一百二十頁。對于版面布局的技巧，這里提供四個建議，您可以自己推敲：1.加強視覺效果2.加強文案的可視度和可讀性3.統(tǒng)一感的視覺4.新鮮和個性是布局的最高境界第七十八頁，共一百二十頁。10色彩的搭配網(wǎng)頁的色彩是樹立網(wǎng)站形象的關(guān)鍵之一，色彩搭配卻是網(wǎng)友們感到頭疼的問題。網(wǎng)頁的背景，文字，圖標(biāo)，邊框，超鏈接...，應(yīng)該采用什么樣的色彩，應(yīng)該搭配什么色彩才能最好的表達出預(yù)想的內(nèi)涵呢？：第七十九頁，共一百二十頁。首先我們先來了解一些色彩的基本知識：1、顏色是因為光的折射而產(chǎn)生的。2、紅，黃，藍是三原色，其它的色彩都可以用這三種色彩調(diào)和而成。網(wǎng)頁html語言中的色彩表達即是用這三種顏色的數(shù)值表示例如：紅色是color(255,0,0)十六進制的表示方法為(FF0000)白色為(FFFFFF),我們經(jīng)?？吹降?bgColor=#FFFFFF"就是指背景色為白色。3、顏色分非彩色和彩色兩類。非彩色是指黑，白，灰系統(tǒng)色。彩色是指除了非彩色以外的所有色彩。4、任何色彩都有飽和度和透明度的屬性，屬性的變化產(chǎn)生不同的色相，所以至少可以制作幾百萬種色彩。

第八十頁，共一百二十頁。網(wǎng)頁制作用彩色還是非彩色好呢？根據(jù)專業(yè)的研究機構(gòu)研究表明：彩色的記憶效果是黑白的3.5倍。也就是說，在一般情況下，彩色頁面較完全黑白頁面更加吸引人。我們通常的做法是：主要內(nèi)容文字用非彩色(黑色)，邊框，背景，圖片用彩色。這樣頁面整體不單調(diào)，看主要內(nèi)容也不會眼花。

第八十一頁，共一百二十頁。非彩色的搭配黑白是最基本和最簡單的搭配，白字黑底，黑底白字都非常清晰明了。灰色是萬能色，可以和任何彩色搭配，也可以幫助兩種對立的色彩和諧過渡。如果你實在找不出合適的色彩，那么用灰色試試，效果絕對不會太差。第八十二頁，共一百二十頁。彩色的搭配色彩千變?nèi)f化，彩色的搭配是我們研究的重點。我們依然需要進一步學(xué)習(xí)一些色彩的知識。一、色環(huán)。我們將色彩按"紅->黃->綠->藍->紅"依次過度漸變，就可以得到一個色彩環(huán)。色環(huán)的兩端是暖色和寒色，當(dāng)中是中型色。紅.橙.橙黃.黃.黃綠.綠.青綠.藍綠.藍.藍紫.紫.紫紅.紅.暖色系.中性系.寒色系.中性系

第八十三頁，共一百二十頁。二、色彩的心理感覺。不同的顏色會給瀏覽者不同的心理感受。紅色是一種激奮的色彩。刺激效果，能使人產(chǎn)生沖動，憤怒，熱情，活力的感覺。綠色介于冷暖兩中色彩的中間，顯得和睦，寧靜，健康，安全的感覺。它和金黃，淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。橙色也是一種激奮的色彩，具有輕快，歡欣，熱烈，溫馨，時尚的效果。黃色具有快樂，希望，智慧和輕快的個性，它的明度最高。

第八十四頁，共一百二十頁。藍色是最具涼爽，清新，專業(yè)的色彩。它和白色混合，能體現(xiàn)柔順，淡雅，浪漫的氣氛(象天空的色彩:)白色具有潔白，明快，純真，清潔的感受。黑色具有深沉，神秘，寂靜，悲哀，壓抑的感受?；疑哂兄杏?，平凡，溫和，謙讓，中立和高雅的感覺。每種色彩在飽和度，透明度上略微變化就會產(chǎn)生不同的感覺。以綠色為例，黃綠色有青春，旺盛的視覺意境，而藍綠色則顯得幽寧，陰深。第八十五頁，共一百二十頁。網(wǎng)頁色彩搭配的原理1、色彩的鮮明性。網(wǎng)頁的色彩要鮮艷，容易引人注目。2、色彩的獨特性。要有與眾不同的色彩，使得大家對你的印象強烈。(參考設(shè)計思考第二篇網(wǎng)站CI的標(biāo)準(zhǔn)色彩一節(jié))3、色彩的合適性。就是說色彩和你表達的內(nèi)容氣氛相適合。如用粉色體現(xiàn)女性站點的柔性。4、色彩的聯(lián)想性。不同色彩會產(chǎn)生不同的聯(lián)想，藍色想到天空，黑色想到黑夜，紅色想到喜事等，選擇色彩要和你網(wǎng)頁的內(nèi)涵相關(guān)聯(lián)。第八十六頁，共一百二十頁。網(wǎng)頁色彩掌握的過程隨著網(wǎng)頁制作經(jīng)驗的積累，我們用色有這樣的一個趨勢:單色->五彩繽紛->標(biāo)準(zhǔn)色->單色。一開始因為技術(shù)和知識缺乏，只能制作出簡單的網(wǎng)頁，色彩單一；在有一定基礎(chǔ)和材料后，希望制作一個漂亮的網(wǎng)頁，將自己收集的最好的圖片，最滿意色彩堆砌在頁面上；但是時間一長，卻發(fā)現(xiàn)色彩雜亂，沒有個性和風(fēng)格；第三次重新定位自己的網(wǎng)站，選擇好切合自己的色彩，推出的站點往往比較成功；當(dāng)最后設(shè)計理念和技術(shù)達到頂峰時，則又返樸歸真，用單一色彩甚至非彩色就可以設(shè)計出簡潔精美的站點。第八十七頁，共一百二十頁。網(wǎng)頁色彩搭配的技巧1、用一種色彩。這里是指先選定一種色彩，然后調(diào)整透明度或者飽和度，(說得通俗些就是將色彩變淡或則加深)，產(chǎn)生新的色彩，用于網(wǎng)頁。這樣的頁面看起來色彩統(tǒng)一，有層次感。2、用兩種色彩。先選定一種色彩，然后選擇它的對比色(在photoshop里按ctrl+shift+I)。我的主頁用藍色和黃色就是這樣確定的。整個頁面色彩豐富但不花稍。3、用一個色系。簡單的說就是用一個感覺的色彩，例如淡藍，淡黃，淡綠；或者土黃，土灰，土藍。確定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中選擇"自定義"，然后在"色庫"中選就可以了。4、用黑色和一種彩色。比如大紅的字體配黑色的邊框感覺很"跳"。第八十八頁，共一百二十頁。在網(wǎng)頁配色中，忌諱的是：1.不要將所有顏色都用到，盡量控制在三種色彩以內(nèi)。2.背景和前文的對比盡量要大，(絕對不要用花紋繁復(fù)的圖案作背景)，以便突出主要文字內(nèi)容。第八十九頁，共一百二十頁。11網(wǎng)頁字體的設(shè)置○字符集的設(shè)定。

在查看html文件原代碼時，我們經(jīng)?？梢栽谖募^<head>和</head>之間看到這么一句代碼：

<metahttp-equiv="Content-Type"c>

這段代碼的作用是什么呢？是否可以刪除呢？

其實這是meta標(biāo)簽的設(shè)定語句，是給瀏覽器看的。它的作用就是告訴瀏覽器：這個HTML文件是采用gb2312字符集制作的。當(dāng)瀏覽器讀到這一代碼，便以gb2312字符集來解釋和翻譯網(wǎng)頁原代碼，然后我們就可以看到正確的網(wǎng)頁。所以這個meta語句是非常重要的，盡量不要刪除。

gb2312就是我們最熟悉的GB簡體碼，英文是iso-8859-1字符集。其它還有BIG5,UTF-8,Shift-JIS,EUC,KOI8-2等字符集，分別用于不同的字體顯示。

第九十頁，共一百二十頁?！鹱煮w的使用。

在網(wǎng)頁里，字體的定義語句是：<fontface="Arial">顯示文字</font>

其中Arial就是一種字體的名稱。

默認的瀏覽器定義的標(biāo)準(zhǔn)字體是中文宋體和英文timesnewRoma字體。也就是說，如果你沒有設(shè)置任何字體，網(wǎng)頁將以這兩種標(biāo)準(zhǔn)字體顯示。同時，著兩種字體也可以在任何操作系統(tǒng)和瀏覽器里正確顯示。

第九十一頁，共一百二十頁。windows另外自帶了40多種英文字體和5種中文字體。這些字體，你也可以在網(wǎng)頁里自由使用和設(shè)置。凡是使用windows操作系統(tǒng)的瀏覽器都可以正確顯示這些字體，但在其它操作系統(tǒng)里，如unix則不能完全正確顯示。

如果你需要用一種特殊的字體來體現(xiàn)你的風(fēng)格，那么如何讓大家可以真正看到你的設(shè)計頁面呢？解決的辦法是：用圖片。

將需要用這種字體的地方用圖片代替，以保證所有人看到的頁面是同一效果。○字體的樣式(style)。

字體的樣式有四種：正常體(regular),斜體(Italic),粗體(Bold),粗斜體(BoldItalic)。設(shè)置方法很簡單，阿捷就不多羅嗦了。

第九十二頁，共一百二十頁。○字體的效果。

這里指通過html語言設(shè)定可以直接顯示的效果，在html里的語句設(shè)定為：

<spanstyle="text-decoration:overline">顯示文字</span>

其中，overline是指上劃線效果。其它常用的效果還有：underline(下劃線)，uppercase(大寫)等等。第九十三頁，共一百二十頁。○字體大小的控制。

字體大小的控制是重點。

一般字體默認的大小是12pt(鎊).用<fontsize="+1">語句可以將文字增大2pt。這種方法我們都已經(jīng)掌握了。而現(xiàn)在網(wǎng)絡(luò)上最流行的小中文字體大小為9pt，第九十四頁，共一百二十頁。上面已經(jīng)介紹了字體在技術(shù)上的各個方面。有關(guān)字體的設(shè)計使用，目前還沒有一個成熟的理論，下面是幾條網(wǎng)頁設(shè)計中字體的使用原則，僅供參考：

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

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

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

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

第九十五頁，共一百二十頁。12網(wǎng)頁中表格的運用表格(table)是頁面的重要元素,是頁面排版的主要手段。盡管DHTML中的層(layer)也可以實現(xiàn)網(wǎng)頁元素的自由定位，但是表格顯然更加方便編輯與修改。熟練掌握和運用表格的各種屬性，可以讓您的頁面看起來賞心悅目。

第九十六頁，共一百二十頁。一.表格的基本用法。表格的基本用法相信您已經(jīng)非常熟悉了。二.表格運用的注意點表格的嵌套并不是表格處理最困難的地方，無論多復(fù)雜的版面，悉心琢磨一番總能找到解決的辦法。

第九十七頁，共一百二十頁。我們需要考慮的是：○用什么樣的嵌套排版方式使網(wǎng)頁的下載速度達到最快。我們知道：瀏覽器在讀取網(wǎng)頁html原代碼時，是讀完整一個table再將它顯示出來。也就是說從<table>標(biāo)簽開始，要讀到</table>標(biāo)簽時，才將表格中的內(nèi)容顯示在屏幕上。而且顯示也有優(yōu)先級，先讀到的先顯示。這樣的話，如果一個大表格中含有多個子表格，必須等大表格讀完，才能將子表格一起顯示出來。第九十八頁，共一百二十頁。我們在訪問一些站點時，等待多時無結(jié)果，按"停止"按鈕卻一下顯示出頁面就是這個原因。因此，我們在設(shè)計頁面表格的時候，應(yīng)該做到：1.整個頁面不要都套在一個表格里，盡量拆分成多個表格;

2.單一表格的結(jié)構(gòu)盡量整齊；

3.表格嵌套層次盡量要少.實驗證明：越復(fù)雜，嵌套層次越多的表格下載速度越慢。第九十九頁，共一百二十頁。13Meta標(biāo)簽META標(biāo)簽是HTML語言HEAD區(qū)的一個輔助性標(biāo)簽，它位于HTML文檔頭部的<HEAD>標(biāo)記和<TITLE>標(biāo)記之間，它提供用戶不可見的信息。meta標(biāo)簽通常用來為搜索引擎robots定義頁面主題，或者是定義用戶瀏覽器上的cookie；它可以用于鑒別作者，設(shè)定頁面格式，標(biāo)注內(nèi)容提要和關(guān)鍵字；還可以設(shè)置頁面使其可以根據(jù)你定義的時間間隔刷新自己,以及設(shè)置RASC內(nèi)容等級，等等。

META標(biāo)簽分兩大部分：HTTP標(biāo)題信息(HTTP-EQUIV)和頁面描述信息(NAME)。

第一百頁，共一百二十頁。★HTTP-EQUIV

HTTP-EQUIV類似于HTTP的頭部協(xié)議，它回應(yīng)給瀏覽器一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容。常用的HTTP-EQUIV類型有：第一百零一頁，共一百二十頁。1、Expires(期限)說明：指定網(wǎng)頁在緩存中的過期時間，一旦網(wǎng)頁過期，必須到服務(wù)器上重新調(diào)閱。

用法：<Metahttp-equiv="Expires"Content="0">

<Metahttp-equiv="Expires"Content="Wed,26Feb199708:21:57GMT">

注意：必須使用GMT的時間格式，或直接設(shè)為0(數(shù)字表示多少時間后過期)。

第一百零二頁，共一百二十頁。2、Pragma(cach模式)說明：禁止瀏覽器從本地機的緩存中調(diào)閱頁面內(nèi)容。

用法：<Metahttp-equiv="Pragma"Content="No-cach">

注意：網(wǎng)頁不保存在緩存中，每次訪問都刷新頁面。這樣設(shè)定，訪問者將無法脫機瀏覽。第一百零三頁，共一百二十頁。第一百零四頁，共一百二十頁。4、Set-Cookie(cookie設(shè)定)說明：瀏覽器訪問某個頁面時會將它存在緩存中，下次再次訪問時就可從緩存中讀取，以提高速度。當(dāng)你希望訪問者每次都刷新你廣告的圖標(biāo)，或每次都刷新你的計數(shù)器，就要禁用緩存了。通常HTML文件沒有必要禁用緩存，對于ASP等頁面，就可以使用禁用緩存，因為每次看到的頁面都是在服務(wù)器動態(tài)生成的，緩存就失去意義。如果網(wǎng)頁過期，那么存盤的cookie將被刪除。用法：<Metahttp-equiv="Set-Cookie"Content="cookievalue=xxx;expires=Wednesday,21-Oct-9816:14:21GMT;path=/">注意：必須使用GMT的時間格式。第一百零五頁，共一百二十頁。5、Window-target(顯示窗口的設(shè)定)說明：強制頁面在當(dāng)前窗口以獨立頁面顯示。用法：<Metahttp-equiv="Widow-target"Content="_top">注意：這個屬性是用來防止別人在框架里調(diào)用你的頁面。Content選項：_blank、_top、_self、_parent。第一百零六頁，共一百二十頁。6、Content-Type和Content-Language(顯示字符集的設(shè)定)說明：設(shè)定頁面使用的字符集，用以說明主頁制作所使用的文字已經(jīng)語言，瀏覽器會根據(jù)此來調(diào)用相應(yīng)的字符集顯示page內(nèi)容。用法：<Metahttp-equiv="Content-Type"Content="text/html;Charset=gb2312"><Metahttp-equiv="Content-Language"Content="zh-CN">注意：該META標(biāo)簽定義了HTML頁面所使用的字符集為GB2132，就是國標(biāo)漢字碼。如果將其中的“charset=GB2312”替換成“BIG5”，則該頁面所用的字符集就是繁體中文Big5碼。當(dāng)你瀏覽一些國外的站點時，IE瀏覽器會提示你要正確顯示該頁面需要下載xx語支持。這個功能就是通過讀取HTML頁面META標(biāo)簽的Content-Type屬性而得知需要使用哪種字符集顯示該頁面的。如果系統(tǒng)里沒有裝相應(yīng)的字符集，則IE就提示下載。其他的語言也對應(yīng)不同的charset，比如日文的字符集是“iso-2022-jp”，韓文的是“ks_c_5601”。

第一百零七頁，共一百二十頁。Content-Type的Content還可以是：text/xml等文檔類型；Charset選項：ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii,x-mac-roman,iso-8859-2,x-mac-ce,iso-2022-jp,x-sjis,x-euc-jp,euc-kr,iso-2022-kr,gb2312,gb_2312-80,x-euc-tw,x-cns11643-1,x-cns11643-2等字符集；Content-Language的Content還可以是：EN、FR等語言代碼。第一百零八頁，共一百二十頁?！颪AME變量name是描述網(wǎng)頁的，對應(yīng)于Content（網(wǎng)頁內(nèi)容），以便于搜索引擎機器人查找、分類（目前幾乎所有的搜索引擎都使用網(wǎng)上機器人自動查找meta值來給網(wǎng)頁分類）。name的value值（name=""）指定所提供信息的類型。有些值是已經(jīng)定義好的。例如description(說明)、keyword(關(guān)鍵字)、refresh(刷新)等。還可以指定其他任意值，如：creationdate(創(chuàng)建日期)、documentID(文檔編號)和level(等級)等。name的content指定實際內(nèi)容。如：如果指定level(等級)為value(值)，則Content可能是beginner(初級)、intermediate(中級)、advanced(高級)。第一百零九頁，共一百二十頁。1、Keywords(關(guān)鍵字)說明：為搜索引擎提供的關(guān)鍵字列表用法：<Metaname="Keywords"Content="關(guān)鍵詞1,關(guān)鍵詞2，關(guān)鍵詞3,關(guān)鍵詞4,……">注意：各關(guān)鍵詞間用英文逗號“,”隔開。META的通常用處是指定搜索引擎用來提高搜索質(zhì)量的關(guān)鍵詞。當(dāng)數(shù)個META元素提供文檔語言從