依目前業界實務上的網頁設計工作來設計課程內容，以實務方式讓學員在短時間內做出令人激賞的作品，希望透過這個課程能讓想進入這個行業的學員更加了解整個業界實況，並且也能夠藉由上課的作品集進入到這個行業。

Part1～視覺設計

主視覺（KEY VISION）設計：所有活動都是從主視覺來展開所有的製作物！透過以下單元來強化學員在廣告稿的製作！
1.修圖-階段1-智慧型物件，非破壞性遮色片，圖層混合選項
2.修圖-階段2-調整圖層大解析
3.修圖-階段3-透過顏色查詢,你可以自定圖片風格
4.頭髮去背-這個環節是大家比較薄弱的地方往往花了很多的時間處理卻還是效果不佳，希望透過自己整理的心得和筆記來解決這個問題，不在害怕頭髮去背的問題！
5.設計流程 -了解整個過程相信，可以更佳掌控每個細節
6.開始設計- 有了先前的觀念和修圖技巧我們便可以開始來合成了
Homework：https://drive.google.com/open?id=0B0hBz2_rNVbdMHVzUUVZX3FCSlU

Banner製作：在banner resize單元裡將會介紹以下特點
1.何謂banner?
2.Banner設計重點
3.不同類型的banner製作.
4.何謂Resize？檔案大小的限制為多少？
5.banner版型製作
Homework：http://www.shoyoung.idv.tw/design/banner/banner.html

EDM製作：此單元我們會從設計到輸出網頁模式到透過電子報系統發送EDM，一次了解整個運作模式也會和學員整理其中的要注意的規範！
1.何謂EDM
2.EDM設計重點
3.提案規劃
4.版型製作
5.輸出為網頁
6.透過電子報系統來發送EDM
Homework：http://www.shoyoung.idv.tw/design/edm/edm.html

Newsletter製作：和EDM相比，Newsletter在設計上就顯得有一些規範和限制，我們從最初的尺寸定義到版面設計規劃然後再切版組合成頁面一一詳細的介紹
1.何謂Newsletter
2.EDM與Newsletter差異
3.提案規劃
4.頁面設計
5.版面切版(table)
6.透過電子報系統來發送newsletter
Homework：http://www.shoyoung.idv.tw/design/news/news.html

ICON設計：網頁設計師另一個會支援的工作則是在ui介面設計(僅提供圖片不參與ux的設計)其中以icon設計為最常見的例子！
1.何謂ICON
2.設計重點與規則
3.草圖製作
4.創意發想
5.整合應用
6.ICON資料庫
Homework：http://www.shoyoung.idv.tw/design/pro/icon/icon.html


Part2～基本語法 （html/css）
此單元我們希望學員學會將psd(視覺)轉換成html和css(網頁結構)能力，透過大量的練習來強化整體的基礎，最後的版面排版練習則是將之前的觀念做一次性的整合

1.資料夾整理與檔案的命名
2.html語法
•什麼是HTML5?
•Documents
•元素(Element)
•標題與內文
•圖片(img)
•連結(links)
•List-ol與ul
•youtube影片嵌入
•goolemap地圖嵌入
•html5_video
•iframe
•Blocks 與inline屬性
•table
•Head
•Layouts
3.css語法
•什麼是css?
•顏色屬性colors
•背景顏色屬性backgrounds
•邊框border
•間距margin與內距padding
•寬度與高度的設定
•Box Model
•文字屬性與字型text &font
•超連結links
•tabale 美化
•display
•width and max-width
•定位-Position
•Overflow
•inline&Block
•Align
4.table版面練習
5.div版面練習

Part3～建立一個響應式的網頁rwd
在最後的單元我們開始網頁的設計，從網站的屬性類型來規劃整體的版面等後續的製作

1.網站目的與規劃
2.版面設計
3.頁面切割
4.網頁架構的撰寫
5.上線測試
Homework：http://www.shoyoung.idv.tw/design/pro/web/web.html

※為維護課程品質及尊重智慧財產權，上課中請勿錄音錄影，亦不提供錄音或錄影補課。