tags: 前端開發,待整理

多頁式網頁設計

  • 頁面切換與 Layout 設計 (老師範例)
  • 如何與後端協作網頁版型
  • 藉由 Gulp 講解樣板語言 (template language)

Layout 觀念設計

  1. 什麼是 Layout ？

共通區塊，每個頁面都會出現的

  1. EJS 樣板語言介紹

layout.ejs 可以改一處，編譯完就會同步更新

  1. Gulp 整合 (講師備註：iterm2 重啟 sass rebuild)
  2. cacoo 畫圖 app 跟 dist 的差異

NPM 套件軍火庫,可以下載:
Bootstrap
jQuery
Gulp
…
安裝各種東西

Gulp

Gulp 前端任務工具
他是使用JavaScript去寫

  1. Gulp 環境安裝與部署
  2. EJS Layout 整合
  3. 學員常見問題

六角Gulp 範例所提供的功能

  1. 使用 EJS 做版型管理
  2. 支援 SCSS 編譯功能
  3. 儲存檔案時，瀏覽器會自動更新，不需持續按 F5
  4. 整合 GitHub 服務，能做到一鍵上傳網站空間

EJS+Layout

  • 樣板語言

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

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

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

./assets =assets

網頁建置流程

製作流程參考

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