前言

先省略產品設計師的wireframe和mockup，為什麽線框圖和視覺設計稿不在敘述範圍內，由於這裏要做的是網頁重構，從接收設計師的PSD那一刻開始：

一、接到設計稿

1、接收到PSD後。不要著急立刻切片，要寫出符合語義、擴展性好、節點數少的XHTML，是要花上非常多時間去斟酌和思考的。假設還要考慮整站樣式優化和模塊組件化的話，預計半天時間又過去了，等要寫CSS時候，預計又快下班了…

在分析設計稿、切圖和XHTML、CSS編寫之前。另一件事情極其重要。那就是網站文件夾結構和資源文件的分布。千萬不要蒙著頭腦就PS、DW裏自娛自樂！

一定要向相關負責人問清楚。各項目目的錄結構和文件分布怎麽處理，相互關系怎樣！

分享一下近期工作中出現過的狀況，警示下自己和同行在以後工作中須要註意哪些。公司全部專題模板重構。一百多個專題模塊。劈裏啪啦兩個星期重構完,FTP到server，給編輯大概寫了使用文檔。後來由於網站文件夾和文件結構沒約定好，須要調整，就開始挪文件、調文件夾、刪server文件又一次FTP…一個無比郁悶的下午就這麽過去鳥…

所以…接下來第二步…

二、分析設計稿

2、開始分析設計稿。PS裏Ctrl+1，從頭至尾。又從尾到頭，四面八方，細致看設計稿。要比看Graphis系列圖片還要認真。而且還要想：

• 頁面有哪些模塊和框架？
• 頁面公共部分有哪些？
• 頁面重用結構和樣式有哪些，有哪些須要派生和重寫？
• 標題、正文、鏈接…等字體、大小和顏色怎樣處理？
• 怎樣統一界面元素？
• 此處用ul還是dl？
• 圖片哪些是jpg格式。哪些是gif，哪些是png格式。寬高取整…
• 小圖標是否須要css sprite？
• 圓的、方的、三角…的幾何圖形能否夠用border實現？
• 第一個列表和最後一個列表大概怎麽處理？
• 單位取值是否考慮黃金切割比？(壞笑ing)
• 考慮頁面擴展性、復用性及頁面性能…
• …(想到的沒想到的都要想)…

時間過的好快…傷不起，不想那麽多了，開始切圖吧…

PS：PS 編輯-首選項-性能 裏調節內存大小、暫存盤和使用圖形處理器。工作起來更順手…

三、切圖設計稿

3、經過“怎麽切、從哪切”後。總算把圖片切完了。Alt+Shift+Ctrl+S中設置不同格式總算是導出圖片了，歸揀到不同文件夾裏，開始編寫XHTML和CSS，

四、還原設計稿

4、經過上面那一陣狂風驟雨般胡思亂想和精細到1px的切片後，接下來的工作須要：

還原設計稿的視覺效果，兼容各家瀏覽器和其馬甲；