萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 第十天 div+css網頁標准布局實例教程（一）
第十天 div+css網頁標准布局實例教程（一）
今天學習《十天學會web標准(div+css)》的最後一個章節，本章節把前面學習的零碎內容串聯起來，組織成一個網站，將根據本人這些年來的從業經驗，從建立站點到一個完整的div+css網頁的完成，整個流程下來，希望能對各位有所幫助。由於本節內容較多，將分三部分來講解。
- 建立站點
- 結構分析
- 搭建框架
- 切割效果圖
- 布局頁面——頭部和導航
- 布局頁面——側邊欄
- 布局頁面——主體部分
- 底部和細節調整
- 相對路徑和相對於根目錄路徑
一、建立站點
前面的課程都是零碎講解一些相關知識，那麼要做一個網站，首先需要建立一個站點。那麼什麼是站點，為什麼要建立一個站點呢？因為網站不同於其它文件，比如一個圖片，放到哪個盤哪個目錄下都可以訪問。而網站是許多文件相互關聯的，所以要專門一個目錄把它們分門別類存放起來。如果搞過視頻編輯的朋友都知道，需要先建立一個工程，把原始的視頻文件、圖片素材分類放好，也是這個道理。下面以在D盤建立一個jiaocheng文件夾為例，在dreamweaver(簡稱DW)裡創建一個站點指向這個文件夾，然後在目錄下新建images文件夾、css文件夾等把各類文件分別存放起來。
保存後，一個站點就建立起來了，我用的是DW cs5版本，不同版本界面有所不同。如果要連接FTP，需要設置服務器選項（後面會涉及到）。站點建立好後，我們先建立一個images和css文件夾，分別用來存放圖片和css文件。直接在Windows的資源管理器下建立或者在dw裡建立都是可以的；在dw建立需要在文件面板列表的根目錄上點擊右鍵，選擇新建文件夾後更改名字即可。
二、結構分析
創建完站點後，就需要對頁面結構進行分析了，根據效果圖，分析頁面分為幾大塊，該怎麼布局更合理。下面這個圖是我做的一個企業網站的模板，雖然不怎麼好看，但目的是把前邊學的東西全都給串起來，讓大家掌握各種情況的處理方法，先看下效果圖及在網頁中顯示的樣式：
在浏覽器中打開效果圖預覽
從圖中可以看出整個頁面分為頭部區域、導航區域、主體部分和底部，其中主體部分又分為左右兩列，整個頁面居中顯示，看明白了這點，下邊的框架就好搭建了。整體框架結果圖如下：
三、搭建框架
首先在dw裡新建一個html文件：
點擊創建後會自動生成如下代碼的一個html文件，保存為index.html並把無標題文檔改為：主頁。強調一點，許多同學喜歡把第一行代碼刪除掉，認為沒用，其實這句話的作用大著呢，它標明以何種形式解析文檔，如果刪除可能會引起樣式表失效或其它意想不到的問題。接下來需要插入以上各個塊的標簽了，以插入header的標簽為例，其它的插入方法類同。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主頁</title>
</head><body>
</body>
</html>
按照上圖的方法依次插入標簽，或者直接在代碼視圖中手工輸入，代碼如下：（注意main和side在maincontent裡包含著呢）
<div id="header">此處顯示 id "header" 的內容</div>
<div id="nav">此處顯示 id "nav" 的內容</div>
<div id="maincontent">
<div id="main">此處顯示 id "main" 的內容</div>
<div id="side">此處顯示 id "side" 的內容</div>
</div>
<div id="footer">此處顯示 id "footer" 的內容</div>
從上邊的效果圖分析得知，整個網頁是居中浏覽器顯示的，按照這樣的寫法需要把以上的header、nav、maincontent、footer都設置寬度並居中，這樣做起來很麻煩，所以再在這些標簽外增加一下父標簽，設置這個父標簽寬度並居中後，是不是所有的標簽都居中了呢。增加後的代碼如下：
<div id="container">
<div id="header">此處顯示 id "header" 的內容</div>
<div id="nav">此處顯示 id "nav" 的內容</div>
<div id="maincontent">
<div id="main">此處顯示 id "main" 的內容</div>
<div id="side">此處顯示 id "side" 的內容</div>
</div>
<div id="footer">此處顯示 id "footer" 的內容</div>
</div>
html框架代碼寫完後，下邊就需要設置css樣式表了。先測量下效果圖的整體寬度，然後設置container也是這個寬度並居中。說起測量效果圖寬度，方法有多種，可以直接查看圖片尺寸。如果測量其中某一塊的寬度，可以使用測量軟件，也可以在ps下測量。本人一般在ps下測量，因為效果圖在ps下制作的，所以用ps測量也比較方便。方法是首選項裡把ps的單位改為像素，然後用選區選中要測量的部分，在信息面板中就顯示出當前選區的寬高了（如果你實在不知道怎麼改單位，怎麼選區怎麼查看的，就要補習一下ps啦）。
測量後得知：整體寬度為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*/
#
