更新時間：2014-03-14一個成功抓住用戶“眼球”并最終帶來經(jīng)濟效益的企業(yè)網(wǎng)站首先需要一個優(yōu)秀的設(shè)計，然后輔之優(yōu)秀的制作。設(shè)計是網(wǎng)站的核心和靈魂 ，是一個感性思考與理性分析相結(jié)合的復(fù)雜的過程，它的方向取決于設(shè)計的任務(wù)，它的實現(xiàn)依賴于網(wǎng)頁的制作。正所謂“功夫在詩外”，網(wǎng)頁設(shè)計中最重要的東西，并非在軟件的應(yīng)用上，而是在我們對網(wǎng)頁設(shè)計的理解以及設(shè)計制作的水平上，在于我們自身的美感以及對頁面的把握上。
首先，我們要弄清楚網(wǎng)頁設(shè)計的任務(wù)。
一、設(shè)計的任務(wù)
設(shè)計是一種審美活動，成功的設(shè)計作品一般都很藝術(shù)化。但藝術(shù)只是設(shè)計的手段，而并非設(shè)計的任務(wù)。設(shè)計的任務(wù)是要實現(xiàn)設(shè)計者的意圖，而并非創(chuàng)造美。
網(wǎng)頁設(shè)計的任務(wù)，是指設(shè)計者要表現(xiàn)的主題和實現(xiàn)的功能。站點的性質(zhì)不同，設(shè)計的任務(wù)也不同。從形式上，可以將站點分為以下三類：
第一類是資訊類站點，像新浪、網(wǎng)易、搜狐等門戶網(wǎng)站。這類站點將為訪問者提供大量的信息，而且訪問量較大。因此需注意頁面的分割、結(jié)構(gòu)的合理、頁面的優(yōu)化、界面的親和等問題。
第二類是資訊和形象相結(jié)合的網(wǎng)站，像一些較大的公司、國內(nèi)的高校等。這類網(wǎng)站在設(shè)計上要求較高，既要保證資訊類網(wǎng)站的上述要求，同時又要突出企業(yè)、單位的形象。
第三類則是形象類網(wǎng)站，比如一些中小型的公司或單位。這類網(wǎng)站一般較小，有的則有幾頁，需要實現(xiàn)的功能也較為簡單，網(wǎng)頁設(shè)計的主要任務(wù)是突出企業(yè)形象。這類網(wǎng)站對設(shè)計者的美工水平要求較高。 當(dāng)然，這只是從整體上來看，具體情況還要具體分析。不同的站點還要區(qū)別對待。別忘了最重要的一點，那就是客戶的要求，它也屬于設(shè)計的任務(wù)。
二、設(shè)計的實現(xiàn)
設(shè)計的實現(xiàn)可以分為兩個部分。第一部分為站點的規(guī)劃及草圖的繪制，這一部分可以在紙上完成。第二部分為網(wǎng)頁的制作，這一過程是在計算機上完成的。
設(shè)計首頁的第一步是設(shè)計版面布局。我們可以將網(wǎng)頁看作傳統(tǒng)的報刊雜志來編輯，這里面有文字、圖像乃至動畫，我們要做的工作就是以最適合的方式將圖片和文字排放在頁面的不同位置。
接下來我們要做的就是通過軟件的使用，將設(shè)計的藍圖變?yōu)楝F(xiàn)實，最終的集成一般是在Dreamweaver里完成的。雖然在草圖上，我們定出了頁面的大體輪廓，但是靈感一般都是在制作過程中產(chǎn)生的。設(shè)計作品一定要有創(chuàng)意，這是最基本的要求，沒有創(chuàng)意的設(shè)計是失敗的。在制作的過程中，我們會碰到許多問題，其中最敏感的莫過于頁面的顏色了。
三、色彩的運用
色彩是一種奇怪的東西，它是美麗而豐富的，它能喚起人類的心靈感知。一般來說，紅色是火的顏色，熱情、奔放；也是血的顏色，可以象征生命。黃色是明度最高的顏色，顯得華麗、高貴、明快。綠色是大自然草木的顏色，意味著純自然和生長，象征安寧和平與安全，如綠色食品。紫色是高貴的象征，有莊重感。白色能給人以純潔與清白的感覺，表示和平與圣潔
我們知道，顏色是光的折射產(chǎn)生的，紅、黃、藍是三原色，其它的色彩都可以用這三種色彩調(diào)和而成。換一種思路，我們可以用顏色的變化來表現(xiàn)光影效果，這無疑將使我們的作品更貼近現(xiàn)實。
色彩代表了不同的情感，有著不同的象征含義。這些象征含義是人們思想交流當(dāng)中的一個復(fù)雜問題，它因人的年齡、地域、時代、民族、階層、經(jīng)濟地區(qū)、工作能力、教育水平、風(fēng)俗習(xí)慣、宗教信仰、生活環(huán)境、性別差異而有所不同。
單純的顏色并沒有實際的意義，和不同的顏色搭配，它所表現(xiàn)出來的效果也不同。比如綠色和金黃、淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛。藍色和白色混合，能體現(xiàn)柔順、淡雅、浪漫的氣氛。紅色和黃色、金色的搭配能渲染喜慶的氣氛。而金色和粟色的搭配則會給人帶來暖意。設(shè)計的任務(wù)不同，配色方案也隨之不同�？紤]到網(wǎng)頁的適應(yīng)性，應(yīng)盡量使用網(wǎng)頁安全色。
但顏色的使用并沒有一定的法則，如果一定要用某個法則去套，效果只會適得其反。經(jīng)驗上我們可先確定一種能表現(xiàn)主題的主體色，然后根據(jù)具體的需要，應(yīng)用顏色的近似和對比來完成整個頁面的配色方案。整個頁面在視覺上應(yīng)是一個整體，以達到和諧、悅目的視覺效果。
四、網(wǎng)頁布局類型
網(wǎng)頁布局大致可分為“國”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型，下面分別論述。
1、“國”字型：
也可以稱為“同”字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些兩小條內(nèi)容，中間是主要部分，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種結(jié)構(gòu)是我們在網(wǎng)上見到的差不多最多的一種結(jié)構(gòu)類型。
2、拐角型：
這種結(jié)構(gòu)與上一種其實只是形式上的區(qū)別，其實是很相近的，上面是標(biāo)題及廣告橫幅，接下來的左側(cè)是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。在這種類型中，一種很常見的類型是最上面是標(biāo)題及廣告，左側(cè)是導(dǎo)航鏈接。
3、標(biāo)題正文型：
這種類型即最上面是標(biāo)題或類似的一些東西，下面是正文，比如一些文章頁面或注冊頁面等就是這種類。
4、左右框架型：
這是一種左右為分別兩頁的框架結(jié)構(gòu)，一般左面是導(dǎo)航鏈接，有時最上面會有一個小的標(biāo)題或標(biāo)致，右面是正文。我們見到的大部分的大型論壇都是這種結(jié)構(gòu)的，有一些企業(yè)網(wǎng)站也喜歡采用。這種類型結(jié)構(gòu)非常清晰，一目了然。
5、上下框架型：
與上面類似，區(qū)別僅僅在于是一種上下分為兩頁的框架。
6、綜合框架型：
上頁兩種結(jié)構(gòu)的結(jié)合，相對復(fù)雜的一種框架結(jié)構(gòu)，較為常見的是類似于“拐角型”結(jié)構(gòu)的，只是采用了框架結(jié)構(gòu)。
7、封面型：
這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁，大部分為一些精美的平面設(shè)計結(jié)合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進入”的鏈接甚至直接在首頁的圖片上做鏈接而沒有任何提示。這種類型大部分出現(xiàn)在企業(yè)網(wǎng)站和個人主頁，如果說處理的好，會給人帶來賞心悅目的感覺。
8、Flash型：
其實這與封面型結(jié)構(gòu)是類似的，只是這種類型采用目前非常游戲行的Flash，與封面型不同的是，由于Flash強大的功能，頁面所表達的信息更豐富，其視覺效果及聽覺效果如果處理得當(dāng)，絕不差于傳統(tǒng)的多媒體。
9、變化型：
即上面幾種類型的結(jié)合與變化，比如本站在視覺上是很接近拐角型的，但所實現(xiàn)的功能的實質(zhì)是那種上、左、右結(jié)構(gòu)的綜合框架型。
有關(guān)導(dǎo)航欄的位置
導(dǎo)航欄能讓我們在瀏覽時容易的到達不同的頁面，是網(wǎng)頁元素非常重要的部分，所以導(dǎo)航欄一定要清晰、醒目，一般來講，導(dǎo)航欄要在“第一屏”能顯示出來，那種橫向放置的導(dǎo)航欄要優(yōu)于縱向的導(dǎo)航欄考慮，原因很簡單：如果瀏覽者的第一屏很矮，橫向的仍能全部看到，而縱向的就很難說了，因為窗口的寬度一般是不會受瀏覽器設(shè)置影響的，而縱向的則不確定性要大的多。
什么樣的布局是最好的
這是初學(xué)者可能會問的問題。其實這要具體情況具體分析的：比如如果內(nèi)容非常多，就要考慮用“國字型”或拐角型；而如果內(nèi)容不算太多而一些說明性的東西比較多，則可以考慮標(biāo)題正文型；那幾種框架結(jié)構(gòu)的一個共同特點就是瀏覽方便，速度快，但結(jié)構(gòu)變化不靈活；而如果是一個企業(yè)網(wǎng)站想展示一下企業(yè)形象或個人主頁想展示個人風(fēng)采，封面性是首選；Flash型更靈活一些，好的Flash大大豐富了網(wǎng)頁，但是它不能表達過多的文字信息。還沒有提到的就是變化型了，我只是想把這個留給讀者了，因為，只有不斷的變化才會提高，才會不斷豐富我們的網(wǎng)頁。
