---
tags: 網頁切版直播班 - 2020 秋季班
---

# 🏅第六週老師講義
## 報到佈告欄
* [報到](https://rpg.hexschool.com/training/15/calendar) Code：`W31hm91SPATa`

## 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 出現
* 格線系統關鍵字：column(欄)、gutter(間距)
* [960 grid，以前解析度都是 1024](https://960.gs/demo.html)
* [BS4 layoutit](https://www.layoutit.com/build)
> 常見總欄數是 12

> 69
## [BS4 格線系統](https://bootstrap.hexschool.com/docs/4.2/layout/grid/)原理
* 排版三劍客： .container、.row、.col 1~12
* .container
* .container 固定寬度
* .container-fluid 滿版
* .row
* no-gutters：不需要 gutters
* 名言 1：.col- 的外層只能是 .row
* 名言 2：.row 裡面只能是 .col-
* 名言 3：網頁內容與元件請放在 .col- 裡面
> 常見錯誤，在 .col 增加寬度
> 常見錯誤，在格線系統調整左右 margin 與 padding
> 常見觀念：可以加上下 的 margin 與 padding
> 常見觀念：最外層至少補一個 container
> 常見觀念：整體格線邏輯是一致
## BS4 格線斷點設計
* [文件位置](https://bootstrap.hexschool.com/docs/4.2/layout/grid/#grid-options)
* 簡報說明 > Live Demo 檢視(page 56)

> 卡斯伯常用版型 md、lg

## 格線系統與元件整合

* 格線與卡片設計
* [範例處](https://codepen.io/liao/pen/abvaXyy?editors=1100)

## BS4 SCSS 編譯
先講解 BS4 SCSS 編譯
* 下載 [BS4](https://github.com/twbs/bootstrap) 程式碼，修改變數
* 修改既有顏色變數
* 修改格線寬度

> 將 Demo 如何整合自己寫的 CSS

* 整合自己的 SCSS，載入 BS4 與自己的 SCSS
* bootstrap
* base
* layout
* component

## 編譯 [BS4 SCSS](https://github.com/twbs/bootstrap/tree/master/scss)
1. 步驟一：下載 GitHub 原始檔，抓取[最新版](https://github.com/twbs/bootstrap/tags)
2. 步驟二：拉出 SCSS 使用
3. 步驟三：整合到自己的 SCSS 流程教學

`導讀 BS4 結構：只拉出自己想要區塊的方法`

### JS CDN
* [最新版 JS](https://getbootstrap.com/docs/4.5/getting-started/introduction/)

## BS4 三劍客
1. 容器 (格線系統)
2. 元件 (卡片、按鈕)
3. 通用類別 (mb-3、mr-3、mb-mb-3)

## 助教檢視重點

* 名言 1：.col- 的外層只能是 .row
* 名言 2：.row 裡面只能是 .col-
* 名言 3：網頁內容與元件請放在 .col- 裡面
> 常見錯誤，在 .col 增加寬度
> 常見錯誤，在格線系統調整左右 margin 與 padding
> 常見觀念：可以加上下 的 margin 與 padding
> 常見觀念：最外層至少補一個 container
> 常見觀念：整體格線邏輯是一致

## 第六週主線任務

* <a href="https://rpg.hexschool.com/training/15/task?type=detail&id=159" target="_top">第六週 - 香水電商</a>

備註一：可觀看 [作業設計稿 - 線上預覽操作教學](https://hackmd.io/J7ajdobzTlyideAARTLz5Q?view)

備註二：線上網址圖片，這裡六角已經上傳到[圖片空間](https://github.com/hexschool/webLayoutTraining1st)，本次作業圖片都放在 **perfume-week6 資料夾**，網址如下，其他以此類推：
* https://hexschool.github.io/webLayoutTraining1st/week1/photo.png
* https://hexschool.github.io/webLayoutTraining1st/week1/line.svg

>補充：[如果不知道怎麼找到圖片路徑請點我](https://i.imgur.com/O7nQcFm.gif)

## 第六週主線提示

## 助教檢核點
### 使用者體驗
* .container、.container-fuild、.row、col 與斷點設計是否 ok
* 觀看 992、768、414px 解析度上的閱讀體驗是否 ok，若過窄或過寬，可以調整 col-md、lg、xl 的斷點來提升閱讀體驗
* 是否有顯示 x 軸

### CSS、SCSS 設計

* 命名習慣，盡量採語意設計，不要用 left、box、list1、list2、list3
* 嘗試小駝峰寫法： .menuList、.cardTitle
* 有用到 SCSS，@import 順序無誤，且有整合 BS4 SCSS

### 表頭
* logo 請採用圖片取代文字技巧
* logo 應該是 h1>a 的結構，而非 a 包 h1
* 可嘗試使用 [Navbar](https://bootstrap.hexschool.com/docs/4.2/components/navbar/) 來設計

### 共通問題
* 無善用 ul li 結構，例如選單與產品列表

### 首頁
* logo 請用背景取代文字的技巧來設計，而非直接放 img 圖片
* header 右側選單請用 ul li 結構
* 首頁 banner 可以用 [offset](https://bootstrap.hexschool.com/docs/4.0/layout/grid/#offsetting-columns) 推擠，這樣就只需要一個 .col 即可
* 首頁 banner 下方的產品列表可用 [no-gutter](https://bootstrap.hexschool.com/docs/4.0/layout/grid/#no-gutters) 來設計
* 首頁 banner 下方的產品列表請用 ul li 結構
* 首頁 Poppy & Barley 那裡的產品列表也請用 ul li 結構
* 「訂閱以獲取更多資訊！」區塊，可嘗試用 flex 主軸或交錯軸特性，再用 padding 推擠來設計

## 產品列表
* 產品列表頁面請用 ul li 結構
* 產品列表頁面在設計上通常都會設計一個 .row ，然後讓產品從上到下排列，因為 .row 本身有 flex-wrap 特性，所以不用設計多行的 .row
* 產品列表頁面的產品標題，在該頁網頁權重上，至少會是 h2~3 權重，不會是 h4 之後的低權重
* 產品列表頁面，可以都在圖片上加上連結，直接連到產品詳細介紹頁面，使用體驗會比較好

### 產品內頁切換
* [版本一](https://codepen.io/AliceChiang/pen/GRZmjed?editors=1000)是多數繳交作業的學生使用的方式：display 做切換
* [版本二](https://codepen.io/AliceChiang/pen/gOrWgOY)是不需用 display 做切換 更簡潔的結構
* 產品詳細介紹頁面的產品名稱會是標題標籤 (h2~3)

### 會員中心
* 表單內容可嘗試表單的格線系統設計，[文件處](https://bootstrap.hexschool.com/docs/4.2/components/forms/#horizontal-form)
* 會員中心與個人資料修改的文字還請使用標題標籤(h2~3)
* 左側的會員中心列表會是 ul li 結構
* 一個網頁不能出現兩個重複的 id 名稱，例如 address 出現了兩個，那 label 對應都會是第一個為主，還請重新命名此細節