試驗(yàn)四--Div+CSS網(wǎng)布局

1、實(shí)驗(yàn)四 Div+CSS 網(wǎng)頁布局一、站點(diǎn)規(guī)劃DIV+CSS在網(wǎng)頁制作中，有許多的術(shù)語，例如： HTML、CSS、DIV 等等。下面我們就開始一步一步使用進(jìn)行網(wǎng)頁布局設(shè)計吧。所有的設(shè)計第一步就是構(gòu)思，構(gòu)思好了，一般來說還需要制作的界面布局簡單的構(gòu)畫出來。下面，我們需要根據(jù)構(gòu)思圖來規(guī)劃一下頁面的布局，仔細(xì)分析一下該圖，我們不難發(fā)現(xiàn)，圖片大致分為以下幾個部分：1、頂部部分，其中又包括了 LOGO、MENU和一幅 Banner 圖片；2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容；3、底部，包括一些版權(quán)信息。有了以上的分析，我們就可以很容易的布局了，我們設(shè)計層如下圖 :根據(jù)上圖，我再畫了一個實(shí)際的頁面布局圖，說

2、明一下層的嵌套關(guān)系，這樣理解起來就會更簡單了DIV 結(jié)構(gòu)如下：body /* 這是一個 HTML元素，具體我就不說明了 */#Container /* 頁面層容器 */#Header /* 頁面頭部 */#PageBody /* 頁面主體 */ #Sidebar /* 側(cè)邊欄 */ #MainBody /* 主體內(nèi)容 */#Footer /* 頁面底部 */HTML代碼和 CSS。至此，頁面布局與規(guī)劃已經(jīng)完成，接下來我們要做的就是開始書寫接下來我們在桌面新建一個文件夾，命名為“ DIV+CSS 頁面布局”，在文件夾下新建兩個空的記事本 文檔，輸入以下內(nèi)容： 無標(biāo)題文檔 這是 XHTML的基本結(jié)

3、構(gòu)，將其命名為 index.htm ，另一個記事本文檔則命名為 css.css下面，我們在 標(biāo)簽對中寫入 DIV 的基本結(jié)構(gòu)，代碼如下：color=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/color為了使以后閱讀代碼更簡易，我們應(yīng)該添加相關(guān)注釋，接下來打開碼如下：css.css文件，CSS信息，代/* 基本信息 */body font:12px Tahoma;margin:0px;text-align:center;backgro

4、und:#FFF;/* 頁面層容器 */#container width:100%/* 頁面頭部 */#Header width:800px;margin:0 auto;height:100px;background:#FFCC99/* 頁面主體 */#PageBody width:800px;margin:0 auto;height:400px;background:#CCFF00頁面底部 */#Footer width:800px;margin:0 auto;height:50px;background:#00FFFF把以上文件保存，用瀏覽器打開，這時我們已經(jīng)可以看到基礎(chǔ)結(jié)構(gòu)了，這個就是頁

5、面的布局了 關(guān)于以上 CSS的說明：1、請養(yǎng)成良好的注釋習(xí)慣，這是非常重要的；2、body 是一個 HTML元素，頁面中所有的內(nèi)容都應(yīng)該寫在這標(biāo)簽對之內(nèi)，我就不多說了；3、講解一些常用的 CSS代碼的含義：font:12px Tahoma ；這里使用了縮寫，完整的代碼應(yīng)該是： font-size:12px;font-family:Tahoma ；說明字體為 12 像素大小， 字體為 Tahoma 格式；margin:0px ；也使用了縮寫，完整的應(yīng)該是：margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px或margi

6、n:0px 0px 0px 0px順序是 上 / 右 / 下 / 左，你也可以書寫為 margin:0（ 縮寫 ） ；以上樣式說明 body 部分對上右下左邊距為 0 像素，如果使用 auto 則是自動調(diào)整邊距， 另外還有以下幾種寫法：margin:0px auto ；說明上下邊距為 0px ，左右為自動調(diào)整；我們以后將使用到的 padding 屬性和 margin 有許多相似之處，他們的參數(shù)是一樣的， 只不過各自表示的含義不相同， margin 是外部距離，而 padding 則是內(nèi)部距離。text-align:center 文字對齊方式，可以設(shè)置為左、右、中，這里我將它設(shè)置為居中對齊。ba

7、ckground:#FFF 設(shè)置背景色為白色，這里顏色使用了縮寫，完整的應(yīng)該是background:#FFFFFF 。background 可以用來給指定的層填充背景色、背景圖片，以后我們將用到如下格式： background:#ccc url（bg.gif） top left no-repeat；表示：使用 #CCC（灰度色 ） 填充整個層，使用 bg.gif 做為背景圖片， top left表示圖片位于當(dāng)前層的左上端， no-repeat 表示僅顯示圖片大小而不填充滿整個層。 top/right/bottom/left/center用于定位背景圖片，分別表示 上 / 右 / 下 / 左 /

8、 中；還可以使用background:url(bg.gif) 20px 100px;表示 X座標(biāo)為 20 像素， Y座標(biāo)為 100 像素的精確定位； repeat/no-repeat/repeat-x/repeat-y分別表示 填充滿整個層 / 不填充 / 沿 X軸填充 / 沿 Y軸填充。height / width / color分別表示高度 (px) 、寬度 (px) 、字體顏色 (HTML色系表 ) 。4、如何使頁面居中？大家將代碼保存后可以看到，整個頁面是居中顯示的，那么究竟是什么原因使得頁面居中顯示呢？是因?yàn)槲覀冊?#container 中使用了以下屬性：margin:0 auto;

9、按照前面的說明，可以知道，表示上下邊距為0，左右為自動，因此該層就會自動居中了。如果要讓頁面居左，則取消掉 auto 值就可以了，因?yàn)槟J(rèn)就是居左顯示的。通過 margin:auto 我們就可以輕易地使層自動居中了。5、這里我只介紹這些常用的 CSS屬性了，其他的請參看 CSS2.0 中文手冊。當(dāng)我們寫好了頁面大致的 DIV 結(jié)構(gòu)后，我們就可以開始細(xì)致地對每一個部分進(jìn)行制作了。在上一章中我們寫入了一些樣式，那些樣式是為了預(yù)覽結(jié)構(gòu)而寫入的，我們把 css.css 中的樣式全部清除 掉，重新寫入以下樣式代碼：/* 基本信息 */body font:12px Tahoma;margin:0px;te

10、xt-align:center;background:#FFF;a:link,a:visited font-size:12px;text-decoration:none;a:hover/* 頁面層容器 */#container width:800px;margin:10px auto樣式說明：a:link,a:visited font-size:12px;text-decoration:none;a:hover 這兩項分別是控制頁面中超鏈接的樣式，具體我就不說明了，請大家參閱手冊。#container width:800px;margin:10px auto指定整個頁面的顯示區(qū)域。width:

11、800px 指定寬度為 800 像素，這里根據(jù)實(shí)際所需設(shè)定。margin:10px auto ，則是頁面上、下邊距為 10 個像素，并且居中顯示。上一章中我們講過， 對層的 margin 屬性的左右邊距設(shè)置為 auto 可以讓層居中顯示 。二、設(shè)計首頁布局 根據(jù)上面的規(guī)劃，先設(shè)計頁面布局，然后再填充內(nèi)容。步驟如下：（1）新建站點(diǎn) “mysite”，新建一個 HTML 文件，命名為 “index.html ”。在“文檔 ”面板中把 “標(biāo) 題”項的“無標(biāo)題文檔 ”改為 “頁面布局 ”。保存網(wǎng)頁（制作網(wǎng)頁時一定要時常記著保存網(wǎng)頁， 否則一旦出現(xiàn)問題，前功盡棄！ ）。（2）頁面層容器 。選擇 “插入”

12、面板中的 “布局 ”欄，單擊 “插入 Div 標(biāo)簽”工具，插入一個 Div 標(biāo)簽，在彈出的對話框中命名 Div 的 ID 為“ Container ”。單擊“新建 CSS規(guī)則”按鈕，以 ID 為規(guī)則名稱新建樣式：width:800px 指定寬度為 800 像素，這里根據(jù)實(shí)際所需設(shè)定。margin:10px auto ，則是頁面上、下邊距為 10 個像素，并且居中顯示。 對層的 margin 屬 性的左右邊距設(shè)置為 auto 可以讓層居中顯示 。border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;borde

13、r-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;（3）頁面頭部 。選擇 “插入”面板中的 “布局 ”欄，單擊 “插入 Div 標(biāo)簽 ”工具，插入一個 標(biāo)簽，在彈出的對話框中命名 Div 的 ID 為“ Header”。單擊“新建 CSS規(guī)則”按鈕，以 ID 為規(guī)則名稱新建樣式：width:780px;height:100px;margin:10px; 表示上下左右邊距為 10px 。background:

14、#FFCC99border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;（4）頁面主體 。選擇 “插入”面板中的 “布局 ”欄，單擊 “插入 Div 標(biāo)簽 ”工具，插入一個 標(biāo)簽，在彈出的對話框中命名 Div 的 ID 為“ PageBody”。單擊“新建 CSS規(guī)

15、則”按鈕，以 ID 為規(guī)則名稱新建樣式：width:780px;height:400px;margin:10px; 表示上下左右邊距為 10px 。background: #CCFF00border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;DivDivborder-left-style: solid;（5）左邊

16、條 。選擇“插入”面板中的 “布局”欄，單擊 “插入 Div 標(biāo)簽”工具，插入一個 Div 標(biāo) 簽，在彈出的對話框中命名 Div 的 ID 為“ SideBar”。單擊“新建 CSS規(guī)則”按鈕，以 ID 為規(guī)則名稱新建樣式：float: left;width:280px;height:380px;margin:10px; 表示上下左右邊距為 10px 。border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;bord

17、er-right-style: solid;border-bottom-style: solid;border-left-style: solid;（6）主體內(nèi)容 。選擇 “插入”面板中的 “布局 ”欄，單擊 “插入 Div 標(biāo)簽 ”工具，插入一個 標(biāo)簽，在彈出的對話框中命名 Div 的 ID 為“ MainBody ”。單擊“新建 CSS規(guī)則”按鈕，以 ID 為規(guī)則名稱新建樣式：float: right;width:450px;height:380px;margin:10px; 表示上下左右邊距為 10px 。border-top-width: 1px;border-right-width:

18、 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;（7）頁面底部 。選擇 “插入”面板中的 “布局 ”欄，單擊 “插入 Div 標(biāo)簽 ”工具，插入一個 標(biāo)簽，在彈出的對話框中命名 Div 的 ID 為“ Footer”。單擊“新建 CSS規(guī)則”按鈕，以 ID 為規(guī)則名稱新建樣式：width:780px;DivDivheight:50px;margin:10px; 表示上下左右邊距為 10px 。 background: #00FFFF border-top-width: 1px;border-right-width