就算是切版也是很講技巧的

配圖和內文無關，只是我今天畫的萬聖應景圖而已...
前幾天的分享裡有聊到，前端的工作並不僅僅是切版而已，整個web的呈現部分都可以廣意的算在前端頭上，今天就來縮小範圍拉深主題，聊聊切版需要注意些什麼地方，不過因為我是新手嘛，有可能是錯的，如果發現我觀念有錯什麼的，要早點和我說啊!!

首先，拿到版面後第一個要確認的就是各個區塊的功能，一般拿到的版都是PSD的附上簡報或文件說明內容，開始動工之前有可能可以開個會，在拿到版開始做以前，務必要先把整個版的UI及功能從頭到尾模擬一次，對怎麼做大概有個底，不確定的地方一定要詢問，免得江水一去不復返，時程用光還是要重來的慘劇。

確認功能及所有需要的畫面之後，可以就UI及使用者的角度和視覺及PM做一些版面上的溝通調整，像是資料的多寡造成版面的差異，操作流程及畫面是否符合使用者習習、外框是否需要重新設計等等，很多時候PM或視覺對頁面的了解常常不及前端工程師，一個主因就是實際把頁面做出來的是前端，所以這種在執行上可能造成問題的地方都需要前端做出指引。其實前端最重要的功能之一就是整個團隊之間的溝通及調整，大家都埋頭做到時有錯就很頭大了。

再來就是決定結構，當功能及畫面確定之後就要開始把整個網站的結構區分好。哪些部分是重覆使用的，哪些內容屬於 header 哪些是footer, aside 等等，要將內容做出完整的結構區分，我現在是使用 fireapp這個軟體來幫我監看專案，其中有使用一些像ruby之類接近程式邏輯的分頁方式，可以用<%= yield %>、<%= render :partial => “檔名” %>的方式幫我把重覆的區塊切出來，用layout的方式來套用。

結構主要的決定方式還是語義化，不要使用不明的<div> 或是用空的tag， 在使用ID時也要特別小心，因為ID是唯一的又會有權重的問題，所以沒必要的話用 class 或是直接利用結構差異選 html tag就好。

建好結構之後記得檢查網頁大綱，好的大網應該有都明確的標題，適當的階層，階層太多在讀取時會造成很大的困擾，記得HTML內盡量簡潔，能寫在CSS的就寫在CSS，HTML最好只保留有意義的內容即可，意思就是該在 header的地方在header 屬於nav才放在nav裡，不要為了配合樣式放入無意義的東西。

tag 也盡量不要包太多層，去掉沒有必要的層次，越簡單越好(其實越簡單越難啦)。

再來就是 CSS的命名，不要取沒有意義的名字像 a1, a2, style1, style2.... 除非你想害人(或是害死需要回來改的自己)

取名的原則基本上是以CSS的功能為主，不要把名字取成樣式現在的內容，可以把名字取成 .asideA , .navToolBar , .mainArea...

不要取成 .left {float:left;} 或是 .redtext{color:red;}等等...
這種非功能而是樣式的取名很容易在維護時造成困擾，如果有一個tag寫 <div class="red">
可是改天要變成藍字、黑字時，再接手的人或是幾個月後的你自己，根本不知道這個 .red 實際上是什麼東西。

再來就是各瀏覽器debug, 做的時候以firefox/chrome為主，然後才去看IE 及其他瀏覽器的顯示。

最後，再來美化你的程式碼，拿掉可以重覆利用的部分，精簡美化他們。

看吧，簡單吧... (被歐飛)

chibc's blog | [新手前端]拿到視覺出的mockup，開始要切版了