網站布局設計與實現

耿 海,王新宇

(南京旅游職業學院,江蘇 南京 211100)

0 引言

互聯網時代,展示信息的渠道多種多樣,網站便是其中一個。網站展示企業內容的優勢在于全天24 小時不間斷,能夠讓客戶隨時隨地通過PC 端或者移動端進行訪問[1],好的頁面能夠讓用戶獲得較好的瀏覽體驗,讓客戶對企業內容或者產品感興趣,進而給企業帶來收益,相當于企業的門面。傳統的網頁使用＜table＞標簽來進行布局,目前也有很多網頁依然使用＜table＞,但是＜table＞標簽使用過程不靈活,而＜div＞標簽在頁面布局上有一定優勢,可以按照設計者的想法靈活布局頁面,本次討論的內容便由此展開,結合css 完善頁面,供相關設計者提供參考。

1 研究內容

目前很多網站的首頁采用的是“上中下”結構布局[2,3],上方顯示的是公司的名稱、logo、宣傳標語、公司圖片等等;中間一般顯示的是網頁主要內容,但是在內容較多、較豐富的情況下,還需要單獨設置導航條讓瀏覽者自行進行點擊,這時便需要單獨劃分一塊區域擺放導航條;下方一般顯示的是公司、企業的地址和聯系方式等信息。采用“上中下”結構的布局方式能夠讓用戶在一頁中查看網站首頁想要展示的全部內容,若是首頁內容太多一頁放不下,那么適當地把中間區域拉長也是比較常見的做法,大致布局草圖如圖1 所示。

圖1 布局方式草圖

通過這種方式布局,能夠非常清晰地展示公司、企業想要傳遞的內容,一目了然,瀏覽者也能夠非常便捷的通過頁面布局的相關鏈接進入自己想要瀏覽的頁面。

2 實現過程

通過分析圖1 布局方式草圖,要想實現上述“上中下”結構布局的網頁,需要通過至少4 個＜div＞來進行布局,所以首先進行簡單＜div＞設置。

＜div id="header"＞ ＜/div＞

＜div id="leftbar"＞ ＜/div＞

＜div id="main"＞ ＜/div＞

＜div id="footer"＞ ＜/div＞

有了上述4 個＜div＞后,還無法實現布局,需要繼續對其進行相關css 的設置。header 的樣式比較簡單,可以直接設置height 和width,本文為了方便起見,只設置height 為150 px,width 為780 px;同樣,為了能夠讓頁面展示的更加清楚,便于查看不同的區域塊,可再額外設置background-color 屬性,即背景顏色以示區別。

#header{

background-color:#FF0;

height:150px;

width:780px;

}

中間區域涉及兩塊內容,左邊內容一般是用來放導航條,右邊用來顯示內容,所以需要分別單獨設置每個＜div＞的css,設置的屬性和上面的header 幾乎一樣,width 的值需要參考header 里的值,如代碼中設置的值是780 px,那么在中間區域再設置width 值的時候,為了保持整體一致,就讓兩塊區域的width 值加起來也是780 px。而height 的值視情況而定,若是首頁能夠放下整個網頁內容,那么height 就大致和電腦屏幕尺寸適應即可,若是內容太多需要下翻,那么height 就設置的大一些。需要格外注意的是,除了設置跟上述header相似的內容外,還需要單獨設置一個float 屬性,該屬性的值需要設置為left。

#leftbar{

background-color:#00F;

height:400px;

width:200px;

float:left;

}

#main{

background-color:#63C;

height:400px;

width:580px;

float:left;

}

最后,底部footer 同樣需要設置上述的height 和width 兩個屬性。其中,width 一般也不會超過上述兩塊區域的屬性width 的和,而height 的值也不會太大,因為是底部內容,一般用于擺放基本信息。此外,最關鍵的一步還需要額外設置clear 這個屬性,屬性的值設置成both,表示在下面這個區域需要清除上方的所有格式,否則在有些瀏覽器中運行的時候會出現和上述兩個＜div＞產生布局混亂的情況。

#footer{

background-color:#CF9;

height:50px;

width:780px;

clear:both;

}

3 效果展示

通過上述代碼的組合,使用Google 的Chrome 打開,查看代碼效果。最終實現效果如圖2 所示,布局成功,后續只需要添加文字或者圖片,便能夠達到最終布局效果,方便快捷。

圖2 最終實現效果

4 結語

展示信息的方法、手段很多,而網頁是展示信息的重要渠道,瀏覽者能夠通過鏈接快速地獲取信息,但是傳統的＜table＞標簽進行布局的頁面越來越不能適應當下各種顯示風格,本文給出一種能夠簡單實現常見的網頁布局方式,從整體草圖設計到網頁頭部、網頁的中間部分、網頁尾部實現,最終完成一個完整的頁面,采用主流的＜div＞和css 的方式,先通過＜div＞對網頁進行整體結構的劃分,再通過css 對頁面樣式進行優化,只需要設置少量的屬性便能夠布局成功,在目前主流的瀏覽器中測試效果不錯。后續再對整個網頁內容進行添加便可。