一般情況下，網頁設計製作完成的工作實際是：psd效果圖轉成html+CSS 的模板頁面，一般情況下，我們會拿到美工的psd，不同的人會有不同的做法：
1、打開fireworks將圖片切割導出為html。
2、直接在dreamweaver之類的工具去拖拉佈局，導入相關的圖片，flash資源。
3、先在ps中完成切圖後，在文本編輯器中看著效果圖一步步的製作。
以上是最常被採用的方法，但都不好：
第一種方法最為不好，這樣的代碼根本不具維護性和可讀性。
第二種方法也不好，代碼難免會有冗餘，做出來的東西基本需要排查一遍。
第三種方法也不好，因為你需要看效果圖一點點的拼，也就是說寫html標籤的時候，你在不斷的假設這塊要怎麼去顯示。
正確做法：
1、拿到psd後，先不要做別的，直接在文本編輯器中將網頁的框架寫出來，不要假設這塊將來css要去怎麼渲染，完全自然化的標籤，不加任何的css。
2、寫完之後在各個瀏覽器運行之後確保大體定位都沒有問題。
3、書寫總體css,這裡的css只負責大塊的定位及樣式。
4、切出需要的圖片資源，在寫好的框架中一點點的去構造，不斷的調試，最終為成品。
5、最後，為自己的代碼添加註釋，在css，html中都要合適的為自己的代碼添加註釋。
要想做出能靈活切換皮膚，讓css主導表現，還有很多要注意的地方，但大體的流程就是這樣的，當然我們一開始不能直接就做到先寫html，但起碼要有這個意識，循序漸進。 。 。
PSD文件切出網站從兩個大點考慮：
一、一個獨立的頁面
1、分析這個頁面，先在腦袋中或者草稿紙上描繪大概的結構
2、根據設計稿的的情況，分析背景圖的分佈、ICO圖的分佈等
3、切割相應的圖片，導出、合併圖片
4、在編輯器中寫整體結構XHTML代碼，包括頁面中出現的所有元素的結構
5、編寫CSS樣式中的整體以及模塊代碼
6、細節調整
7、收工，瀏覽器驗證是否正確
二、由多個頁面組成的小站點或者大站點
1、瀏覽所有設計稿，統一規劃站點模塊、圖片、文件分佈
2、開始第一點的操作，但規劃站點的內容分佈很重要
整體考慮點：
1、圖片的合併，減少請求量
2、結構的合理性，語義化
3、樣式的簡潔，便於後期維護
4、多為後期的維護以及程序開發著想，如何簡單實現效果。