頁面制作也是一門藝術

　　當一個頁面制作工程師將html頁面呈現在你面前的時候，你看到的代碼全是DIV，毫無章法可言，你作何感想?如果你看到的頁面結構清晰、注釋明朗、標簽合理，你又作何感想?很明顯，你更愿意看到的是第二類頁面。如果將頁面比喻成一個女人，你更希望站在你面前的這個女人線條清晰、凸凹有致、精于打扮而又恰到好處，不是嗎?好的頁面總能讓你體會到一種賞心悅目的快感，你會忍不住的看了再看，你會在查看的代碼的同時想到《登徒子好色賦》中所言的東家之子。我這樣說可能有些過，但我相信你對好的代碼所帶來的美感一定有所體味。在許多人看來，頁面制作是一項很簡單的工作，不就是將設計圖轉換成html嗎?如果頁面制作就是這樣一個簡單的轉換工作，那為何還要衍生出頁面制作工程師這樣的職位呢?一項工作如果被職業化，那么它就不那么簡單了。在我看來，頁面制作不僅僅是技術，更是一門藝術。

　　在UI設計師將一套設計稿交付到你(這里我假設你就是一名頁面制作工程師)的手中之后，該如何去完成頁面的制作?有經驗的工程師從不急于動手，而是認真的查看每一張設計圖，并進行對比分析。他們通常會從設計圖中找出頁面的基本框架，找出頁面中相同或者相似的東西，并進行語義化分析，選擇合適的標簽。在真正構建html的時候，他們會充分利用那些我們常見的技術，如滑動門技術、sprite技術、圖像替代技術。他們會將靈活性考慮其中，并努力將維護成本降低到最低程度。他們并不是簡單的切割設計圖，而是分離其中的元素，這些分離的元素會被多次復用。有時候設計稿很多，可是他們很淡然，因為在他們看來，不過是幾個元素合成疊加而已。他們會選擇理想的圖片格式，并在保證圖片質量的基礎上進行有效地壓縮處理。在整個制作過程中，他們始終遵循結構與表現相分離的原則。他們會使用語義化的標簽來構建html，并充分利用這些標簽來書寫高效的的css文件。他們可能把大量的時間花在一個基本框架頁的制作上，但這絲毫不影響他的效率。在他們眼中，一切都在的掌控之中。“運乎之妙，存乎一心”，他們理解各種常見技術，熟悉每個html標簽，深刻領悟css語法。故而游刃有余，目無全牛。一張設計稿呈現在他們面前時，他們一眼就能看出基本骨架，很自然的想到用那些技術來實現，并能準確的表達出設計圖中語義化的標簽。

　　對于初學者來說，可能有所不同。他們很可能缺乏全局意識，為了切圖而切圖，全然不知標簽語義化的重要性，以至于頁面中全是DIV。他們會極盡所能的恢復設計稿的原貌(這在某種程度上來說是件好事)，全然不知那些我們常見的技術技巧。在項目向前推進的時候，問題接踵而來，原來的html結構難以重用，樣式一塌糊涂。簡單的修修補補已經很難解決出現的種種問題，如果遇上設計圖些微改動的時候，更是叫苦不迭。每當這個時候，他們常常會一籌莫展，無所適從。初學者往往缺乏以下東西：1)沒有足夠的全局意識，對每一個細節把握不夠;2)對常見的技術技巧了解不深;3)不理解標簽語義化的重要性，或者知道標簽的含義，卻不知道如何用它。而要真正掌握這些，也得費一番功夫才能練就。一旦掌握了這些東西，頁面制作就變得很輕松。一旦你弄透了，在設計稿呈現給你的時候，你可以無視那些華麗的視覺效果，而是直指圖中語義化的標簽，直接構建html。那些華麗的效果不過是css的外衣。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈