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

關(guān)鍵詞：頁面布局；流體；定位；浮動

中圖分類號：TP393.092

1 網(wǎng)頁布局

頁面布局也叫做頁面構(gòu)圖設(shè)計，主要是重新合理安排WEB頁面中文字、圖像、視頻、音頻等各種元素。運用html中標(biāo)記對頁面上的各種元素進行描述，瀏覽器再解釋html標(biāo)記并生成相應(yīng)的頁面效果。網(wǎng)頁布局設(shè)計既要滿足審美功能，也要體現(xiàn)實用高效功能。在使用Dreamweaver設(shè)計網(wǎng)頁時，一般用于頁面布局技術(shù)的有表格布局、框架布局和DIV+CSS布局。選擇適當(dāng)?shù)牟季郑梢允鬼撁娼Y(jié)構(gòu)也會清晰明了，美觀大方。

2 div+css網(wǎng)頁布局

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

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

圖1 布局框架

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

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

bujv.html文件實現(xiàn)頁面結(jié)構(gòu)

liutifudong.css實現(xiàn)文件頁面表現(xiàn)

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

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

2.3 固定浮動布局。固定浮動布局是指頁面各個部分的大小固定，不能隨視窗的變化而改變大小，采用浮動布局，用float設(shè)置頁面的浮動效果?？梢约嫒莓?dāng)前主流瀏覽器。這種布局模式應(yīng)用最為廣泛，大部分頁面都使用固定浮動布局模式。為實現(xiàn)固定浮動布局模式，對其html文件增加了middle的id選擇器，具體修改為

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

#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 固定定位布局。固定定位布局是指頁面各個部分的固定大小，不能隨視窗的變化而改變大小，采用定位布局實現(xiàn)固定頁面的效果。可以兼容當(dāng)前主流瀏覽器，主要應(yīng)用于復(fù)雜布局的頁面中，固定定位布局模式的html文件與固定浮動而成模式相同，.css文件主要對復(fù)合選擇器進行了修如下：

#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 結(jié)束語

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

參考文獻(xiàn)：

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

[2]嚴(yán)加瓊.淺析網(wǎng)頁設(shè)計中的頁面布局[J].電腦學(xué)習(xí)，2010（02）：41-43.

作者單位：廣東省農(nóng)工商職業(yè)技術(shù)學(xué)校，廣東湛江 524091