！！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/ |
