HTML網頁設計中的布局技術分析

王立恒

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

【關鍵詞】布局技術；HTML網頁設計；運用

一、引言

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

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

二、HTML網頁設計中常見的布局方式

（一）表格

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

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

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

（二）框架

框架是將一個網頁分割成多個HTML頁面，每個框架頁都是一個獨立的HTML頁面，通過框架集的使用，這些框架能夠很好地在一起運作，使網站的風格一致。框架可以把瀏覽器窗口劃分為若干區域，每個區域可以分別顯示不同的網頁，定義頁面的導航區域和內容區域，它的主要特征是網頁中的一部分固定不動，而另一部分換頁更新內容。這樣可以用來增強頁面的導航功能。

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

（三）DIV+CSS

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

三、HTML網頁設計布局的運用方法

（一）圖片的應用

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

（二）頁面排版的應用

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

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

（三）造型組合的應用

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

【參考文獻】

[1]郭軍軍，常用網頁布局對比研究[J].信息技術，2012.

[2]張趙輝，探析網頁前端技術及其升華[J].科技致富向導，2015.