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