導(dǎo)讀：將設(shè)計(jì)好的網(wǎng)頁P(yáng)SD設(shè)計(jì)稿切成HTML是網(wǎng)頁設(shè)計(jì)師經(jīng)常要做的一件事情，除了CSS外，如何有效快速將PSD轉(zhuǎn)HTML，其中的方法也有多種，文中分析了常用的方法與效果率更高的兩種方法，僅供參考。

其實(shí)標(biāo)準(zhǔn)的網(wǎng)頁制作完成的工作實(shí)際是：psd tohtml，一般情況下，我們會(huì)拿到美工的psd,這時(shí)候不同的人會(huì)有不同的做法：
1.打開fireworks將圖片切割導(dǎo)出為html。

2.直接在dreamweaver之類的工具去拖拉布局，導(dǎo)入相關(guān)的圖片,flash資源。
3.先在ps中完成切圖后，在文本編輯器中看著效果圖一步步的制作。

以上是大多被采用的方法，但都不好：
第一種方法最為不好，這樣的代碼根本不具維護(hù)性和可讀性。
第二種方法也不好，代碼難免會(huì)有冗余，做出來的東西基本需要排查一遍。
第三種方法也不好，因?yàn)槟阈枰葱Ч麍D一點(diǎn)點(diǎn)的拼，也就是說寫html標(biāo)簽的時(shí)候，你在不斷的假設(shè)這塊要怎么去顯示。

正確的做法是：
1.拿到psd后，先不要做別的，直接在文本編輯器中將網(wǎng)頁的框架寫出來，不要假設(shè)這塊將來css要去怎么渲染，完全自然化的標(biāo)簽，不加任何的css。
2.寫完之后在各個(gè)瀏覽器運(yùn)行之后確保大體定位都沒有問題。
3.書寫總體css,這里的css只負(fù)責(zé)大塊的定位及樣式。
4.切出需要的圖片資源，在寫好的框架中一點(diǎn)點(diǎn)的去構(gòu)造，不斷的調(diào)試，最終為成品。
5.最后，為自己的代碼添加注釋，在css，html中都要合適的為自己的代碼添加注釋。
要想做出能靈活切換皮膚，讓css主導(dǎo)表現(xiàn)，還有很多要注意的地方，但大體的流程就是這樣的，當(dāng)然我們一開始不能直接就做到先寫html，但起碼要有這個(gè)意識(shí)，循序漸進(jìn)。。。

謝謝熱心會(huì)員"linxz"提供實(shí)際經(jīng)驗(yàn)，我貼上來供大家參考：

PSD出網(wǎng)站從兩個(gè)大點(diǎn)考慮

一、一個(gè)獨(dú)立的頁面
1、分析這個(gè)頁面，先在腦袋中或者草稿紙上描繪大概的結(jié)構(gòu)
2、根據(jù)設(shè)計(jì)稿的的情況，分析背景圖的分布、ICO圖的分布等
3、切割相應(yīng)的圖片，導(dǎo)出、合并圖片
4、在編輯器中寫整體結(jié)構(gòu)XHTML代碼，包括頁面中出現(xiàn)的所有元素的結(jié)構(gòu)
5、編寫CSS樣式中的整體以及模塊代碼
6、細(xì)節(jié)調(diào)整
7、收工，瀏覽器驗(yàn)證是否正確

二、由多個(gè)頁面組成的小站點(diǎn)或者大站點(diǎn)
1、瀏覽所有設(shè)計(jì)稿，統(tǒng)一規(guī)劃站點(diǎn)模塊、圖片、文件分布
2、開始第一點(diǎn)的操作，但規(guī)劃站點(diǎn)的內(nèi)容分布很重要

整體考慮點(diǎn)：
圖片的合并，減少請(qǐng)求量
結(jié)構(gòu)的合理性，語義化
樣式的簡潔，便于后期維護(hù)
多為后期的維護(hù)以及程序開發(fā)著想，如何簡單實(shí)現(xiàn)效果。

以上轉(zhuǎn)載自：http://www.websbook.com/jiemian/wyzz_PSDqcHTMLdjgff_18111.html

號(hào)外：

1、使用PS切圖工具直接切圖,保持為 web網(wǎng)頁模式就可以，導(dǎo)入到dw里面,不會(huì)有任何問題，不過這種的缺點(diǎn)是切出來的是Table布局，不是Div+Css

2、如果用PS切圖，他會(huì)有一個(gè)像素的白色線條。所以一般做網(wǎng)站切圖用的是 Fireworks，步驟是，在PS中將網(wǎng)頁圖片保存為JPG格式。然后用Fireworks打開，按鍵盤K鍵開始切圖。怎么切就要看你如何做了。然后用V鍵“選擇鍵”選中所切的圖，右擊鼠標(biāo)導(dǎo)出，即可。 然后您就可以做成網(wǎng)頁了。

愛華網(wǎng)本文地址 » http://www.klfzs.com/a/25101017/334322.html