王立恒

【摘 要】在電子商務(wù)不斷發(fā)展的過(guò)程中，網(wǎng)頁(yè)的設(shè)計(jì)也得到迅速的發(fā)展，因此，對(duì)網(wǎng)頁(yè)設(shè)計(jì)的要求也不斷提高，尤其是在創(chuàng)新的社會(huì)背景下，網(wǎng)頁(yè)設(shè)計(jì)的新理念和新方法，不斷推陳出新。在這里，主要針對(duì)網(wǎng)頁(yè)設(shè)計(jì)中的布局技術(shù)進(jìn)行了簡(jiǎn)單分析與探討。

【關(guān)鍵詞】布局技術(shù)；HTML網(wǎng)頁(yè)設(shè)計(jì)；運(yùn)用

一、引言

現(xiàn)代社會(huì)是一個(gè)信息飛速發(fā)展的時(shí)代，網(wǎng)絡(luò)作為一種傳播信息的手段正在以超乎想象的速度不斷向前發(fā)展，各種新技術(shù)，新模式應(yīng)運(yùn)而生。我國(guó)的網(wǎng)絡(luò)建設(shè)更是取得了世人矚目的成績(jī)，網(wǎng)絡(luò)用戶成倍的增長(zhǎng)，但是所有網(wǎng)站中頁(yè)面的設(shè)計(jì)確是千篇一律，沒(méi)有多大的提升。其實(shí)網(wǎng)站本身就是無(wú)數(shù)個(gè)頁(yè)面的拼合，網(wǎng)頁(yè)的設(shè)計(jì)是一種審美藝術(shù)的視覺(jué)表達(dá)，也是美學(xué)的一種體現(xiàn)和眼神，作為網(wǎng)頁(yè)的設(shè)計(jì)人員，必須把傳統(tǒng)的平面設(shè)計(jì)和現(xiàn)代的布局設(shè)計(jì)理念結(jié)合起來(lái)，才能做出有自我特色的網(wǎng)頁(yè)，設(shè)計(jì)者應(yīng)該結(jié)合網(wǎng)絡(luò)的特點(diǎn)，關(guān)注網(wǎng)站所針對(duì)的人群，設(shè)計(jì)出具有自我的特色的網(wǎng)絡(luò)傳播頁(yè)面。

在網(wǎng)頁(yè)設(shè)計(jì)中，布局主要是利用各種元素在布局處理中的方法以及規(guī)律。從規(guī)律性上來(lái)講，其主要的特點(diǎn)就是重復(fù)布局、近似布局、漸變布局、發(fā)射布局、特異布局，從非規(guī)律性的特點(diǎn)上來(lái)講，主要表現(xiàn)為密集布局、分割布局、對(duì)比布局、肌理布局、空間布局。在網(wǎng)頁(yè)設(shè)計(jì)中，布局作為整個(gè)設(shè)計(jì)的結(jié)構(gòu)因素，必須要在布局中，通過(guò)科學(xué)安排相關(guān)的功能和區(qū)域，運(yùn)用不同的形態(tài)、材料，重新組合成為一個(gè)新的單元，并賦予視覺(jué)化概念，將相關(guān)基本形任意組合成新的視覺(jué)元素，才能達(dá)到應(yīng)有的設(shè)計(jì)效果。另外，布局關(guān)系到網(wǎng)頁(yè)設(shè)計(jì)文化和水平的好壞，通過(guò)點(diǎn)、線、面的運(yùn)用，以及各個(gè)元素之間關(guān)系的正確處理，滿足不同文化環(huán)境對(duì)網(wǎng)頁(yè)設(shè)計(jì)的要求，以便順應(yīng)人們的視覺(jué)感受，打動(dòng)觀看者的視覺(jué)，進(jìn)而達(dá)到設(shè)計(jì)想要的效果。

二、HTML網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的布局方式

（一）表格

表格布局是頁(yè)面布局技術(shù)中最常見(jiàn)的布局方式。在Dreamweaver中插入表格就類似于在WORD里插入表格，具有所見(jiàn)即所得的特點(diǎn)。利用表格組織各種網(wǎng)頁(yè)元素，既直觀又操作簡(jiǎn)單。但是，使用表格進(jìn)行布局不太方便，因?yàn)樽畛鮿?chuàng)建表格是為了了顯示表格數(shù)據(jù)，而不是用于對(duì)web頁(yè)進(jìn)行布局，為了簡(jiǎn)化使用表格進(jìn)行頁(yè)面布局的過(guò)程，dreamweaver提供了布局視圖。

在布局模式中，可以使用表格作為基礎(chǔ)結(jié)構(gòu)來(lái)設(shè)計(jì)自己的網(wǎng)頁(yè)布局，并且可以避免使用表格帶來(lái)的缺陷，例如可以在網(wǎng)頁(yè)上輕松地畫(huà)出單元格，然后定制和移動(dòng)單元格到任何需要的地方，創(chuàng)建的布局可以有固定的寬度或者可以占滿整個(gè)瀏覽器窗口。當(dāng)然也可以使用傳統(tǒng)的表格來(lái)創(chuàng)建網(wǎng)頁(yè)布局，或者是先創(chuàng)建多個(gè)互不重疊的層，讓后將它們轉(zhuǎn)換為表格。

由于在網(wǎng)頁(yè)中插入大量表格，會(huì)造成頁(yè)面源代碼存在大量冗余、可讀性差、直接導(dǎo)致網(wǎng)頁(yè)讀取速度慢的問(wèn)題，不利于網(wǎng)站的更新和維護(hù)，目前大中型網(wǎng)站一般不用表格布局。

（二）框架

框架是將一個(gè)網(wǎng)頁(yè)分割成多個(gè)HTML頁(yè)面，每個(gè)框架頁(yè)都是一個(gè)獨(dú)立的HTML頁(yè)面，通過(guò)框架集的使用，這些框架能夠很好地在一起運(yùn)作，使網(wǎng)站的風(fēng)格一致?？蚣芸梢园褳g覽器窗口劃分為若干區(qū)域，每個(gè)區(qū)域可以分別顯示不同的網(wǎng)頁(yè)，定義頁(yè)面的導(dǎo)航區(qū)域和內(nèi)容區(qū)域，它的主要特征是網(wǎng)頁(yè)中的一部分固定不動(dòng)，而另一部分換頁(yè)更新內(nèi)容。這樣可以用來(lái)增強(qiáng)頁(yè)面的導(dǎo)航功能。

框架布局比較靈活，若有效運(yùn)用，則能使網(wǎng)頁(yè)更整潔、清晰。但是，由于框架中鏈接目標(biāo)屬性較復(fù)雜，因此對(duì)于網(wǎng)頁(yè)制作初學(xué)者來(lái)說(shuō)使用框架過(guò)程中很難控制頁(yè)面顯示。對(duì)于內(nèi)容多、布局復(fù)雜的網(wǎng)站，也不宜采用框架布局，因?yàn)?，過(guò)多的框架會(huì)影響網(wǎng)頁(yè)下載所需的時(shí)間，影響網(wǎng)頁(yè)的讀取速度，而且瀏覽器對(duì)框架結(jié)構(gòu)的兼容性也不是很好。

（三）DIV+CSS

DIV+CSS布局技術(shù)的出現(xiàn)彌補(bǔ)了表格和框架布局的不足，優(yōu)勢(shì)在于代碼精簡(jiǎn)、頁(yè)面下載速度快，表現(xiàn)和內(nèi)容相分離，布局靈活，便于維護(hù)。我們可以將樣式單獨(dú)保存在CSS文件中，例如用手機(jī)WAP上網(wǎng)時(shí)，樣式文件就可以不加載，大大地節(jié)約頁(yè)面下載時(shí)間。多個(gè)頁(yè)面可共享一個(gè)CSS文件，要修改頁(yè)面樣式時(shí)，只需修改CSS文件即可實(shí)現(xiàn)對(duì)整個(gè)頁(yè)面的重新布局，不影響網(wǎng)頁(yè)內(nèi)容。目前多數(shù)大型網(wǎng)站都采用此種方法進(jìn)行布局，但是對(duì)于初學(xué)者來(lái)說(shuō)，它的操作相對(duì)復(fù)雜，要求用戶對(duì)代碼有一定的了解。

三、HTML網(wǎng)頁(yè)設(shè)計(jì)布局的運(yùn)用方法

（一）圖片的應(yīng)用

圖片作為網(wǎng)頁(yè)中的重要組成元素，是說(shuō)明網(wǎng)頁(yè)內(nèi)容和美化頁(yè)面的關(guān)鍵。因此，需要設(shè)計(jì)師把握布局設(shè)計(jì)理念，把圖片加到適當(dāng)?shù)牡胤?，利用圖片對(duì)頁(yè)面進(jìn)行處理。如利用Photoshop或Illustrator可以將圖片切成小塊，根據(jù)情況分別進(jìn)行優(yōu)化。一般我們把有較為復(fù)雜顏色變化的小塊優(yōu)化為jpg，而把那種只有單純色塊的卡通畫(huà)式的小塊優(yōu)化為gif，這是由這兩種格式的特點(diǎn)決定的。

（二）頁(yè)面排版的應(yīng)用

在網(wǎng)頁(yè)設(shè)計(jì)中，頁(yè)面排版作為視覺(jué)傳達(dá)的重要手段，同樣，決定著網(wǎng)頁(yè)設(shè)計(jì)的成敗。頁(yè)面排版包括頁(yè)面距、版面設(shè)置、表格處理、頁(yè)碼格式等內(nèi)容，種類繁多，需要設(shè)計(jì)者從中尋找相關(guān)的規(guī)律，要根據(jù)網(wǎng)頁(yè)的形式，利用特異處理，將一些相同的基本型中出現(xiàn)一個(gè)形狀或者大小特異的基本型進(jìn)行整合，進(jìn)而達(dá)到和諧統(tǒng)一的畫(huà)面效果機(jī)理。

以表格的處理為例進(jìn)行說(shuō)明，在使用Dream weaver制作網(wǎng)頁(yè)時(shí)，會(huì)自動(dòng)在每一個(gè)td內(nèi)添加一個(gè)空字符“”。如果單元格內(nèi)沒(méi)有填充其它元素，這個(gè)空字符會(huì)保留，在指定td的寬度或高度后，可以在源代碼內(nèi)將其刪去。

（三）造型組合的應(yīng)用

造型代表著一個(gè)頁(yè)面的整體形象，而這種形象一定要突出整體性。在網(wǎng)頁(yè)設(shè)計(jì)中，要利用經(jīng)典圖形，用最簡(jiǎn)單的設(shè)計(jì)技術(shù)創(chuàng)造經(jīng)典的視覺(jué)效果，同時(shí)，這也是創(chuàng)意和理論的高度結(jié)合，簡(jiǎn)單來(lái)講，就是在確定好圖形與背景之間的關(guān)系，通過(guò)雙重意象的構(gòu)建、產(chǎn)生與形成，吸引觀眾的注意力，使得他們的視線更多集中在圖形或背景上，因此，這就需要強(qiáng)化頁(yè)面布局的局部以及整體效果。比如我們平常所見(jiàn)到的頁(yè)面布局，其在背景和圖像的區(qū)別雖然不明顯，但是卻存在著一定的差異，由黑白條紋所布局，用上下交錯(cuò)的手法創(chuàng)造出了雙重意象，給觀者造成一種視覺(jué)上的錯(cuò)覺(jué)，能夠讓人反復(fù)的觀賞畫(huà)，成功地吸引了注意力。

【參考文獻(xiàn)】

[1]郭軍軍，常用網(wǎng)頁(yè)布局對(duì)比研究[J].信息技術(shù)，2012.

[2]張趙輝，探析網(wǎng)頁(yè)前端技術(shù)及其升華[J].科技致富向?qū)В?015.