div css(divcss布局)

我們在網(wǎng)頁制作中，會有許多的術(shù)語

例如：CSS、HTML、DHTML、XHTML等等。

下面開始使用DIV+CSS進(jìn)行網(wǎng)頁布局設(shè)計。

所有的設(shè)計第一步就是構(gòu)思，構(gòu)思好了，還需要用PhotoShop或FireWorks(以下簡稱PS或FW)等圖片處理軟件將需要制作的界面布局簡單的構(gòu)畫出來。

下面，我們需要根據(jù)構(gòu)思圖來規(guī)劃一下頁面的布局，圖片大致分為以下幾個部分：

　　1、頂部部分，其中又包括了LOGO、MENU和一幅Banner圖片；

　　2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容；

　　3、底部，包括一些版權(quán)信息。

有了以上的分析，我們就可以很容易的布局了，例如以下設(shè)計層下圖:

根據(jù)上圖，畫一個實際的頁面布局圖，說明一下層的嵌套關(guān)系，這樣理解起來就會更簡單了。

　　DIV結(jié)構(gòu)如下：　

　│body {}　/*這是一個HTML元素*/

　　└#Container {}　/*頁面層容器*/　

　　　　├#Header {}　/*頁面頭部*/

　　　　├#PageBody {}　/*頁面主體*/　

　　　　│　├#Sidebar {}　/*側(cè)邊欄*/　

　　　　│　└#MainBody {}　/*主體內(nèi)容*/　

　　　　└#Footer {}　/*頁面底部*/

至此，頁面布局與規(guī)劃已經(jīng)完成，接下來我們要做的就是開始書寫HTML代碼和CSS。