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

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

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

3、構，將其命名為 index.htm ，另一個記事本文檔則命名為 css.css下面，我們在 標簽對中寫入 DIV 的基本結構，代碼如下：color=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/colorcolor=#aaaaaa/color為了使以后閱讀代碼更簡易，我們應該添加相關注釋，接下來打開碼如下：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把以上文件保存，用瀏覽器打開，這時我們已經可以看到基礎結構了，這個就是頁

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

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

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

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

9、按照前面的說明，可以知道，表示上下邊距為0，左右為自動，因此該層就會自動居中了。如果要讓頁面居左，則取消掉 auto 值就可以了，因為默認就是居左顯示的。通過 margin:auto 我們就可以輕易地使層自動居中了。5、這里我只介紹這些常用的 CSS屬性了，其他的請參看 CSS2.0 中文手冊。當我們寫好了頁面大致的 DIV 結構后，我們就可以開始細致地對每一個部分進行制作了。在上一章中我們寫入了一些樣式，那些樣式是為了預覽結構而寫入的，我們把 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ù)實際所需設定。margin:10px auto ，則是頁面上、下邊距為 10 個像素，并且居中顯示。上一章中我們講過， 對層的 margin 屬性的左右邊距設置為 auto 可以讓層居中顯示 。二、設計首頁布局 根據(jù)上面的規(guī)劃，先設計頁面布局，然后再填充內容。步驟如下：（1）新建站點 “mysite”，新建一個 HTML 文件，命名為 “index.html ”。在“文檔 ”面板中把 “標 題”項的“無標題文檔 ”改為 “頁面布局 ”。保存網(wǎng)頁（制作網(wǎng)頁時一定要時常記著保存網(wǎng)頁， 否則一旦出現(xiàn)問題，前功盡棄！ ）。（2）頁面層容器 。選擇 “插入”

12、面板中的 “布局 ”欄，單擊 “插入 Div 標簽”工具，插入一個 Div 標簽，在彈出的對話框中命名 Div 的 ID 為“ Container ”。單擊“新建 CSS規(guī)則”按鈕，以 ID 為規(guī)則名稱新建樣式：width:800px 指定寬度為 800 像素，這里根據(jù)實際所需設定。margin:10px auto ，則是頁面上、下邊距為 10 個像素，并且居中顯示。 對層的 margin 屬 性的左右邊距設置為 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 標簽 ”工具，插入一個 標簽，在彈出的對話框中命名 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 標簽 ”工具，插入一個 標簽，在彈出的對話框中命名 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 標簽”工具，插入一個 Div 標 簽，在彈出的對話框中命名 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）主體內容 。選擇 “插入”面板中的 “布局 ”欄，單擊 “插入 Div 標簽 ”工具，插入一個 標簽，在彈出的對話框中命名 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 標簽 ”工具，插入一個 標簽，在彈出的對話框中命名 Div 的 ID 為“ Footer”。單擊“新建 CSS規(guī)則”按鈕，以 ID 為規(guī)則名稱新建樣式：width:780px;DivDivheight:50px;margin:10px; 表示上下左右邊距為 10px 。 background: #00FFFF border-top-width: 1px;border-right-width