主講人：飛鳥(Asika) (http://blog.asikart.com) I Love Joomla 2012.4月小聚 http://www.facebook.com/groups/lovejoomla/ 資源包下載：http://cl.ly/Ffp2

1. 簡易切版教學
I Love Joomla!, Asika
2012/04/07

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

3. 準備工具
• 文字編輯器 PsPad, NotePad++, Komodo
Editor
• IE6, 7, 8, 9 / Chrome / FireFox / Safari
• PC, Notebook, Mac, iPhone, Android, iPad

5. menu-wrap
mainbody-wrap
footer-wrap

6. main-wrap
main-wrap
main-wrap

7. main-wrap
header
banner
bottom-link
breadcrums
mainwrap

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

9. 語意化範例
main-content-wrap-outter
main-content-wrap-inner
main-content-top
main- main-
content- content-
left- right-
column
main-content-body column

10. 語意化範例II
main-content-wrap
main-content-wrap-inner
top
left right
body

11. 範例 I & II 差異
• I 在CSS編寫上清楚易懂，但class編寫繁複
• II可節省一些CSS程式碼，但容易衝突
• 沒有最好的方法，端看團隊如何協調
• 統一形式，最重要

12. 錯誤範例
• class="a"
• class="hl"
• class="kkk"
• class="main-content-wrap-outter-top-for-article-and-banner-to-bula-bula"

13. 實作

14. 切版重點
• 從設計本身開始（網格、頁寬）
• 事先規劃Layout佈局
• 確知頁面中哪些部分用圖片，哪些部分用
CSS

15. 切版重點
• DreamWeaver 只是工具
• 對 CSS & HTML 必須要夠熟
• 語意化的 id, class 設計

16. 切版重點
• 善用多重class
– class="main-body article middle-column"
– .article.middle-column {}
– 可交互指定複雜的重疊樣式

17. FAQ
• 速度好快喔，跟不上？
• 有了模版或Artisteer，還需要學切版嗎？
• 工程師切還是設計師切？
• 一定要用程式切嗎？
• 其他...

18. 最後
• 實戰經驗最重要
• 每天切版，照三餐切版，會越來越強
• 看別人的作法，參考高手的設計
• 不要吝於學習新技術（compass, CSS3 etc.）
• 網路上還有很多好用的工具待發掘
• 建立自己的工具群