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