---
# System prepended metadata

title: 第三堂：RWD 切版任務
tags: [2021 程式體驗營]

---

---
tags: 2021 程式體驗營
---

# 第三堂：RWD 切版任務
本門直播課將於 6/9(三) 20:00 開始！，進入[直播間](https://rpg.hexschool.com/training/22/show?embedhm=Uuk0KDvYRNeYgL7b24Pbqw)。


## 本堂教學重點
* [香水電商](https://xd.adobe.com/view/dc5ebe5c-3e56-4981-a010-158b5ded0e72-890d/)切版任務講解
* RWD 重點教學
    * container 容器概念講解
    * display 使用時機
    * flex 首頁產品反轉
    * Flex 佈局運用([PC](https://xd.adobe.com/view/dc5ebe5c-3e56-4981-a010-158b5ded0e72-890d/screen/0d43336d-a74a-44c2-9a89-183af35b25da/specs/)、[Mobile](https://xd.adobe.com/view/dc5ebe5c-3e56-4981-a010-158b5ded0e72-890d/screen/6e868c2c-5eb7-4464-84d4-15d333631f91/specs/))、[Flex 測試]([https://](https://codepen.io/peiqun/pen/WYzzYX))

## 補充設計

* [首頁滿版 Banner 設計](https://youtu.be/1EYUsAlVqY0)，後半段有提及
* conatinaer 設計，左右 padding 15px

## 補充章節：漢堡選單下拉功能


同學你好，為了讓您有機會做出香水電商的漢堡選單下拉，老師提供攻略資源給您參考

### 攻略一： jQ 資源

我們這關的作業，有一處需要用 jQuery，是表頭選單開關， 
需學習 jQuery，這裡也附上我的公開教學影片給你參考。

* [洧杰老師兩小時影音課程分享](https://www.youtube.com/watch?v=GVWOIP-HX70)


#### jQuery 範例程式碼

這裡老師請助教們寫了份範例程式碼給大家參考，如下


####  jQuery 整合上面兩個範例的檔案
假如你想要實體網頁檔案的整合版本，你可以下載下方連結：
* [GitHub 下載處](https://github.com/gonsakon/jQSample) (點選右側按鈕的 Clone or download 進行下載)

```
0. head 裡的兩個 jQ 都要載入到
1. 漢堡選單跟 FAQ 效果我整合到 all.js
2. 如果有變更 CSS 名稱，jQ 選擇器請自行更改
```

## 漢堡選單收闔範例說明
* [漢堡選單收闔範例程式碼](https://codepen.io/TzuHui/pen/WNQRjXd)

#### 選單收闔效果
收闔的效果是透過切換 active 這個 class 來達成。
在 CSS 第 33 行 .dropdown 設定 max-height: 0，代表選單預設為闔
CSS 第 38 行的 .dropdown.active 也就是當 .dropdown 加上 .active 時，就讓 max-height 改為 200px，選單則會展開，變成開啟的狀態。

#### 選單定位
.dropdown 選單定位是利用 position: absolute 相對定位於 .header
top: 100% 是讓選單的位置對齊在 .header 的最下方。


## RWD 使用者體驗影音觀念補充

* [動線設計：並非所有內容都要全部塞到網頁內容](https://courses.hexschool.com/courses/670051/lectures/11953526)
* [斷點時機：設計多欄式佈局的必要觀念](https://courses.hexschool.com/courses/670051/lectures/11953528)
* [點擊範圍：設計讓人好點選的元素](https://courses.hexschool.com/courses/670051/lectures/11953530)
* [少即是多：避免資訊量爆炸](https://courses.hexschool.com/courses/670051/lectures/11953532)
* [斷點元素：只有手機才會顯示的功能與Layout切換](https://courses.hexschool.com/courses/670051/lectures/11953535)






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

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

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





### 抽獎表單

1. [抽獎連結](https://forms.gle/7nGE1nN9XkNTWUez8)


