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

## 學院佈告欄＋＋７
* [報到](https://rpg.hexschool.com/training/15/calendar) Code：`ObbphX8we2Px`
* <a href="https://rpg.hexschool.com/training/15/show?embedhm=6bfLdJQ6Rk6LFw586TBTww" target="_top">獎品登記填表(12/31截止)</a>
* [老師與助教激勵感言](https://hackmd.io/7o4i_VZmSRe95MMyCJeQKg?view)

# 第八週老師講義

## 本堂課重點

1. SCSS 結構再進化
2. 知道容器與模組的分離
3. 網頁架構的演進

## [網頁建置流程](https://cacoo.com/diagrams/VbC7q11GWcnik5BV/16E53)

* CSS Reset
* [myerweb](https://meyerweb.com/eric/tools/css/reset/)
* [normalize](https://necolas.github.io/normalize.css/)
* Base
* 連結顏色
* 標題設計
* utilities：
* [BS4 程式碼](https://github.com/twbs/bootstrap/tree/v4-dev/scss/utilities)
* [提供學員用的範例程式碼](https://codepen.io/liao/pen/xNyWZK)

## 格線系統： OOCSS 代表：容器與內容分離

* [960 grid](https://960.gs/demo.html)
* [BS4 layoutit](https://www.layoutit.com/build)
* 學員範例 [BS4 Grid](https://codepen.io/CHUPAIWANG/pen/OYgYWp)

## 結構設計討論，你是哪個等級？(v

* Level 1：頁面(page)， 有一頁就新增一頁
* Level 2：佈局([Layout](https://cacoo.com/diagrams/G4ML24CopC3t8VZX/CD531))， 會額外拉出來處理
* Level 3：工具([helper](https://bootstrap.hexschool.com/docs/4.2/utilities/sizing/)、util)，會將常用的 class 拉出來獨立使用
* Level 4：格線(grid) 會有自己的格線系統
* Level 5：模組(component) 會將常用的內容拉出來模組化

## 模組化概念 (v

* 內容會重複出現在其他區域兩個地方以上就需要，[範例連結](https://cacoo.com/diagrams/G4ML24CopC3t8VZX/E5EDC)。

## 結構編號([學員作業](https://www.notion.so/Sass-17a0ac1fc2bb450bb31e27c3a35ad6e0))

1. 佈局 layout、頁面 page (只出現一處)
2. 工具 utilities
3. 元件 component (出現兩處以上)
4. 容器 container、grid

## 模組框架介紹

* [BS4](https://bootstrap.hexschool.com/)、[Source](https://github.com/twbs/bootstrap/tree/v4-dev/scss)

## 新手到進階的投入過程 v

1. 沒有模組化概念(兩個 list 一樣、class 繼承無法拆離)
2. 會開始試著拆出來
3. 會開始使用 SMACSS 設計子模組

## 看別人網頁結構或學 CSS4 新技巧時，請看對方的 HTML CSS 組合，或判斷你在學什麼，例如說

`class="site-logo order-md-1 order-2 mr-auto d-none d-md-block"`

## 最終重點

* 需要練功的細節，如何將 Page 與 Layout 的內容都變成 component 與容器，[範例](https://github.com/Wcc723/F2E-PK/tree/master/source/stylesheets)
* 避免過度設計化
* 在觀看別人的框架時，觀看他的設計思維與切入重點
* OOCSS
* 結構與樣式分離 ( .btn .btn-lg)
* 容器與內容分離 (格線系統)
* [7+1 SCSS](https://gist.github.com/rveitch/84cea9650092119527bc)

## 設計模式講解

* [SMACSS](https://docs.google.com/presentation/d/12EBuvos1SIwUWzIsl8KCp9W96J6jbwXjKuGMKtG5PQc/edit?usp=sharing)
* 擴增子模組
* SCSS 結構
* [OOCSS](https://ithelp.ithome.com.tw/articles/10184862)
* 結構與樣式分離
* 容器與內容分離
* [BEM](https://ithelp.ithome.com.tw/articles/10160545)
* __ 區塊
* -- 修飾符號

## 常見 Sass 錯誤分享

1. 階層設計過多
1. [範例程式碼](https://jsbin.com/duquwaqepu/1/edit?html,css,output)
2. 變數設計過於聚焦 ([BS4 變數原始碼](https://github.com/twbs/bootstrap/blob/master/scss/_variables.scss))
1. [範例程式碼一](https://codepen.io/liao/pen/PvyEqy)
2. [範例程式碼二](https://codepen.io/rabby17/pen/qGbVMm?editors=0110)
3. [範例程式碼三](https://codepen.io/oack7426/pen/PvqjQg)

a.變數功能不要過度聚焦在某設定上，例如： `$bg-color-blue、$border-color-blue`
b.可以用在多處，至少三個地方再使用，附上負面教材： `$header-bgUrl`

## 第八週主線任務

* <a href="https://rpg.hexschool.com/training/15/task?type=detail&id=161" target="_top">第八週 - 大型線上服務</a>

### 提交等級 (提交任務作業時，請告知您是做哪個等級的作業)

* Lv1：做一頁 RWD 頁面
* Lv2：做三頁 RWD 頁面
* Lv3：全部頁面與效果都做

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

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

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

## 大型寵物訂房網站 icon

首頁
 - arrow_drop_down
 - arrow_right
 - local_phone
預約項目 Modal
 - house
 - wash
 - roofing
 - directions_walk
 - place
 - star
預約成功 Modal
 - pets
會員資料
 - arrow_drop_up
 - create
手機尺寸頁面
 - dehaze （漢堡選單）

## 大型旅館訂房網站 icon

首頁
 - language
 - location_on
 - date_range
 - person
 - keyboard_arrow_left
 - keyboard_arrow_right
 - star
 - keyboard_arrow_down
 - attach_money
Detail 頁面：
 - wifi
 - restaurant
 - personal_video
 - ac_unit
 - room_service
 - smoke_free
 - local_bar
 - kitchen
 - add
 - remove
Member 頁面：
 - hotel
 - check
 - add_circle
手機尺寸頁面：
 - dehaze
 - filter_list
 - sort
 - arrow_back
 - keyboard_arrow_down
 - close