# 第六堂 導入網頁規範設計流程

本頁連結：https://hackmd.io/lPxUfz5hS7CC3DNQAewORw
#### 1. AAPD 合作說明


#### 這是什麼活動：

你將有機會體驗與設計師協作並實際參與開發上線產品的過程，這將會是一次難得知識的實踐與經驗累積，讓你能夠站在第一線深入了解設計與工程的合作模式將想法落地。

#### 參加條件：
- 報名條件：完成第四堂課多頁式網頁 LV 2 （完成 4 頁含 RWD 且包含首頁）
- 組別人數：
- 一組 2-3 位工程師

#### 關鍵時程：
- 8/1：第六堂課開放正式報名表單填寫
- 8/7：正式報名表單截止
- 8/8：完成分組、配對組別
- 8/12：開營典禮 (雙方共同辦理)
- 8/13：工程師團隊開始切初版
- 8/31：工程師團隊完成切初版
- 9/21：研發營成果發表日 (六角主辦)

會做出怎樣的東西？參考：https://aapd.com.tw/uibc-2025

如果有興趣，請在 8/7 前填寫意願表單：

> 在參與前，建議掌握 Git 技能

### 2. 課程獎勵說明

- 50%：**8/4** 前超過 100 人挑戰成功，全班直播加碼一年（**～2027/8/30**）
- 60%：菁英班 DLC 切版影音課程
- 80%：菁英班直播一場（8/29） - 【原子化設計】Tailwind 使用教學（v4 +）
- 90%：抽 711 拿鐵 10 份
- 100%：切版直播班學霸獎狀

任務繳交期限：8/24(日) 23:59:59

更多說明可參考：https://hackmd.io/51ijGrBfRyWWHWciVmKNRQ

---

# 第六週 - 導入網頁規範設計流程

## BS5 格線系統

## Mobile first 與 Desktop first 差別

- [desktop first](https://codepen.io/liao/pen/WNQJVqr?editors=1100)
- [mobile first](https://codepen.io/liao/pen/jObxgeW?editors=1100)

## 格線系統 - 減輕 magic number 出現

- 格線系統關鍵字：
- container(外層容器)
- column(欄)
- gutter(間距)


## [BS5 格線系統](https://bootstrap5.hexschool.com/docs/5.0/layout/grid/)原理

### 通用類別 Utitilities

- Spacing：https://getbootstrap.com/docs/5.3/utilities/spacing/

### 格線系統

- 排版三劍客： .container、.row、.col 1~12
- .container
- .container 固定寬度
- .container-fluid 滿版
- .row
- .g-*：gutter 數值
- .col-
- col-{number}：所有裝置的格線系統
- .col-{中斷點}-{number}：依據不同中斷點進行調整
- 名言 1：.col- 的外層只能是 .row
- 名言 2：.row 裡面只能是 .col-
- 名言 3：網頁內容與元件請放在 .col- 裡面

#### 常見錯誤：

- 沒有正確了解容器、內容的觀念
- .col 外層不是 .row
- .row 的內層－不是 .col
- 另外調整格線系統的水平 margin、padding
- 在 .col 增加寬度
- 在格線系統調整左右 margin 與 padding
- 最外最少要有一個 .container

## 格線範例

名詞對齊：

- 3欄(three column)、三大欄..

神級技巧 [實作](https://www.figma.com/design/ZQn0etbtIsCrmkHqFeeLKo/%E5%88%87%E7%89%88%E7%9B%B4%E6%92%AD%E7%8F%AD---%E7%9B%B4%E6%92%AD%E6%95%99%E6%9D%90?node-id=381-2&t=IfpqkLHvLVZtnd9h-0)
- 基本
- 巢狀

## BS5 格線斷點設計

- 若想先做 PC 版，可用 md、lg 當起手式
- Bootstrap 正確用法：當 PC 端做好，行動版也一起完成了

> 補充：因為 Bootstrap 是手機優先，因此所有的 col-{中斷點}-* 都預設是 col-12

## 網站範例 + 通用類別搭配

- [六角學院](https://www.hexschool.com/) - 判斷哪些地方有用到 .row 哪些地方沒有
- [甜點電商表尾](https://wcc723.github.io/F2E-PK/products.html) - 表尾設計 + row 裡面再加 .col
- [Bootstrap 如何運用格線系統](https://themes.getbootstrap.com/)

## 中場休息

## BS5 SCSS 載入 ([架構圖講解](https://whimsical.com/bs5-A1pswT87rkXs7peANUBVp6))

1. [SCSS default 觀念講解](https://codepen.io/hexschool/pen/oNWawom?editors=1100)
2. [六角 Vite 範例](https://github.com/hexschool/web-layout-training-vite/tree/main)



## 手寫 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";

> 不要去修改 node_modules/bootstrap 裡面的 SCSS，這是一個很 💩 的行為
因為別人接手你 code 時，會自行使用 npm install 安裝套件，此時裡面模組就都重新下載了

### repo 有更動的地方

1. 多加入了一個 [bootstrap](https://github.com/hexschool/web-layout-training-vite/blob/feature/bootstrap5/package.json#L18) 模組
2. 多加入了一個 [bootstrap JS](https://github.com/hexschool/web-layout-training-vite/blob/feature/bootstrap5/main.js#L2)，讓 dist 編譯出來的 js 可以載入 BS5 JS 套件
3. [index.html](https://github.com/hexschool/web-layout-training-vite/blob/feature/bootstrap5/pages/index.html) 加入了些 BS5 範例元件
4. [SCSS](https://github.com/hexschool/web-layout-training-vite/blob/feature/bootstrap5/assets/scss/all.scss) 範例有變更

## 實戰調整技巧：

1. 全域調整
1. 色彩調整
2. spacing 調整
2. 隱藏設定啟動
1. 專案是否要加入圓角、漸層
3. 單一元件調整
1. 調整 navbar link 高度（由 $nav-link-height 反推需要修改值），這也會改到 $navlink
4. 額外注意
1. 按鈕、表單元件是等高的

## 第六堂主線任務

主線任務：[作業設計稿](https://www.figma.com/design/omevevD7bxbB3wQfL3jXR8/%E5%85%AD%E8%A7%92%EF%BD%9C%E8%81%B7%E6%97%85-WorkWay%EF%BD%9C%E8%81%B7%E6%B6%AF%E8%AB%AE%E8%A9%A2%E5%AA%92%E5%90%88-%EF%BC%88student-ver.%EF%BC%89?node-id=4032-9080&p=f&t=wsxE5pAkCOaT4vWT-0)（僅供有參加切版直播班同學授權），[圖片下載連結](https://github.com/hexschool/2022-web-layout-training/tree/main/2025-week6)

### 作業地雷
- 使用 Bootstrap 需要透過 `_variables.scss` 來修改主色等設定
- 伸縮時不可以出現 x 軸與跑版的狀況

## 挑戰等級
LV 1｜任選兩頁含 RWD
LV 2｜至少做兩頁含 RWD，其中一頁必須首頁 + 註冊 modal、登入 modal
LV 3｜全部頁面都做
LV 4｜全部頁面都做，且加入 Bootstrap 表單驗證

## 絕密，第八堂挑戰

[挑戰連結](https://www.figma.com/design/3bEeuchVUYwmA2PuHAxQVN/%E5%85%AD%E8%A7%92%EF%BD%9CZOBAA--%E6%97%85%E9%81%8A%E7%B6%B2%E7%AB%99--student-ver.%EF%BC%89?node-id=2-6972&p=f&t=mcWH7m3mkCfuw1AB-0)