第十章：div+css網頁標準布局實例教程

　　測量后得知：整體寬度為900px，main部的寬度為664px，side寬度為228px。把這三個基本的寬度測量后，下面就可以寫css代碼了。由于本實例是按照實際當中應用來做的，所以css樣式表就最好寫在單獨文件里了，不要再寫在文件內部了，這樣可以利用代碼的重用性，減少很多勞動強度。下面就新建一個css樣式表文件：在DW文件菜單選擇新建，然后在打開的窗口頁面類型中選擇css，創建后保存在css文件夾中并命名為layout.css

　　保存后先設置全局的樣式，而后寫每一塊單獨的樣式，全局樣式如下：

　　body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}

　　ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}

　　ul { list-style:none;}

　　img { border:0px;}

　　a { color:#05a; text-decoration:none;}

　　a:hover { color:#f00;}

　　全局的樣式定義完后，下面定義以上幾大塊的樣式，先設置下#containerr的樣式如下：

　　#container { width:900px; margin:0 auto;}

　　預覽下index.html，發現并沒有改變，這是為什么呢？因為剛定義的樣式表沒有和html文件關聯，所以設置的樣式當然不能對它生效了，還記得第一天課時講的幾種樣式并聯方式嗎？下面我操作一遍：在css面板中點擊附加樣式表按鈕，然后在彈出的窗口中選擇剛才創建的樣式表文件，確定，ok了，預覽一下，是不是整體已經居中了呢。

　　如果已經是寬度為900px并居中，說明樣式和文件關聯好了。這就是為什么要定義一個站點了，因為許多文件要關聯在一起才能構成一個完整的網頁，所以要把它們放在一起，才能讓這個頁面找到和它相關的文件在哪里。下面設置內部幾大塊的樣式，為了便于觀察，我們把部分塊設置了背景色。代碼如下：

　　/*body*/

　　#container { width:900px; margin:0 auto;}

　　/*header*/

　　#header { height:70px; background:#CCFFCC; margin-bottom:8px;}

　　#nav { height:30px; background:#CCFFCC; margin-bottom:8px;}

　　/*main*/

　　#maincontent { margin-bottom:8px;}

　　#main { float:left; width:664px; height:500px; background:#FFFF99;}

　　#side { float:right; width:228px; height:500px; background:#FFCC99;}

　　/*footer*/

　　#footer { height:70px; background:#CCFFCC;}

　　現在預覽一下：在IE6下#maincontent的底部外邊距并沒有生效，而在IE8下，#footer干脆跑到#maincontent的下邊了，這又是怎么回事呢？如果前邊幾天你都認真學的話，那么這個問題已經不是問題了。這就是之前我們講的，如果一個容器內的元素都浮動的話，那么它的高度將不會去適應內部元素的高度。解決辦法是在#maincontent增加 overflow:autol; zoom:1;，這樣就可以讓它自動適應內部元素的高度了。

　　現在再預覽一下，是不是都正常了。為了更加保險，建議在header、nav、maincontent、footer之間增加如下一句代碼并設置css樣式如下，它的作用是清除浮動。

　　<div></div>

　　.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}

　　提示：可以先修改部分代碼后再運行

　　四、切割效果圖

　　基本框架搭建完畢后，下一步就是要分析每一塊該怎么切圖了。切圖方法有多種，可以使用ps或fireworks自帶的切片工具，也可以用QQ的截屏或者創建新文件，把需要的部分復制過來保存都可以，關鍵看個人喜好了。

　　用ps的切片工具的話，把需要切割的區域用切片工具切分，如果要設置圖片的名稱，請使用切片選擇工具，然后在切片上雙擊，會彈出如下窗口，填寫名字后確定即可。

　　切割完后，需要保存圖片了，選擇文件——存儲為web和設備所用格式，在彈出的窗口中點擊選中切片，然后在右側可以設置當前切片的圖片格式。這里有個技巧，一般小型色彩單一的圖片，采用gif格式，照片類大型圖片采用jpg，這樣生成的圖片既能保證質量，圖片體積又小，

　　設置完圖片的格式后，就可以存儲了，這里選擇到images的上一級目錄就行了，ps會自動創建images目錄并把圖片文件放入，如果已存在，直接放入。在格式處選擇僅限圖像，如果選擇html和圖像，ps會自動生成一個表格式的網頁，這個頁面不是我們需要的，就不讓它生成了；還有一個需要注意的地方就是選擇所有用戶切片，這樣只把我們手動切割的圖片保存下來，其它的就不保存了。保存后的圖片如下所示，其中hot_bg.gif這張圖片切割時沒有隱藏上邊的文字，一會兒在ps里再處理一下把文字抹掉。

　　目前所切的圖片只是一部分，并沒有把整個頁面所需的圖片全都切割下來，比如導航部分所用背景圖片可以放到一張圖片上，下面就用新建文件，然后用QQ截屏，粘貼過去的方法來創建。

　　分析一下上圖的導航部分：1、兩端的圓角；2、鼠標劃過狀態和當前欄目狀態寬度應該隨著字數的多少而改變；3、二級導航有鼠標劃過時的狀態。分析完之后，就需要把需要的圖片整合到一張圖片上了，整合的結果如下圖，這個根據自己的需要進行整合。其實完全可以把其它一些小圖標都整合在一張，但那樣操作起來比較麻煩，所以我們還是歸一下類，把相關的圖標整合到一起。

　　接下來整合側邊欄的背景圖片，分析發現側邊欄應用同樣的樣式，只不過高度有所不同，而且是四角都是圓角，所以只用一個通用的就可以滿足所有側邊欄塊的需求了。那么怎么制作這個通用的背景呢？從下圖我們發現，標題的高度都是一樣的，只不過是下邊的內容高度不同而已，那么我們把下邊內容的背景制作的足夠長，超過可能出現的最大高度就可以滿足需求了。

　　整合后的效果如上圖，如果你現在還不明白為什么要這么做，那么一會兒寫完樣式表你就明白了。下面把三個圖標也給切出來，如下圖：

　　這些完事后，還有聯系我們的圖片和修飾小圖標了。聯系我們的圖片如下，這里的圖片和小圖標要背景透明，這樣才不會遮蓋下面的背景。

　　（接下一篇）

　　div+css網頁標準布局實例教程（二）

　　（接上一篇，本節教程文字較多，比較枯燥，如果前邊知識學習牢固，可以直接下載源代碼查看，哪個地方不明白，再回過頭來看哪一部分）

　　五、布局頁面——頭部和導航

　　有了上邊的基礎，下面的任務就是要利用html和css制作完成一個完整的網頁了。先從頭部開始，第三小節時我們已經把整體框架給搭建好了，就像蓋房子一樣，整體結構已經出來了，下面就需要填磚分割空間了。先分析下頭部：分為兩部分，一個是logo靠左側顯示，一個是搜索靠右側顯示，那么布局時插入兩個div，一個向左浮動，一個向右浮動的方式來完成。另外還有很多種實現方法，比如logo用h1標簽，搜索用span，或者把logo做為背景圖片也是可以的，不管采用哪種方法，要根據頁面的需求選用一種最合理的方法。如果要在logo加上鏈接的話，那么就不能用背景圖片的方法了。