今天在網上看技術文章的時候，轉到了我以前經常光顧的博客中，裏面有一篇文章說得很好。因爲它介紹的是自己所向往的職業：頁面重構工作者，先來看看是怎麼說，怎麼做的吧！
做爲一個專職的頁面重構者，我們從事的工作簡單的說就是“將設計稿轉換成WEB頁面”，這一過程可以很簡單到直接把PSD從PS裏導出成網頁；也可複雜到需要考慮頁面中每個標籤的使用，考慮“頁面性能”。“頁面重構”雖然也是“前端工程師”的一個範疇，在職業化中，對專職的頁面重構者，要求當然也更高。不單是做出頁面，而是做出好頁面。又引出另一個話題，“何爲好頁面？”，一般包括下面幾點：
- 結構完整，可通過標準驗證
- 標籤語義化，結構合理
- 充分考慮到頁面在站點中的“作用和重要性”，並對其進行有針對性的優化
很多同學多少都遇到過方向不明，不知道自己應該提高些什麼，我們可以從“分析設計稿=>切圖=>寫HTML和CSS”這個工作內容，針對每一點提出一些要求，以方便我們分析自己的能力水平，爲繼續提高確定個方向：
-
設計稿的分析
設計稿的分析是指對設計稿如何製作成頁面的分析，即哪一塊的內容可以做爲公共的部分、哪一塊的內容結構可以如何實現等。對設計稿的分析能力可以劃分成下面的幾個階段：
- 能分清設計稿中的公共與私有的部分
- 在1的基礎上對各部分的實現方式有一個初步的方案（包括如何切圖、寫結構、寫樣式）
- 在1的基礎上，準確的給出各部分的實現方案（包括如何切圖、寫結構、寫樣式）
- 在3的基礎上，能同時考慮方案的擴展性、複用性及頁面性能（包括如何切圖、寫結構、寫樣式）
- 在4的基礎上，考慮整站的結構分佈（包括文件分佈、目錄結構）
上面這些都是在還沒開始動手製作之前所要做的。
-
切圖
切圖是指將設計稿切成便於製作成頁面的圖片。都有個誤區，覺得切圖就是把圖片切出來，其實並不完全是這樣，還包括把切出來的圖片合併到一起，怎麼切、從哪切才能將性能最大化，說“切圖是一門藝術”完全不爲過。切圖也可以劃分成幾個階段：
- 切成所需要的圖片（如何將需要的部分切出來）
- 在1的基礎上，對切出來的圖片進行一些優化（包括壓縮文件大小、選擇圖片類型）
- 在2的基礎上，規劃切出來的圖片（包括文件分佈）
- 在3的基礎上，考慮整體的性能（包括合併圖片、壓縮文件大小）
-
HTML和CSS的編寫
HTML和CSS的編寫是指將上面完成的內容，通過HTML和CSS的編寫，將設計稿轉換成WEB頁面最重要的一塊，也是我們所要重點掌握的內容，把它們 放在一起，是因爲它們相互的關聯性太強，HTML的寫法會影響到CSS的寫法，它又可以劃分成下面幾個階段：
- 還原設計稿視覺效果，並通過標準驗證（HTML）
- 在1的基礎上，實現多瀏覽器的兼容（HTML）
- 在2的基礎上，標籤語義化（HTML）
- 在3的基礎上，選擇較優的實現方式（包括模塊化結構，方便程序腳本使用，HTML和CSS）
- 在4的基礎上，考慮到擴展性、複用性和可維護性（HTML和CSS）
- 在5的基礎上，考慮到整站的樣式分佈（包括如何實現分佈）
- 在6的基礎上，樣式寫法的優化（包括技巧的應用）
是對所遇到問題的解決能力，這一點在不同的階段都可能會遇到，所以沒有寫到上面。
如果你已經達到或超過3、4、5，恭喜你，你已經是一個職業的“頁面重構工作者”了。爲了我們自身的發展，關注新技術、技術創新、提高用戶體驗、審美觀、程序腳本的實現方式等，也是十分必要的。大家一起進步吧。
雖然自己正在努力向第5個目標努力：考慮到擴展性、複用性和可維護性（HTML和CSS）；但真的好難，考慮的東西太多了。不過，自己的目標、興趣會讓自己更加努力！