1.1 網站開發流程
網站策劃（策劃人員）->交互設計（交互設計師）->網頁設計（視覺設計師）->前端開發（前端工程師）->後端開發（後端工程
師）->測試網頁（測試人員）->網站發佈->後期運營和維護。
1.2 分析網頁效果圖
1.2.1 劃分模塊
網頁都是由一個個的小模塊組成的，對於一個頁面，如果它的頁面結構和表現有很多統一和相似的地方，便可以運用網頁模塊化
來製作頁面，省去重複勞動。
1.2.2 CSS模塊化
網頁上表現相同或相近的區域能提取出可以重複使用的CSS樣式，就是CSS模塊化。
1.2.3 class是用技巧
用class組合：XHTML模塊的表現樣式用幾個class樣式組合在一起視線。
1.2.4 如何“切圖”
切圖技巧主要有以下幾點：
1）顏色漸變或重複的圖片只需切其中任意一塊重複的區域。
2）反之，顏色不是漸變，沒有重複圖案或不是純色的圖片將其作爲一個切片。
3）能用CSS的background-color屬性顯示的儘量不用圖片。
4）切圖的時候將網頁效果圖放大，切片邊緣精確到一個px，否則達不到網頁與效果圖一致的目的。
1.3 與產品經理、設計師、後端工程師進行有效溝通
產品經理：需求分析
設計師：高保真效果圖
前端工程師：開發
後端工程師：開發
測試人員：測試
發佈跟蹤…
1.4 XHTML CSS基礎知識
1.4.1 XHTML文件的構成
1、head,body
2、GBK是針對中文網頁設計的編碼格式。
3、在沒有特殊需求的情況下統一使用UTF-8編碼，因爲UTF-8是國際編碼，通用性好，另外使用UTF-8編碼有個好處是後端頁
面，如PHP、ASP等都使用UTF-8編碼，所以與其通信時可以防止出現亂碼和不必要的麻煩。
4、CSS一半位於XHTML文件的頭部，JavaScript一般位於XHTML文件的末尾，防止JavaScript文件在加載時出現加載時間過
長，而導致頁面出現空白糟糕的用戶體驗。
1.4.2 CSS文件的構成
CSS文件分爲三部分：第一部分爲CSS重置；第二部分爲公共樣式；第三部分爲模塊樣式（非公共）。所有的公共樣式一般寫在
第二部分，位於模塊樣式之上，方便查找。
1.4.3 標籤語義化
1、語義化標籤
2、<table>標籤，該用的時候，就要大膽使用。
1.4.4 CSS命名規範
兩種：駝峯式（topMenu）、畫線式（top-menu、top_menu）
1.4.5 CSS樣式重置
瀏覽器對XHTML標籤都有自己默認的樣式，如果不對這些默認樣式進行重置，那麼爲了使網頁在各瀏覽器中都呈現出與效果圖一
致的樣子，需要在CSS中對每個XHTML標籤反覆設置相同的規則。
css重置的樣式一般都是固定的：
/*css reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none}
fieldset,img{border:0;}
textarea{resize:none;}
input:focus,textarea:focus{outline:none}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
q:before,q:after{content:' ';}
abbr,acronym{border:0;font-variant:normal;
address,cite,dfn,optgroup,em,var{font-style:normal;}
legend{color:#000}
.clear{clear:both;height:0;voerflow:hidden;}
.cf:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
*.cf{zoom:1;}.cf樣式用於對DIV內部的元素清除浮動，從而避免了增加一個空的DIV標籤來清除浮動。
注意：實際項目的CSS文件中，要在CSS文件頭部增加如下代碼作爲CSS樣式重置代碼：
.clear{clear:both;height:0;overflow:hidden;}
.cf:after{visibility:hidden;display:block;font-size:0;content:"";clear:both;height:0;}
*.cf{zoom:1;}(cf式自己寫的類名)
.left{float:left;}
.right{float:right;}XHTML寫法一：
<div class="cf">
<div class="left">這邊是左邊導航</div>
<div class="right">這裏是右邊內容</div>
</div>XHTML寫法二：
<div>
<div class="left">這裏是左邊導航</div>
<div class="right">這裏是右邊內容</div>
<div class="clear"></div>
</div>1.4.6 CSS Sprites技術
CSS Sprites是將一個頁面涉及到的零星背景圖片都整合到一張大圖中，再利用CSS的background-image、background-repeat
和background-position的組合對背景圖片定位，background-position可以用數字精確定位出背景圖片的位置。
圖片請求次數越多，造成延遲的可能性越大。
對於較高流量的頁面，可以使用CSS Sprites技術合併圖片，並且整合後的圖片大小不高於200KB時推薦使用。
1.4.7 頁面質量評估標準
YSlow或W3C驗證http://validator.w3.org/都可以檢測XHTML和CSS代碼的質量。
通常判斷代碼質量優劣的標準如下：
1）瀏覽器兼容性測試。
2）XHTML代碼結構是否清晰。
3）XHTML代碼結構是否複雜。
4）XHTML代碼是否和CSS混雜在一起。
5）XHTML代碼中是否大量出現不被推薦使用的標籤。
6）XHTML和CSS代碼是否書寫規範。
1.4.8 代碼註釋的重要性
1、有效的維護和修改。
2、讀者瞭解網站結構和設計者的思路。
3、在人員接替時能保證穩定過渡。
1.4.9 CSS Hack
由於不同的瀏覽器對CSS的解析不一樣，因此回導致生成的頁面效果不一樣。這時需要怎對不用的瀏覽器去寫不同的CSS，讓他
