切圖psd to html頁面制作技術學習與總結

切圖流程和注意事項

切圖的正確流程做法是：

1 寫框架。拿到psd后，先不要做別的，直接在文本編輯器中將網頁的框架寫出來，不要假設這塊將來css要去怎么渲染，完全自然化的標簽，不加任何的css。

2 查適配。寫完之后在 各個瀏覽器運行之后確保大體定位都沒有問題。如果是手機wap、微信活動頁面，還要注意按 手機屏幕大小進行適配。

3 書寫總體css,這里的css只負責大塊的定位及樣式。

4 不斷調試。切出需要的圖片資源，在寫好的框架中一點點的去構造，不斷的調試，最終為成品。

5 最后，為自己的代碼添加注釋，在css，html中都要合適的為自己的代碼添加注釋。

 

要想做出能靈活切換皮膚，讓css主導表現，還有很多要注意的地方，但大體的流程就是這樣的，當然我們一開始不能直接就做到先寫html，但起碼要有這個意識，循序漸進。。。

 

PSD出網站從兩個大點考慮

 

一、一個獨立的頁面

1. 分析這個頁面，先在腦袋中或者草稿紙上描繪大概的結構
2. 根據設計稿的的情況，分析背景圖的分布、ICO圖的分布等
3. 切割相應的圖片，導出、合並圖片
4. 在編輯器中寫整體結構XHTML代碼，包括頁面中出現的所有元素的結構
5. 編寫CSS樣式中的整體以及模塊代碼
6. 細節調整
7. 收工，瀏覽器驗證是否正確

 二、由多個頁面組成的小站點或者大站點

瀏覽所有設計稿，統一規划站點模塊、圖片、文件分布

開始第一點的操作，但規划站點的內容分布很重要

 

三、整體考慮點

圖片的合並，減少請求量，結構的合理性，語義化，樣式的簡潔，便於后期維護，多為后期的維護以及程序開發着想，如何簡單實現效果。

大型互聯網公司網站技巧學習 

div+css 常用知識點和技巧總結

 

參考網站：

html div+css系統學習（div的彈出二級菜單的懸浮導航）  http://www.iqiyi.com/w_19rsmqouzp.html#vfrm=2-3-0-1

DIV+CSS視頻教程之03.使用DIV+UL+LI布局網站首頁的導航信息 http://www.iqiyi.com/w_19rsdj7o0h.html#vfrm=2-3-0-1

使用DIV CSS制作凹凸豎型導航條 http://www.iqiyi.com/w_19rr5a73cl.html#vfrm=2-3-0-1