中學生電腦作品制作中網頁設計制作

薛穩

摘要：本文主要介紹網絡設計人員對網站進行排版和布局時，所用到的div+css技術及相關應用案例，還有網頁的色彩搭配、版面布局等平面設計元素的相關理論和內容。

關鍵詞：Div+CSS； 網頁設計；版面布局

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2016）26-0213-03

縱觀國內外眾多大型商業門戶網站、個人網站、行業網站、企業網站等，其不僅設計風格迥異，顏色布局多變，給人以完全不同的視覺沖擊和美觀享受，而且網站的開發與設計呈現出日新月異的發展趨勢出來。伴隨著互聯網的發展與崛起，信息技術的不斷成熟與革新，如今網頁設計已經不再從前那般簡潔樸素，界面丑陋，反而愈加注重網頁的編排，平面元素的應用，與用戶的交互等等。因而，本文試圖探討并介紹網頁設計中利用CSS+DIV的布局方法，網頁制作的色彩搭配，文字的編排搭配，以及在網頁設計中經常用到的經典版面布局風格，來重點論述網頁設計人員是如何將平面視覺元素運用到各大網站中的網頁設計里來的。

1 Div+CSS的布局技術

1）Div技術從其本質上而言，是將網頁HTML文件當中混亂臃腫的文字、圖片等內容通過Div元素將其分割成每一個單獨的區域，以此來形成一種邏輯清晰，結構明確的模塊組合體。Div元素，憑借其擁有眾多具有獨特作用的屬性，經常被開發人員用來賦予特殊的值，并將網頁內容的開頭和結尾處放置DIV標簽，以此來構成完成的一個模塊。

2）CSS是一種具有標記行的特殊語言，通過CSS，設計人員可以把對網頁層級結構的設計樣式和網頁內容兩者之間完全分離開來，獨立存在，這樣一來，不僅有利于對網站中各網頁以統一設計風格的樣式進行布局，而且還有利于提升網頁的加載速度，縮短其響應時間。

從當前CSS與Div在網頁設計中的運用案例中來看，這種布局技術不僅可以使得網頁設計人員通過屬性值的設定精準的將各類網頁內容精準的進行編排和定位，而且還能夠使得文字和圖片之間以精美的排版樣式為網頁的整體瀏覽效果增色不少。

另一方面，由于網頁內容同其設計樣式兩者之間互相分離，因而當網頁設計人員需要對其網頁樣式重新編排，或者在CSS樣式中的某幾項屬性值修改時，只需要在單獨存在的CSS文件中對布局元素加以重新設計即可達到目的，從而使得頁面的布局與后期迭代工作變得更加輕松簡單。

此外，由于內容樣式的分離，使得網頁本身不僅在代碼內容上大為減少，而且極大程度上減少了網頁重新改變版面布局的時間，使得網站部署的帶寬成本節省不少。

2 網頁設計的色彩搭配

網頁設計這項工作，從其技術角度來看，不僅要包含各種平面設計元素，而且還需要嚴格遵循其固有的設計原則。而且網頁設計本身所體現出來的藝術高度通常決定著網頁的瀏覽量和點擊量，同時也是網站開發人員同互聯網用戶之間進行互動和交流的重要媒介。一個網站在色彩上的搭配和選用不僅有利于傳遞網頁設計人員所要表達的主題及內容，而且可以為用戶帶來極為強烈的視覺沖擊，增強其網站本身的觀賞性。

2.1劃分網頁層次

從人欣賞事物的角度而言，色彩能夠為人類感知事物提供極大的視覺刺激，使其從情感上產生共鳴。因而，如果通過將帶有不同色調的色彩進行均衡組合，會形成風格非常鮮明，內容極為出彩的頁面。由于網頁中通常有不同的層次和不同作用的文字內容，根據文字內容的重點、情感、風格，選用比例均勻，搭配得當的幾種色彩，會使得網頁內容隨色彩的分布而顯得更加錯落有致，主次分明，從而將網頁的層次感劃分得一目了然，以便于網民在網頁的閱讀瀏覽過程中抓住重點來獲取信息量。這樣一來，不但網頁的導向性得以凸現出來，而且其視覺表達效果也十分出彩。下圖是國外一家社交網站的網頁設計作品，從該圖中可以看出其在好友動態上色彩選用上用白色和藍色交替組合的形式進行搭配，而在個人資料及其社交功能上選用的黑色作為背景，黑色和藍白色形成強烈的視覺區域和對比，因而使得當用戶在瀏覽該社交網站時將焦點更多的關注于內容本身上面。

2.2 突出網頁重點

對于網頁而言，最能夠吸引讀者瀏覽并閱讀的就是網頁本身所承載的內容及其表現形式，再加上網絡本身資源豐富，種類多樣，而且擁有海量的信息來源。因而網絡用戶在瀏覽眾多網站過程中，往往會根據自己的情感和心理狀態以及審美觀感，來選擇同用戶本身個人品位相契合的網站進行瀏覽。因而設計人員通過合理的引用色彩對網頁進行渲染和調配，將有助于網頁增強其在內容上的表現力，同時也會使得網頁的設計風格新穎獨特，中心突出，滿足網站本身通過外界傳達出來的頁面美感以及主題內容。下圖是國外網站Davidvogin的設計案例，從其色彩的搭配上來看，網頁的北京色彩選用的是略顯灰暗陰暗的橄欖色，而其中間個人廣告創意設計作品展中則運用了較為明亮的橘黃色同另外兩個板塊區分開來，將其個人作品本身的設計元素重點強調出來，以增加瀏覽者對其作品的關注度。

2.3增強網頁設計的藝術表現力

色彩本身作為一種視覺語言，不僅讓網頁從內容的展示上獲得了更進一步的審美延伸，而且使得網頁自身所表現出來的藝術魅力與用戶的審美品位更加契合。雜加上網頁色彩的藝術表達效果相較文字來說更具有藝術性。因而，網頁設計者一般都會將這種類型的藝術作品在情感上的表達通過色彩之間的對比與烘托展現出來。比如下圖中所示的德國一家名叫Red Monkeys的商業網站，其在色彩的調配和渲染上顯得清新素雅，而且菜單欄中的背景色也選用了干凈簡潔的白色作為底色，而懸浮效果的對比顏色則選用了較深的灰色。另外，網頁背景主色彩則是淡青色，且越偏向中央其色彩濃度越淡，讓該網站中設計人員所要表達出來的服務理念以及企業中產品的設計風格呼之欲出，讓瀏覽者感受到該公司在業務上成熟、高效、優雅、大氣的運作風格。

3 網頁設計中的經典版面布局

在網頁設計人員選擇網頁的版面布局時，一個良好的版式設計將使得網頁的人機交互體驗不僅極為優異，而且瀏覽者的關注重點將會更加集中于網頁中層次分明、中心突出的文字內容上，使得網頁信息的傳達效果變得更為直觀可感。下面筆者將介紹幾種景點版面布局樣式。

3.1 “T”字型布局樣式

“T”字型版面從其字面意思來看，就是類似于“T”形狀的布局樣式。其在網頁頂部通常會用于放置網站Logo，，登錄情況，標語或者聯系方式等相關內容。而正下方的左邊會放置該網站所具有的主要功能模塊，一般呈現為樹形結構，右邊的大部分空間都會用于放置網站的主要內容。這種布局盡管十分簡單，但是不夠靈活，且由于排版較為密集的原因，瀏覽者會覺得頁面看起來較為擁擠。

3.2“國”字型布局樣式

“國”字型版面布局在網頁上的樣式分布相對于“T”型結構而言，不僅兩邊都會被網站主要功能分別包圍，而且頂部和底部上下也會被網站的logo標志，以及版權信息和網站地址等信息包圍，因而看起來像是一個“國”字型。這種網頁布局方式很好地利用了網頁的空白空間對網站內容進行排版的，但是由于過于緊湊因而使得頁面的布局顯得非常呆板。

3.3 “三”字型布局樣式

它是指采取左右或者上下對稱的布局，一半深色，一半淺色。一般用于設計型站點.優點是視覺沖擊力強，缺點是將兩部分有機地結合比較困難。

3.4 POP的布局樣式

POP的網絡布局指的是網頁在被設計時，往往會通過一張具有觀賞價值和傳播效應的創意設計圖片作為網頁的主背景圖，而網站的內容則以精簡短小的簡介形式附加在該背景的中央或者左右側，這種版面布局樣式不僅可以幫助網站從視覺層面上更好的吸引到更多的網絡用戶，而且具有統一的藝術觀感和個性化的表現風格。

圖6 POP 網頁設計布局

參考文獻：

[1] 林家陽.圖形創意[M].黑龍江美術出版社，2010.

[2] Susan M. Weinschenk， 崔巧譯.網頁設計也理學[M].人民郵電出版社，2013.

[3] 晉小彥.網頁視覺設計創意拓展與快速表現[M].清華大學出版社，2014.