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

★Part1 基礎語法與觀念 – 6hr 
1.HTML5 
•html基本概念 
•標題與內文 
•圖像 
•超連結 
•清單樣式 
•表格 
•iframe-youtube & google map 坎入 
•block 與 inline屬性 
•div 與 span 
•form 
•layout 
•video/audio 

2.CSS 
•CSS基本概念 
•文字樣式 
•超連結樣式 
•邊框與背景顏色 
•圓弧角度與陰影 
•清單樣式 
•margin與padding 
•自訂按鈕設計 
•icon的加入 
•表格樣式 
•display 
•overflow與float 
•position 版面定位 
•表單樣式 

3.版面的建立（常見版型製作） 
•一欄式的版面設計 
•兩欄式的版面設計 
•三欄式的版面設計 
•圖文左右交錯版面 
•創意式的版面設計 


★Part2 實務製作篇、手機網頁與PC網頁 – 12hr 
1.建立架構-/建立function map/手機與桌機wireframe/資料架構的處理 
2.PC版網頁 
3.手機版網頁 
4.撰寫判斷式 

★Part3 實務製作篇、RWD網頁的建立 – 18hr 
1.事先準備 
2.FRAMEWORK-BOOTSTRAP 
•何謂Bootstrap 
•開始使用Bootstrap 
•Grid System 
•標題與文字 
•表格套件 
•影像樣式 
•Jumbotron與Page Header 
•Wells與Alerts 
•按鈕樣式 
•按鈕群組 
•加入icon 
•分頁標籤 
•清單群組 
•下拉式清單 
•Navigation Bar 
•Bootstrap Modal Plugin 
3.自己建立自己的BOOTSTRAP! 
引用bootstrap概念，可以依照自己的使用需求來建立自己的套件，快速建立一個頁面！

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


video作品
https://www.youtube.com/watch?v=M8JQ53N3034
http://youtu.be/He2D8UHPnY4
https://www.youtube.com/watch?v=yyEv6i79PH4
https://www.youtube.com/watch?v=l7qjMvcDkDg
http://youtu.be/HJJ4bmz1qzs
http://youtu.be/mP1JZWNpsMM
http://www.youtube.com/watch?v=VqbasIwEMYM&feature=youtu.be
https://www.youtube.com/watch?v=Uq_lp87zyo0