RWD

時間：2022/5/5
老師：麥睿恩

環境建置

Sublime

需先安裝 Package Control 才可以安裝套件
- ctrl + shift + P
  Image Not Showing Possible Reasons
  - The image file may be corrupted
  - The server hosting the image is unavailable
  - The image path is incorrect
  - The image format is not supported
  Learn More →
  輸入package control: install packages，特別留意每一次安裝都要執行這一步
推薦套件參考老師講義(以下節錄)
- ChineseLocalization: 選單中文介面,有日語、簡中、繁中三種語言。
- ConvertToUTF8:頁面內容編碼。
- Emmet: 可以用代碼方式快速建立頁面語法結構。
- jQuery: 針對 jQuery 程式碼提供較佳的高亮度函式顯示與程式片段。
- SublimeCodeIntel: 智慧型語法、函式自動完成的套件,支援多種語言。
- JsFormat: 格式化 Javascript/JSON 程式碼的套件。
- SublimeLinter: 檢查程式的基礎套件,主要用來檢查程式碼的語法問題。
- ColorPicker :調色盤,按 ctrl+shift+c 就可以叫出色盤自由選色囉!
- AutoFileName:輸入路徑或 url 時,自動抓取檔案路徑
- SideBarEnhancements: 加強側邊列(檔案與資料夾)功能的套件。
- BracketHighlighter: 把各種括號符號、標記特別高亮度顯示出來。
- Color Highlighter: 有顏色代碼的地方用顏色標示出來。
- CSS3:可以支援相關新屬性的加入,讓建立更有效率。
- Auto-Save:可以設定頁面自動儲存。
- HTML5:可以支援相關新屬性的加入,讓建立標籤更有效率。
- 額外再加裝套件
  - Bootstrap 4x Auto complete
  - Bootstrap 4x Snippets
確認安裝
- 工具
  Image Not Showing Possible Reasons
  - The image file may be corrupted
  - The server hosting the image is unavailable
  - The image path is incorrect
  - The image format is not supported
  Learn More →
  指令面板
  Image Not Showing Possible Reasons
  - The image file may be corrupted
  - The server hosting the image is unavailable
  - The image path is incorrect
  - The image format is not supported
  Learn More →
  package control: list packages
設定快捷鍵
- 設定
  Image Not Showing Possible Reasons
  - The image file may be corrupted
  - The server hosting the image is unavailable
  - The image path is incorrect
  - The image format is not supported
  Learn More →
  快速鍵設定
  - 左方預設、右方自訂
  - 找到 F12 改成 open_in_browser
自動備份
- 設定
  Image Not Showing Possible Reasons
  - The image file may be corrupted
  - The server hosting the image is unavailable
  - The image path is incorrect
  - The image format is not supported
  Learn More →
  package settings
  Image Not Showing Possible Reasons
  - The image file may be corrupted
  - The server hosting the image is unavailable
  - The image path is incorrect
  - The image format is not supported
  Learn More →
  auto-save>settings-user
- 先到 settings-default 複製指令再貼到 settings-user
  - auto_save_on_modified 改成 true
  - auto_save_delay_in_seconds 改 3
設定排版、增加多層
- 設定
  Image Not Showing Possible Reasons
  - The image file may be corrupted
  - The server hosting the image is unavailable
  - The image path is incorrect
  - The image format is not supported
  Learn More →
  快速鍵設定
  - 將老師提供的設定檔貼上，特別留意要貼在 [] 中，指令中間記得 ,
```
[
  { "keys": ["ctrl+shift+f"], "command": "reindent" , "args": {"single_line": false}},
  { "keys": ["ctrl+shift+g"], "command": "emmet_wrap_with_abbreviation" }
]
```
快速鍵衝突
- ColorPicker 以及 ConvertTo UTF8
- 設定
  Image Not Showing Possible Reasons
  - The image file may be corrupted
  - The server hosting the image is unavailable
  - The image path is incorrect
  - The image format is not supported
  Learn More →
  瀏覽資源包
  Image Not Showing Possible Reasons
  - The image file may be corrupted
  - The server hosting the image is unavailable
  - The image path is incorrect
  - The image format is not supported
  Learn More →
  找到convertTo UTF8
  Image Not Showing Possible Reasons
  - The image file may be corrupted
  - The server hosting the image is unavailable
  - The image path is incorrect
  - The image format is not supported
  Learn More →
  編輯 Default(Windows).sublime-keymap
  - ctrl + shift + c 改成 ctrl + shift + alt + c 或是你自己習慣的快捷鍵
- 確認是否解決衝突問題
  - 輸入 ctrl + shift + c 看看 color picker 是否有叫出來

測試

新增檔案
右下角確認語言為 html
1. 快捷鍵 ctrl + shift + P 輸入 syntax:HTML
emmet
1. ! + tab
第一次需先手動儲存，之後會自動備份（儲存）

HTML 5

HTML 是一種標籤語言，逐行解釋如下












<!DOCTYPE html>   頁面文件類型宣告，讓瀏覽器辨別該使用版本的HTML標籤定義來呈現，HTML5 就是用這一行，可以找比較舊的網站看看原始碼 HTML4 以前會長得不太一樣
<html lang="en">   頁面文件語言
<head>   頁面文件頁頭區域，很重要，讓瀏覽器判讀網頁內容，內含標題、檢視、樣式、描述、互動變化等
  <meta charset="UTF-8"> 網頁編碼
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> IE 支援設定
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  響應式網頁一定要這一行
  <title>Document</title> 網頁標題
</head>
<body>
  <!-- 網頁內容顯示的地方 所有瀏覽者看到的內容都是放在這兒 -->
</body>
</html>

前端三要件

HTMl 骨架、內容
CSS 美化
JS 網頁互動、判斷、運算等
- JQuery 是 JS 函式庫

Bootstrap 是上述組合，幫助快速完成版面建置與功能安排。其他框架如 Vue.js、react.js、Angular.js 等

emmet 快捷鍵

包覆 tag
- 選取字串後 ctrl + shift + g 輸入 h1

VS Code 需要額外安裝 Emmet Keybindings 套件，快捷鍵也有所不同

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

範例演示如下(VS code 畫面)

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

假文假圖

假文產生器：lorem
假圖：
- 利用 pexels 圖庫，提供創用 CC 授權的文片
- fakeimg.pl

練習1







width 寬度
margin 間距
color 文字顏色
letter-spacing 字距
line-height 行高
text-align: justify 左右對齊
text-indent 首行縮排

兩欄式排版

其中一種寫法







img {
  float: left;
}

p {
  float: right;
}

bootstrap

最新版本 v5.1.3，目前市占率 v4.6，本課以 v4.6 教學

使用方式

Image Not Showing Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
本課程使用：Download 選擇包含 CSS 及 JS 的，要放在你網頁的根目錄
CDN
- VS code 可以用 cdnjs 幫你抓
使用文件範本，其實也是 CDN 只是他幫你寫好在 HTML 裡

如果你是 Download 的話，需要自己在 HTML 引入，放在 <head></head> 裡


<link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>

使用文件範本自訂程式碼片段

Sublime install package: mysnippets

工具

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

外掛程式開發

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

新增程式碼片段，結構如下：









<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>

將 Bootstrap Starter template 放在<content> 的[]中，就是第3行

其中 <tabTrigger> 中代表快速鍵，以下代表打 bs4 + tab 就會出現你貼上的程式碼片段


  <tabTrigger>bs4</tabTrigger>

記得存檔、記得存檔、記得存檔

存在預設路徑...\Packages\User

建議在此建立一個與外掛同名的資料夾(例:Mysnippets)，儲存的檔案名稱要與<tabTrigger>內的自訂名稱相同喔!!

CSS 排版

float
display
position
flexbox
grid

bootstrap 排版

bootstrap 貼心的幫你整合了 flexbox 和 grid
預設為 12 grid

圖源：960 Grid Demo

基本架構最外層 container 底層 row 底層 col(注意：要先有row才能有col)







<div class="container">
  <div class="row">
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
    <div class="col">One of three columns</div>
  </div>
</div>

補充說明 class、id 是什麼？

id 屬性是讓你為元素命名的，整個頁面中的元素名稱也不應有重複

class 屬性則可將元素歸為某特定類別，通常也會有很多元素屬於同一種類別 (意即 class 屬性值相同。)

如果你想指定某特定單一元素的樣式，則應使用 id。

若有很多個元素皆有相同樣式，則可使用 class。

—— from CSS FAQ

根據設備解析度的不同斷點

class name	width	支援
col	all device	all version
col-sm	>= 576px	all version
col-md	>= 768px	all version
col-lg	>= 992px	all version
col-xl	>= 1200px	all version
col-xxl	>=1400px	v5 以後

白話的說以下設定原先佔據滿版(12 格)的寬度，但是當螢幕大於 992px 時，該區塊會佔據 8 格(12 格中的 8 格)





...
<div class="col-12 col-lg-8">
  
</div>
...

測試 RWD

Windows：F12 或右鍵

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

檢查

預設樣式 class




.display-4
.text-justify
.text-primary
等等

圖片重點整理

rounded:加上圓角效果
rounded-circle:加上橢圓形輪廓
img-fluid:響應式影像
img-thumbnail:縮圖而且是響應式影像效果

時間：2022/5/19

media query

我懶得寫，放上之前筆記

切版練習：gogoro

大致架構如下：



















<div class="container-fluid">
  <div class="row">
    <div class="col">
      <img src="" alt="" class="img-fluid">
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col">
      <h1>welcome</h1>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col bg-info jumbotron"></div>
  </div>
</div>

可以透過 jumbotron 幫你把版面先撐起來，注意 Bootstrap 4 以前才有

bootstrap 5 jumbotron 替代寫法




<div class="mt-4 p-5 bg-primary text-white rounded">
  <h1>Jumbotron Example</h1>
  <p>Lorem ipsum...</p>
</div>

container 跟 container-fluid 的差別

.container-fluid, which is width: 100% at all breakpoints

bootstrap 預設間距怎麼清除？

用 m-0、p-0，但首先你要先搞懂是誰產生的內距、外距








<div class="container-fluid">
  <div class="row">
    <div class="col p-0">
      <img src="http://fakeimg.pl/2500x300" alt="banner image" class="img-fluid">
    </div>
  </div>
</div>
...

中間區塊排版







<div class="container my-3 text-center">
  <div class="row">
    <div class="col">
      ...
    </div>
  </div>
</div>

my-3 y 軸 margin 3 個單位，不是 px 喔，關於單位請參考下圖

切版練習：profolio

大腸包小腸，row 裡面還有 row

































<div class="container">
  <div class="row">
    <div class="col">
      ...
    </div>
    <div class="col">
      <div class="row">
        <div class="col-3">...</div>
        <div class="col-3">...</div>
        <div class="col-3">...</div>
        <div class="col-3">...</div>
      </div>
      <div class="row">
        <div class="col-3">...</div>
        <div class="col-3">...</div>
        <div class="col-3">...</div>
        <div class="col-3">...</div>
      </div>
      <div class="row">
        <div class="col-3">...</div>
        <div class="col-3">...</div>
        <div class="col-3">...</div>
        <div class="col-3">...</div>
      </div>
      <div class="row">
        <div class="col-3">...</div>
        <div class="col-3">...</div>
        <div class="col-3">...</div>
        <div class="col-3">...</div>
      </div>
    </div>
  </div>
</div>

提問：為什麼不是 col 裡面再寫一組 container? 特殊排版才會這樣用，本例的版面單純，row>row 就可以符合要求

加上 RWD

desktop	tablet	phone

注意 bootstrap 是 mobile first，結構如下

































  <div class="container">
    <div class="row m-2">
      <div class="col-lg-4 col-md-12">
        ...
      </div>
      <div class="col-lg-8 col-md-12">
        <div class="row m-lg-2">
          <div class="col-lg-3 col-md-6 my-2">...</div>
          <div class="col-lg-3 col-md-6 my-2">...</div>
          <div class="col-lg-3 col-md-6 my-2">...</div>
          <div class="col-lg-3 col-md-6 my-2">...</div>
        </div>
        <div class="row m-lg-2">
          <div class="col-lg-3 col-md-6 my-2">...</div>
          <div class="col-lg-3 col-md-6 my-2">...</div>
          <div class="col-lg-3 col-md-6 my-2">...</div>
          <div class="col-lg-3 col-md-6 my-2">...</div>
        </div>
        <div class="row m-lg-2">
          <div class="col-lg-3 col-md-6 my-2">...</div>
          <div class="col-lg-3 col-md-6 my-2">...</div>
          <div class="col-lg-3 col-md-6 my-2">...</div>
          <div class="col-lg-3 col-md-6 my-2">...</div>
        </div>
        <div class="row m-lg-2">
          <div class="col-lg-3 col-md-6 my-2">...</div>
          <div class="col-lg-3 col-md-6 my-2">...</div>
          <div class="col-lg-3 col-md-6 my-2">...</div>
          <div class="col-lg-3 col-md-6 my-2">...</div>
        </div>
      </div>
    </div>
  </div>

引入相關檔案
- jquery.js
- lightbox.js
- lightboxshow.css
加入 a tag，連結與圖片相同
運用 html5 中的 data- 屬性，a tag 上加入 data-lightbox=""
- 同一組的 data-lightbox 要一樣，才能抓到上下頁





...
<a href="./img1.png" data-lightbox="image">
  <img src="/.img1.png"/>
</a>
...

加上 prev, next, close icon
- 將照片加到 /images 中，取名如下圖
- lightbox2 是用 background-image，沒辦法使用 fontawesome 取代，除非改寫他的 CSS

最終呈現

RWD 課堂練習 - portfolio

deploy

Netify

table responsive

table 的斷點是往下兼容

table-responsive 全
table-responsive-sm sm 以下
table-responsive-md md 以下
table-responsive-xl xl 以下
table-responsive-xxl xxl 以下

embad-responsive

Bootstrap 有針對 embed 內容作響應式

此例為 Bootstrap 5 可能與 Bootstrap 4 寫法有所不同



<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

自動播放？

在 iframe 網址後面加上 ?&autoplay=1 如果被瀏覽器檔，可以試試多加 &mute=1

參考：Youtube Support

補充：假影片

`@keyframs` 關鍵影格

至少需要兩格（起點、終點）才會動，有兩種方式呈現

from…to
0…100%












.animation {
  animation: animate_width 3s;
  width: 100%;
}
@keyframes animate_width {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

搭配 javascript 讓文字也跟著動態顯示














let i = 0;
let label = document.getElementById("label");
let loop;
function ct() {
  if (i >= 100) {
    clearTimeout(loop);
  } else {
    i++;
  }
  label.innerHTML = `${i}%`;
  loop = setTimeout(ct, 20);
}
ct();

完整程式碼：codepen

這是簡約版的，其實文字跟實際進度不太相符

RWD

環境建置

Sublime

測試

HTML 5

前端三要件

emmet 快捷鍵

假文假圖

練習1

兩欄式排版

bootstrap

使用方式

使用文件範本自訂程式碼片段

CSS 排版

bootstrap 排版

測試 RWD

預設樣式 class

圖片重點整理

media query

切版練習：gogoro

bootstrap 預設間距怎麼清除？

中間區塊排版

切版練習：profolio

加上 RWD

加上 lightbox 效果

最終呈現

deploy

table responsive

embad-responsive

自動播放？

補充：假影片

@keyframs 關鍵影格

Read more

C# 程式語言

HTML, CSS, JavaScript, jQuery, WoT

PHP & MySQL

ASP.NET C# MVC

`@keyframs` 關鍵影格