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

# 🏅第五週老師講義

## 報到佈告欄
* [報到](https://rpg.hexschool.com/training/15/calendar) Code：`cXYX1DnAxO6m`

## input 表單標籤

* input 常見種類與屬性介紹
* form、input、submit 三劍客
* name 屬性為後端傳值、id 為 label 所用
* [w3schools](https://www.w3schools.com/html/html_forms.asp)
* [讓人驚艷的表單設計 Google](https://developers.google.com/web/fundamentals/design-and-ux/input/forms)
* 設計響應式時需注意的項目(date、tel)
* 屬性：value、readonly、disabled
* select option 在 mobile 的侷限

## css reset 差異
* [meyerweb CSS Reset](https://meyerweb.com/eric/tools/css/reset/)
* [normalize](https://necolas.github.io/normalize.css/)

## CSS Base
* CSS Reset ：清除瀏覽器預設樣式
* CSS Base：全站設定
* [Bootstrap Scss 結構](https://github.com/twbs/bootstrap/tree/master/scss)
> 用 BS4 的話，就不需要再次載入 CSS Reset
## 載入 BS4，展示一個 btn

* [教學連結](https://bootstrap.hexschool.com/docs/4.2/getting-started/introduction/)

## Utilities, flex, spacing
* [通用類別 Flex](https://bootstrap.hexschool.com/docs/4.2/utilities/flex)
* [通用類別 spacing](https://bootstrap.hexschool.com/docs/4.2/utilities/spacing/)

## BS4 元件介紹

* [按鈕 (Buttons)](https://bootstrap.hexschool.com/docs/4.2/components/buttons/)
* [分頁 (Pagination)](https://bootstrap.hexschool.com/docs/4.2/components/pagination/)

## 清除 BS4 ul li 樣式
* ul 移除逗點
* 清除列表實心圓內容 BS4：`list-unstyled`
## Bootstrap 表單 + Btn
* [表單 (Forms)](https://bootstrap.hexschool.com/docs/4.2/components/forms/)
## Modal
* [互動視窗 (Modal)](https://bootstrap.hexschool.com/docs/4.2/components/modal/)

## 手寫 SCSS 結構參考

@import "variable";// 變數  
@import "reset";  // reset.css  
@import "base"; // 全站設定
@import "util"; // 工具類 class，.mb-1、.pr-3

// layout 共同框架,第一層
@import "layout/header";
@import "layout/footer";
@import "layout/menu";
@import "layout/aisde";

// 頁面設計
@import "pages/index";     
@import "pages/cart";     

## 第五週主線任務

* <a href="https://rpg.hexschool.com/training/15/task?type=detail&id=158" target="_top">第五週 - 後台版型</a>

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

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

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

## ICON 載入教學

* 請觀看卡斯伯老師在上一梯的影片介紹，了解這版型的 ICON 要如何透過 CSS 載入，時間點為 [38 分 00 秒](https://courses.hexschool.com/courses/202011/lectures/23646411)

## 作業等級表
1. LV1：做一頁版型
2. LV2：做兩頁以上，並有設計 Modal 功能
3. LV3：全部頁面都做