課程介紹
使用者以行動裝置透過行動通訊網路進行交易或商業活動，尤其是行動裝置帶動許多行動商務的創新服務。課程主要著重在跨裝置的「響應式網頁設計(RWD)」及「跨平台APP設計」兩大技術與「UI/UX設計技巧」，讓學生可以學習到開發「行動商務系統」所需的基本技能，對於未來的專題製作和投入校外實習有相當之助益。
教科書:
課本：讓響應式(RWD)網頁設計變簡單：Bootstrap開發速成(第二版)
出版商：碁峯
學校業務：高錦安，02-2788-2408~876
參考：跟著實務學習HTML5、CSS3、JavaScript、jQuery、jQuery Mobile、Bootstrap 4&Cordova-增訂版
出版商：碁峯
學校業務：高錦安，02-2788-2408~876
參考：設計師一定要學的 Bootstrap 5 RWD 響應式網頁設計--行動優先的前端技術
出版商：旗標
學校業務：羅雅麗，0912-563-723
教學進度:
| 課程核心單元 | 週次 | 教學內容 |
| 響應式網頁介紹 | 1 | 響應式網頁介紹 |
| 響應式網頁的主要概念 | 2 | 響應式網頁的主要概念 |
| 網站開發流程 | 3 | 網站開發流程 |
| 行動載具優先 | 4 | 行動載具優先 |
| 設計上的輔助 | 5 | 設計上的輔助 |
| 設計師與工程師彼此認知 | 6 | 設計師與工程師彼此認知 |
| HTML5 | 7 | HTML5 |
| CSS3選擇器 | 8 | CSS3選擇器 |
| 期中成果評量 | 9 | 期中測驗或繳交期中實作成果報告 |
| Bootstrap介紹 | 10 | Bootstrap介紹 |
| 網格佈局與CSS介紹 | 11 | 網格佈局與基礎CSS樣式的使用與實作練習 |
| CSS的使用 | 12-13 | CSS的使用 |
| 實作練習 | ||
| Components元件的使用 | 14-15 | Components元件的使用 |
| 實作練習 | ||
| Javascript 的使用 | 16-17 | Javascript 的使用 |
| 實作練習 | ||
| 期末成果評量 | 18 | 期末測驗或繳交期末實作成果報告 |
課程活動
-
-
閱讀 > 4 分鐘 1.1 響應式網頁設計-課程要求
04:37
-
閱讀 > 12 分鐘 1.2 Ch01_響應式網頁介紹-01_(為何需要響應式網頁)12:06
-
閱讀 > 17 分鐘 1.3 Ch01_響應式網頁介紹-02_(何謂響應式網頁)17:31
-
閱讀 > 11 分鐘 1.4 Ch01_響應式網頁介紹-03_(網頁設計趨勢)11:53
-
-
-
閱讀 > 11 分鐘 2.1 Ch02_響應式網頁的主要概念-01_(RWD 響應式網站)11:16
-
-
-
閱讀 > 25 分鐘 3.1 Ch03_網站開發流程-01_(專案)25:54
-
閱讀 > 13 分鐘 3.2 Ch03_網站開發流程-02_(企劃)13:29
-
閱讀 > 15 分鐘 3.3 Ch03_網站開發流程-03_(設計)15:07
-
閱讀 > 5 分鐘 3.4 Ch03_網站開發流程-04_(前端)05:26
-
閱讀 > 7 分鐘 3.5 Ch03_網站開發流程-05_(後端、測試、上線)07:00
-
-
-
閱讀 > 14 分鐘 4.1 Ch04_行動載具優先-01_(說明)14:43
-
閱讀 > 3 分鐘 4.2 Ch04_行動載具優先-02_(響應式與傳統網站的流程差異)03:35
-
閱讀 > 4 分鐘 4.4 Ch04_行動載具優先-04_(斷點的佈局)04:34
-
閱讀 > 5 分鐘 4.5 Ch04_行動載具優先-05_(圖片格式、模組化設計)05:12
-
-
5.設計上的輔助 - 第6週
Illustrator、Photoshop、Font Awesome、Responsive breakpoints-
閱讀 > 12 分鐘 5.1 Ch05_設計上的輔助-01_(製作網格系統)12:03
-
閱讀 > 22 分鐘 5.5 Ch05_設計上的輔助-05_(圖片產生器、載具尺寸、網頁字級)09:45
-
閱讀 > 1 分鐘 5.6 fontawesome-free-5.0.6
-
-
6.設計師與工程師彼此認知 - 第7週
-
閱讀 > 16 分鐘 6.1 Ch06_設計師與工程師彼此認知-01_(網頁與印刷的差異)16:41
-
閱讀 > 10 分鐘 6.3 Ch06_設計師與工程師彼此認知-03_(統一的命名規則)10:08
-
閱讀 > 10 分鐘 6.4 Ch06_設計師與工程師彼此認知-04_(工程師眼中的設計稿)10:04
-
-
-
閱讀 > 4 分鐘 7.1 Ch07_HTML5-01_(認識HTML5)04:46
-
閱讀 > 6 分鐘 7.3 Ch07_HTML5-03_(語意化標籤)06:07
-
閱讀 > 3 分鐘 7.4 Ch07_HTML5-04_(文件結構差異)03:12
-
-
8.CSS3 選擇器 - 第9週
-
閱讀 > 7 分鐘 8.1 Ch08_CSS3 選擇器-01_(觀念說明)07:13
-
閱讀 > 4 分鐘 8.2 Ch08_CSS3 選擇器-02_(選擇器介紹、基礎選擇器)04:14
-
閱讀 > 1 分鐘 8.3 Ch08_CSS3 選擇器-03_(組合選擇器)01:35
-
閱讀 > 4 分鐘 8.4 Ch08_CSS3 選擇器-04_(屬性選擇器)04:38
-
閱讀 > 10 分鐘 8.5 Ch08_CSS3 選擇器-05_(偽類選擇器)10:21
-
-
-
閱讀 > 10 分鐘 9.1 Ch09_Bootstrap 介紹-01_(何謂Bootstrap)10:37
-
閱讀 > 8 分鐘 9.2 Ch09_Bootstrap 介紹-02_(網格系統介紹)08:52
-
-
10.使用網格佈局與基礎CSS樣式 - 實作練習 - 第11、12週實作學習重點：
- 使用網格系統進行響應式布局
- 文字排版、按鈕、圖片、通用類別等使用
起始網頁 完成網頁
-
閱讀 > 6 分鐘 10.1 Ch10_網格佈局與基礎CSS 樣式的使用-0106:31
-
閱讀 > 4 分鐘 10.2 Ch10_網格佈局與基礎CSS 樣式的使用-0204:01
-
閱讀 > 6 分鐘 10.3 Ch10_網格佈局與基礎CSS 樣式的使用-0306:34
-
閱讀 > 35 分鐘 10.4 Ch10_實作教學影片35:08
-
11.使用 CSS - 實作練習 - 第13、14週實作學習重點：
- 文字排版、按鈕、圖片、表格、輔助類別、表單的使用
起始網頁 完成網頁
-
閱讀 > 5 分鐘 11.1 Ch11_CSS 的使用-0105:54
-
閱讀 > 7 分鐘 11.2 Ch11_CSS 的使用-0207:24
-
閱讀 > 38 分鐘 11.3 Ch11_實作教學影片38:32
-
12.使用 Components 元件 - 實作練習 - 第15、16週實作學習重點：
- 響應式影片、下拉式選單、卡片、分頁、表單等元件的應用
- 使用Font Awesome字型
起始網頁 完成網頁
-
閱讀 > 44 分鐘 12.1 Ch12_Components 元件的使用-0144:39
-
閱讀 > 44 分鐘 12.2 Ch12_Components 元件的使用-0244:39
-
閱讀 > 44 分鐘 12.3 Ch12_實作教學影片44:39
-
13.使用 Javascript - 實作練習 - 第17、18週實作學習重點：
- 彈出提示框、摺疊效果、互動視窗
起始網頁 完成網頁
-
閱讀 > 44 分鐘 13.1 Ch13_Javascript 的使用-0144:39
-
閱讀 > 44 分鐘 13.2 Ch13_Javascript 的使用-0244:39
-
閱讀 > 24 分鐘 13.3 Ch13_實作教學影片24:25
