# 第四週 本頁連結:https://hackmd.io/b_lVK8yQRQKpbYWZK6XNkw?view ## 課前說明 - 專題班週日活動 - 主線作業繳交獎勵 ## 本週課程 - 記得錄影 - [GGV 影音課程](https://courses.hexschool.com/courses/2020112211/lectures/53654004) 大家看了沒? - 傳統網頁多頁式怎麼做 - 複製貼上 - 頁面切換與 Layout 設計 ([老師範例](https://www.figma.com/design/ZQn0etbtIsCrmkHqFeeLKo/%E5%88%87%E7%89%88%E7%9B%B4%E6%92%AD%E7%8F%AD---%E7%9B%B4%E6%92%AD%E6%95%99%E6%9D%90?node-id=176-2&t=5xBOVB521OStGqL0-0)) - 如何與後端協作網頁版型 - 藉由 Vite 講解樣板語言 - 每日助教服務下週一釋出 - 7/29 ~ 9/6 - 公布獎品,9/8(日) 作業截止! # 一、Layout 觀念設計 1. 什麼是 [Layout](https://www.figma.com/design/ZQn0etbtIsCrmkHqFeeLKo/%E5%88%87%E7%89%88%E7%9B%B4%E6%92%AD%E7%8F%AD---%E7%9B%B4%E6%92%AD%E6%95%99%E6%9D%90?node-id=176-2&t=5xBOVB521OStGqL0-0) ? 2. EJS 樣板語言介紹 3. Vite 整合 4. 圖解 app 跟 dist 的差異 ## 額外紅利服務 - 下週一開放每日助教服務,讓大家問到飽! # 二、Vite 環境部署教學 ## [Vite 範例](https://hackmd.io/V3v9hW9dTlOwFvVA6ycfLg?view)所提供的功能 1. 包含 NPM 套件管理 - 套件管理 2. 使用 EJS 做版型管理 3. 支援 SCSS 編譯功能 4. 儲存檔案時,瀏覽器會自動更新,不需持續按 F5 5. 整合 GitHub 服務,能做到一鍵上傳網站空間 ## Vite 環境安裝 1. [Git 安裝流程](https://courses.hexschool.com/courses/2020112211/lectures/53654004) 2. 安裝 Node ## [Vite 環境安裝教學](https://hackmd.io/V3v9hW9dTlOwFvVA6ycfLg?view) - [ ] 0. 先打開架構,檢視[範例 template](https://www.figma.com/design/ZQn0etbtIsCrmkHqFeeLKo/%E5%88%87%E7%89%88%E7%9B%B4%E6%92%AD%E7%8F%AD---%E7%9B%B4%E6%92%AD%E6%95%99%E6%9D%90?node-id=176-2&t=5xBOVB521OStGqL0-1) - [ ] 1.確認 Node.JS 版本號。 [Vite 環境安裝與部署](https://courses.hexschool.com/courses/2020112211/lectures/53654004) - [ ] 2. 下載資料夾,並解壓縮檔案 - [ ] 3. 到 VSCode 將資料夾拉入專案 - [ ] 4. 在終端機輸入指令 `npm install` 安裝插件 - [ ] 5. 輸入指令 `npm run dev` 執行 - [ ] 6. 並檢視是否瀏覽器有開啟畫面 > 學員常見問題 > ## GitHub Pages 部署 - [ ] 1. 調整 `vite.config.js` repo 路徑(儲存庫名稱),透過 VSCode 連接 Git 數據庫,先把 main 開發分支部署上去 - [ ] 2. 執行 `npm run deploy` 來執行自動化部署 - [ ] **3. 等講完第三章節,再來講此區塊**:關機後之後要更新要怎麼做?第二個網站要怎麼做,可以複製資料夾嗎? > 第一次透過 Git、GitHub 安裝時,會出現以下圖示 ![image](https://hackmd.io/_uploads/ryP874UDA.png) ![image](https://hackmd.io/_uploads/HJMwmVUwC.png) ![image](https://hackmd.io/_uploads/ry-u7EUDA.png) # [三、提交作業流程](https://courses.hexschool.com/courses/2020112211/lectures/53654012) 第四週需提交 [GitHub Repo](https://github.com/gonsakon/vitetest/tree/main)、[GitHub Pages Demo](https://gonsakon.github.io/vitetest/) 兩個網址給助教 ### 提交開發環境(master、main) ``` git add . git commit -m 'update' git push -u origin main ``` ### 提交到部署環境(gh-pages) ``` npm run deploy ``` ## 中場休息 - 公布獎品 50、60% - 公布第四週作業 # 四、Vite 架構講解 - [ ] 1. 為什麼要學 EJS - [ ] 2. Layout(共通區塊)、include 講解,介紹 main.js - [ ] 3. 編譯模式與新增多頁面流程 - [ ] 可以先把整個架構定出來 - [ ] 4. assets、pages,JS、SCSS、HTML 放置頁面檔案 - [ ] 5. 靜態檔案都放 assets - [ ] 6. SCSS 編譯與觀察錯誤訊息 - 錯誤 - SCSS 編譯 - [ ] 7. SCSS 背景圖片差異 - 路徑規則 - [ ] 8. 導入 [Sweetalert 2](https://sweetalert2.github.io/) 外部檔案 - JS 可以寫哪? - [ ] 9. 團隊如何一起協作?(新增各自的 SCSS、EJS、HTML 頁面) Git 教學:https://courses.hexschool.com/courses/2020112211/lectures/54827548 ## 常見問題 - 關閉電腦後,該如何更新與上傳? # 五、SCSS 教學 使用技巧: - 環境安裝:以下兩種請勿混用 1. Vite 2. Live Sass:https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass - 巢狀 - 解決多層問題 - 但要避免超過 5 層 - 變數 - 問題:顏色重複命名 - 檔案拆分 - `@import` ## SCSS 影音教學補充 - [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 // 1. 元件(進階)* @import "button"; @import "..."; // 2. 雜項(進階)* @import "utilities"; // 3. 共用樣式 @import "layout"; // 共同框架、第一層 // 4. 分頁樣式 @import "index"; @import "page1"; ``` ## SCSS 元件命名技巧 > 如果更進階,可以試著將 Scss 以元件的形式進行匯入 > 1. 用外觀命名: 1. 好的:card、button、btn-primary 2. 不好的:product-list、register-btn 2. 用視覺功能命名: 1. 好的:Slider 2. 不好的:Banner 3. 輔助、雜項、原子化:bg-primary、mt-3、d-flex 1. 檔名:_utilities.scss ## 老師 SCSS 範例 - [甜點電商](https://github.com/Wcc723/F2E-PK) - [六角官網](https://github.com/Hexschool-Private/hexschool-hexo) (私有儲存庫) - [外部接案](https://github.com/weitsai/howo-web/blob/master/app/assets/stylesheets/all.css.scss)(私有儲存庫) - [Bootstrap 專案](https://github.com/twbs/bootstrap) ## 先前學長姐範例 - 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/) ## 接下來的預習建議 #### 第五週:後台表單設計 - 表格與表單設計技巧 - Bootstrap 5 - 環境建置 - Bootstrap 5 - Bootstrap 文件介紹 - Bootstrap 5 - Flex 與網格系統介紹 - Bootstrap 5 - 通用類別 Utilities 與 工具 Helpers - Bootstrap 5 - 表單運用 #### 第六週:導入網頁規範設計流程 - Bootstrap 5 - Bootstrap 最實用的工具 - 元件 - Bootstrap 5 - Bootstrap 與神奇的 Sass ## 第四週主線任務(本週五開放繳交) - 第四週 - 眼鏡形象網站 <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/tree/main/week3-4) ## 作業等級表 以下等級,都必須透過 Vite 上傳到 GitHub Pages 1. LV1:任選二頁含 RWD 2. LV2:做三頁以上含 RWD 3. LV3:所有頁面都有設計
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up