第四週-多頁式網頁

Posted on | In

Gulp 整合

Layout 觀念設計

  • ID 與錨點設計

    1
    2
    a[href="#title3]{連結到錨點}
    #title3
    • id 只能唯一性
    • 重複id在舊瀏覽器會出錯
    • 指定到對應位置 ⇒ href=”page.html#title3”
    • id 才能當錨點 X class

  • 什麼是 Layout ？

    • 多頁式共同的地方
    • 可以被提取出來的區塊

  • EJS 樣板語言介紹

    • 關注 app(開發) 和 dist(最終輸出) 資料夾
    • .ejs ⇒ 樣板語言 ⇒ 常用在node.js ⇒ 比較像html

SCSS

  • 有順序性！

  • import 檔案切分

    • 最後只會有一隻最終的css

  • 階層

    • ３層是為閱讀性佳的程式碼，而最後一層（第四層）通常保留給擬態選擇器
    • 要管理就要了解編譯
    • YT - 六角：CSS 選擇器優化影片
    • css 可以直接貼到 scss
    • 大學體驗營：常見錯誤

  • 變數

    • 顏色
      • 同一種紅 - red-100 ~red-700
      • red / darkRed
    • 字型
      • font-s \ font-m \ font-xl

  • import 拆分規劃

    • _：下底線命名開頭，是不做編譯，純用來合併
    • variables 或 reset 依據情境或變數放在最上面

  • SCSS 結構參考

    1
    2
    3
    4
    5
    @import "variable";// 變數  
    @import "reset";  // reset.css  
    @import "layout"; // 共同框架,第一層
    @import "index";     
    @import "page1";

  • Live Sass Complier設定

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    settings/ .json
    {
        "liveSassCompile.settings.formats": [
            {
                "format": "compressed",
                "extensionName": ".min.css",
                "savePath": "/css/"
            }
        ]
    }