一，設(shè)計(jì)稿的分析 設(shè)計(jì)稿的分析是指對設(shè)計(jì)稿如何制作成頁面的分析，即哪一塊的內(nèi)容可以做為公共的部分、哪一塊的內(nèi)容結(jié)構(gòu)可以如何實(shí)現(xiàn)等。對設(shè)計(jì)稿的分析能力可以劃分成下面的幾個(gè)階段： 能分清設(shè)計(jì)稿中的公共與私有的部分 在1的基礎(chǔ)上對各部分的實(shí)現(xiàn)方式有一個(gè)初步的方案（包括如何切圖、寫結(jié)構(gòu)、寫樣式） 在1的基礎(chǔ)上，準(zhǔn)確的給出各部分的實(shí)現(xiàn)方案（包括如何切圖、寫結(jié)構(gòu)、寫樣式） 在3的基礎(chǔ)上，能同時(shí)考慮方案的擴(kuò)展性、復(fù)用性及頁面性能（包括如何切圖、寫結(jié)構(gòu)、寫樣式） 在4的基礎(chǔ)上，考慮整站的結(jié)構(gòu)分布（包括文件分布、目錄結(jié)構(gòu)） 上面這些都是在還沒開始動(dòng)手制作之前所要做的。 二，切圖 切圖是指將設(shè)計(jì)稿切成便于制作成頁面的圖片。都有個(gè)誤區(qū)，覺得切圖就是把圖片切出來，其實(shí)并不完全是這樣，還包括把切出來的圖片合并到一起，怎么切、從哪切才能將性能最大化，說“切圖是一門藝術(shù)”完全不為過。切圖也可以劃分成幾個(gè)階段： 切成所需要的圖片（如何將需要的部分切出來） 在1的基礎(chǔ)上，對切出來的圖片進(jìn)行一些優(yōu)化（包括壓縮文件大小、選擇圖片類型） 在2的基礎(chǔ)上，規(guī)劃切出來的圖片（包括文件分布） 在3的基礎(chǔ)上，考慮整體的性能（包括合并圖片、壓縮文件大小） HTML和CSS的編寫 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è)階段： 還原設(shè)計(jì)稿視覺效果，并通過標(biāo)準(zhǔn)驗(yàn)證（HTML） 在1的基礎(chǔ)上，實(shí)現(xiàn)多瀏覽器的兼容（HTML） 在2的基礎(chǔ)上，標(biāo)簽語義化（HTML） 在3的基礎(chǔ)上，選擇較優(yōu)的實(shí)現(xiàn)方式（包括模塊化結(jié)構(gòu)，方便程序腳本使用，HTML和CSS） 在4的基礎(chǔ)上，考慮到擴(kuò)展性、復(fù)用性和可維護(hù)性（HTML和CSS） 在5的基礎(chǔ)上，考慮到整站的樣式分布（包括如何實(shí)現(xiàn)分布） 在6的基礎(chǔ)上，樣式寫法的優(yōu)化（包括技巧的應(yīng)用） 是對所遇到問題的解決能力，這一點(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)步吧。