王立恒

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

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

一、引言

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

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

二、HTML網(wǎng)頁設(shè)計中常見的布局方式

（一）表格

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

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

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

（二）框架

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

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

（三）DIV+CSS

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

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

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

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

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

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

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

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

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

【參考文獻】

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

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