[笔记] 网页切版直播班 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


相关文章


按赞加入粉丝团

延伸阅读