---

title: 2021直播切版班-22組 | 第五週小組任務
tags: 2021直播切版班, 六角
date: 20210702
image:

---
# ✏第五週小組任務
<!-- [TOC] -->
### 參與人員
| 參與成員暱稱 | Slack ID |
| -------------- | ----------- |
| Frank Waffle | U01KLBXJPSM |
| Kent | U021X7R4AQM |
| Kin Hei Shing | U01J0TNJ6GY |
| sans-ge | U021AC7VDFU |
| Sheng Kai | U02199SSZCM |
| 童筱涵 Hsiao-Han Tung | U021F83B07N |
| 粘勝凱 | U026RCXQ456 |
| 阿瓜 | U021KN259UP |
| 點子數位 | U025S7QNWCS |
| youting | U015RE12CMU |

---

這週主要是讓各位同學熟悉 RWD 操作，
建議使用 ZOOM 來討論，當然也可用 Slack，組員沒麥克風也可以一個人分享畫面，其他組員用文字討論也可。

---

### 任務一：請每個小組討論成員，試著載入 BS5 ，並作出 [modal 效果](https://bootstrap5.hexschool.com/docs/5.0/components/modal/#scrolling-long-content)

> #### 互動視窗 (Modal)
> 使用 Bootstrap JavaScript 的互動視窗插件來增加一個對話視窗，用於用戶提示、燈箱或完整的自訂內容。
>

* 請使用 codepen 來練習，回報也可用 codepen
* 如果有成員想用 GitHub Pages 來放到自己的環境練習也可以

#### 🍎答案討論簡述
> [作業連結](https://codepen.io/)
[name= xxx ][color=green]

> [作業連結](https://codepen.io/)
[name= xxx ][color=gold]

> [作業連結](https://codepen.io/)
> [name=xxx ][color=orange]

> [作業連結](https://codepen.io/)
> 巴拉巴拉
> [name=xxx][color=hotpink]

> [作業連結](https://codepen.io/)
> 巴拉巴拉
> [name=xxx][color=orangered]

> [作業連結](https://codepen.io/)
> 巴拉巴拉
> [name=xxx][color=blue]

> [作業連結](https://codepen.io/)
> 巴拉巴拉
> [name=xxx][color=black]

---

### 任務二：討論 HTML 裡的表格標籤(table、th、tr、td)的用法，請試著做出[設計稿](https://xd.adobe.com/view/636097e2-bd56-4710-9483-0f40e0063a9a-3633/)裡面的表格設計，並提供 codepen 來檢視

#### 🍎答案討論簡述

> [作業連結](https://codepen.io/)
[name= xxx ][color=green]

> [作業連結](https://codepen.io/)
[name= xxx ][color=gold]

> [作業連結](https://codepen.io/)
> [name=xxx ][color=orange]

> [作業連結](https://codepen.io/)
> 巴拉巴拉
> [name=xxx][color=hotpink]

> [作業連結](https://codepen.io/)
> 巴拉巴拉
> [name=xxx][color=orangered]

> [作業連結](https://codepen.io/)
> 巴拉巴拉
> [name=xxx][color=blue]

> [作業連結](https://codepen.io/)
> 巴拉巴拉
> [name=xxx][color=black]

---

### 任務三：討論第五週版型「後台表單設計」 該怎麼做

一個人能力有限，八個人團結力量大，彼此討論該版型如何攻略，才能發揮團隊最強力量，攻破最終 BOSS

>* <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
>
>LV1：做一頁版型
>LV2：做兩頁以上，並有設計 Modal 功能
>LV3：全部頁面都做
>

#### 🍎答案討論簡述

> [作業連結](https://codepen.io/)
[name= xxx ][color=green]

> [作業連結](https://codepen.io/)
[name= xxx ][color=gold]

> [作業連結](https://codepen.io/)
> [name=xxx ][color=orange]

> [作業連結](https://codepen.io/)
> 巴拉巴拉
> [name=xxx][color=hotpink]

> [作業連結](https://codepen.io/)
> 巴拉巴拉
> [name=xxx][color=orangered]

> [作業連結](https://codepen.io/)
> 巴拉巴拉
> [name=xxx][color=blue]

> [作業連結](https://codepen.io/)
> 巴拉巴拉
> [name=xxx][color=black]

---

## 小組討論截圖
:::spoiler **slack 討論截圖 > 收合**

**設計稿作圖分享**
---
**XD 設計搞儲存整頁**
- 點左上角標題出去之後
- 儲存圖片即可

:::

---

## [第五週回報區](https://hackmd.io/@hexschool/SJhMRhyJY)