###### tags: `前端開發,待整理`

# 多頁式網頁設計

* 頁面切換與 Layout 設計 ([老師範例](https://cacoo.com/diagrams/G4ML24CopC3t8VZX/CD531))
* 如何與後端協作網頁版型
* 藉由 Gulp 講解樣板語言 (template language)

## Layout 觀念設計
1. 什麼是 [Layout](https://cacoo.com/diagrams/fWdDuMY0WrfI0im7/CD531) ？
:::warning
共通區塊，每個頁面都會出現的
:::
3. EJS 樣板語言介紹
:::warning
layout.ejs 可以改一處，編譯完就會同步更新
:::
5. Gulp 整合 (講師備註：iterm2 重啟 sass rebuild)
6. cacoo 畫圖 app 跟 dist 的差異
:::info
NPM 套件軍火庫,可以下載:
Bootstrap
jQuery
Gulp
...
安裝各種東西
:::

## Gulp
:::warning
Gulp 前端任務工具
他是使用JavaScript去寫
:::
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 服務，能做到一鍵上傳網站空間

## EJS+Layout

* 樣板語言

* 右邊是搭配樣板語言才可以這樣寫
(傳統頁面中不要這樣寫)

* 如果想要有兩個以上layout.ejs→可以

./ 代表目前所在的目錄
../ 代表上一層目錄
../../ 上上層目錄

./assets =assets

## [網頁建置流程](https://cacoo.com/diagrams/VbC7q11GWcnik5BV/16E53)

* CSS Reset
* [myerweb](https://meyerweb.com/eric/tools/css/reset/)
* [normalize](https://necolas.github.io/normalize.css/)
* Base
* 連結顏色
* 標題設計

### <i class="fa fa-tag" aria-hidden="true"></i> 製作流程參考

1. 預覽設計稿全部頁面以及使用的元件
2. 找出共同 Layout (Header&Footer)
3. 頁面樣式統計，行高、字體、字級、主輔色、間距…等
4. 使用 gulp 專案架構，建立所需 folder & images
5. 修改 _variable.scss，重新編譯 bootstrap.scss
6. 開啟設計稿網格，分頁 & 分區塊撰寫 html 結構