網頁版面布局設計教學之我見

劉艷秋

[摘要]在網頁設計與制作課程中，網頁的版面布局設計是至關重要的一個方面，要設計網頁版面，確立主題是設計之本，還要講究布局的形式和色彩的搭配。

[關鍵詞]確立主題布局形式色彩搭配版面布局

[中圖分類號]G71[文獻標識碼]A[文章編號]16746058（2016）210123

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

一、網站主題的確立是設計之本

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

二、版面布局的形式

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

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

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

還有一種是現在比較常用的所謂“豪華”型版面形式，首頁設計成一個比較漂亮的海報或者是制作成優美的flash影片。這樣的版型設計在廣告及宣傳類型的網頁中比較常見，突出特點是制作比較新穎，畫面漂亮，視覺沖擊比較強。

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

三、網頁版面的色彩搭配

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

四、網頁版面布局表格嵌套的問題

頁面的版面設計方法比較常用的有表格層、框架、模板等。最簡單也是最基本的方法就是表格布局法。在實踐教學中，這種方法因為簡單，界面清晰，學生接受起來比較容易，也多數用這種方法做頁面。但就是這種簡單的方法在設計過程中也會遇到一些小問題。

1.插入表格及表格的嵌套。在頁面總體布局的時候，我們一般用的是直接插入固定寬度的一個表格，當然寬度由頁面的寬度來決定。而頁面內部的一些小的分區域，一般用嵌套表格，也就是在表格內再套表格的方式，且是用百分比的形式，這樣嵌套的表格會自動去適應外部表格的變化。

2.表格嵌套中的小問題。開始的時候學生不理解為什么要用百分比的形式嵌套表格，筆者結合“青島西海岸旅游網站”的主頁設計進行了講解。在制作頁面的導航條時，直接用插入固定寬度的表格，而不是嵌套表格。因為導航項目并不一定都是字數一樣的，在輸入的過程中，由于寬度不統一，表格會自動變寬，而且調整其中的一個單元格的寬度時，會影響到其他的單元格，所以控制起來比較麻煩，很難統一導航內容的寬度，做出來的導航條很不整齊，影響整體美觀。而利用百分比的形式再嵌套一個表格之后，這個嵌套的表格會自動適應原來上一層表格的寬度，明顯的效果是制作出來的導航條寬度是平均分配的，看起來比較規整，比原來直接插入一個表格的效果好很多。

通過以上幾個方面的設計及實現，一個基本的網頁版面的框架已經出來雛形了，接下來主要的工作就是往這個框架里面添加網頁元素，逐步豐富網頁內容。那將會涉及更深更廣的內容，還需要學生不斷去學習和探索。

（責任編輯陳劍平）