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

# 第四週 - 多頁式網頁設計
* [報到](https://rpg.hexschool.com/training/21/calendar) Code：`oPxyHN7KWYY9`
* 頁面切換與 Layout 設計 ([老師範例](https://cacoo.com/diagrams/G4ML24CopC3t8VZX/CD531))
* 如何與後端協作網頁版型
* 藉由 Gulp 講解樣板語言 (template language)
## Layout 觀念設計
1. 什麼是 [Layout](https://cacoo.com/diagrams/fWdDuMY0WrfI0im7/CD531) ？
2. EJS 樣板語言介紹
3. Gulp 整合 (講師備註：iterm2 重啟 sass rebuild)
4. cacoo 畫圖 app 跟 dist 的差異

## 額外紅利服務
* 下週一開放每日助教服務，讓大家問到飽！
* Vue 作品實戰班 - 作品發表會，明天 7/24 下午兩點，[ZOOM](https://us06web.zoom.us/j/82450147506?pwd=dUd5a01oanFPOEZoN0tlK09WZHl1dz09) 網址，密碼：716590

目前主題包含：旅遊、動畫周邊、金飾、售票、烘培、健身、教育

## [Gulp 教學](https://hackmd.io/yWpLNMPRT2yvIR4Zq_idGw?both)
1. [Gulp 環境安裝與部署](https://courses.hexschool.com/courses/2020112/lectures/33575297)
2. [EJS Layout 整合](https://courses.hexschool.com/courses/2020112/lectures/33575267)
3. [學員常見問題](https://hackmd.io/qy3I0vRNRRCoC3kmj3o8AQ)

## [Gulp 範例](https://github.com/hexschool/web-layout-training-gulp)所提供的功能
1. 使用 EJS 做版型管理
2. 支援 SCSS 編譯功能
3. 儲存檔案時，瀏覽器會自動更新，不需持續按 F5
4. 整合 GitHub 服務，能做到一鍵上傳網站空間

## [提交作業流程](https://courses.hexschool.com/courses/2020112/lectures/33575294)
第四週需提交 [GitHub Repo](https://github.com/gonsakon/gulpDemo)、[GitHub Pages Demo](https://gonsakon.github.io/gulpDemo/) 兩個網址給助教

### 提交開發環境(master、main)

git add .
git commit -m 'update'
git push -u origin master

### 提交到部署環境(gh-pages)

gulp build
gulp deploy

## 常見問題
* 關閉電腦後，該如何更新與上傳？

## SCSS 教學
* [簡報](https://docs.google.com/presentation/d/11-HFPxkmVj5b6WP50zkKB_GtccvynUu3GaDeALaLpd0/edit?usp=sharing)
* 環境教學 (Live Sass(工作區)、Gulp)
* [Live Sass Compiler 文件教學](https://ithelp.ithome.com.tw/m/articles/10202661)
* 變數設計
* import 檔案切分
* import 拆分規劃

## SCSS 影音教學補充

* [prepos 軟體安裝教學](https://courses.hexschool.com/courses/670051/lectures/11953744)
* [SCSS 寫法](https://courses.hexschool.com/courses/670051/lectures/11953745)
* [import 檔案拆分](https://courses.hexschool.com/courses/1eebd3/lectures/11953747)
* [mixin 工具篇](https://courses.hexschool.com/courses/1eebd3/lectures/11953748)
* [載具篇 - @mixin+@content 設計響應式設計超方便](https://courses.hexschool.com/courses/1eebd3/lectures/11953749)
* [結構篇 - 如何循序漸進優化網頁架構](https://courses.hexschool.com/courses/1eebd3/lectures/11953750)

## SCSS 結構參考

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

## 老師 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/)

## 第四週主線任務

* <a href="https://rpg.hexschool.com/training/21/task?type=detail&id=206" target="_top">第四週 - 眼鏡形象網站</a>

備註一：可觀看 [作業設計稿 - 線上預覽操作教學](https://hackmd.io/J7ajdobzTlyideAARTLz5Q?view)

備註二：線上網址圖片，這裡六角已經上傳到[圖片空間](https://github.com/hexschool/webLayoutTraining1st)，本次作業圖片都放在 **week3、4 資料夾**，網址如下，其他以此類推：
* https://hexschool.github.io/webLayoutTraining1st/week1/photo.png
* https://hexschool.github.io/webLayoutTraining1st/week1/line.svg
*
>補充：[如果不知道怎麼找到圖片路徑請點我](https://i.imgur.com/O7nQcFm.gif)

## 作業等級表
以下等級，都必須透過 Gulp 上傳到 GitHub Pages
1. LV1：任選二頁，只需做 PC 版
2. LV2：任選二頁需含RWD
3. LV3：做三頁以上的 RWD
4. LV4：所有頁面都有設計