網頁布局模式淺析

摘 要：在網頁視覺設計過程中，網頁布局設計實現了將頁面中的圖片、文字、視頻、音頻、flash動畫等元素的合理布局。用DIV搭建網站結構和CSS創(chuàng)建網站表現，對流體浮動布局、流體定位布局、固定浮動布局和固定定位布局分四類進行分析，對比不同流體布局模式，方便讀者根據不同的需求來選擇適宜的布局方式。

關鍵詞：頁面布局；流體；定位；浮動

中圖分類號：TP393.092

1 網頁布局

頁面布局也叫做頁面構圖設計，主要是重新合理安排WEB頁面中文字、圖像、視頻、音頻等各種元素。運用html中標記對頁面上的各種元素進行描述，瀏覽器再解釋html標記并生成相應的頁面效果。網頁布局設計既要滿足審美功能，也要體現實用高效功能。在使用Dreamweaver設計網頁時，一般用于頁面布局技術的有表格布局、框架布局和DIV+CSS布局。選擇適當的布局，可以使頁面結構也會清晰明了，美觀大方。

2 div+css網頁布局

隨著網絡技術的不斷發(fā)展，早期的表格、框架布局方式在可讀性，下載速度和W3C網頁標準方面的缺點越來越明顯，這些布局方式已不能適應新的要求。一種基于DIV+CSS的新型網頁布局方式速度流行，一些大型門戶網站都已經完成了網站重構。DIV主要搭建網站的結構（框架）、CSS主要創(chuàng)建網站表現（樣式/美化）。使用DIV+CSS網頁布局最主要的優(yōu)勢可以總結如下：（1）符合W3C標準，可以保證網站不會因為未來可能的網絡應用升級而被淘汰。（2）支持瀏覽器的向后兼容，也就是無論未來的瀏覽器大戰(zhàn)，勝利的是IE7或者是火狐，您的網站都能很好的兼容。（3）搜索引擎更加友好。相對與傳統(tǒng)的table，采用DIV+CSS技術的網頁，對于搜索引擎的收錄更加友好。（4）樣式的調整更加方便。內容和樣式的分離，使頁面和樣式的調整變得更加方便。現在YAHOO，MSN等國際門戶網站和主流的WEB網站，均采用DIV+CSS的框架模式，更加印證了DIV+CSS是大勢所趨。（5）CSS的極大優(yōu)勢表現在簡潔的代碼，對于一個大型網站來說，可以節(jié)省大量帶寬。（6）表現和內容分離，將設計部分剝離出來放在一個獨立樣式文件中，HTML文件中只存放文本信息，大大提高頁面瀏覽速度；易于維護和改版，只要簡單修改幾個CSS文件就可以重新設計整個網站的頁面，提高搜索引擎對網頁的索引效率。

2.1 流體浮動布局。布局框架介紹

圖1 布局框架

頁面分為上中下三個部分，包括四個id選擇器，其中最上方是一個橫向欄目，常用作網頁的導航，通常稱為頁面的頭部，id選擇器表示為header。頁面的中間部分分為左右兩欄，左邊欄稍窄，id選擇器表示為nav，右邊為頁面的主體內容區(qū)域，表示為main選擇器。此布局頁面保存為.html文件，在.html文件中用div搭建網站的結構；再新建一個.css文件，用.css文件主要創(chuàng)建網站表現，通過鏈接式將兩個文件聯(lián)系起來，實現結構與表現的相互分離。

流體浮動布局可以隨視窗大小的變化而變化，但保持總比例不變，中間部分主要由float來定位左右浮動效果。通過浮動布局兼容當前主流瀏覽器。多應用于論壇頁面布局上，用float來實現浮動效果，同時視窗隨著瀏覽器發(fā)生變化。流體浮動布局模式實現過程如下，左邊為bujv.html文件，搭建網站框架，右邊為liutidingwei.css文件，實現網站表現：

bujv.html文件實現頁面結構

liutifudong.css實現文件頁面表現

*{ padding： 0；margin：0；}

#header，#nav，#main，#footer{border： 1px solid black；}

#header{ margin-bottom：10px；}

#nav{width：34%；margin-bottom：10px；float： left；}

#main{width：65%；margin-bottom：10px；float：right；}

#footer{ clear：both；}

2.2 流體定位布局。流體定位布局是指當視窗大小變化時做相應的變化，采用定位布局可以兼容當前主流的瀏覽器。布局文件bujv.html，與流體浮動模式的相同，使用相同的四個id選擇器，流體定位布局模式.css實現過程主要對兩個選擇器#nav和#main的頁面表現文件.css進行了如下修改，使用position：absolute絕對定位方式實現視窗能夠按比例變化：#nav{width：35%；left：10px；}

#main{position：absolute；left：200px；top：31px；width：65%；}

2.3 固定浮動布局。固定浮動布局是指頁面各個部分的大小固定，不能隨視窗的變化而改變大小，采用浮動布局，用float設置頁面的浮動效果。可以兼容當前主流瀏覽器。這種布局模式應用最為廣泛，大部分頁面都使用固定浮動布局模式。為實現固定浮動布局模式，對其html文件增加了middle的id選擇器，具體修改為

，header與footer兩id選擇器保持不變.右邊為gudingfudong.css文件，其實現過程如下：

#header，#middle，#middle #nav，#middle #main，#footer{

border：1px，solid，black；margin：0 auto 10px auto；}

#header{width：600px；}

#middle{width：600px；height：300px；margin：0 auto 10px auto；}

#middle #nav{width：198px；height：300px；float：left；}

#middle #main{float：right；width：400px；height：300px；}

#footer{clear：both；width：600px；}

2.4 固定定位布局。固定定位布局是指頁面各個部分的固定大小，不能隨視窗的變化而改變大小，采用定位布局實現固定頁面的效果?？梢约嫒莓斍爸髁鳛g覽器，主要應用于復雜布局的頁面中，固定定位布局模式的html文件與固定浮動而成模式相同，.css文件主要對復合選擇器進行了修如下：

#middle{width：600px；height：300px；margin：0 auto 10px auto；position：relative；}

#middle #nav{ position：absolute； width：200px；height：300px；top：0px；left：0px；}

#middle #main{position：absolute；top：0px；left：200px；width：400px；height：300px；}

3 結束語

網頁的布局不是簡單地擺放各種元素，需要把握其規(guī)律，注意元素之間的相互關系和依賴。頁面布局效果在很大程度上取決于設計者的藝術修養(yǎng)水平和創(chuàng)新能力。運用不同的網頁布局模式，將呈現給用戶不同的感受，為使瀏覽者在閱讀信息瀏覽網頁過程中有人性化的良好用戶體驗，需要網頁設計制作人員的共同努力。

參考文獻：

[1]劉霆雨.完美網頁設計與制作[M].北京：人民郵電出版社，2007：13-15.

[2]嚴加瓊.淺析網頁設計中的頁面布局[J].電腦學習，2010（02）：41-43.

作者單位：廣東省農工商職業(yè)技術學校，廣東湛江 524091