---
tags: 網頁切版直播班 - 2022 夏季班
---
# 第四週小組任務 - 切版班 12 組
> 討論日期及時間 > 2022/07/30 20:30-22:00
>
**組員參與名單(9/10)：**
* christina#6185
* yuyu#6310
* hungya#0773
* 維新#6472
* yichih#6223
* Wei-Ting#7691
* Winnie Wu#5468
* 此暱稱已被使用#6514
* DoraHuang#8223

## 問題

### 任務一：請觀看 Gulp 影片，並整合眼鏡形象官網
請觀看第[第四週透過 Gulp 部署網站流程](https://courses.hexschool.com/courses/20201122/lectures/40549174)章節後，將眼鏡形象官網透過 Layout+EJS 來整合，並在回報中提供參與討論組員的 Git Repo 與 GitHub Pages 網址

答：

| name | Git Repo | GitHub Pages |
| -------- | -------- | -------- |
| yuyu#6310 | [連結 ](https://github.com/yuyu0905/w3-glasses-web/tree/main) | [連結 ](https://yuyu0905.github.io/w3-glasses-web/) |
| christina#6185 | [連結](https://github.com/ChrisC0210/week3) | [連結](https://chrisc0210.github.io/week3/) |

> [Git & GitHub 教學手冊](https://w3c.hexschool.com/git/cfdbd310)


---

### 任務二：觀看 SCSS 結構，討論組員彼此間該如何逐步規劃 SCSS
* [2014 MOPCON](https://github.com/gonsakon/mopcon2014/blob/master/sass/all.sass)
* [2018 The F2E](https://github.com/gonsakon/theF2EPK/blob/master/source/sass/all.sass)
* [Bootstrap](https://github.com/twbs/bootstrap/tree/master/scss)
> ### 上一梯學長姐
* Vicky 學姐：[GitHub Repo](https://github.com/peggyted0129/HexSchoolTraining/tree/main/week4gulp/scss)、[GitHub Pages](https://peggyted0129.github.io/HexSchoolTraining/week4gulp/index.html)
* carrie 學姐：[GitHub Repo](https://github.com/echocarriet/layoutWeek4)、[GitHub Pages](https://echocarriet.github.io/layoutWeek4/index.html)
* chiayutsai 學姐：[GitHub Repo](https://chiayutsai.github.io/week4_glasses/)、[GitHub Pages](https://github.com/chiayutsai/week4_glasses)
* 東京自耕農學長(poscss)：[GitHub Repo](https://github.com/overactive1988/lesson3_homework/tree/master/src/css/css/_include)、[GitHub Pages](https://overactive1988.github.io/HexSchool_webslicinglesson2020/week03/)

答：

> ### week 4 scss 作業審核標準

@import "variable";// 變數  
@import "reset";  // reset.css  
@import "layout"; // 共同框架,第一層
@import "index";     
@import "page1";     

> [Sass 7-1 Pattern](https://ithelp.ithome.com.tw/articles/10275111)


---

### 延伸討論：地圖 （p7 門市據點）
1. 地圖嵌入
[Google Map 教學 – 網站嵌入 Google 地圖及我的地圖操作方法](https://www.design-hu.com.tw/wordpress/wordpress-tools/google-maps-embed-to-website.html)

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3614.4622750455155!2d121.52590635055697!3d25.052316383885092!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442a9665c221fab%3A0xe3c1d49711f01596!2zMTA0OTHlj7DljJfluILkuK3lsbHljYDljZfkuqzmnbHot6_kuozmrrUx6Jmf!5e0!3m2!1szh-TW!2stw!4v1659189027686!5m2!1szh-TW!2stw" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

2. 直接複製圖片


---

> 謝謝今天有參與的同學們，課程完成一半了！ :100:
<iframe src="https://giphy.com/embed/3o7TKGMZHi73yzCumQ" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/nightcap-poptv-pop-tv-3o7TKGMZHi73yzCumQ"></a></p>