JIANGs Daily LAB

上週作業嘗試用了 Gulp 部署到 Github Pages 發現相當方便且快速，相較於Github Desktop，Gulp 真的快速許多，雖然要記的指令很多，順序也要記一下，雖然上傳失敗很多次，但最後成功了真的很令人振奮，為此做了個自己在部署時的筆記 Gulp gh-pages 部署筆記。這週的作業也是用 Gulp 來開發，除了可以用 layout.ejs 之外，scss 也不用額外用 live sass compiler 編譯，真的很省事，所以這週很認真地用 Bootstrap 的格線系統與元件來做作業，發現很多地方都跟 flex 脫離不了關係，學 Bootstrap 之前真的要先把 flex 的基礎打好，不然直接來看 Bootstrap 應該會一頭霧水，說到這裡，猛然發現原來已經第六週要邁向第七週啦，直播班真的過得好快好充實，自從直播班開課以來，除了固定的週五直播課以外，每天晚上就是安排自己與程式語言搏鬥的時間，看了一下自己的行事曆，每晚排滿滿的學習進度，這兩個月來沒有間斷過，這也是這兩個月給自己的一個里程碑，既然要花錢，就要花得有價值，要繼續努力完成這門課程，也要做出幾個像樣的作品。

第六週 - 導入網頁規範設計流程

當你頁面數量不是 3~5 頁，而是 30~50 頁以上，該如何制訂規範，讓產出的網頁都能模組化輸出，進以提升效率，也是網頁設計師需考量的一環！
作品主題：電商網站
教學關鍵字：SCSS 自訂 Bootstrap、格線系統、版型管理術

本週訓練菜單

1.1 做當週關卡作業，吸收當週教授觀念
1.3 將本週教授內容寫成部落格，以加深程式觀念
1.4 自主學習新語法，並寫成筆記常見 head 語法、logo 圖片取代文字技巧
3.2 刻意練習 emmet 與常見英文命名鍵位 emmet
5.1 SCSS 寫法 Gulp編譯
5.2 @import 檔案切分
5.3 導入格線系統等概念

第六週每日任務

11/23 Bootstrap rwd 網格系統
11/24 Bootstrap no-gutters
11/25 Bootstrap 製作表單
11/26 Bootstrap 網格元件組合
11/27 Bootstrap 計算格線

複習Gulp

安裝 Node.js，檢查指令 node -v

安裝 gulp，繼續輸入指令 npm i gulp@4 -g ，檢查指令 gulp -v

下載gulp資料夾，解壓縮

移動到該資料夾，指令 cd (檔案路徑)

輸入指令 npm install 安裝插件環境，會生成「node_modules 資料夾」

輸入指令 gulp 執行

瀏覽器，檢查網頁

slack 問題集 (你的問題也會是其他同學的問題)

gulp環境部署問題

Q1：部署環境時，下載的資料夾名稱為“web-layout-training-gulp-master” ，裡面有完整的app和dist兩個資料夾，請問自己製作時，是直接使用這個資料夾，在裡面新增當週作業的html和css檔案嗎？還是可以複製此資料夾，另取一個符合當週作業的資料夾名稱，然後再開啟終端機，按 cd，重新把資料夾拉進去，再指向一次呢？

第一個問題，有新專案的話就複製整個 web-layout-training-gulp-master 出來，更改資料夾名稱後 cd 過去

Q2：所謂的製作過程中，終端機要持續打開才會持續編譯，是怎麼個打開法勒？以Mac來說，是指像部署gulp環境一樣，按 control+空白鍵，把終端機視窗叫出來後，放在旁邊擺著嗎？

第二個問題如果希望他一直處於編譯狀態時，就打開終端機，cd 到對應資料夾後，執行 gulp 指令，此時就會進入編譯模式，就縮小化放在旁邊即可

Q3：若不小心把gulp在chrome的預覽分頁關掉，想問有什麼快捷鍵可再次開啟分頁嗎？

vscode重開，重啟gulp or 可以把該網址加到最愛

Q4：關於 Gulp部署的問題，我已經成功上傳，但為什麼這個頁面開不起來 https://viccjiang.github.io/weblayout_1113_hw05/ 接續上個問題，在上面連結的後面加 ain_admin.html 這樣的做法對嗎？是因為這個檔案沒有 index.html 首頁的關係，所以github pages 抓不到資料嗎？

Github Pages 預設是 index.html，所以如果沒有這個檔案的話要另外自己加上去

Q5：使用Gulp範例檔案來編譯時要開 Watch SCSS 功能嗎?

使用Gulp範例檔案來編譯時，完全不需要使用 Live Sass Compiler 的 Watch SCSS 功能或是 Prepros 等工具來編譯！

Q6：依老師教學影片操作有編譯成功，但 Live Sass 編譯出的檔案多了很多個，請問有人有遇到一樣的問題嗎？

如果不希望他編譯出來，到 bootstrap 資料夾，將對應檔案加上，加上下底線就好，例如 _bootstrap.scss，這是正常的，live sass 會將所有 scss 都編譯成 .css，老師 demo 沒編譯出那些，估計是剛好沒監聽到！

另一位同學分享：檔名加上底線，不加入監聽就好了。錯誤示範：~~左側以第6週當根目錄，子目錄裡所有的SCSS都編譯跑到外側了，希望其他同學不要跟我一樣設定錯誤~~

Q7：想問關於圖片尺寸設定的問題。不管是使用手刻的"max-width:100%" 以及 “height:auto"或是bs4所使用的 “.img-fluid”，都會遇到圖片實際的縮放高度，和設計稿不一樣，但一般又最好不要寫死圖片高度，請問有沒有更好的方式，讓畫面上的圖片大小可以完全符合設計稿呢? 或者是改成"background-image"的形式來呈現呢?

目前坊間主流大概都是用類似 background cover 去做 CSS 不輕易寫死高度的藝術

外面再包一個 container 在這一層決定寬高後（可能是動態的）然後設定裡面的img, 類似：

.img-container img {
    width: 100%
    height: 100%
    object-fit: cover;
}

這樣就會強制讓img cover外面的container 當然圖片如果沒切好還是會歪掉XD (商品跑到外面之類的想知道有沒有更好的設定方法+1

如果以這次w6的設計稿為例子，就是用背景圖，然後拿這幾張圖片的高度，去除以整個view port的高度，就可以得到一個百分比，比如說30%。所以在背景圖所在的div，寫上height: 30vh，就可以有縮放效果了

觀念影片：分享六角YT的一個影片六角學院 - img 標籤與 background-image 的使用上差異

參考文章 https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/ 同學分享 https://codepen.io/solring/pen/JjRPzwQ?editors=1100

Q8：11/25 每日任務，解答有幾個地方不太懂?

第6行，這個aria-describedby="name"是什麼?
<select> 標籤裡面可以不用寫上 name="XXX" 嗎?
<option> 標籤裡面可以不用寫上 value="高雄市" 嗎?
如果遇到像地址，這種多個<select> ，為了配合<label for="address">，每個<select> 的id=“XXX” ，建議該如何寫呢?
第45行，關於<button> 的使用時機? 如果有表單要送出，記得老師先前是說要使用<input>，這題建議該用哪種?

aria-describedby 是用來描述該標籤行為，會有這個屬性是因為 Bootstrap 支持無障礙網頁，如果是一般網頁可以不需要加上這個屬性

name 主要是傳送給後端資料時會使用，如果這邊沒要傳資料的話是不會有影響的，可以寫也可以不寫

value 也是傳送給後端資料時會使用，如果選了該選項，表單會傳送他的值，如果沒設定 value，預設是送 <option> 的內容

這部分也可以只對應到第一個，我自己有時候寫也蠻疑惑XD有時候會加上個別的 label 然後用 sr-only 讓他不見，實際上有對應到個別的（不過只有在 screen reader 的情況會被唸出來）

button 和 input type button 使用上的效果是一樣的，但是 button 比較好用的地方是因為他有閉合標籤，所以當你想要插入其他東西的時候會比較適合使用

Bootstrap 快速範本

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

Mobile first 與 Desktop first 差別

desktop first => max-width 這個解析度以下
mobile first => min-width 這個解析度以上

Bootstrap 4 框架是 Mobile first 業界幾乎是 Desktop first

格線系統 - 減輕 magic number 出現

格線系統關鍵字：column(欄)、gutter(間距)
960 grid，以前解析度都是 1024
BS4 layoutit

常見總欄數是 12 容器寬度都交給隔線系統格線可以再包格線

BS4 格線系統原理

設計師若要follow Bootstrap格線，開版時用1140px開發
排版三劍客： .container、.row、.col 1~12
- .container ( 1140px )
  - .container 固定寬度
  - .container-fluid 滿版
- .row
  - no-gutters：不需要 gutters
名言 1：.col- 的外層只能是 .row
名言 2：.row 裡面只能是 .col-
名言 3：網頁內容與元件請放在 .col- 裡面
常見錯誤，在 .col 增加寬度
常見錯誤，在格線系統調整左右 margin 與 padding ，不能推左右
常見觀念：可以加上下的 margin 與 padding
常見觀念：最外層至少補一個 container
常見觀念：整體格線邏輯是一致
常見觀念：padding 左右都有15px
常見觀念：col 左右不能推上下可以推

ex:

  <div class="row">
    .col-3.green.mb-5*8>h2{標題}
  </div>

mb-5 上下可以推不調整 col 左右 padding margin 可以調整上下

補充資料

格線系統與元件整合

格線與卡片設計
範例處

編譯 BS4 SCSS

步驟一：下載 GitHub 原始檔，抓取最新版
步驟二：拉出 SCSS 使用
步驟三：整合到自己的 SCSS 流程教學

BS4 三劍客

容器 (格線系統)
元件 (卡片、按鈕)
util 通用類別 (mb-3、mr-3、mb-mb-3)

提升可讀性

自訂名稱 > 容器 > 元件 > util

ex .header .row .mb-4 .mb-md-1

六角學院切版直播班2020秋季Week6