大家一起提高吧。假如你覺(jué)得一個(gè)前端工程師必需去畫(huà)設(shè)計(jì)稿，可以不理會(huì)下面的內(nèi)容。以“前端工程師”為目標(biāo)的同學(xué)可能會(huì)不愿承認(rèn)將頁(yè)面重構(gòu)這塊分出來(lái)，但跟著工種的細(xì)分，加上頁(yè)面重構(gòu)本身的專業(yè)性，獨(dú)立為一個(gè)職業(yè)也不是不可能，職業(yè)的頁(yè)面重構(gòu)需什么條件，至少我現(xiàn)在從事的就是一個(gè)專職的職位。
做為一個(gè)專職的頁(yè)面重構(gòu)者，我們從事的工作簡(jiǎn)樸的說(shuō)就是“將設(shè)計(jì)稿轉(zhuǎn)換成WEB頁(yè)面”，這一過(guò)程可以很簡(jiǎn)樸到直接把PSD從PS里導(dǎo)出成網(wǎng)頁(yè)；也可復(fù)雜到需要考慮頁(yè)面中每個(gè)標(biāo)簽的使用，考慮“頁(yè)面機(jī)能”。
假如你已經(jīng)達(dá)到或超過(guò)3、4、5，恭喜你，你已經(jīng)是一個(gè)職業(yè)的“頁(yè)面重構(gòu)工作者”了。為了我們自身的發(fā)展，關(guān)注新技術(shù)、技術(shù)立異、進(jìn)步用戶體驗(yàn)、審美觀、程序腳本的實(shí)現(xiàn)方式等，也是十分必要的。不單是做出頁(yè)面，而是做出好頁(yè)面。都有個(gè)誤區(qū)，覺(jué)得切圖就是把圖片切出來(lái)，實(shí)在并不完全是這樣，還包括把切出來(lái)的圖片合并到一起，怎么切、從哪切才能將機(jī)能最大化，說(shuō)“切圖是一門(mén)藝術(shù)”完全不為過(guò)。
是對(duì)所碰到題目的解決能力，這一點(diǎn)在不同的階段都可能會(huì)碰到，所以沒(méi)有寫(xiě)到上面。切圖也可以劃分成幾個(gè)階段：
一，切圖
上面這些都是在還沒(méi)開(kāi)始動(dòng)手制作之前所要做的。
考慮整站的結(jié)構(gòu)分布（包括文件分布、目錄結(jié)構(gòu)）
能同時(shí)考慮方案的擴(kuò)展性、復(fù)用性及頁(yè)面機(jī)能（包括如何切圖、寫(xiě)結(jié)構(gòu)、寫(xiě)樣式）
正確的給出各部門(mén)的實(shí)現(xiàn)方案（包括如何切圖、寫(xiě)結(jié)構(gòu)、寫(xiě)樣式）
對(duì)各部門(mén)的實(shí)現(xiàn)方式有一個(gè)初步的方案（包括如何切圖、寫(xiě)結(jié)構(gòu)、寫(xiě)樣式）
二，能分清設(shè)計(jì)稿中的公共與私有的部門(mén)
設(shè)計(jì)稿的分析是指對(duì)設(shè)計(jì)稿如何制作成頁(yè)面的分析，即哪一塊的內(nèi)容可以做為公共的部門(mén)、哪一塊的內(nèi)容結(jié)構(gòu)可以如何實(shí)現(xiàn)等。
樣式寫(xiě)法的優(yōu)化（包括技巧的應(yīng)用）
考慮到整站的樣式分布（包括如何實(shí)現(xiàn)分布）
考慮到擴(kuò)展性、復(fù)用性和可維護(hù)性（HTML和CSS）
選擇較優(yōu)的實(shí)現(xiàn)方式（包括模塊化結(jié)構(gòu)，利便程序腳本使用，HTML和CSS）
標(biāo)簽語(yǔ)義化（HTML）
實(shí)現(xiàn)多瀏覽器的兼容（HTML）
還原設(shè)計(jì)稿視覺(jué)效果，并通過(guò)尺度驗(yàn)證（HTML）
HTML和CSS的編寫(xiě)是指將上面完成的內(nèi)容，通過(guò)HTML和CSS的編寫(xiě)，將設(shè)計(jì)稿轉(zhuǎn)換成WEB頁(yè)面最重要的一塊，也是我們所要重點(diǎn)把握的內(nèi)容，把它們放在一起，是由于它們相互的聯(lián)系關(guān)系性太強(qiáng)，HTML的寫(xiě)法會(huì)影響到CSS的寫(xiě)法，它又可以劃分成下面幾個(gè)階段：
HTML和CSS的編寫(xiě)
慮整體的機(jī)能（包括合并圖片、壓縮文件大小）
規(guī)劃切出來(lái)的圖片（包括文件分布）
對(duì)切出來(lái)的圖片進(jìn)行一些優(yōu)化（包括壓縮文件大小、選擇圖片類型）
切成所需要的圖片（如何將需要的部門(mén)切出來(lái)）
切圖是指將設(shè)計(jì)稿切成便于制作成頁(yè)面的圖片。
原因很簡(jiǎn)樸：工作內(nèi)容單一，在時(shí)間和工作量上必會(huì)很苛刻，往往跟設(shè)計(jì)師的工作時(shí)間是3:1，即設(shè)計(jì)師給三天的時(shí)間，制作只給一天的時(shí)間完成；在這種工作強(qiáng)度下，良多人都是靠著對(duì)這份工作的喜愛(ài)在維持著，一旦工作熱情消失，很輕易就會(huì)變得枯燥，保持熱情也成了重構(gòu)工作者（也許是所有參加工作的人）應(yīng)該具備的能力。又引出另一個(gè)話題，“作甚好頁(yè)面？”，一般包括下面幾點(diǎn)：
單純的頁(yè)面重構(gòu)，所涉及到的工作內(nèi)容一般是“分析設(shè)計(jì)稿=>切圖=>寫(xiě)HTML和CSS”，固然看起來(lái)很少，但要做好這份工作，絕非所想的那么輕易。對(duì)設(shè)計(jì)稿的分析能力可以劃分成下面的幾個(gè)階段：
三，設(shè)計(jì)稿的分析
良多同學(xué)多少都碰到過(guò)方向不明，不知道自己應(yīng)該進(jìn)步些什么，我們可以從“分析設(shè)計(jì)稿=>切圖=>寫(xiě)HTML和CSS”這個(gè)工作內(nèi)容，針對(duì)每一點(diǎn)提出一些要求，以利便我們分析自己的能力水平，為繼承進(jìn)步確定個(gè)方向：
充分考慮到頁(yè)面在站點(diǎn)中的“作用和重要性”，并對(duì)其進(jìn)行有針對(duì)性的優(yōu)化
標(biāo)簽語(yǔ)義化，結(jié)構(gòu)公道
結(jié)構(gòu)完整，可通過(guò)尺度驗(yàn)證
跟“前端工程師”所要求的有所不同，“頁(yè)面重構(gòu)”固然也是“前端工程師”的一個(gè)范疇，在職業(yè)化中，對(duì)專職的頁(yè)面重構(gòu)者，要求當(dāng)然也更高。
【 微信掃一掃 】
