第一節：項目搭建
打開UI設計圖，瀏覽頁面主要內容，熟悉結構
開發整站的兩種方式：1、從頭往下依次把每個盒子寫完。（常用）2、先把整站的佈局搞定，然後把每個佈局盒子中的子元素補齊：（模塊化）
整站開發目錄結構：
所有文件放在：目標網站名稱
所有圖片放在：image
所有css文件放在：css
所有js文件放在：js
整站的入口：index.html
第二節：css的初始化（cssReset）
可參考：https://github.com/yui/yui3/blob/25264e3629b1c07fb779d203c4a25c0879ec862c/src/cssreset/css/cssreset.css
初始化文件編輯完成後在html文件中使用<link rel="stylesheet"href=“css/cssReset.css”>語句進行引用。
第三節：頁面的版心和通欄
使用FW測量版心間距，拉出標尺（輔助線）對齊版心最左邊，右邊同。按shift得到間距。
寫好頁面頂部代碼，新建index.css文件存放頁面樣式代碼。
取背景顏色：使用FW滴管工具（快捷鍵i），鼠標移到滴管圖標旁可查看顏色相應十六進制碼。
測量高度（快捷鍵m）
第四節：完成top部分代碼
雙擊FW中文字可得到字體大小和類型
使用ul和li標籤進行top上的文字編寫並在cssReset文件中添加a標籤的初始化。
注意浮動設置與間隙設置。
第五節：精靈圖設置
精靈圖：css sprit
用於將網站上的一些小圖片管理到一個大圖片中。
製作精靈圖需注意：
1、一定是一些小圖片（最好是不太會發生變化）
2、精靈圖在製作的時候寬度一定要大於最大的圖片的寬度
3、圖片與圖片之間要有空隙
4、在精靈圖製作完成之後一定要將精靈圖的下方留出足夠的位置以便擴展。
具體制作方法爲：在FW中建新文件，用摳圖工具將所需圖案摳下導出，再導入到新文件裏。
精靈圖的使用：一般結合background使用（index.html中在a標籤與li標籤之間插入s標籤使用精靈圖）如圖所示爲在index.css文件中使用精靈圖的代碼：
第六節：logo的編寫和搜索引擎的優化
用firework測量好logo的長寬再用代碼編寫。
搜索引擎的優化：以便搜索引擎識別此網站關鍵詞。
第七節：logo輸入框：
第八節：導航
先測量導航高度，寫入文字行，利用float：left設置浮動使文字並排顯示，測量文字選項的間距（padding：上 右 下 左）
注：a標籤不能繼承父標籤li的字體樣式設置，因此設置時需要另建一個。
導航使用無序鏈表建立。
點擊觸發的效果使用鼠標移入事件：
第九節：banner
先測量好各個板塊距離，編寫背景模塊，再加入文字。
banner部分標題可用h2標籤。
第十節：
板塊間的間隙可用margin-bottom或margin-top完成。
居中設置可用：margin：0 auto；
