網(wǎng)頁設(shè)計第2章

第2章網(wǎng)站建設(shè)基礎(chǔ)第2章網(wǎng)站建設(shè)基礎(chǔ)2.1網(wǎng)站的規(guī)劃2.2網(wǎng)站主題2.3網(wǎng)站結(jié)構(gòu)2.4網(wǎng)站的開發(fā)流程2.1網(wǎng)站的規(guī)劃定位網(wǎng)站主題和名稱網(wǎng)站的風(fēng)格網(wǎng)站的CI形象確定網(wǎng)站的欄目和版塊確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)

2.1.1定位網(wǎng)站主題和名稱網(wǎng)站名稱的選擇也是非常重要的。和現(xiàn)實生活中一樣，網(wǎng)站名稱是否正氣，響亮，易記，對網(wǎng)站的形象和宣傳推廣也有很大影響。一般的建議是：（1）名稱要正。也就是要合法，和理，和情。不能用反動的，色情的，迷信的，危害社會安全的名詞語句。（2）名稱要易記。根據(jù)中文網(wǎng)站瀏覽者的特點，除非特定需要，網(wǎng)站名稱最好用中文名稱，不要使用英文或者中英文混合型名稱。

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

2.1.2網(wǎng)站的風(fēng)格

風(fēng)格(style)是抽象的。是指站點的整體形象給瀏覽者的綜合感受。這個“整體形象”包括站點的CI（標(biāo)志，色彩，字體，標(biāo)語），版面布局，瀏覽方式，交互性，語氣，內(nèi)容價值，存在意義，站點榮譽等等諸多因素。風(fēng)格創(chuàng)意（藝），不僅僅是依靠色彩，圖片，架構(gòu)和文字等視覺元素自身的獨具創(chuàng)新。重點是視覺元素在頁面中達(dá)到協(xié)調(diào)統(tǒng)一，保持一致的識別體系。網(wǎng)站的特有風(fēng)格還包括信息內(nèi)容的規(guī)劃管理，互動程序的建構(gòu)和使用方法等其他非視覺方面。

風(fēng)格類型：金屬風(fēng)格像素風(fēng)格報紙風(fēng)格三維風(fēng)格大字報風(fēng)格

網(wǎng)頁設(shè)計——網(wǎng)站風(fēng)格創(chuàng)意(藝)金屬風(fēng)格

網(wǎng)頁設(shè)計——網(wǎng)站風(fēng)格創(chuàng)意(藝)像素風(fēng)格

網(wǎng)頁設(shè)計——網(wǎng)站風(fēng)格創(chuàng)意(藝)報紙風(fēng)格

網(wǎng)頁設(shè)計——網(wǎng)站風(fēng)格創(chuàng)意(藝)三維風(fēng)格

網(wǎng)頁設(shè)計——網(wǎng)站風(fēng)格創(chuàng)意(藝)大字報風(fēng)格

網(wǎng)頁設(shè)計——網(wǎng)站風(fēng)格創(chuàng)意(藝)風(fēng)格是獨特的，是站點不同與其他網(wǎng)站的地方。或者色彩，或者技術(shù)，或者是交互方式，能讓瀏覽者明確分辨出這是你的網(wǎng)站獨有的。如何樹立網(wǎng)站風(fēng)格呢？我們可以分這樣幾個步驟：

第一，確信風(fēng)格是建立在有價值內(nèi)容之上的。一個網(wǎng)站有風(fēng)格而沒有內(nèi)容，就好比繡花枕頭一包草，好比一個性格傲慢但卻目不識丁的人。你首先必須保證內(nèi)容的質(zhì)量和價值性。這是最基本的，無須置疑。

第二，你需要徹底搞清楚自己希望站點給人的印象是什么。

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

對于確定風(fē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)一的語氣和人稱。即使是多個人合作維護(hù)，也要讓讀者覺得是同一個人寫的。

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

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

□△→等等。雖然很簡單的一個變化，卻給人與眾不同的感覺。

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

2.1.3網(wǎng)站的CI形象

所謂CI，是借用的廣告術(shù)語。(CI是英文corporateidentity的縮寫)，意思是通過視覺來統(tǒng)一企業(yè)的形象。標(biāo)志，色彩，字體，標(biāo)語是一個網(wǎng)站樹立CI形象的關(guān)鍵，確切的說是網(wǎng)站的表面文章，設(shè)計并完成這幾步，你的網(wǎng)站將脫胎換骨，整體形象就會有一個提高。

在您的網(wǎng)站主題和名稱定下來之后，需要思考的就是網(wǎng)站的CI形象。設(shè)計網(wǎng)站的標(biāo)志(logo)如同商標(biāo)一樣，logo是你站點特色和內(nèi)涵的集中體現(xiàn)，看見logo就讓大家聯(lián)想起你的站點。標(biāo)志可以是中文，英文字母，可以是符號，圖案，可以是動物或者人物等等。比如：新浪用字母sina+眼睛作為標(biāo)志。標(biāo)志的設(shè)計創(chuàng)意來自你網(wǎng)站的名稱和內(nèi)容。比如：(1).網(wǎng)站有代表性的人物，動物，花草，可以用它們作為設(shè)計的藍(lán)本，加以卡通化和藝術(shù)化，例如迪斯尼的米老鼠，搜狐的卡通狐貍，鯊?fù)w壇的籃球鯊魚。(2).網(wǎng)站有專業(yè)性的，可以以本專業(yè)有代表的物品作為標(biāo)志。比如中國銀行的銅板標(biāo)志，奔馳汽車的方向盤標(biāo)志。

新浪用字母sina+眼睛作為標(biāo)志。北京億恒偉業(yè)房地產(chǎn)開發(fā)有限公司的標(biāo)志是以“億恒偉業(yè)”四個漢字的變形為主體。“億”字左半部變形為數(shù)字“1”，預(yù)示著公司將成為行業(yè)的龍頭老大，也預(yù)示者公司全體員工永爭第一的拼搏精神和“信譽第一、質(zhì)量第一”的經(jīng)營理念，同時也寓意著公司的發(fā)展一帆風(fēng)順。北京愛永恒影樓的標(biāo)志是以英文字母“LOVE"和一顆紅心為主體，紅心中間是抽象的一男一女?dāng)y手前進(jìn)的圖形，寓意著兩個人一顆心，從而寓意著愛永恒。

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

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

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

(1)確定欄目和版塊

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

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

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

①

一定記住要緊扣你的主題！

一般的做法是：將你的主題按一定的方法分類并將它們作為網(wǎng)站的主欄目。主題欄目個數(shù)在總欄目中要占絕對優(yōu)勢，這樣的網(wǎng)站顯的專業(yè)，主題突出，容易給人留下深刻印象。

②

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

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

③

設(shè)定一個可以雙向交流的欄目

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

④設(shè)定一個下載或常見問題回答欄目

網(wǎng)絡(luò)的特點是信息共享。如果你看到一個站點有大量的優(yōu)秀的有價值的資料，你肯定希望能一次性下載，而不是一頁一頁瀏覽存盤?！皩⑿谋刃摹痹谀阕约旱闹黜撋显O(shè)置一個資料下載欄目，會得到大家的喜歡。另外，如果您的站點經(jīng)常收到網(wǎng)友關(guān)于某方面的問題來信，你最好設(shè)立一個常見問題回答的欄目，既方便了網(wǎng)友，也可以節(jié)約自己更多時間用以學(xué)習(xí)。

總結(jié)以上幾點，我們得出劃分欄目需要注意的是：

●盡可能刪除與主題無關(guān)的欄目

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

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

上面說的是欄目，我們再看看版塊設(shè)置。版塊比欄目的概念要大一些，每個版塊都有自己的欄目。舉個例子：網(wǎng)易的站點分新聞，體育，財經(jīng)，娛樂，教育等版塊，每個版塊下面有各有自己的主欄目。一般的個人站點內(nèi)容少，只有主欄目(主菜單)就夠了，不需要設(shè)置版塊。⑴在網(wǎng)站根目錄中開設(shè)images

、common

、temp

三個子目錄，根據(jù)需要再開設(shè)media

子目錄.images目錄中放不同欄目的頁面都要用到的公共圖片，例如公司的標(biāo)志logo、banner

條、菜單、按鈕等等；common

子目錄中放css、include

等公共文件；temp

子目錄放客戶提供的各種文字圖片等等原始資料；media

子目錄中放flash,

avi,

quick

time

等多媒體文件

。(2)網(wǎng)站的目錄結(jié)構(gòu)在根目錄中按照首頁的欄目結(jié)構(gòu)，給每一個欄目開設(shè)一個目錄，根據(jù)需要在每一個欄目的目錄中開設(shè)一個images

和media

的子目錄用以放置此欄目專有的圖片和多媒體文件，如果這個欄目的內(nèi)容特別多，又分出很多下級欄目，可以相應(yīng)的再開設(shè)其他目錄。按欄目內(nèi)容建立子目錄。目錄的層次不要太深。目錄、文件的名稱全部用小寫英文字母、數(shù)字、下劃線的組合，其中不得包含漢字、空格和特殊字符；目錄的命名請盡量以英文為指導(dǎo)，不到萬不得已不要以拼音作為目錄名稱.關(guān)于鏈接結(jié)構(gòu)的設(shè)計，在實際的網(wǎng)頁制作中是非常重要一環(huán)。采用什么樣的鏈接結(jié)構(gòu)直接影響到版面的布局。例如你的主菜單放在什么位置，是否每頁都需要放置，是否需要加入返回首頁的鏈接。在連接結(jié)構(gòu)確定后，再開始考慮鏈接的效果和形式，是采用下拉表單，還是動態(tài)菜單等等。鏈接結(jié)構(gòu)圖片的命名原則

圖片的命名原則遵循以下幾條規(guī)范

：

☆

名稱分為頭尾兩兩部分，用下劃線隔開。

☆

頭部分表示此圖片的大類性質(zhì)，例如廣告、標(biāo)志、菜單、按鈕等等

☆

尾部分用來表示圖片的具體含義。下面是幾個樣例，大家應(yīng)該能夠一眼看明白圖片的意義：

banner_sohu.gif

banner_sina.gif

menu_aboutus.gifmenu_job.gif

title_news.gif

logo_police.giflogo_national.gif

pic_people.jpgpic_hill.jpg.一般來說:

放置在頁面頂部的廣告、裝飾圖案等長方形的圖片我們?nèi)∶篵anner

標(biāo)志性的圖片我們?nèi)∶麨椋簂ogo

在頁面上位置不固定并且?guī)в墟溄拥男D片我們?nèi)∶麨?button

在頁面上某一個位置連續(xù)出現(xiàn)，性質(zhì)相同的鏈接欄目的圖片我們?nèi)∶簃enu

裝飾用的圖片我們?nèi)∶簆ic

不帶鏈接表示標(biāo)題的圖片我們?nèi)∶簍itle

文

件

命

名

原

則

每一個目錄中應(yīng)該包含一個缺省的html

文件，文件名統(tǒng)一用index.htm

文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合。

命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個文件的意義，二是當(dāng)我們在文件夾中使用“按名稱排例”的命令時，同一種大類的文件能夠排列在一起，以便我們查找、修改、替換、計算負(fù)載量等等操作

。2.1網(wǎng)站主題主題定位要準(zhǔn)確、鮮明

如果建立個人網(wǎng)站，題材應(yīng)該選擇自己擅長或喜歡內(nèi)容。如果為企業(yè)建立一個網(wǎng)站，站點提供的產(chǎn)品或服務(wù)是與眾不同，這是能否吸引網(wǎng)民訪問的關(guān)鍵所在。

2.1網(wǎng)站主題主題要有特色和個性

⑴不要模仿其它網(wǎng)站，否則會給人沒有特色的感覺

⑵網(wǎng)站主題的實現(xiàn)要體現(xiàn)自己的個性、自己的文化

⑶充分調(diào)查和自己相關(guān)的網(wǎng)站，掌握豐富的市場資料

2.1網(wǎng)站主題對于個人網(wǎng)站，主題應(yīng)該精網(wǎng)站的主題要集中或相對集中網(wǎng)站的內(nèi)容要盡可能地搜集相關(guān)材料建設(shè)與維護(hù)網(wǎng)站時也應(yīng)在主題方面投入更多的精力2.2網(wǎng)站結(jié)構(gòu)網(wǎng)站的目錄結(jié)構(gòu)

建立網(wǎng)站時創(chuàng)建的目錄就是網(wǎng)站的目錄，建立一個結(jié)構(gòu)清晰、內(nèi)容完整的網(wǎng)站目錄結(jié)構(gòu)對于管理和維護(hù)站點很重要

2.2網(wǎng)站結(jié)構(gòu)建立目錄結(jié)構(gòu)的建議

按欄目內(nèi)容建立子目錄在每個主目錄下都建立獨立的images目錄目錄的層次不要太深避免使用中文和符號作為目錄和文件名盡量避免在根目錄下存放文件2.2網(wǎng)站結(jié)構(gòu)網(wǎng)站的邏輯結(jié)構(gòu)圖2-1樹狀邏輯結(jié)構(gòu)圖2-2網(wǎng)狀邏輯結(jié)構(gòu)2.3網(wǎng)站的開發(fā)流程1.建站前進(jìn)行需求分析

明確建站的目的，仔細(xì)分析網(wǎng)站的性質(zhì)，認(rèn)真了解網(wǎng)站的服務(wù)對象，熟練掌握網(wǎng)站的評估標(biāo)準(zhǔn)。2.建站時確定主題