本篇連結：https://hackmd.io/V7-fje9hQ6Gmxba3ToiFhA

# 第五週

#### 1. AAPD 合作說明

課程將與 AAPD 合作，讓同學可以使用 AAPD 的課程的設計稿
分組切版多頁式網頁，參加條件與時間軸：
- 8/2 填寫意願表單：https://forms.gle/tdv2tf5hEJw8UEXW8
- 8/30 前：達到第六週作業等級 2（至少做兩頁含 RWD，其中一頁必須為首頁）
- 9/2 ~ 9/3：進行分組，每組 3 ~ 4 人
- 9/3 ~ 9/14：與 AAPD 團隊配對，並透過六角教練與設計團隊溝通確認設計稿細節。
- 9/15 ~ 9/20：設計團隊依據細節修改，並持續優化
- 9/23 ~ 10/4：六角切版直播班學員切版挑戰
- 10/5：成果發表會


如果有興趣，請在 8/5 前填寫意願表單：https://forms.gle/tdv2tf5hEJw8UEXW8

#### 2. 專題班的週報分享

## input 表單標籤

請不要這麼做：https://goulartnogueira.github.io/BadUI/

表單基本知識：

- input 常見種類與屬性介紹
- form、input、button 三劍客
- name 屬性為後端傳值、id 為 label 所用
- [w3schools](https://www.w3schools.com/html/html_forms.asp)
- [MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input)
- 注意：id 在頁面中是唯一的
- 設計響應式時需注意的項目(date、tel)
- date 在桌面版可以使用其他套件
- tel、email 等請盡可能用現成的 type
- button 請正確設置 type
- select 與 type checkbox、Radio
- 屬性：
- value
- placeholder
- readonly
- disabled
- required -> 簡易驗證

type 在行動版上的影響：


其他常見問題：

- Select 的 Option 可以改樣式嗎？
- input id 一定要對 label for 嗎？
- button 一定要加入 type 嗎？

### 表單樣式撰寫重點

- input 需要與 button 一樣的高度（往後對其一致
- 需要包含其狀態
- 基礎：
- input 包含 focus
- button 包含 hover、active 等
- 進階：
- 包含錯誤樣式

## CSS reset 差異

- [meyerweb CSS Reset](https://meyerweb.com/eric/tools/css/reset/)
- [normalize](https://necolas.github.io/normalize.css/)

## CSS 全域設置

https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss

設置基準：

- 在 Reset 後方
- 以標籤為主

## 載入 BS5

- [教學連結](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
- [影音課程](https://courses.hexschool.com/courses/2020112211/lectures/53653941)

### Bootstrap 結構概念

https://github.com/twbs/bootstrap/blob/main/scss/bootstrap.scss

1. CSS Normalize
2. Content
3. Grid System
4. **Component**
5. **Helpers**
6. **Utilities**

### Bootstrap 元件運用概念

> OOCSS
>
1. 容器與內容分離
2. 結構與樣式分離

範例1：

<button type="button" class="btn btn-primary">Primary</button>

範例2 - 額外樣式：

<button type="button" class="btn btn-primary btn-lg">Large button</button>

範例3 - 狀態：

<button type="button" class="btn btn-primary" disabled>Primary button</button>

技巧：

1. 結構
2. 樣式
3. 額外樣式
4. 狀態
5. Utilities

**範例二：表單開發**

### Bootstrap Helper 與 Utilities

教學：https://courses.hexschool.com/courses/2020112211/lectures/53653963

參考：https://getbootstrap.com/docs/5.3/helpers/color-background/

介紹卡片元件：https://getbootstrap.com/docs/5.3/components/card/

1. 基本卡片
2. 套用尺寸
3. 套用背景色、文字顏色
4. border 線條色彩
5. 圓角

### JavaScript 元素

必要流程：

1. 載入 JS 檔案
2. 元件加入 data-bs-*

## 手寫 SCSS 結構參考

@import "variable";// 變數
@import "reset";  // reset.css

// 1. 元件(進階)* 或 Bootstrap
@import "button"; 
@import "..."; 

// 2. 雜項(進階)*
@import "utilities"; 

// 3. 共用樣式（如有 Bootstrap 通常不會寫這段）
@import "layout"; // 共同框架、第一層

// 4. 分頁樣式（可在此覆蓋 Bootstrap 樣式）
@import "index";
@import "page1";

## 傳統命名問題：

- 產品的卡片列表
- product list…

問題：如果換頁還可以用嗎？

1. 用外觀命名：
1. 好的：card、button、btn-primary
2. 不好的：product-list、register-btn
2. 用視覺功能命名：
1. 好的：Slider
2. 不好的：Banner
3. 輔助、雜項、原子化：bg-primary、mt-3、d-flex
1. 檔名：_utilities.scss

## 第五週開發方向

1. 開始嘗試用 BS5 的 util 搭配自己手寫
2. 純手寫，並嘗試自己做 base+util

## 第五週主線任務

主線任務：[作業設計稿](https://xd.adobe.com/view/456141fc-d0a0-44d4-93ad-6ab54a4b5351-1032/)（僅供有參加切版直播班同學授權），[圖片下載連結](https://github.com/hexschool/2022-web-layout-training/tree/main/week5)

### 作業地雷
- 注意 input readonly/disabled/value 用法
- 注意 label for 需對應 input id
- 需使用線上圖示 Material Design Icons

## 挑戰等級
LV 1｜做一頁版型
LV 2｜做兩頁以上，並有設計 Modal 功能
LV 3｜全部頁面都做