RWD響應式網頁完全解析

！！RWD響應式網頁完全解析！！

本課程分成兩個階段，前半部分為介紹基礎的網頁基本架構。從最初的HTML和CSS介紹到整個網頁的靜態架構的組成，適合初學者或是觀念還是模糊的學員。 
後半部則是本課程的主要重心：RWD響應式網頁，何謂RWD?為什麼要學RWD?學了RWD有什麼好處!?如果你喜歡網頁設計，歡迎你可以跟我們一起來學最新潮的網頁RWD 

課程重點～ 
Part 1～HTML和CSS　（18H） 
★初探HTML： 
1.從草圖到架構 
2.從輪廓到網頁 
3.（P）段落元素 
4.超級長的文字 
5.加入（blockquote） 
6.用（p）元素來列清單 
7.了解巢狀組織的關係 

★CSS概念以及應用： 
1.CSS 概觀 
2.CSS 文字美化 
3.id 與 class 
4.文字間距、行距 
5.各種超連結變色語法 
6.外掛式 CSS 檔案、指定區塊、複合式樣式、CSS 圖形化區塊的應用 
7.（DIV）和（span）的差別 
8.ul and ol來製作選單 
9.position定位 
10.文繞圖float屬性 
11.margin and padding 
12.Box model. 

Part 2～RWD （18H）
★RWD網頁設計基礎： 
1.何謂RWD 
2.RWD優缺點 
3.RWD設計流程 
4.Media Queries使用方法 
5.使用Fluid Grid 
6.Fluid image的設定 

★RWD撰寫前的註意事項： 
1.RWD開發程序 
2.針對行動裝置的考量 
3.瀏覽器的裝置類型 
4.Mobile first 

★RWD開始製作（樣板）： 
1.HTML5樣板製作 
2.CSS3樣板製作 
3.多樣版型練習撰寫 

★RWD製作： 
1.頁首設計製作 
2.導覽列設計,製作 
3.內容區的設計製作 
4.頁尾的設計製作 
5.商品一覽頁面設計 
6.輸入表單區的設計製作 
7.照片的輪播效果 
8.整體設計綜合練習 
9.實機測試 
10.模擬器測試 
11.進一步說明實機測試 
12.Chrome Developer Tools 
13.Coda2,IETester,IOS擬器,Androi模擬器

葉世軒老師 
經歷: 2010第十屆新人王網頁設計比賽佳作 
2011 法務部反毒比賽-影片組佳作 
2010第九屆新人王網頁設計比賽第一名 
2010 「你7了沒！Change & Better !」動畫比賽第三名 
2010 防災宣導短片動畫比賽 佳作 
2010 防制就業歧視四格漫畫徵選比賽 佳作 
2010 全國網頁設計比賽 社會組佳作 
2009第八屆新人王網頁設計比賽評審特別獎 
2006網頁設計比賽社會組人文獎 
2004網頁設計比賽大學組人文獎 
2004hiPage網頁設計大賽佳作 

專案經驗: 
http://www.shoyoung.idv.tw/mizar/ 
http://event.coolermaster.com/life_journey/home/ 
http://www.coolermaster.com/catalog2013/mobile/ 
http://www.coolermaster.com/microsite/haf_xb/ 
http://www.shoyoung.idv.tw/twstory/ 
http://event.cmstorm.com/trigger/ 
http://shoyoung.idv.tw/farmer/ 
http://www.coolermaster.com/microsite/silencio_650/ 
http://shoyoung.idv.tw/flash_book/