# 第 19 組 第三週小組任務

###### tags: `六角`,`網頁切版直播班-2021夏季`,`第二週小組任務`

:::info
### 小組討論
* 會議時間：2021-07-18 15:00~16:10
* 線上討論畫面：[Zoom 線上會議畫面](https://i.imgur.com/wP0bGvO.jpg)、[Slack 公告畫面](https://i.imgur.com/fhKNR6q.jpg)、[Slack 討論畫面](https://i.imgur.com/Yag6aQc.jpg)
* 參與人員：共 6 名。
:::spoiler **參與人員名單**

| Slack ID | 暱稱 |
| -------- | -------- |
| U022QDUAURL | Chiao Chang |
| U024XBNJBM2 | Tansy |
| U022GB5RMB9 | SihLe Huang |
| U022QBG9ZGE | Joy Cheng |
| U0217NFE007 | 大衛 |
| UTH5L4022 | Sylvia-H |

<br>
:::

---

## 問題集

### 任務一：請組員們在線上討論，不看老師範例程式碼，從無到有做出 [no.8](https://drive.google.com/file/d/1r8z8i3LzzEKIzDBlztkpFmuXK6EDyMx3/view?usp=sharing) 題目，並提供 codepen 檢視，[範例八程式碼介面下載](https://drive.google.com/file/d/1r8z8i3LzzEKIzDBlztkpFmuXK6EDyMx3/view?usp=sharing)


<br>

| 暱稱 | 版面規劃圖 or Codepen |
| ------ | ------ |
| Chiao | [codepen](https://codepen.io/azulcasper/pen/xxddWKB) |
| SihLe Huang | [版面規劃](https://upload.cc/i1/2021/07/17/JnTmx9.png) [codepen](https://codepen.io/bugbug777/pen/MWmmGNj?editors=1100)|
| Sylvia-H | [版面規劃](https://i.imgur.com/lMjr2r7.jpg) [codepen](https://codepen.io/Cosmosheart/pen/WNjjJNY?editors=1100) |
| Joy Cheng | [版面規劃](https://i.imgur.com/xAvutHe.png) [codepen](https://codepen.io/joycheng5432/pen/ZEKKNEB?editors=1100) |
|Tansy | [codepan](https://codepen.io/subarashii-huch09/pen/ExmmBXJ) |
|大衛 | [codepen](https://codepen.io/exnsrpjc/pen/vYmmodd) |

<br>
<br>

### 任務二：IT 邦偵探遊戲

請找出 [IT 邦幫忙的網站](https://ithelp.ithome.com.tw/)，每個頁面的響應式設計的資訊：
* 這網站總共有幾個斷點？
* 請描述這網站在 iPad、Mobile 上做了哪些巧思？請提供五處，並附圖，例如：
* 有元素在 mobile 時被隱藏
* 在 200 像素以下時會顯示有漢堡選單
* 某某 class 元素在 iPad 會變成滿版

==小組討論過程：==

| 暱稱 | PC 頁面巧思 | iPad 頁面巧思 | Mobile 頁面巧思 |
| --- | --- | --- | --- |
| Sylvia-H | [斷點一：1160px~](https://i.imgur.com/lqD9mYn.jpg) <br> [斷點二：1110px~1159px](https://i.imgur.com/688VkNo.jpg)| [斷點一：992px~1109px](https://i.imgur.com/hMuz2Pc.jpg) <br>[斷點二：856px~992px](https://i.imgur.com/O45vfIy.jpg) <br>[斷點三：~767px](https://i.imgur.com/74ieis6.jpg)| [手機版網頁](https://i.imgur.com/zd4V5xi.jpg) |
| Chiao | [截圖](https://i.imgur.com/uWhpitV.jpg) | [截圖] | [截圖] |
| SihLe Huang | [PC](https://upload.cc/i1/2021/07/18/KwTShI.png)<br />斷點：992px | [pad](https://upload.cc/i1/2021/07/18/RGTqNJ.png) | [mobile](https://upload.cc/i1/2021/07/18/1bu4B0.png) |
| Tansy | [截圖](https://imgur.com/a/R41j5fR) | [截圖] | [截圖] |
| 大衛 | [PC](https://i.imgur.com/5yIJONY.png) | [截圖] | [mobile](https://i.imgur.com/YMrftpb.png) |
| Joy Cheng | [截圖] | [截圖] |[手機版斷點:600px](https://i.imgur.com/MCNEfZy.png)|

<br>

==IT 邦幫忙 網站共有幾個斷點？==
若用 @media 去切的話，斷點可能會非常多個
經討論後，認為可用有影響到版型畫面的關鍵斷點去切分，分為四個主要斷點：
1. 1160px~以上
2. 992px~1159px
3. 768px~992px
4. ~767px

<br>

==IT 邦幫忙 網站響應式設計巧思：==
1. 在使用行動裝置瀏覽網頁的時候，網站會自動導引進入行動裝置專用的網頁，在網址的最後面會加上"m/"，表示進入的網址為行動裝置專用網站網頁，省去判斷諸多裝置螢幕大小不一的麻煩。

2. PC 版網頁中，以 768px 為分界：768px 以上navbar 有六個選項；768px 以下navbar 簡化為兩個選項。

| 768px 以上 | 768px 以下 |
|---|---|
|  |  |

3. 在斷點992px以下的裝置，將不會顯示pc版右側的廣告欄位，在有限的螢幕大小下，放入相對重要的訊息。

| 992px 以上 | 992px 以下 |
|---|---|
|  |  |

4.在斷點660px以下的裝置，header_logo的寬度會從14%改為100%
| 660px 以上 | 660px 下 |
|---|---|
|  |  |

5.手機版頁面在「技術問答」欄目中，將「Like」、「回答」、「瀏覽」等計數資訊省略掉，將視覺中心留給問題本身。
| PC 版網頁 | 手機版網頁 |
|---|---|
|  |  |

<br>
<br>

### 任務三：討論第三週版型該怎麼做

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

[第三週設計稿 Adeobe XD](https://xd.adobe.com/view/d3d1119a-affd-4f48-8188-f070932224af-8682/screen/9030f53b-bb49-44c3-8d71-9901ad0d5206/specs/)

| 暱稱 | 認領頁面 | 設計稿 or 版面規劃 |
| ------ | ------ | ------- |
| Chiao | [首頁初排](https://i.imgur.com/ObEZ6cb.png) | |
|Joy Cheng| 第6頁| [門市據點(沒有地圖)](https://joy-port.github.io/week3/)|
| Sylvia-H | 第 9 頁 | [Page 9](https://sylvia-h.github.io/Hex_LayoutProject/week3/blog.html) / [html](https://github.com/sylvia-H/Hex_LayoutProject/blob/master/app/week4/blog.html) / [scss](https://github.com/sylvia-H/Hex_LayoutProject/blob/master/app/assets/style/week3/page/_blog.scss) |
| SihLe Huang | 第 4 頁 | [layout](https://upload.cc/i1/2021/07/22/dyCnDH.png) / [Page4](https://upload.cc/i1/2021/07/22/OpKiaN.png) |
| Tansy | 第5頁 |
|大衛| 第10頁| |

<br>
<br>

### 任務四：觀看 Gulp 影音課程(建議準備 1.5~2 小時，再來挑戰此任務)

請觀看第[第四週透過 Gulp 部署網站流程](https://courses.hexschool.com/courses/2020112/lectures/33575267)章節後，順利完成各影片章節內容。
> 若組員操作有問題，還請 tag @穎旻 助教協助~