[筆記] 網頁切版直播班 2020 春季班 – 第四週

章節連結

本週的知識含金量比起過往幾週,有者顯著性的提高。這週提及了模組化管理的基礎(像是 Pug 和 Gulp),也講述了如何製作多頁式網頁,並擅用 SASS 的方式來讓網頁的 CSS 的可讀性和維護性都變得更容易。
hex-school-logo

第四週課程重點

基礎知識

  • Layout 可以認知成將設計師的 UI 稿件,規劃 img, div, ul, li …..等等的區塊圖,讓你可以到時在 HTML 實作時,可以先行有架構於腦海中。同時,也可以跟設計師設想最後是否有難以實現的地方。
  • 當一個網頁有 10 個以上的版面,你會發覺沒有辦法模組化來管理你的頁面,在維護上會有重工和更改上的困難。這就是 Gulp 這類的工具出現的起因,你可以預先撰寫一些 JS Code 在你的 HTML 內,然後再送到後端處理。
  • 與後端協作時,前端工程師可以先將你的樣板加上一些備註,讓後端知道哪些地方會根據不同的使用者情境(像是登入/登出)來做變化

經驗談

  • 要留意重複顯示的區塊,那就表示你可以寫在共用的 Layout 中,然後只要抽換中間的內容即可
  • SCSS 撰寫時,越多巢狀架構會導致效能低落,請小心
  • 適當的使用變數、import、抽出共同部分,可以使維護的難度大為降低

切版練習結果

目前改放置到 Github Pages 上,歡迎大家前往觀看。
網址:https://github.com/andy922200/HexSchool2020Spring


相關文章

按讚加入粉絲團

延伸閱讀

GA瀏覽人氣:24