基于匹配核心元素的可視化網(wǎng)頁的規(guī)劃設(shè)計

高建芳

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

關(guān)鍵詞：網(wǎng)頁；版面布局；版面尺寸；色彩搭配

1.網(wǎng)頁的版面布局

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

2. 網(wǎng)頁排版布局的常用技術(shù)

① 表格布局

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

② 框架布局

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

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

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

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

3. 版面尺寸規(guī)范化

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

4.網(wǎng)頁的色彩搭配

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

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

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

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

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

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

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

5.結(jié)束語

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