網(wǎng)頁(yè)版面布局設(shè)計(jì)教學(xué)之我見(jiàn)

劉艷秋

[摘 要]在網(wǎng)頁(yè)設(shè)計(jì)與制作課程中，網(wǎng)頁(yè)的版面布局設(shè)計(jì)是至關(guān)重要的一個(gè)方面，要設(shè)計(jì)網(wǎng)頁(yè)版面，確立主題是設(shè)計(jì)之本，還要講究布局的形式和色彩的搭配。

[關(guān)鍵詞]確立主題 布局形式 色彩搭配 版面布局

[中圖分類(lèi)號(hào)] G71 [文獻(xiàn)標(biāo)識(shí)碼] A [文章編號(hào)] 16746058（2016）210123

網(wǎng)頁(yè)設(shè)計(jì)與制作課程中，網(wǎng)頁(yè)的版面布局設(shè)計(jì)是至關(guān)重要的一個(gè)方面，它關(guān)系到一個(gè)網(wǎng)頁(yè)在欣賞者第一眼看到時(shí)，能否合“眼緣”，能否留下深刻的印象和駐足的欲望。針對(duì)頁(yè)面的版面布局設(shè)計(jì)，結(jié)合實(shí)踐應(yīng)用，筆者有了一些自己的心得和見(jiàn)解，從以下幾個(gè)方面做一個(gè)簡(jiǎn)單的總結(jié)。

一、網(wǎng)站主題的確立是設(shè)計(jì)之本

一個(gè)網(wǎng)站最終要設(shè)計(jì)成什么樣子，主要還是由網(wǎng)站的主題來(lái)決定的，主題就是網(wǎng)站的靈魂，也是網(wǎng)站設(shè)計(jì)的第一步，只有主題明確了，設(shè)計(jì)者才能?chē)@這個(gè)主題去打開(kāi)思路，尋找設(shè)計(jì)靈感。

二、版面布局的形式

在確立了網(wǎng)站主題之后，網(wǎng)站的設(shè)計(jì)也就有了大概的風(fēng)格和方向了，接下來(lái)要做的就是設(shè)計(jì)網(wǎng)頁(yè)的版面。從理論上來(lái)說(shuō)，版面布局的方法不拘一格，沒(méi)有固定的方式和方法，即使同樣的主題同樣的素材，不同的人根據(jù)各自的理解和解讀可以設(shè)計(jì)制作出不同風(fēng)格的頁(yè)面效果來(lái)。但不管是哪種布局方法，大概不外乎以下幾類(lèi)。

一種是按頁(yè)面的區(qū)域分布劃分，可以分為“T”形、“口”型、“三”型等幾種形式。從這幾個(gè)形象的字面表達(dá)上，我們不難想象出分別是一種什么樣的布局形式。

一種常見(jiàn)的是對(duì)稱(chēng)樣式的，當(dāng)然所謂的對(duì)稱(chēng)并不是一對(duì)一的絕對(duì)對(duì)稱(chēng)，那樣看起來(lái)會(huì)比較呆板，可以通過(guò)上下或左右結(jié)構(gòu)劃分以及色彩的合理搭配形成一種對(duì)稱(chēng)的效果。

還有一種是現(xiàn)在比較常用的所謂“豪華”型版面形式，首頁(yè)設(shè)計(jì)成一個(gè)比較漂亮的海報(bào)或者是制作成優(yōu)美的flash影片。這樣的版型設(shè)計(jì)在廣告及宣傳類(lèi)型的網(wǎng)頁(yè)中比較常見(jiàn)，突出特點(diǎn)是制作比較新穎，畫(huà)面漂亮，視覺(jué)沖擊比較強(qiáng)。

當(dāng)然，要做出一個(gè)完整漂亮的網(wǎng)頁(yè)，靠單一的版面布局樣式是不夠的，往往是幾種樣式的綜合運(yùn)用。在實(shí)踐教學(xué)過(guò)程中，學(xué)生大多比較喜歡第三種樣式的網(wǎng)頁(yè)，但也只是作為欣賞之用，要做出這么有沖擊力的效果，不光需要時(shí)間還需要有一定的專(zhuān)業(yè)功底，經(jīng)常是幾種工具軟件齊上陣做出來(lái)的。

三、網(wǎng)頁(yè)版面的色彩搭配

協(xié)調(diào)，是網(wǎng)頁(yè)版面色彩搭配的基本原則，既不能太單一，也不要搞得太花哨，把整個(gè)頁(yè)面弄得像個(gè)調(diào)色板一樣，要合理搭配，達(dá)到“總體協(xié)調(diào)，局部對(duì)比”的效果。在色彩的運(yùn)用和搭配上，學(xué)生得具備一定的審美觀，懂得色彩的一些基礎(chǔ)知識(shí)。對(duì)于色彩在設(shè)計(jì)中的搭配技巧，則需要通過(guò)不斷的實(shí)踐以及經(jīng)驗(yàn)的積累慢慢悟出來(lái)。這種領(lǐng)悟不是靠講解理論就能夠懂得的，很多來(lái)源于生活。筆者在講課過(guò)程中曾經(jīng)舉過(guò)這樣一個(gè)例子：假設(shè)我們要分別制作一個(gè)清明節(jié)、一個(gè)中秋節(jié)、一個(gè)國(guó)慶節(jié)的網(wǎng)頁(yè)，讓學(xué)生自己選擇以上三個(gè)節(jié)日網(wǎng)站的主色調(diào)。學(xué)生通過(guò)討論之后最終制定了幾種方案，清明節(jié)的主色調(diào)選用灰色，通過(guò)有點(diǎn)哀傷的灰色而不是太沉重的黑色，來(lái)表達(dá)這個(gè)節(jié)日人們對(duì)先人的懷念和哀悼之情；用金黃色來(lái)烘托中秋節(jié)家人團(tuán)聚時(shí)和和美美的溫暖氛圍；而國(guó)慶節(jié)他們選擇用熱烈的大紅色調(diào)來(lái)表達(dá)全國(guó)人民舉國(guó)同慶的壯觀和莊嚴(yán)。像這些不能單純地靠理論知識(shí)去灌輸，而是要通過(guò)日常生活中所見(jiàn)所得的引導(dǎo)，讓學(xué)生自己去領(lǐng)悟和體會(huì)。

四、網(wǎng)頁(yè)版面布局表格嵌套的問(wèn)題

頁(yè)面的版面設(shè)計(jì)方法比較常用的有表格層、框架、模板等。最簡(jiǎn)單也是最基本的方法就是表格布局法。在實(shí)踐教學(xué)中，這種方法因?yàn)楹?jiǎn)單，界面清晰，學(xué)生接受起來(lái)比較容易，也多數(shù)用這種方法做頁(yè)面。但就是這種簡(jiǎn)單的方法在設(shè)計(jì)過(guò)程中也會(huì)遇到一些小問(wèn)題。

1.插入表格及表格的嵌套。在頁(yè)面總體布局的時(shí)候，我們一般用的是直接插入固定寬度的一個(gè)表格，當(dāng)然寬度由頁(yè)面的寬度來(lái)決定。而頁(yè)面內(nèi)部的一些小的分區(qū)域，一般用嵌套表格，也就是在表格內(nèi)再套表格的方式，且是用百分比的形式，這樣嵌套的表格會(huì)自動(dòng)去適應(yīng)外部表格的變化。

2.表格嵌套中的小問(wèn)題。開(kāi)始的時(shí)候?qū)W生不理解為什么要用百分比的形式嵌套表格，筆者結(jié)合“青島西海岸旅游網(wǎng)站”的主頁(yè)設(shè)計(jì)進(jìn)行了講解。在制作頁(yè)面的導(dǎo)航條時(shí)，直接用插入固定寬度的表格，而不是嵌套表格。因?yàn)閷?dǎo)航項(xiàng)目并不一定都是字?jǐn)?shù)一樣的，在輸入的過(guò)程中，由于寬度不統(tǒng)一，表格會(huì)自動(dòng)變寬，而且調(diào)整其中的一個(gè)單元格的寬度時(shí)，會(huì)影響到其他的單元格，所以控制起來(lái)比較麻煩，很難統(tǒng)一導(dǎo)航內(nèi)容的寬度，做出來(lái)的導(dǎo)航條很不整齊，影響整體美觀。而利用百分比的形式再嵌套一個(gè)表格之后，這個(gè)嵌套的表格會(huì)自動(dòng)適應(yīng)原來(lái)上一層表格的寬度，明顯的效果是制作出來(lái)的導(dǎo)航條寬度是平均分配的，看起來(lái)比較規(guī)整，比原來(lái)直接插入一個(gè)表格的效果好很多。

通過(guò)以上幾個(gè)方面的設(shè)計(jì)及實(shí)現(xiàn)，一個(gè)基本的網(wǎng)頁(yè)版面的框架已經(jīng)出來(lái)雛形了，接下來(lái)主要的工作就是往這個(gè)框架里面添加網(wǎng)頁(yè)元素，逐步豐富網(wǎng)頁(yè)內(nèi)容。那將會(huì)涉及更深更廣的內(nèi)容，還需要學(xué)生不斷去學(xué)習(xí)和探索。

（責(zé)任編輯 陳劍平）