基于匹配核心元素的可視化網頁的規劃設計

高建芳

摘 要：隨著網絡的不斷發展，網站建設和網頁制作也流行起來，網頁的外觀及它的信息量決定了它的客流量。本文主要從網頁的版面布局、版面尺寸、色彩搭配幾個網頁制作時的核心元素出發，講述了可視化網頁的規劃設計。

關鍵詞：網頁；版面布局；版面尺寸；色彩搭配

1.網頁的版面布局

網頁的版面布局很重要，它的版面風格與廣告設計的版面風格是統一的，其目的都是為了產生美感、提高閱讀興趣、吸引人們的注意力。網頁的制作首先要考慮版面風格的定位，任何網頁都要根據主題的內容來決定其風格與形式，因為只有形式與內容的完美統一才能達到理想的效果。我們通常做網頁時用到的幾種比較典型的網頁風格有：對稱型、偏置型、標題型和混合型等，如下圖所示。

2. 網頁排版布局的常用技術

① 表格布局

表格是網頁制作的一個重要組成部分。利用它可以實現網頁的精確排版和定位，也可以美化網頁。表格布局的優勢在于它能對不同對象加以處理，而又不用擔心不同對象之間的影響，而且表格在定位圖片和文本上比用CSS更加方便。表格布局惟一的缺點是，當設計者使用了過多的表格時，會影響頁面的下載速度。利用表格布局時需要網頁制作者掌握表格的插入方法、表格屬性（背景色、邊框色等）的設置、會對表格中的單元格進行拆分、合并操作，并能夠按要求對表格和單元格的大小進行設置，會嵌套表格和單元格。

② 框架布局

在框架網頁中，瀏覽器窗口被劃分成了若干區域，每個區域稱為一個框架，每個框架可顯示不同的文檔內容，彼此之間互不干擾?？蚣芫W頁最明顯的特征就是當一個框架的內容固定不動時，另一個框架中的內容仍可以通過滾動條進行上下翻動。從布局上考慮，框架結構不失為一個好的布局方法。利用框架進行網頁布局時，要求網頁制作者要理解框架的結構，會對框架頁進行保存，還要會編排框架，熟悉有關它的一些基本操作。

③ CSS（層疊樣式表）+Div布局

使用CSS+Div布局技術能完全精確地定位文本圖片，具有結構與表現相分離、代碼簡潔、利于搜索、方便后期維護和修改等諸多優勢。CSS+Div布局可以理解為將許多大小不同的盒子擺放在網頁上，瀏覽者看到的頁面中的內容是一堆盒子，不是文字，也不是圖像。通過各種定位方式將盒子排列成最合理的顯示效果就是CSS+Div的基本布局思想。在這種網頁布局中，所有頁面中的元素都可以看成是占據著一定頁面空間的盒子，利用這些“盒子”可以進行精確的排版和布局，我們通常稱之為“盒模型”。一般來說這些被占據的空間往往都要比單純的內容要大，因為盒子可以有邊框，盒子內外都可以有邊距，可以通過調整盒子的邊框和邊距等參數，來調節盒子的位置。一個盒子模型由content（內容）、border（邊框）、padding（填充也叫內邊距）和margin（外邊距）這四部分組成。元素框的最內部是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其后的任何元素，如圖4所示。

CSS+Div布局對于初學者來說顯得有點復雜，但它的確是一種好的布局方法。

3. 版面尺寸規范化

網頁頁面尺寸與顯示器的大小及分辨率有關，目前有兩種常用的尺寸：一是分辨率在800600的情況下，頁面的顯示尺寸為778像素435像素；二是分辨率在1024768的情況下，頁面的顯示尺寸為1003像素600像素。以上的尺寸主要是考慮到了滾動條及瀏覽器的工具欄，可以看出分辨率越高，頁面的顯示尺寸就越大。

4.網頁的色彩搭配

網頁的色彩是網站形象的關鍵因素之一，色彩的搭配、運用是網頁制作中很重要的一個環節，如何將不同的色彩組合、搭配構成美麗的頁面，是需要網頁制作者對色彩搭配技巧和原則進行深一步研究的。不同的主色調有著不同的象征意義，主色調的選擇，根據建設的網站主題來確定。同時，在網頁設計制作過程中，我們也需要根據和諧、均衡和重點突出的原則，根據色彩對人們心理的影響，合理地加以運用。在色彩搭配環節，注意避免以下幾種情況出現：

（1）背景與文字內容對比不強烈，這樣看上去不舒服，會給人的視覺帶來疲勞感。

（2）避免使用太強烈的純色，顯的缺乏內涵。

（3）配色的搭配脫離了整體。

（4）沒有一種主色貫穿其中，網頁很花。主色并不是面積最大的顏色，而是最重要，最能揭示和反映主題的顏色。

（5）顏色太淺，對比過弱，顯得蒼白無力。

除了以上幾種情況外，還需要大家注意藍色忌純，綠色忌黃，紅色忌艷的原則。

5.結束語

網頁設計與制作是計算機專業的常規課程，也是大多數學生比較感興趣的一門課程。如何學好或者做好網頁，網頁的版面布局、尺寸的規范、顏色的選擇、搭配都是很重要，我們在制作網頁時要對這幾點進行認真的考慮和精心的設計。當然，一切的設計都要以用戶的需求為導向。