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

劉艷秋

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

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

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

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

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

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

二、版面布局的形式

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

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

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

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

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

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

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

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

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

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

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

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

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