網(wǎng)站規(guī)劃設(shè)計基礎(chǔ)教程

網(wǎng)站規(guī)劃設(shè)計基礎(chǔ)教程◆網(wǎng)站設(shè)計流程

◆網(wǎng)站的類型

◆網(wǎng)站主題及風(fēng)格定位

◆網(wǎng)站內(nèi)容的確定

◆網(wǎng)站版面設(shè)計方法

◆網(wǎng)站策劃書的撰寫

網(wǎng)站設(shè)計流程

為使網(wǎng)站能夠達到預(yù)期的目的，滿足用戶要求，不僅需要在網(wǎng)站建設(shè)過程中與用戶方進行良好的溝通與交流，更重要的是要遵循網(wǎng)站建設(shè)流程。只有這樣，才能做到既不浪費時間又能提高效率，同時又能保證網(wǎng)站的科學(xué)性、嚴謹性。2.22.32.42.52.6網(wǎng)站設(shè)計過程

（1）用戶需求調(diào)查及分析。（2）確定服務(wù)器解決方案。（3）網(wǎng)站規(guī)劃設(shè)計。（4）界面設(shè)計、頁面制作及程序開發(fā)。（5）網(wǎng)站的測試與發(fā)布及文檔的編寫。（6）網(wǎng)站的維護。

網(wǎng)站設(shè)計的工作流程圖

瀏覽器/服務(wù)器模式2.2.1根據(jù)網(wǎng)站所從屬單位的性質(zhì)分類2.2.2根據(jù)網(wǎng)站使用的技術(shù)分類2.2.3根據(jù)提供服務(wù)的方式分類2.12.32.42.52.62.2.1根據(jù)網(wǎng)站所從屬單位的性質(zhì)分類根據(jù)網(wǎng)站所從屬單位的性質(zhì)可以分為個人網(wǎng)站、企業(yè)網(wǎng)站、商業(yè)網(wǎng)站、政府網(wǎng)站等。

典型的企業(yè)網(wǎng)站

典型的政府網(wǎng)站2.2.2根據(jù)網(wǎng)站使用的技術(shù)分類

（1）靜態(tài)網(wǎng)站（2）動態(tài)網(wǎng)站（

3）純Flash網(wǎng)站

注意：網(wǎng)頁中的視覺上的動感元素，如使用GIF動畫、Flash動畫等不是動態(tài)網(wǎng)頁和動態(tài)網(wǎng)站的標(biāo)志。

2.2.3根據(jù)提供服務(wù)的方式分類根據(jù)提供服務(wù)的方式可以分為門戶網(wǎng)站、普及型網(wǎng)站、辦公事務(wù)管理網(wǎng)站、電子商務(wù)類網(wǎng)站、媒體信息服務(wù)類網(wǎng)站和商務(wù)管理網(wǎng)站等。

門戶網(wǎng)站

門戶網(wǎng)站提供的內(nèi)容眾多、服務(wù)齊全，一般是普通用戶上網(wǎng)的首選。

普及型網(wǎng)站普及型網(wǎng)站是企事業(yè)單位和個人根據(jù)自身要求建立和發(fā)布的以介紹其基本情況、產(chǎn)品和服務(wù)信息、供求信息、招聘信息、通信方式和對外合作信息等為主旨的網(wǎng)站。辦公事務(wù)管理網(wǎng)站辦公事務(wù)管理網(wǎng)站是企事業(yè)單位為實現(xiàn)辦公自動化而建立的內(nèi)部網(wǎng)站。辦公事務(wù)管理網(wǎng)站的主要功能（1）辦公事務(wù)管理。（2）人力資源管理。（3）財務(wù)資產(chǎn)管理。（4）網(wǎng)站管理。電子商務(wù)類網(wǎng)站所謂電子商務(wù)（ElectronicCommerce），是利用計算機技術(shù)、網(wǎng)絡(luò)技術(shù)和遠程通信技術(shù)，實現(xiàn)整個商務(wù)過程中的電子化、數(shù)字化和網(wǎng)絡(luò)化。電子商務(wù)類網(wǎng)站的主要功能（1）提供詳細的產(chǎn)品或服務(wù)信息。（2）購物車。（3）商品盤點更新。（4）庫存商品管理。（5）在線交易功能。（6）商品交接、資金結(jié)算功能。（7）售后服務(wù)。媒體信息服務(wù)類網(wǎng)站該類網(wǎng)站是出版社、報社、雜志社、廣播電臺、電視臺等傳統(tǒng)媒體為樹立網(wǎng)絡(luò)形象，方便服務(wù)對象而建立的網(wǎng)站。媒體信息服務(wù)類網(wǎng)站的主要功能（1）信息發(fā)布。（2）電子出版。（3）客戶在線咨詢。（4）網(wǎng)站管理。商務(wù)管理網(wǎng)站這類網(wǎng)站是企業(yè)內(nèi)部為了進行廣告及商品管理、客戶管理、合同管理、營銷管理等目的而建立的網(wǎng)上辦公平臺。商務(wù)管理網(wǎng)站的主要功能（1）廣告及商品管理。（2）客戶管理。（3）營銷管理。（4）網(wǎng)站管理。2.3網(wǎng)站主題與風(fēng)格的定位2.3.1網(wǎng)站主題定位2.3.2網(wǎng)站風(fēng)格定位

2.12.22.42.52.62.3.1網(wǎng)站主題定位

網(wǎng)站主題就是指網(wǎng)站的題材。作為一個網(wǎng)站設(shè)計者，在正式建站之前，必須明確要建設(shè)一個什么樣的網(wǎng)站，需要達到何種目標(biāo)。

網(wǎng)站主題與網(wǎng)站名稱緊密相關(guān)，一個恰當(dāng)?shù)拿Q能給站點的推廣提供便利，也能在一定程度上體現(xiàn)網(wǎng)站設(shè)計者的文化品位。網(wǎng)站的名稱如果可以和域名配合起來，會更加方便瀏覽者記憶，也有利于提高訪問量。

網(wǎng)站的主題需要通過具體的功能去實現(xiàn)，系統(tǒng)功能是建設(shè)網(wǎng)站的核心。設(shè)計功能時要考慮服務(wù)對象,了解服務(wù)對象的瀏覽喜好和瀏覽習(xí)慣。因為不同的人群對網(wǎng)站的需求是不一樣的，一個網(wǎng)站可以顧及到各個層次的對象，但必須有一個主體對象，也應(yīng)該預(yù)測到以后會發(fā)展的潛在對象,這可以幫助確定建站的規(guī)模；設(shè)計功能時還要適應(yīng)管理對象，因為網(wǎng)站是一系列管理者的工作平臺，不同管理者的職責(zé)和權(quán)限是不同的。設(shè)計功能時還要善于歸納,在進行用戶需求調(diào)研的基礎(chǔ)上,按照一定的邏輯結(jié)構(gòu)、角色權(quán)限、部門職能等內(nèi)在因素進行有效合理的劃分,以有益于后期的程序開發(fā)。

2.3.2網(wǎng)站風(fēng)格定位所謂網(wǎng)站風(fēng)格，就是指某一網(wǎng)站的整體形象給瀏覽者的綜合感受，是站點與眾不同的特色，它能透露出設(shè)計者與企業(yè)的文化品位。這個整體形象包括網(wǎng)站的CI(CorporateIdentity,企業(yè)形象，包括標(biāo)志、色彩、字體、標(biāo)語)、版面布局、瀏覽方式、交互性、文字、語氣、內(nèi)容價值、存在意義、站點榮譽等諸多因素。

風(fēng)格的形成需要在開發(fā)中不斷強化、調(diào)整和修飾,也需要不斷向優(yōu)秀網(wǎng)站學(xué)習(xí)。具體設(shè)計時，對于不同性質(zhì)的行業(yè)，應(yīng)體現(xiàn)出不同的網(wǎng)站風(fēng)格。一般情況下，政府部門的網(wǎng)站風(fēng)格應(yīng)比較莊重沉穩(wěn)，文化教育部門的網(wǎng)站應(yīng)該高雅大方，娛樂行業(yè)的網(wǎng)站可以活潑生動一些,商務(wù)網(wǎng)站可以貼近民俗，而個人網(wǎng)站則可以不拘一格，更多地結(jié)合內(nèi)容和設(shè)計者的興趣，充分彰顯個性。盡可能地將網(wǎng)站標(biāo)志（logo）放在每個頁面最突出的位置

網(wǎng)站標(biāo)志可以是英文字母、漢字，也可以是符號、圖案等。標(biāo)志的設(shè)計創(chuàng)意應(yīng)當(dāng)來自網(wǎng)站的名稱和內(nèi)容。如果網(wǎng)站內(nèi)有代表性的人物、植物或是小動物等，則可以用它們作為設(shè)計的藍本，加以藝術(shù)化；專業(yè)性較強的網(wǎng)站可以選擇本專業(yè)有代表的物品作為標(biāo)志等。最常用和最簡單的方式是用自己網(wǎng)站的英文名稱做標(biāo)志，采用不同的字體或字母的變形、組合等方式就可以了。

使用統(tǒng)一的圖片處理效果

圖片雖然有營造網(wǎng)頁氣氛、活潑版面、強化視覺效果的作用，但也存在以下缺點：一是圖片文件一般情況下都比較大，這樣在網(wǎng)上傳輸就會比較慢，就會浪費瀏覽者的時間，有可能會使他們感到不耐煩；二是如果圖片太多則意味著信息量有可能會減少，還可能會影響到網(wǎng)頁的整體效果；另外，圖片尤其是照片的色調(diào)一般都比較深，如果處理不好的話，可能會破壞網(wǎng)站的整體風(fēng)格。因此，在處理網(wǎng)站圖片時要注意主要圖片陰影效果的方向、厚度、模糊度等都必須盡可能地保持一致，圖片的色彩與網(wǎng)頁的標(biāo)準(zhǔn)色搭配也要適當(dāng)。

突出標(biāo)準(zhǔn)色彩標(biāo)準(zhǔn)色彩是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩，主要用于網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和主色塊。無論是平面設(shè)計，還是網(wǎng)頁設(shè)計，色彩永遠是其中最重要的一環(huán)。當(dāng)用戶離顯示器有一定距離的時候，看到的不是美麗的圖片或優(yōu)美的版式，而是網(wǎng)頁的色彩。色彩簡潔明快、保持統(tǒng)一、獨具特色的網(wǎng)站能讓用戶產(chǎn)生較深的印象，從而不斷前來訪問，增加網(wǎng)站的訪問量。一般來說，一個網(wǎng)站的標(biāo)準(zhǔn)色彩不宜超過三種，太多則讓人眼花繚亂。使用標(biāo)準(zhǔn)字體和標(biāo)準(zhǔn)色彩一樣，標(biāo)準(zhǔn)字體是指用于標(biāo)志、標(biāo)題、主菜單的特有字體。一般網(wǎng)頁默認的字體是宋體。為了體現(xiàn)網(wǎng)站的獨特風(fēng)格和與眾不同，可以根據(jù)需要，選擇一些特別的字體。如果要使用Windows系統(tǒng)非默認的字體，則需要用圖片的形式來展現(xiàn)，因為如果瀏覽者的計算機里沒有安裝這種字體，瀏覽器會一律用系統(tǒng)默認字體顯示，這樣顯示效果可能會與原來的設(shè)計相差很大，從而無法展現(xiàn)出自己精心設(shè)計的風(fēng)格。

2.4網(wǎng)站內(nèi)容的確定

2.4.1網(wǎng)站內(nèi)容設(shè)計

2.4.2網(wǎng)站包括的內(nèi)容

2.12.22.32.52.62.4.1網(wǎng)站內(nèi)容設(shè)計網(wǎng)站建設(shè)目標(biāo)與內(nèi)容設(shè)計內(nèi)容設(shè)計,就是分析網(wǎng)站所面向的用戶群的需求，通過需求分析，確定網(wǎng)站要達到的目標(biāo),進而確定為達到目的而需要提供的信息和服務(wù)。很明顯，這是實現(xiàn)網(wǎng)站建設(shè)目標(biāo)的關(guān)鍵環(huán)節(jié)，因此成為網(wǎng)站建設(shè)的根本任務(wù)。

網(wǎng)站的建設(shè)是以用戶為中心的，用戶直接接受信息服務(wù)并對信息做出反饋,所以用戶群的大小成為反映一個網(wǎng)站利用率高低的重要指標(biāo)。不同的網(wǎng)站建設(shè)目標(biāo)要面向不同的用戶,如何讓用戶對網(wǎng)站產(chǎn)生興趣而關(guān)注網(wǎng)站、如何方便用戶使用網(wǎng)站、如何讓用戶在網(wǎng)站中得到滿意的信息或服務(wù)從而能多次來訪，這是網(wǎng)站建設(shè)的最終目的，也是內(nèi)容設(shè)計中應(yīng)該注意的問題。網(wǎng)站內(nèi)容設(shè)計的特性（1）針對性。（2）高精細度。（3）真實性。（4）廣泛性。（5）新鮮性。（6）可追蹤性。（7）可理解性。內(nèi)容設(shè)計應(yīng)注意的問題

（1）注意從觀念上重視內(nèi)容設(shè)計，要以求真務(wù)實的態(tài)度搞好內(nèi)容設(shè)計，不要讓技術(shù)淹沒了內(nèi)容設(shè)計，在創(chuàng)意設(shè)計與內(nèi)容設(shè)計矛盾時，要服從內(nèi)容設(shè)計,內(nèi)容設(shè)計要服從網(wǎng)站建設(shè)目標(biāo)。（2）要注意內(nèi)容的更新，這是從網(wǎng)站設(shè)計者的角度考慮的。（3）要考慮用戶的參與性，用戶是網(wǎng)站的使用者，要充分考慮用戶的能動性和積極性，在內(nèi)容設(shè)計中要注意貼近用戶生活，設(shè)計用戶感興趣的主題，論壇、社區(qū)等就是充分考慮了與用戶的互動，得到了較好的效果的例證。（4）注意換位思考，這是從用戶角度看是否有用，應(yīng)用是否方便等。網(wǎng)站內(nèi)容設(shè)計應(yīng)遵循的原則（1）對于任何網(wǎng)站，主頁或第一個網(wǎng)頁都是非常重要的，因為它們能夠給用戶留下第一印象，好的第一印象能夠吸引用戶再次光臨這個網(wǎng)站，因此應(yīng)該更加重視主頁的設(shè)計，以提高網(wǎng)站的訪問量。（2）網(wǎng)站內(nèi)容應(yīng)該是動態(tài)的，隨時進行修改和更新，以使自己的網(wǎng)站緊跟時代發(fā)展步伐。如果在主頁上注明更新日期及URL，對于經(jīng)常訪問的用戶能夠提供很大的方便。（3）HTML文檔的效果由其自身的質(zhì)量和瀏覽器解釋HTML

（4）網(wǎng)站信息的組織結(jié)構(gòu)要層次分明，這是吸引用戶的關(guān)鍵。應(yīng)該盡量避免形成復(fù)雜的網(wǎng)狀結(jié)構(gòu)，沒有層次的網(wǎng)狀結(jié)構(gòu)不利于用戶查找感興趣的內(nèi)容，用戶可能會因此放棄瀏覽該網(wǎng)站，而且隨著信息量的不斷增多，這種結(jié)構(gòu)還會給維護工作帶來不便和麻煩。

（5）網(wǎng)頁的文本內(nèi)容應(yīng)簡單明了、易于理解。所有內(nèi)容都要針對設(shè)計目標(biāo)而寫，避免出現(xiàn)錯別字和語法錯誤。

（6）圖像、聲音和視頻信息能夠比普通文本提供更豐富和更直接的信息，產(chǎn)生更大的吸引力，但文本字符可提供較快的瀏覽速度。（7）網(wǎng)站中應(yīng)該提供一些聯(lián)機幫助功能，千萬不能讓用戶在遇到問題時不知所措。2.4.2網(wǎng)站內(nèi)容設(shè)計導(dǎo)航欄每個網(wǎng)站都應(yīng)該包括一組導(dǎo)航工具，它出現(xiàn)在該網(wǎng)站的每一個頁面中，稱為導(dǎo)航欄。導(dǎo)航欄的作用是引導(dǎo)瀏覽者快速瀏覽網(wǎng)站中重要的欄目和內(nèi)容,或確定自己當(dāng)前所處的位置。導(dǎo)航欄中的按鈕應(yīng)該包括主頁、聯(lián)系方式、反饋信息及其他一些用戶感興趣的內(nèi)容，這些內(nèi)容應(yīng)該是與站點的主要題目相關(guān)聯(lián)的。設(shè)計導(dǎo)航欄的注意事項（1）使用常用顏色。應(yīng)該使用標(biāo)準(zhǔn)、醒目的顏色，避免在鏈接處使用特殊的顏色。（2）圖片比單純的文字效果更佳，但它必須能夠清楚地體現(xiàn)出它所鏈接的內(nèi)容。圖片下應(yīng)附有文字說明，以避免圖片使用不當(dāng)而引起的混淆。（3）每個頁面都應(yīng)該包括代表“返回”或“前進”的按鈕。（4）當(dāng)前頁面所對應(yīng)的按鈕應(yīng)該相應(yīng)的變成灰色、突出顯示或以其他方式表示出來。

站點結(jié)構(gòu)圖站點結(jié)構(gòu)圖是一種有關(guān)站點結(jié)構(gòu)、組織方式的示意圖。站點的主要欄目或者關(guān)鍵內(nèi)容都列在其下的副標(biāo)題中，當(dāng)訪問者單擊標(biāo)題、題目或副標(biāo)題時，相關(guān)的網(wǎng)頁就會打開。站點結(jié)構(gòu)圖還可以被看做是站點的分級結(jié)構(gòu)圖，按照這種方式組織起來的信息，用戶可以快速找到信息所在的位置。引人入勝的內(nèi)容在每頁中都要包含相關(guān)的、引人入勝的內(nèi)容，特別是當(dāng)要銷售產(chǎn)品的時候，每個頁面都要用詳細的內(nèi)容和圖片進行精心策劃。因為目的是為了吸引用戶，所以網(wǎng)站上使用的語言也應(yīng)該通俗易懂，對專業(yè)術(shù)語要進行注釋。把特別重要的內(nèi)容用符號標(biāo)出來，但不要用得過多，以保持頁面的簡潔。精美的圖片選擇一些合適的、無須占用太多內(nèi)存及下載時間的圖片，但是不要用得過多。必要時，可以降低圖片精度，對每頁的文字和圖像進行限制，或創(chuàng)建純文本的版本。新聞頁面

（1）在主頁或每個頁面下加注一行文字，表明本網(wǎng)站或每個單獨的頁面最近一次被更新的時間。（2）在最近更新的信息的標(biāo)題旁邊加注一個顯眼的小圖標(biāo)“New”或“新”等。（3）為最新消息創(chuàng)建單獨頁面，并在一段時間后將其移到適當(dāng)?shù)哪夸浿?。搜索工具用戶可以在搜索工具中輸入關(guān)鍵詞語或詞組，在單擊“查詢”或“搜索”按鈕后，與關(guān)鍵詞相關(guān)的網(wǎng)頁列表會顯示出來。需要注意的是，要提供關(guān)于有效查詢的說明。常見問題解答創(chuàng)建常見問題解答可以避免重復(fù)回答相同的問題，這樣可以節(jié)省管理者和訪問者的時間和精力。可以將問題列于常見問題解答頁面上，并將每個問題與回答鏈接在一起。另外，要確認在導(dǎo)航欄中包含有常見問題解答按鈕。反饋表利用反饋表，用戶可以隨時提出信息需求，而不必記下復(fù)雜的電話號碼。反饋表還為沒有E-mail的用戶提供了方便。有了反饋表，可以選擇以寄信件、發(fā)E-mail或打電話的方式與用戶聯(lián)系。每個反饋表都是一個不斷提高服務(wù)質(zhì)量以滿足用戶需求的機會。從反饋表中還可以發(fā)現(xiàn)網(wǎng)站中哪些信息是重要的，哪些信息是無關(guān)緊要的。聯(lián)系方式頁面在此頁面中創(chuàng)建可發(fā)送E-mail的鏈接，使E-mail地址可以自動出現(xiàn)在“收信人”欄中。這樣，訪問者在輸入相關(guān)內(nèi)容后單擊“發(fā)送”按鈕即可完成發(fā)送操作。此頁面還應(yīng)該包括其他聯(lián)系方式，如通信地址及聯(lián)系人姓名、電話、傳真等。在導(dǎo)航欄中應(yīng)該能很方便地找到這些信息。相關(guān)站點鏈接好的站點通常都可以鏈接到其他相關(guān)站點以便為訪問者提供更多信息。對每個鏈接都要做簡要說明，并對它被鏈接的原因進行闡述，這些信息可以幫助訪問者選擇最適合其需求的站點。定期訪問各鏈接站點，刪除那些“死”站點，以免訪問者感到厭煩。網(wǎng)站內(nèi)容是網(wǎng)站吸引瀏覽者最重要的因素，信息量少或是信息不實用的網(wǎng)站是無法留住匆匆瀏覽的訪客的。因此，為了增加網(wǎng)站的訪問量，應(yīng)該事先對人們希望閱讀的信息進行調(diào)查，并在網(wǎng)站發(fā)布后及時地調(diào)查人們對網(wǎng)站內(nèi)容的滿意程度，以便對網(wǎng)站的內(nèi)容進行及時調(diào)整，不斷地吸引用戶。2.5網(wǎng)站版面設(shè)計2.5.1版面設(shè)計方法與布局原則2.5.2常見版面布局2.12.22.32.42.62.5.1網(wǎng)站內(nèi)容設(shè)計版面設(shè)計方法（1）簡潔。（2）要有主色調(diào)。（3）注意字體的設(shè)置。