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

網(wǎng)頁(yè)設(shè)計(jì)第二章網(wǎng)站規(guī)劃設(shè)計(jì)基礎(chǔ)一、網(wǎng)站設(shè)計(jì)流程

1、網(wǎng)站設(shè)計(jì)的分工

隨著技術(shù)的發(fā)展和用戶對(duì)網(wǎng)站功能需求提高，網(wǎng)站已不能再利用HTML文件來(lái)實(shí)現(xiàn)。可以說(shuō)現(xiàn)在的網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)軟件與藝術(shù)加工工程，它的設(shè)計(jì)和開(kāi)發(fā)需要強(qiáng)調(diào)流程和分工。網(wǎng)頁(yè)設(shè)計(jì)的主要任務(wù)有：

（1）網(wǎng)頁(yè)架構(gòu)設(shè)計(jì)（2）以瀏覽器為客戶端的Web應(yīng)用程序開(kāi)發(fā)（新聞中心，網(wǎng)上商店等）（3）系統(tǒng)測(cè)試、發(fā)布及維護(hù)

2、網(wǎng)頁(yè)設(shè)計(jì)的流程（1）編寫網(wǎng)頁(yè)設(shè)計(jì)計(jì)劃書（2）確定網(wǎng)頁(yè)設(shè)計(jì)總體思想（如何能夠?qū)崿F(xiàn)網(wǎng)頁(yè)規(guī)劃中提出的目標(biāo)，網(wǎng)頁(yè)的風(fēng)格和特點(diǎn)，網(wǎng)頁(yè)外觀與使用性）（3）確定網(wǎng)頁(yè)提供的內(nèi)容（4）網(wǎng)頁(yè)交互設(shè)計(jì)，如信息反饋、意見(jiàn)調(diào)查等（5）對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行分類（6）設(shè)計(jì)網(wǎng)頁(yè)必有的內(nèi)容，如LOGO、聯(lián)系方式、導(dǎo)航條等（7）討論并確定方案（8）制作網(wǎng)頁(yè)的模板（9）制作網(wǎng)頁(yè)并在不同平臺(tái)的瀏覽器上測(cè)試網(wǎng)頁(yè)

（10）檢查網(wǎng)頁(yè)的鏈接（11）讓部分顧客或內(nèi)部人員試用網(wǎng)頁(yè)，并提出反饋意見(jiàn)（12）根據(jù)需要修改不當(dāng)之處（13）正式發(fā)布網(wǎng)頁(yè)(申請(qǐng)域名、空間、上傳、備案）第二章網(wǎng)站規(guī)劃設(shè)計(jì)基礎(chǔ)二、確定網(wǎng)站類型現(xiàn)今的網(wǎng)站花樣百出，數(shù)量非常大，種類繁多，但是按照其功能和結(jié)構(gòu)形式大致可以分為6類：

1、門戶網(wǎng)站門戶網(wǎng)站集合了眾多內(nèi)容、信息，提供多樣服務(wù)，并使其盡可能地稱為網(wǎng)絡(luò)用戶的首選。這種網(wǎng)站分為3類：（1）國(guó)內(nèi)網(wǎng)絡(luò)公司經(jīng)營(yíng)的網(wǎng)站，例如國(guó)內(nèi)的搜狐、網(wǎng)易、新浪等，其主要特點(diǎn)是提供搜索引擎、涵蓋新聞、娛樂(lè)、游戲、文化、體育、健康、科技、財(cái)經(jīng)、教育等若干版塊，以及個(gè)人主頁(yè)（博客）、免費(fèi)郵箱等服務(wù)項(xiàng)目。（2）境外投資網(wǎng)站，例如雅虎、美國(guó)在線等。（3）國(guó)內(nèi)傳統(tǒng)媒體網(wǎng)站，以人民網(wǎng)、新華網(wǎng)、央視國(guó)際等為代表，提供新聞與時(shí)事評(píng)論為主。第二章網(wǎng)站規(guī)劃設(shè)計(jì)基礎(chǔ)二、確定網(wǎng)站類型2、普及型網(wǎng)站企事業(yè)單位或個(gè)人根據(jù)自身需要建立和發(fā)布的以介紹其基本情況、產(chǎn)品和服務(wù)信息、供求信息、人員招聘、合作信息以及聯(lián)系方式的網(wǎng)站。該類網(wǎng)站向客戶、供應(yīng)商、公眾和其它一切對(duì)該網(wǎng)站感興趣的人進(jìn)行宣傳、推介自身。并樹立網(wǎng)上形象。此類網(wǎng)站包括企業(yè)網(wǎng)站、大學(xué)網(wǎng)站、政府網(wǎng)站以及個(gè)人主頁(yè)。第二章網(wǎng)站規(guī)劃設(shè)計(jì)基礎(chǔ)二、確定網(wǎng)站類型3、電子商務(wù)類網(wǎng)站企子商務(wù)類網(wǎng)站分為B2B（商家對(duì)商家）和B2C（商家對(duì)個(gè)人客戶）兩種，按照交易過(guò)程分為商品檢索、商品采購(gòu)、訂單支付三個(gè)階段。其功能主要有：（1）商品發(fā)布功能（2）商品選購(gòu)功能（3）具有個(gè)性化的采購(gòu)訂單模板，顧客可以進(jìn)行購(gòu)物組合比較（4）購(gòu)物車內(nèi)置的價(jià)格計(jì)算模型可以根據(jù)商家的價(jià)格體系靈活定制

（5）在線交易功能（6）商品交接、資金結(jié)算功能第二章網(wǎng)站規(guī)劃設(shè)計(jì)基礎(chǔ)二、確定網(wǎng)站類型4、媒體信息服務(wù)類網(wǎng)站媒體信息服務(wù)類網(wǎng)站是報(bào)社、雜志社、廣播電臺(tái)、電視臺(tái)、視頻播客等媒體為樹立自身形象或提供視頻共享等而建立的網(wǎng)站。5、辦公事務(wù)管理網(wǎng)站辦公事務(wù)管理網(wǎng)站是企業(yè)事業(yè)單位圍欄實(shí)現(xiàn)辦公自動(dòng)化而建立的內(nèi)部網(wǎng)站，包括以下主要功能模塊：辦公事務(wù)管理、人力資源管理、財(cái)務(wù)資產(chǎn)管理和內(nèi)部其它事務(wù)管理的網(wǎng)站。6、商務(wù)管理網(wǎng)站商務(wù)管理網(wǎng)站是企業(yè)內(nèi)部為了進(jìn)行廣告及商品管理、客戶管理、合同管理、營(yíng)銷管理等目的而建立的網(wǎng)上辦公平臺(tái)。第二章網(wǎng)站規(guī)劃設(shè)計(jì)基礎(chǔ)三、確定網(wǎng)站的主題和名稱

1、網(wǎng)站主題的確定

網(wǎng)站的主題即網(wǎng)站的題材。網(wǎng)站使用的主要題材有：商業(yè)、個(gè)人、網(wǎng)上求職、網(wǎng)上聊天、網(wǎng)絡(luò)社區(qū)、網(wǎng)絡(luò)郵件、計(jì)算機(jī)技術(shù)、網(wǎng)頁(yè)/網(wǎng)站開(kāi)發(fā)、娛樂(lè)網(wǎng)站、旅行、參考/資訊、家庭/教育、生活/時(shí)尚等等。選擇網(wǎng)站主題時(shí)注意以下三點(diǎn)：（1）主題小而內(nèi)容精（2）題材最好是自己擅長(zhǎng)的內(nèi)容（量體裁衣，做好本份）（3）題材不要太濫、目標(biāo)不要過(guò)高（新題材、近目標(biāo)）第二章網(wǎng)站規(guī)劃設(shè)計(jì)基礎(chǔ)三、確定網(wǎng)站的主題和名稱

2、網(wǎng)站名稱的確定

網(wǎng)站名稱是網(wǎng)站設(shè)計(jì)的關(guān)鍵一部分，在確定時(shí)要注意：（1）名稱要端正合法、合情、合理，不能用反動(dòng)、色情、迷信或危害社會(huì)安全的詞語(yǔ)（2）易記如無(wú)特別需要，最好用中文名稱，不要用英文或者中英文混合的名稱，其字?jǐn)?shù)最好控制在6字以內(nèi)。（3）特色能體現(xiàn)一定的內(nèi)涵，能體現(xiàn)網(wǎng)站特色，給瀏覽者更多的視覺(jué)沖擊和空間想象力。如，音樂(lè)前衛(wèi)、網(wǎng)頁(yè)陶吧、天籟絕音等。第二章網(wǎng)站規(guī)劃設(shè)計(jì)基礎(chǔ)四、確定網(wǎng)站CI形象

CI（英文全稱CorporateIdentity,企業(yè)形象），是指通過(guò)強(qiáng)化視覺(jué)效果的手段來(lái)加深用戶對(duì)企業(yè)的印象。一個(gè)杰出的網(wǎng)站，需要整體的形象包裝和設(shè)計(jì)。

1、設(shè)計(jì)網(wǎng)站的標(biāo)志（Logo）如同商標(biāo)一樣，LOGO是網(wǎng)站特色和內(nèi)涵的集中體現(xiàn)。它可以是中文、英文字母、符號(hào)、圖案，也可以是動(dòng)物或人物。LG的設(shè)計(jì)創(chuàng)意一般來(lái)源于網(wǎng)站的名稱和內(nèi)容。設(shè)計(jì)方法：（1）網(wǎng)站有代表性的人物、動(dòng)物、花草，以它們作為設(shè)計(jì)藍(lán)本，加以藝術(shù)化。（2）專業(yè)性網(wǎng)站可以以本專業(yè)有代表性的物品作為L(zhǎng)OGO.

（3）最常用和最簡(jiǎn)單的是用自己網(wǎng)站的英文名稱作為L(zhǎng)0G0，采用不同的字體、字母的變形、字母的組合做成LOGO.第二章網(wǎng)站規(guī)劃設(shè)計(jì)基礎(chǔ)四、確定網(wǎng)站CI形象2、網(wǎng)站的標(biāo)準(zhǔn)色彩網(wǎng)站給人的第一印象來(lái)源于視覺(jué)沖擊，因此確定網(wǎng)站的標(biāo)準(zhǔn)色彩非常重要。標(biāo)準(zhǔn)色彩是指能體現(xiàn)網(wǎng)站形象和延伸內(nèi)涵的色彩。標(biāo)準(zhǔn)色彩要用于網(wǎng)站的LOGO、標(biāo)題、主菜單和主色塊，要給人以整體統(tǒng)一的感覺(jué)。其它的色彩主要用于點(diǎn)綴和襯托。3、設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體標(biāo)準(zhǔn)字體是指用于LOGO、標(biāo)題和主菜單的特有字體。默認(rèn)的字體一般是宋體。為了體現(xiàn)網(wǎng)站的特色，可以根據(jù)自己的需要選擇一些特別的字體。4、設(shè)計(jì)網(wǎng)站的宣傳標(biāo)語(yǔ)網(wǎng)站的宣傳標(biāo)語(yǔ)最好用一句話概括，表明網(wǎng)站精神和目標(biāo)。第二章網(wǎng)站規(guī)劃設(shè)計(jì)基礎(chǔ)五、確定網(wǎng)站的欄目和版塊初學(xué)者最容易犯的錯(cuò)誤是確定題材后立刻開(kāi)始制作，弊端在于，容易造成網(wǎng)頁(yè)結(jié)構(gòu)不清晰，目錄龐大，層次不明顯，不便于擴(kuò)充和維護(hù)。

1、設(shè)計(jì)網(wǎng)站的欄目（1）緊扣網(wǎng)站主題將主題按一定的方法分類，并將它們作為網(wǎng)站的主欄目。例如動(dòng)畫素材網(wǎng)站，可以將欄目分為動(dòng)畫動(dòng)畫、FLASH動(dòng)畫、三位動(dòng)畫、卡通動(dòng)畫等。

（2）設(shè)計(jì)一個(gè)可以互動(dòng)交流的欄目互動(dòng)交流欄目一般需要設(shè)置，例如論壇、留言本等。（3）設(shè)計(jì)一個(gè)最近更新或網(wǎng)站指南欄目（4）設(shè)計(jì)一個(gè)下載或常見(jiàn)問(wèn)題回答欄目第二章網(wǎng)站規(guī)劃設(shè)計(jì)基礎(chǔ)五、確定網(wǎng)站的欄目和版塊2、設(shè)計(jì)網(wǎng)站的版塊版塊的概念要欄目大一些，每個(gè)版塊可以有自己的欄目。例如設(shè)置新聞、體育、財(cái)經(jīng)、娛樂(lè)等版塊，每個(gè)版塊下面有自己的主欄目。個(gè)人主頁(yè)由于內(nèi)容較少，一般不用設(shè)置版塊，只用設(shè)置欄目就行了。注意：各版塊要有相對(duì)的獨(dú)立性各版塊要相互關(guān)聯(lián)版塊的內(nèi)容要圍繞站點(diǎn)主題第二章網(wǎng)站規(guī)劃設(shè)計(jì)基礎(chǔ)六、確定網(wǎng)站的整體風(fēng)格網(wǎng)站的整體風(fēng)格及其創(chuàng)意設(shè)計(jì)是最希望有的，也是最難的部分，沒(méi)有固定的模式參照或模仿。風(fēng)格是個(gè)抽象的概念，是指網(wǎng)站的整體形象給瀏覽者的綜合感受?！罢w形象”包括了網(wǎng)站的CI、版面布局、瀏覽方式、交互性、文子、內(nèi)容價(jià)值、存在意義等。設(shè)計(jì)網(wǎng)站風(fēng)格時(shí)要注意：

（1）風(fēng)格是建立在有價(jià)值的內(nèi)容之上的（2）LOGO一般放在每個(gè)頁(yè)面最顯眼的位置（3）使用統(tǒng)一的圖片處理效果（4）宣傳標(biāo)語(yǔ)的位置第二章網(wǎng)站規(guī)劃設(shè)計(jì)基礎(chǔ)七、確定網(wǎng)站的目錄結(jié)構(gòu)及鏈接結(jié)構(gòu)

1、設(shè)計(jì)網(wǎng)站的目錄結(jié)構(gòu)目錄結(jié)構(gòu)影響網(wǎng)站的上傳維護(hù)，以及內(nèi)容的擴(kuò)充和移植。因此，應(yīng)該首先規(guī)劃，防止隨意創(chuàng)建子目錄。（1）不要將所有文件都存放在根目錄下，容易造成文件管理混亂，不易管理（2）按欄目?jī)?nèi)容建立子目錄（3）主目錄下建立獨(dú)立的images目錄，用戶存放圖片類文件（4）目錄層次不要太深，一般不超過(guò)3層（5）不要使用中文目錄名稱，可能影響網(wǎng)址的正確性（6）不要使用過(guò)長(zhǎng)的目錄名第二章網(wǎng)站規(guī)劃設(shè)計(jì)基礎(chǔ)七、確定網(wǎng)站的目錄結(jié)構(gòu)及鏈接結(jié)構(gòu)

2、設(shè)計(jì)網(wǎng)站的鏈接結(jié)構(gòu)網(wǎng)站的鏈接結(jié)構(gòu)是指頁(yè)面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)。它建立在目錄結(jié)構(gòu)的基礎(chǔ)之上，可以跨越目錄。每一個(gè)頁(yè)面都是一個(gè)固定