頁面制作也是一門藝術(shù)
當(dāng)一個頁面制作工程師將html頁面呈現(xiàn)在你面前的時候，你看到的代碼全是DIV，毫無章法可言，你作何感想？如果你看到的頁面結(jié)構(gòu)清晰、注釋明朗、標(biāo)簽合理，你又作何感想？很明顯，你更愿意看到的是第二類頁面。
如果將頁面比喻成一個女人，你更希望站在你面前的這個女人線條清晰、凸凹有致、精于打扮而又恰到好處，不是嗎？好的頁面總能讓你體會到一種賞心悅目的快感，你會忍不住的看了再看，你會在查看的代碼的同時想到《登徒子好色賦》中所言的東家之子。
我這樣說可能有些過，但我相信你對好的代碼所帶來的美感一定有所體味。在許多人看來，頁面制作是一項很簡單的工作，不就是將設(shè)計圖轉(zhuǎn)換成html嗎？如果頁面制作就是這樣一個簡單的轉(zhuǎn)換工作，那為何還要衍生出頁面制作工程師這樣的職位呢？一項工作如果被職業(yè)化，那么它就不那么簡單了。在我看來，頁面制作不僅僅是技術(shù)，更是一門藝術(shù)。
在UI設(shè)計師將一套設(shè)計稿交付到你（這里我假設(shè)你就是一名頁面制作工程師）的手中之后，該如何去完成頁面的制作？有經(jīng)驗的工程師從不急于動手，而是認真的查看每一張設(shè)計圖，并進行對比分析。他們通常會從設(shè)計圖中找出頁面的基本框架，找出頁面中相同或者相似的東西，并進行語義化分析，選擇合適的標(biāo)簽。
在真正構(gòu)建html的時候，他們會充分利用那些我們常見的技術(shù)，如滑動門技術(shù)、sprite技術(shù)、圖像替代技術(shù)。他們會將靈活性考慮其中，并努力將維護成本降低到***程度。
他們并不是簡單的切割設(shè)計圖，而是分離其中的元素，這些分離的元素會被多次復(fù)用。有時候設(shè)計稿很多，可是他們很淡然，因為在他們看來，不過是幾個元素合成疊加而已。他們會選擇理想的圖片格式，并在保證圖片質(zhì)量的基礎(chǔ)上進行有效地壓縮處理。在整個制作過程中，他們始終遵循結(jié)構(gòu)與表現(xiàn)相分離的原則。
他們會使用語義化的標(biāo)簽來構(gòu)建html，并充分利用這些標(biāo)簽來書寫高效的的css文件。他們可能把大量的時間花在一個基本框架頁的制作上，但這絲毫不影響他的效率。在他們眼中，一切都在的掌控之中。“運乎之妙，存乎一心”，他們理解各種常見技術(shù)，熟悉每個html標(biāo)簽，深刻領(lǐng)悟css語法。故而游刃有余，目無全牛。一張設(shè)計稿呈現(xiàn)在他們面前時，他們一眼就能看出基本骨架，很自然的想到用那些技術(shù)來實現(xiàn)，并能準(zhǔn)確的表達出設(shè)計圖中語義化的標(biāo)簽。
對于初學(xué)者來說，可能有所不同。他們很可能缺乏全局意識，為了切圖而切圖，全然不知標(biāo)簽語義化的重要性，以至于頁面中全是DIV。他們會極盡所能的恢復(fù)設(shè)計稿的原貌（這在某種程度上來說是件好事），全然不知那些我們常見的技術(shù)技巧。
在項目向前推進的時候，問題接踵而來，原來的html結(jié)構(gòu)難以重用，樣式一塌糊涂。簡單的修修補補已經(jīng)很難解決出現(xiàn)的種種問題，如果遇上設(shè)計圖些微改動的時候，更是叫苦不迭。每當(dāng)這個時候，他們常常會一籌莫展，無所適從。
初學(xué)者往往缺乏以下東西：
1）沒有足夠的全局意識，對每一個細節(jié)把握不夠；
2）對常見的技術(shù)技巧了解不深；
3）不理解標(biāo)簽語義化的重要性，或者知道標(biāo)簽的含義，卻不知道如何用它。
而要真正掌握這些，也得費一番功夫才能練就。一旦掌握了這些東西，頁面制作就變得很輕松。一旦你弄透了，在設(shè)計稿呈現(xiàn)給你的時候，你可以無視那些華麗的視覺效果，而是直指圖中語義化的標(biāo)簽，直接構(gòu)建html。那些華麗的效果不過是css的外衣。
【編輯推薦】
