[Hexschool Web Layout Training] — Week_4 多頁式網頁設計

發表於 2020-05-05 更新於 2024-01-28 分類於 Code ，前端， Hexschool-Web-Layout-Training[六角網頁切版直播班] 文章字數： 3.5k 所需閱讀時間 ≈ 3 分鐘

Introduction & 前言

RWD 地獄訓練第二週，搭配 Gulp 專車，一起來看看本週出了什麼菜吧！

本篇文章將會記錄本週課程內容及練習心得，關於 Gulp 將會有另一篇文章介紹。

本週的 RWD 寫到眼睛花掉，本來想切了兩頁就交差，但不允許惰性的自己就一直切下去了，因為 RWD 也是這次報名課程的目標之一，其次才是 Gulp，但直播班似乎主力放在切版上，看起來應該是不會探討到 Gulp，所以這部分就會自己摸索了。

20200506 後更：[Tool Notes] — 關於Gulp 文章已補上，有興趣參考怎麼使用 Gulp 以及從 0 開始建立一個 Gulp 的朋友可以參考參考，或給小弟一點觀念指導。

Summary & 摘要

*本篇文章將會以三個角度來紀錄， 課程心得(上課後的心得整理)、練習心得(做完作業後的心得整理)) 及 **小組任務(每週會有一項小組任務，寫完後的心得)*。

每週的練習挑戰和地下城有點像，都有自己必須練習到的地方；本週需要練習的目標有至少兩點以上的練習菜單，及額外的一項打字練習。

熟悉三個編輯器熱鍵
一樣大推真的加快寫 Code 速度很多 -> 幾乎全程使用 emmet 開發
英打速度 練習

關卡目標

多頁 RWD 管理方式
RWD 斷點設計

課程心得

接續上週的 RWD，本週直接再度升級，加上多頁式管理，如何多頁管理前面已經先破梗了，就是使用 Gulp，其實它有點像 Webpack，如何使用可以先上網爬文，或是參考我的前兩篇關於 Webpack 的文章。

[Tool Notes] — 關於Webpack #1 - 第一次就上手

[Tool Notes] — 關於Webpack #2 - Babel？

Layout 觀念

因為上週版型出來時大家已經先看到有其他頁面，原本自己第一個想法是使用 display:none; 去做隱藏跟顯示，但是我太天真了，呵呵。

上課時提到關於 **EJS樣板語言(註1)**，還有 Layout 的觀念，詳細可先參考此處。

在我們做多個頁面的時候，大致上表頭表尾都會差不多，主要都是替換內容，這時候剛開始切版的你包括我，都會想說那我就切 index.html、index_2.html、index_3.html…等等，如果只是一般的形象官網可能還好，但如果今天是電商網頁呢？

舉個例子，你可能每一隻檔案都有自己的 CSS，可能都會有黑色的顏色樣式 color: #000000;，假使今天你要改為藍色、黃色，豈不是要改幾十次甚至幾百次呢？

所以慢慢的我們會從一個 HTML 進化成替換裡面的 contents，這該如何做到呢？就有賴 Gulp 了。

可能你會有疑問，我手動建立 HTML 複製貼上是最簡單的方式，既快又不用花時間研究 Gulp，但是誰叫我們是~~勤奮的工程師~~呢？

使用 Layout 除了改 Code 快之外，在最後產出的檔案，就可以直接整包丟給後端工程師，然後讓他們更方便的串接 API 及修改，他們不用在一個檔案一個檔案串接起來。

註1：EJS官網上這麼寫著，E代表可嵌入(Embedded)、高效(Effective)、優雅(Elegant)或者是簡單(Easy)；網頁開發初期其實前端和後端沒有像現在分這麼開，後端常常會接收到包含 HTML JS CSS 的檔案，他們在把後端語言一起包在裡面，但是這樣會讓檔案很複雜，所以後來有人在 HTML 上開發了樣板語言(template language/engine)，可以直接在 HTML 使用諸如判斷、迴圈、字串模板…等等的功能，本次文章介紹為字串模板的功能

如何有效與後端溝通

雖然上方註解提過現今不像以前，前端和後端有分的較清楚，前端就是該做什麼事情，後端就是該做什麼事情，但是規模比較沒有那麼大的公司，其實前後端還是會塞在一塊，因為方便、好管理、省成本！

在我剛進公司不久，其實很多專案都是我把 HTML 寫一寫，丟給後端，然後他們在把檔案改為 PHP 然後串接 API，不久後開始接觸 JavaScript 才知道什麼是打 API，慢慢的公司開始做前後端分離。

看起來說的有點遠了，但是一但專案開始前後端分離，假使你是前端，你的檔案如 HTML CSS JavaScript 等等就是歸你管，而後端就是開好他的 API 等你串接。

但其實不管有沒有前後端分離，如何有效與後端溝通一直都是一們學問，我想不二法門就是，不恥下問、多下註解、耐心溝通！

CSS 預處理器

切版切了一段時間或許你會開始納悶，CSS 樣式一直寫，如果我有幾十頁，那我的 Code 是否就會塞上幾百幾千行呢？

沒有錯的，除了你能把 CSS 拆成 CSS_1 CSS_2 像是 HTML 拆開那樣，你不學也至少要聽過現今絕大數人都在用的 SCSS。

預處理器怎麼來的？

你一定聽過網頁三寶，HTML CSS JavaScript，網頁基本只認識這三種東西寫出來的語法，但是這三種語法的核心架構有時候滿足不了我們，比方說 HTML 拆成好幾個的 Layout 功能，或是 CSS 加上變數的功能(現在CSS有支援了)…等等。

所以厲害的各路大神們就開始研發各種更好寫更方便的框架或是擴充，而這些擴充的東西被稱為預處理器，意思為編譯成網頁三寶前的預備處理器，而這些預處理器可以做到許多原本網頁三寶做不到的事情。

到底是 SASS 還是 SCSS 呢？

最少誕生的為 SASS，當時 SASS 採用 Ruby 語言編寫，為了配合 HAML(縮排式的 HTML 模版語法) 所以 SASS 寫法不寫大括號即分號，這是最大的特色，例如下方：

body
  width: 100%;
  height: 100%:
  .header
    background-color: red;

最初我也是挑選這種方式來寫，可是最大的問題在你要複製範例或是別人的程式碼來改的時候，必須一個一個括號去掉，而且無法兼容一般 CSS 語法，而相反的 SCSS 可以，如下方例子：

body {
  width: 100%;
  height: 100%:
  .header {
    background-color: red;
  }
}

這種寫法可以直接無縫接軌 CSS，很是方便！

有興趣的同學可以參考這個網站，先試著把自己的 CSS 轉為 SCSS 吧!

還有什麼法寶？

其實不只寫起來更方便，CSS 預處理器還提供了諸如 變數(Variables)、函式(Functions)、嵌套(Nesting)、混入(Mixins)、共用(Extends)…等等的用法，有興趣可以查看此篇文章。

我還能注意什麼？

除了好用的工具外，還要有懂的怎麼使用工具的方法，這邊先推一篇之前上完六角 - Sass 實戰全攻略 - 成為前 1% 的 CSS 頂尖好手之後寫的文章，[CSS Notes] - CSS模組化，內容提到 如何處理讓你頭疼的 Class Name 命名法 以及 如何更有效的減少攏長的 CSS Code，有興趣可以參考一下，雖然我還在努力的修改並且加強中…Orz。