---
tags: 網頁切版直播班 - 2021 夏季班
---
## 學院佈告欄
* [報到](https://rpg.hexschool.com/training/21/calendar) Code：`6ElGLkwY9M3o`

## 截止繳交作業時間點

* 8/20(五) 第八週上課結束
* 8/27(五) 彩蛋課程
* 9/3(五) 版型發表會
* 9/5(日) 作業繳交截止日
* 9/5(日) <a href="https://rpg.hexschool.com/task/211/show" target="_top">心得牆任務截止日</a>
* 9/5(日) [三人成團](https://www.notion.so/JS-5167d3cff3284e0389ca37b9b9ca0e39)截止日
* 9/5(日) <a href="https://rpg.hexschool.com/training/21/show?embedhm=x4h4NYH8QSOWgXcnE_T_BQ" target="_top">獎品登記填表</a>
* 9/6 (一) 最後一次發送三人酷朋 Email
* 9/7 (二) 三人成團付款截止日

# 第八週老師講義

## 本堂課重點

1. SCSS 結構再進化
2. 知道容器與模組的分離
3. 網頁架構的演進
4. [Code Review 流程](https://youtu.be/auQ2KHx30Rk)

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

* CSS Reset
* [myerweb](https://meyerweb.com/eric/tools/css/reset/)
* [normalize](https://necolas.github.io/normalize.css/)
* Base
* 連結顏色
* 標題設計

## 設計模式講解

* [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)
* __ 區塊
* -- 修飾符號

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

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

## 範例網站
1. [Netflix](https://www.netflix.com/tw/)
2. [館長電商](https://notorious-2019.com/Default.aspx)
3. [APPLE Mac](https://www.apple.com/tw/imac-24/why-mac/)

## 模組化概念 (v

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

## 結構編號([學員作業](https://hackmd.io/48BTVPQVR_y4jq2E0PFHXQ?view))

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

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

1. 沒有模組化概念(兩個 list 一樣、class 繼承無法拆離)
2. 會開始試著拆出來
3. 會開始建立 component

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

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

1. [Gui Ting Liu 志工整理洧杰老師批改筆記](https://hackmd.io/48BTVPQVR_y4jq2E0PFHXQ?view)

## 最終重點

* 需要練功的細節，如何將 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)

## 第八週主線任務

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

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

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

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

備註二：線上網址圖片，這裡六角已經上傳到[圖片空間](https://github.com/hexschool/webLayoutTraining1st)，本次作業圖片都放在 **petpet-week8、week8、yoga-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