中學(xué)生電腦作品制作中網(wǎng)頁(yè)設(shè)計(jì)制作

薛穩(wěn)

摘要：本文主要介紹網(wǎng)絡(luò)設(shè)計(jì)人員對(duì)網(wǎng)站進(jìn)行排版和布局時(shí)，所用到的div+css技術(shù)及相關(guān)應(yīng)用案例，還有網(wǎng)頁(yè)的色彩搭配、版面布局等平面設(shè)計(jì)元素的相關(guān)理論和內(nèi)容。

關(guān)鍵詞：Div+CSS； 網(wǎng)頁(yè)設(shè)計(jì)；版面布局

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）26-0213-03

縱觀國(guó)內(nèi)外眾多大型商業(yè)門戶網(wǎng)站、個(gè)人網(wǎng)站、行業(yè)網(wǎng)站、企業(yè)網(wǎng)站等，其不僅設(shè)計(jì)風(fēng)格迥異，顏色布局多變，給人以完全不同的視覺(jué)沖擊和美觀享受，而且網(wǎng)站的開發(fā)與設(shè)計(jì)呈現(xiàn)出日新月異的發(fā)展趨勢(shì)出來(lái)。伴隨著互聯(lián)網(wǎng)的發(fā)展與崛起，信息技術(shù)的不斷成熟與革新，如今網(wǎng)頁(yè)設(shè)計(jì)已經(jīng)不再?gòu)那澳前愫?jiǎn)潔樸素，界面丑陋，反而愈加注重網(wǎng)頁(yè)的編排，平面元素的應(yīng)用，與用戶的交互等等。因而，本文試圖探討并介紹網(wǎng)頁(yè)設(shè)計(jì)中利用CSS+DIV的布局方法，網(wǎng)頁(yè)制作的色彩搭配，文字的編排搭配，以及在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常用到的經(jīng)典版面布局風(fēng)格，來(lái)重點(diǎn)論述網(wǎng)頁(yè)設(shè)計(jì)人員是如何將平面視覺(jué)元素運(yùn)用到各大網(wǎng)站中的網(wǎng)頁(yè)設(shè)計(jì)里來(lái)的。

1 Div+CSS的布局技術(shù)

1）Div技術(shù)從其本質(zhì)上而言，是將網(wǎng)頁(yè)HTML文件當(dāng)中混亂臃腫的文字、圖片等內(nèi)容通過(guò)Div元素將其分割成每一個(gè)單獨(dú)的區(qū)域，以此來(lái)形成一種邏輯清晰，結(jié)構(gòu)明確的模塊組合體。Div元素，憑借其擁有眾多具有獨(dú)特作用的屬性，經(jīng)常被開發(fā)人員用來(lái)賦予特殊的值，并將網(wǎng)頁(yè)內(nèi)容的開頭和結(jié)尾處放置DIV標(biāo)簽，以此來(lái)構(gòu)成完成的一個(gè)模塊。

2）CSS是一種具有標(biāo)記行的特殊語(yǔ)言，通過(guò)CSS，設(shè)計(jì)人員可以把對(duì)網(wǎng)頁(yè)層級(jí)結(jié)構(gòu)的設(shè)計(jì)樣式和網(wǎng)頁(yè)內(nèi)容兩者之間完全分離開來(lái)，獨(dú)立存在，這樣一來(lái)，不僅有利于對(duì)網(wǎng)站中各網(wǎng)頁(yè)以統(tǒng)一設(shè)計(jì)風(fēng)格的樣式進(jìn)行布局，而且還有利于提升網(wǎng)頁(yè)的加載速度，縮短其響應(yīng)時(shí)間。

從當(dāng)前CSS與Div在網(wǎng)頁(yè)設(shè)計(jì)中的運(yùn)用案例中來(lái)看，這種布局技術(shù)不僅可以使得網(wǎng)頁(yè)設(shè)計(jì)人員通過(guò)屬性值的設(shè)定精準(zhǔn)的將各類網(wǎng)頁(yè)內(nèi)容精準(zhǔn)的進(jìn)行編排和定位，而且還能夠使得文字和圖片之間以精美的排版樣式為網(wǎng)頁(yè)的整體瀏覽效果增色不少。

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

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

2 網(wǎng)頁(yè)設(shè)計(jì)的色彩搭配

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

2.1劃分網(wǎng)頁(yè)層次

從人欣賞事物的角度而言，色彩能夠?yàn)槿祟惛兄挛锾峁O大的視覺(jué)刺激，使其從情感上產(chǎn)生共鳴。因而，如果通過(guò)將帶有不同色調(diào)的色彩進(jìn)行均衡組合，會(huì)形成風(fēng)格非常鮮明，內(nèi)容極為出彩的頁(yè)面。由于網(wǎng)頁(yè)中通常有不同的層次和不同作用的文字內(nèi)容，根據(jù)文字內(nèi)容的重點(diǎn)、情感、風(fēng)格，選用比例均勻，搭配得當(dāng)?shù)膸追N色彩，會(huì)使得網(wǎng)頁(yè)內(nèi)容隨色彩的分布而顯得更加錯(cuò)落有致，主次分明，從而將網(wǎng)頁(yè)的層次感劃分得一目了然，以便于網(wǎng)民在網(wǎng)頁(yè)的閱讀瀏覽過(guò)程中抓住重點(diǎn)來(lái)獲取信息量。這樣一來(lái)，不但網(wǎng)頁(yè)的導(dǎo)向性得以凸現(xiàn)出來(lái)，而且其視覺(jué)表達(dá)效果也十分出彩。下圖是國(guó)外一家社交網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)作品，從該圖中可以看出其在好友動(dòng)態(tài)上色彩選用上用白色和藍(lán)色交替組合的形式進(jìn)行搭配，而在個(gè)人資料及其社交功能上選用的黑色作為背景，黑色和藍(lán)白色形成強(qiáng)烈的視覺(jué)區(qū)域和對(duì)比，因而使得當(dāng)用戶在瀏覽該社交網(wǎng)站時(shí)將焦點(diǎn)更多的關(guān)注于內(nèi)容本身上面。

2.2 突出網(wǎng)頁(yè)重點(diǎn)

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

2.3增強(qiáng)網(wǎng)頁(yè)設(shè)計(jì)的藝術(shù)表現(xiàn)力

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

3 網(wǎng)頁(yè)設(shè)計(jì)中的經(jīng)典版面布局

在網(wǎng)頁(yè)設(shè)計(jì)人員選擇網(wǎng)頁(yè)的版面布局時(shí)，一個(gè)良好的版式設(shè)計(jì)將使得網(wǎng)頁(yè)的人機(jī)交互體驗(yàn)不僅極為優(yōu)異，而且瀏覽者的關(guān)注重點(diǎn)將會(huì)更加集中于網(wǎng)頁(yè)中層次分明、中心突出的文字內(nèi)容上，使得網(wǎng)頁(yè)信息的傳達(dá)效果變得更為直觀可感。下面筆者將介紹幾種景點(diǎn)版面布局樣式。

3.1 “T”字型布局樣式

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

3.2“國(guó)”字型布局樣式

“國(guó)”字型版面布局在網(wǎng)頁(yè)上的樣式分布相對(duì)于“T”型結(jié)構(gòu)而言，不僅兩邊都會(huì)被網(wǎng)站主要功能分別包圍，而且頂部和底部上下也會(huì)被網(wǎng)站的logo標(biāo)志，以及版權(quán)信息和網(wǎng)站地址等信息包圍，因而看起來(lái)像是一個(gè)“國(guó)”字型。這種網(wǎng)頁(yè)布局方式很好地利用了網(wǎng)頁(yè)的空白空間對(duì)網(wǎng)站內(nèi)容進(jìn)行排版的，但是由于過(guò)于緊湊因而使得頁(yè)面的布局顯得非常呆板。

3.3 “三”字型布局樣式

它是指采取左右或者上下對(duì)稱的布局，一半深色，一半淺色。一般用于設(shè)計(jì)型站點(diǎn).優(yōu)點(diǎn)是視覺(jué)沖擊力強(qiáng)，缺點(diǎn)是將兩部分有機(jī)地結(jié)合比較困難。

3.4 POP的布局樣式

POP的網(wǎng)絡(luò)布局指的是網(wǎng)頁(yè)在被設(shè)計(jì)時(shí)，往往會(huì)通過(guò)一張具有觀賞價(jià)值和傳播效應(yīng)的創(chuàng)意設(shè)計(jì)圖片作為網(wǎng)頁(yè)的主背景圖，而網(wǎng)站的內(nèi)容則以精簡(jiǎn)短小的簡(jiǎn)介形式附加在該背景的中央或者左右側(cè)，這種版面布局樣式不僅可以幫助網(wǎng)站從視覺(jué)層面上更好的吸引到更多的網(wǎng)絡(luò)用戶，而且具有統(tǒng)一的藝術(shù)觀感和個(gè)性化的表現(xiàn)風(fēng)格。

圖6 POP 網(wǎng)頁(yè)設(shè)計(jì)布局

參考文獻(xiàn)：

[1] 林家陽(yáng).圖形創(chuàng)意[M].黑龍江美術(shù)出版社，2010.

[2] Susan M. Weinschenk， 崔巧譯.網(wǎng)頁(yè)設(shè)計(jì)也理學(xué)[M].人民郵電出版社，2013.

[3] 晉小彥.網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)創(chuàng)意拓展與快速表現(xiàn)[M].清華大學(xué)出版社，2014.