---
tags: 網頁切版直播班 - 2022 夏季班
---

# 第五週 - 後台表單設計

* 記得錄影
* 中場休息觀看六角後台
* [歷屆批改筆記](https://hackmd.io/48BTVPQVR_y4jq2E0PFHXQ?view)

## 截止繳交作業時間點

* 9/14(三) 23:59:59 作業截止繳交
* 9/16(三) 申請獎勵截止
* **9/18(日) 作品專題成果發表會**
* 9/19~9/23 廠商媒合

## input 表單標籤

* input 常見種類與屬性介紹
* form、input、submit 三劍客
* name 屬性為後端傳值、id 為 label 所用
* [w3schools](https://www.w3schools.com/html/html_forms.asp)
* [MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input)
* 設計響應式時需注意的項目(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)
> 用 BS5 的話，就不需要再次載入 CSS Reset

## base Code 參考([BS5 reboot.scss 參考](https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss))

###
1. [Gill](https://github.com/gill74123/week3/tree/main/app)
4. [Jerry Yen](https://github.com/jerry160726/Week-3---QA/blob/main/sass/all.scss)
5. [Joseph Tang ](https://github.com/jie810731/image-webside/blob/master/scss/_base.scss)

## 載入 BS5，展示一個 btn

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

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

## BS5 元件介紹

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

## [清除 BS5 ul li 樣式](https://bootstrap5.hexschool.com/docs/5.1/content/typography/#unstyled)
* ul 移除逗點
* 清除列表實心圓內容 BS5：`list-unstyled`
## Bootstrap 表單 + util + Btn
* [表單 (Forms)](https://bootstrap5.hexschool.com/docs/5.1/forms/form-control/)
## Modal
* [互動視窗 (Modal)](https://bootstrap5.hexschool.com/docs/5.1/components/modal/#live-demo)

## 手寫 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";     

## 第五週開發方向
1. 開始嘗試用 BS5 的 util 搭配自己手寫
2. 純手寫，並嘗試自己做 base+util

## 第五週主線任務

* <a href="https://rpg.hexschool.com/training/30/task?type=detail&id=303" target="_top">第五週 - 後台版型</a>、<a href="https://xd.adobe.com/view/ea9c3e28-6d25-42cb-b6a5-1571c1707f05-bfcf/grid" target="_top">設計稿</a>、[圖片下載](https://github.com/hexschool/2022-web-layout-training)

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