武林網(wǎng)(www.survivalescaperooms.com)文章簡介：我們從事的工作簡單的說就是“將設(shè)計(jì)稿轉(zhuǎn)換成WEB頁面”，這一過程可以很簡單到直接把PSD從PS里導(dǎo)出成網(wǎng)頁；也可復(fù)雜到需要考慮頁面中每個(gè)標(biāo)簽的使用，考慮“頁面性能”。以“前端工程師”為目標(biāo)的同學(xué)可能會(huì)不愿承認(rèn)將頁面重構(gòu)這塊分出來，但隨著工種的細(xì)分，加上頁面重

做為一個(gè)專職的頁面重構(gòu)者，我們從事的工作簡單的說就是“將設(shè)計(jì)稿轉(zhuǎn)換成WEB頁面”，這一過程可以很簡單到直接把PSD從PS里導(dǎo)出成網(wǎng)頁；也可復(fù)雜到需要考慮頁面中每個(gè)標(biāo)簽的使用，考慮“頁面性能”。以“前端工程師”為目標(biāo)的同學(xué)可能會(huì)不愿承認(rèn)將頁面重構(gòu)這塊分出來，但隨著工種的細(xì)分，加上頁面重構(gòu)本身的專業(yè)性，獨(dú)立為一個(gè)職業(yè)也不是不可能，至少我現(xiàn)在從事的就是一個(gè)專職的職位。如果你覺得一個(gè)前端工程師必須去畫設(shè)計(jì)稿，可以不理會(huì)下面的內(nèi)容。

單純的頁面重構(gòu)，所涉及到的工作內(nèi)容一般是“分析設(shè)計(jì)稿=>切圖=>寫HTML和CSS”，雖然看起來很少，但要做好這份工作，絕非所想的那么容易。原因很簡單：工作內(nèi)容單一，在時(shí)間和工作量上必會(huì)很苛刻，往往跟設(shè)計(jì)師的工作時(shí)間是3:1，即設(shè)計(jì)師給三天的時(shí)間，制作只給一天的時(shí)間完成；在這種工作強(qiáng)度下，很多人都是靠著對這份工作的喜愛在維持著，一旦工作熱情消失，很容易就會(huì)變得枯燥，保持熱情也成了重構(gòu)工作者（也許是所有參加工作的人）應(yīng)該具備的能力。

跟“前端工程師”所要求的有所不同，“頁面重構(gòu)”雖然也是“前端工程師”的一個(gè)范疇，在職業(yè)化中，對專職的頁面重構(gòu)者，要求當(dāng)然也更高。不單是做出頁面，而是做出好頁面。又引出另一個(gè)話題，“何為好頁面？”，一般包括下面幾點(diǎn)：

很多同學(xué)多少都遇到過方向不明，不知道自己應(yīng)該提高些什么，我們可以從“分析設(shè)計(jì)稿=>切圖=>寫HTML和CSS”這個(gè)工作內(nèi)容，針對每一點(diǎn)提出一些要求，以方便我們分析自己的能力水平，為繼續(xù)提高確定個(gè)方向：

設(shè)計(jì)稿的分析是指對設(shè)計(jì)稿如何制作成頁面的分析，即哪一塊的內(nèi)容可以做為公共的部分、哪一塊的內(nèi)容結(jié)構(gòu)可以如何實(shí)現(xiàn)等。對設(shè)計(jì)稿的分析能力可以劃分成下面的幾個(gè)階段：

上面這些都是在還沒開始動(dòng)手制作之前所要做的。

切圖是指將設(shè)計(jì)稿切成便于制作成頁面的圖片。都有個(gè)誤區(qū)，覺得切圖就是把圖片切出來，其實(shí)并不完全是這樣，還包括把切出來的圖片合并到一起，怎么切、從哪切才能將性能最大化，說“切圖是一門藝術(shù)”完全不為過。切圖也可以劃分成幾個(gè)階段：

HTML和CSS的編寫是指將上面完成的內(nèi)容，通過HTML和CSS的編寫，將設(shè)計(jì)稿轉(zhuǎn)換成WEB頁面最重要的一塊，也是我們所要重點(diǎn)掌握的內(nèi)容，把它們放在一起，是因?yàn)樗鼈兿嗷サ年P(guān)聯(lián)性太強(qiáng)，HTML的寫法會(huì)影響到CSS的寫法，它又可以劃分成下面幾個(gè)階段：

是對所遇到問題的解決能力，這一點(diǎn)在不同的階段都可能會(huì)遇到，所以沒有寫到上面。

如果你已經(jīng)達(dá)到或超過3、4、5，恭喜你，你已經(jīng)是一個(gè)職業(yè)的“頁面重構(gòu)工作者”了。為了我們自身的發(fā)展，關(guān)注新技術(shù)、技術(shù)創(chuàng)新、提高用戶體驗(yàn)、審美觀、程序腳本的實(shí)現(xiàn)方式等，也是十分必要的。大家一起進(jìn)步吧。