如何做網(wǎng)站設(shè)計(jì)?

在網(wǎng)站設(shè)計(jì)里面，最重要的一個(gè)方面就是網(wǎng)頁的風(fēng)格。網(wǎng)頁的風(fēng)格包含很多內(nèi)容，主要包括色彩、網(wǎng)頁排版、網(wǎng)頁的文互、多媒體的形式、內(nèi)容架構(gòu)及網(wǎng)頁內(nèi)容等。下面分別對這些方面進(jìn)行介紹。

1、色彩

色彩包括網(wǎng)頁的底色、文字的色彩、圖片的色系、顏色等。

2、排版

主要是網(wǎng)頁的整體結(jié)構(gòu)、各個(gè)組成部分內(nèi)容的展示形式、表格、框架的應(yīng)用、文字縮排、段落等。

在開始編寫文字、尋找圖像和進(jìn)行正式網(wǎng)頁設(shè)計(jì)之前應(yīng)該先把基本的網(wǎng)頁結(jié)構(gòu)組織好。要是開始的時(shí)候在腦子里沒有一個(gè)相當(dāng)明確的結(jié)構(gòu)，那幾乎肯定會以一團(tuán)糟而告終。參考一些用戶喜歡的頁面，研究它們的布局和風(fēng)格，看它們是如何表現(xiàn)內(nèi)容的。整頁地復(fù)制別人的東西是剽竊行為，但是向別人學(xué)習(xí)則是研究過程。

對要設(shè)計(jì)的網(wǎng)頁有了初步的思考之后，就可以把思考的結(jié)果以草圖的形式表示出來。這樣做的目的有二：

其一是把大腦中的東西變成一個(gè)實(shí)實(shí)在在的圖片，這樣自己可以驗(yàn)證實(shí)際效果如何。

其二是可以把設(shè)計(jì)草圖發(fā)給別人，讓別人提一下意見。

草圖的設(shè)計(jì)可以使用Photoshop或者其他的圖像設(shè)計(jì)軟件，主要內(nèi)容是對網(wǎng)頁的整體結(jié)構(gòu)做個(gè)規(guī)劃。例如網(wǎng)頁整體分為幾個(gè)大的部分，每個(gè)部分應(yīng)該放什么內(nèi)容，內(nèi)容的展現(xiàn)形式如何，是圖片、動畫還是文字。如圖1-22所示即為一個(gè)網(wǎng)頁的草圖。
3、網(wǎng)頁的交互

主要是網(wǎng)頁的交互形式，客戶端及服務(wù)器端的程序，例如在客戶端是否采用JavaScript的框架來增強(qiáng)用戶體驗(yàn)，服務(wù)器端的程序是如何實(shí)現(xiàn)的，例如ASP, PHP, XML, CGI等。

4、其他的媒體形式

這部分主要是讓網(wǎng)頁看起來生動活潑的各種內(nèi)容形式，如Flash動畫、Silverlight程序等。

5、內(nèi)容架構(gòu)

主要是指網(wǎng)站的目錄規(guī)劃、網(wǎng)站及網(wǎng)頁內(nèi)容的層次性要明確。如圖1-23所示是網(wǎng)易的一篇新聞。這個(gè)網(wǎng)頁的內(nèi)容架構(gòu)就非常有代表性。首先是一個(gè)非常醒目的標(biāo)題，一目了然。下面就是內(nèi)容的發(fā)布時(shí)間和來源，因?yàn)檫@個(gè)內(nèi)容不是重點(diǎn)，但是又不能缺少，所以采用較小的字號來展示。再接下來是一段摘要，用戶只要閱讀這幾行字就可以了解這篇文章的內(nèi)容。最后就是正文，圖文并茂。
這種結(jié)構(gòu)非常值得借鑒。當(dāng)用戶設(shè)計(jì)一個(gè)展示產(chǎn)品的網(wǎng)頁的時(shí)候，同樣也應(yīng)該把產(chǎn)品的名稱放在網(wǎng)頁的最上面，讓用戶一看就知道是什么東西。如果介紹產(chǎn)品的內(nèi)容較多，也應(yīng)該放一個(gè)摘要在正文前面，簡單地介紹產(chǎn)品的性能及一些指標(biāo)。最后把產(chǎn)品詳細(xì)地介紹給用戶。初學(xué)者往往在這個(gè)方面犯錯(cuò)。例如經(jīng)常會把產(chǎn)品的名稱與產(chǎn)品介紹混在一起，或者產(chǎn)品介紹得非常詳細(xì)，但是卻沒有提供一個(gè)簡介。這樣的話用戶要了解網(wǎng)頁的內(nèi)容就非常困難。

6、網(wǎng)頁內(nèi)容

主要是指網(wǎng)站是否主題明確、網(wǎng)站的整體實(shí)用性如何、網(wǎng)站內(nèi)文件之間的關(guān)聯(lián)性如何、網(wǎng)頁內(nèi)容與主題切合度如何、是否有不必要的檔案等。