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

# 第四週 - 多頁式網頁設計
* 記得錄影
* **主線任務作業突破 500 份！ 🔥🔥🔥**
* 頁面切換與 Layout 設計 ([老師範例](https://cacoo.com/diagrams/G4ML24CopC3t8VZX/CD531))
* 如何與後端協作網頁版型
* 藉由 Gulp 講解樣板語言 (template language)
* 每日助教服務下週一釋出
* 公布獎品，9/14 作業截止！
## Layout 觀念設計
1. 什麼是 [Layout](https://cacoo.com/diagrams/fWdDuMY0WrfI0im7/CD531) ？
2. EJS 樣板語言介紹
3. Gulp 整合 (講師備註：iterm2 重啟 sass rebuild)
4. cacoo 畫圖 app 跟 dist 的差異

## 額外紅利服務
* 下週一開放每日助教服務，讓大家問到飽！

## [Gulp 教學](https://hackmd.io/yWpLNMPRT2yvIR4Zq_idGw?both)
1. [Gulp 環境安裝與部署](https://courses.hexschool.com/courses/20201122/lectures/40549182)
2. [EJS Layout 整合](https://courses.hexschool.com/courses/20201122/lectures/40549174)
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/20201122/lectures/40549180)
第四週需提交 [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 main

### 提交到部署環境(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://github.com/chiayutsai/week4_glasses/tree/main/app/scss)、[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/30/task?type=detail&id=302" target="_top">第四週 - 眼鏡形象網站</a>、<a href="https://xd.adobe.com/view/5b20cbc4-5c64-4b67-814e-633b078a8cd4-0e73/grid/" target="_top">設計稿</a>、[圖片下載](https://github.com/hexschool/2022-web-layout-training)

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