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

# 第五週 - 後台表單設計

* [報到](https://rpg.hexschool.com/training/21/calendar) Code：`JXPOQxjjVMnu`
* 公布部分完課率獎品
* 課程加碼：8/27(五) - 主題下週公布
<!-- https://courses.hexschool.com/courses/enrolled/951862 -->
* 第一堂下課前觀看六角後台
* [Gui Ting Liu 志工整理洧杰老師批改筆記](https://hackmd.io/48BTVPQVR_y4jq2E0PFHXQ?view)

## 截止繳交作業時間點

* 8/20 第八週上課結束
* 8/27(五) 彩蛋課程 下週才會公布
* 8/29(日) 繳交截止日
* 9/3(五) 版型發表會

## 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)
> 用 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)
2. [沈依蓉](https://github.com/lily-oa/Lession3-glassesStore)
3. [咖哩](https://github.com/hungcurry/week03/tree/main/app/assets)
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.0/getting-started/introduction/)

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

## BS5 元件介紹

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

## [清除 BS5 ul li 樣式](https://bootstrap5.hexschool.com/docs/5.0/content/typography/#unstyled)
* ul 移除逗點
* 清除列表實心圓內容 BS5：`list-unstyled`
## Bootstrap 表單 + util + Btn
* [表單 (Forms)](https://bootstrap5.hexschool.com/docs/5.0/forms/form-control/)
## Modal
* [互動視窗 (Modal)](https://bootstrap5.hexschool.com/docs/5.0/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/21/task?type=detail&id=207" 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)

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