簡易切版教學

I Love Joomla!, Asika2012/04/07

準備工具• Chrome, IE 開發者工具（除錯用）

• Firefox FireBUG

準備工具• 文字編輯器 PsPad, NotePad++, Komodo

Editor

• IE6, 7, 8, 9 / Chrome / FireFox / Safari

• PC, Notebook, Mac, iPhone, Android, iPad

menu-wrap

mainbody-wrap

footer-wrap

main-wrap

main-wrap

main-wrap

main-wrap

mainwrap

header

banner

bottom-linkbreadcrums

語義化• mainbody• wrap• otter & inner• left & right, top & bottom• header, menu, nav, column, footer, banner• bottom-shadow

語意化範例main-content-wrap-outter

main-content-wrap-inner

main-content-top

main-content-

left-column

main-content-

right-columnmain-content-body

語意化範例 IImain-content-wrap

main-content-wrap-inner

top

left right

body

範例 I & II 差異• I 在 CSS 編寫上清楚易懂，但 class 編寫繁

複

• II 可節省一些 CSS 程式碼，但容易衝突

• 沒有最好的方法，端看團隊如何協調

• 統一形式，最重要

錯誤範例• class="a"

• class="hl"

• class="kkk"

• class="main-content-wrap-outter-top-for-article-and-banner-to-bula-bula"

實作

切版重點• 從設計本身開始（網格、頁寬）

• 事先規劃 Layout 佈局

• 確知頁面中哪些部分用圖片，哪些部分用CSS

切版重點• DreamWeaver 只是工具

• 對 CSS & HTML 必須要夠熟

• 語意化的 id, class 設計

切版重點• 善用多重 class– class="main-body article middle-column"– .article.middle-column {}

– 可交互指定複雜的重疊樣式

FAQ

• 速度好快喔，跟不上？

• 有了模版或 Artisteer ，還需要學切版嗎？

• 工程師切還是設計師切？

• 一定要用程式切嗎？

• 其他 ...

最後• 實戰經驗最重要

• 每天切版，照三餐切版，會越來越強

• 看別人的作法，參考高手的設計

• 不要吝於學習新技術（ compass, CSS3 etc. ）

• 網路上還有很多好用的工具待發掘

• 建立自己的工具群