--- 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)