網頁設計好好玩

1. 網站開發環境

一、編輯工具

由於電腦教室檔案會被還原，所以每次進教室，先在「D:\」建立一個資料夾例如「ugm」，由於git bash 無法處理中文，所以請不要用中文名稱或空白。
然後在「d:\ugm\」再建立一個「github」，此資料夾專門來放置，github的數據庫
sublime text3 ：下載至「d:\ugm\」，然後「解壓縮至此」，此檔可以放置到學校的檔案空間，下次即可以由此處理複製而不用下載。

二、網站伺服器

GitHub
本學期仍然將網站托管在「GitHub Pages」
GitHub Pages 可以開設一個「https://帳號.github.io」的網站，其數據庫名稱為「帳號.github.io」
例：tawan158.github.io
tawan158 是github帳號，只要開設這個數據庫，那麼「GitHub Pages」就可以得到一個網址為：「https://tawan158.github.io」
而其他的數據庫則為，例：hhjh106 => 「https://tawan158.github.io/hhjh106」
作業：請開設「帳號.github.io」數據庫，並將其設定為「GitHub Pages」

三、Git

因為 GitHub 最近剛改變他們的 SSL 連線參數設定，主要是 SSL 連線現在只提供 TLSv1.2 加密連線協定，還有停用 SHA1 雜湊演算法。
所以請重新下載最新版的Git軟體，請下載至「d:\ugm\」下，然後對其按「右鍵/開啟」再按「ok」就可以自解壓縮了！
請執行「PortableGit/git-bash.exe」
設定 config
git config --global user.name "tawan158"
git config --global user.email "tawan158@ugm.com.tw"
git config --global color.ui true
git config --list 查詢

請自行將紅字部份，換成自己的 GitHub帳號與 email
每次第一次上傳時，GitHub會要求輸入「帳號」、「密碼」，如果在各位家裡的電腦，則是做過一次，就會記錄起來，不用每次輸入
我們是使用GitHub Pages服務，所以只會用Git的幾命令而已
「cd /c/ugm/github」=> 改變目錄位置
「git clone https://github.com/tawan158/tawan158.github.io.git」=> clone之前，不能有「tawan158.github.io」資料夾，否則無法clone
「cd /c/ugm/github/tawan158.github.io」=>再把目錄切換至「tawan158.github.io」
上傳檔案三個步驟
git add .
git commit -m "訊息"
git push origin master

四、sublime text3

開啟 sublime text3
新增專案
建立新檔 index.html
內容：HELLO WORLD！

網頁設計好好玩

1-1 GitHub建立repository

GitHub建立repository

網頁設計好好玩

2. Bootstrap4

一、簡介

Bootstrap 是一個用於開發 HTML、CSS 和 JS 的開源工具包。透過我們的 Sass 和 mixins、響應式網格系統、預先建構的組件以及基於 jQuery 開發的插件來快速建構你的想法或是應用程式！

二、sublime建立專案

三、Bootstrap4 中文

官網：https://v4-alpha.getbootstrap.com
中文官網：http://bootstrap.hexschool.com/

初學者範本：

<!DOCTYPE HTML>
<html lang="zh-Hant-TW">
  <head>
    <!--必需的 meta tag -->
    <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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

練習：請在專案上建立 index.html，內容為上面語法
上傳至GitHub
請參考：https://www.ugm.com.tw/modules/tad_book3/page.php?tbdsn=881

網頁設計好好玩

2-1 HTML

什麼是HTML？

HTML 是用來描述網頁的一種語言。

HTML指的是超文本標記語言( H yper T ext M arkup L anguage)
HTML不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標籤 (markup tag)
HTML使用標記標籤來描述網頁

HTML 標籤

HTML 標記標籤通常被稱為HTML 標籤(HTML tag)。

HTML標籤是由尖括號包圍的關鍵詞，比如<html>
HTML標籤通常是成對出現的，比如<b>和</b>
標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
開始和結束標籤也被稱為開放標籤和閉合標籤

HTML 文檔= 網頁

HTML文檔描述網頁
HTML文檔包含HTML標籤和純文本
HTML文檔也被稱為網頁

Web 瀏覽器的作用是讀取HTML 文檔，並以網頁的形式顯示出它們。瀏覽器不會顯示HTML 標籤，而是使用標籤來解釋頁面的內容：

<html>
<body>

<h1>我的第一個標題</h1>

<p>我的第一個段落。</p>

</body>
</html>

例子解釋

<html> 與</html> 之間的文本描述網頁
<body> 與</body> 之間的文本是可見的頁面內容
<h1> 與</h1> 之間的文本被顯示為標題
<p> 與</p> 之間的文本被顯示為段落

詳細資料：http://www.w3school.com.cn/html/html_jianjie.asp

網頁設計好好玩

2-2 標題

一、標題

全部的 HTML 標題從 <h1> 到 <h6> 均可用。

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

同時提供 .h1 到 .h6 的 Class，因為當你想匹配某一標題的字體樣式，但不能直接使用 HTML 元素時。

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

一般的標題元素設計在頁面內容繁多時發揮最佳作用。當你需要突出一個標題時，請考慮使用 display heading 以獲得更大、稍具有風格化的標題樣式。
```
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
```

網頁設計好好玩

2-3 CSS

一、CSS 概述

CSS指層疊樣式表( C ascading S tyle S heets)
樣式定義如何顯示 HTML元素
樣式通常存儲在樣式表中
把樣式添加到HTML 4.0中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在CSS文件中
多個樣式定義可層疊為一

二、層疊次序

當同一個HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？

一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字4 擁有最高的優先權。

瀏覽器預設
外部樣式表
內部樣式表（位於<head> 標籤內部）
內聯樣式（在HTML 元素內部）

因此，內聯樣式（在HTML 元素內部）擁有最高的優先權，這意味著它將優先於以下的樣式聲明：<head> 標籤中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（預設值）。

三、常用選擇器

class
id
tag

網頁設計好好玩

2-4 bootstrap4 容器

容器

容器是 Bootstrap 最基本的排版元素，且 當使用我們的網格系統時 是必須的。從響應式、固定寬度容器（表示其最大寬度限制在每一個中斷點）或可變寬度（顯示為 100% 寬）中選擇。

對於完全寬度容器（包含所有視圖的寬度）使用.container-fluid。
固定欄位 .container。

網頁設計好好玩

3. Bootstrap4 網格系統

一、容器基本概念

凡是要用 BootStrap 的網格系統來排版，一定要使用容器（container）。
一個頁面中可以有多個容器。
容器也可以巢狀使用（容器中還有容器）
容器有兩種，一種是寬度有上限的容器(固定寬度)：
```
<div class="container">
  ...
</div>
```

全螢幕容器：

<div class="container-fluid">
  ...
</div>

lorem ：英文假字
lorem10 ：10個單字

網頁設計好好玩

3-1 響應式斷點

Bootstrap4 為行動優先的架構，所以預設的斷點為 (xs)

// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
 
// Small devices (landscape phones, 576px and up) (sm)(橫的手機)
@media (min-width: 576px) { ... }
 
// Medium devices (tablets, 768px and up) (md)(平板)
@media (min-width: 768px) { ... }
 
// Large devices (desktops, 992px and up) (lg)(桌機)
@media (min-width: 992px) { ... }
 
// Extra large devices (large desktops, 1200px and up) (xl)(較大的桌機)
@media (min-width: 1200px) { ... }

網頁設計好好玩

3-2 網格注意事項

最外層必需有「容器」container、container-fluid
col 外面須有 row、row裡面須有col，且可以巢狀
內容須放置在col內，不要直接放到col上，這樣才會有gutter

網頁設計好好玩

4. 間隔工具

間隔工具的組成為「屬性邊緣-尺寸」
屬性設定:
- m - 這個 class 會設定 margin
- p - 這個 class 會設定 padding
邊緣設定:
- t - 這個 class 會設定 margin-top 或 padding-top
- b - 這個 class 會設定 margin-bottom 或 padding-bottom
- l - 這個 class 會設定 margin-left 或 padding-left
- r - 這個 class 會設定 margin-right 或 padding-right
- x - 這個 class 會設定 *-left 和 *-right
- y - 這個 class 會設定 *-top 和 *-bottom
- 空白 - 如果邊緣 class 未加入則會設定 margin 或 padding 在元素的四個邊緣
尺寸設定:
- 0 - 這個 class 會設定 margin 或 padding 的樣式值為 0
- 1 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * .25
- 2 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * .5
- 3 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer
- 4 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * 1.5
- 5 - (預設時) 這個 class 會設定 margin 或 padding 於 $spacer * 3
詳情：http://bootstrap.hexschool.com/docs/4.0/utilities/spacing/

網頁設計好好玩

4-1 練習

建立一個 container 容器
建立一個 container-fluid 容器
建立一個三等份的網格

水平置中

<div class="mx-auto mt-5 p-5 bg-primary" style="width: 200px;">
  mx-auto：代表水平的margin會自動均分
</div>

網頁設計好好玩

5. Google 表單

一、製作消費記錄

緣由：我兒子由於補習緣故，會在外面用餐，因此製做了一個消費記錄表，來記錄消費狀況
登入 gmail
切換至「雲端硬碟」
切換至適合目錄，並新增「Google表單」
檔案名稱及說明
檔案名稱：消費記錄
說明：消費請填正數，補充費用請填負數
問題：
1. 「消費日期」
2. 「消費名稱 - 下拉選單」：晚餐、午餐、早餐、補充費用(請填負數)、其他
3. 「金額 - 數字」
4. 「備註 - 段落」
建立試算表
啟動郵件通知
改變表單外觀
預覽
設定
取得表單連結
https://goo.gl/forms/pFzt6DSsSRIWR1q92

二、台南社大10701-消費記錄 (回應) 權限開放

回應表單網址：https://goo.gl/2j9mTa
權限設定
共用設定
將Google表單及Google試算表嵌入至 20180326.html

三、縮短網址

goo.gl

網頁設計好好玩

6. 整合Google表單、試算表

一、取得Google表單嵌入碼

傳送
傳送表單

二、取得Google試算表嵌入碼

「檔案/發佈到網站」
發佈到網路/內嵌/發佈
取得嵌入碼
44
55

三、將嵌入碼放入Bootstrap4 容器

網頁設計好好玩

6-1 Bootstrap12欄的網格系統

一、介紹

container、container-fluid
row
col
Bootstrap為 12欄的網格系統
box-sizing：border-box

二、練習

GitHub：https://webugm.github.io/bootstrap4/grid.html

三、其他

加入 .w-100可以分隔列

網頁設計好好玩

6-2 上課練習

20180402.html


    <h1>20180402 嵌入Google表單</h1>
    <div class="container">
      <div class="row">
        <div class="col">
          <div>
            
          </div>
        </div>
        <div class="col">
          <div>
            
          </div>
        </div>
      </div>
    </div>


    <h1>20180402 嵌入Google表單</h1>
    <div class="container">
      <div class="row">
        <div class="col border border-primary">
          <div style="height: 500px;">
            
          </div>
        </div>
        <div class="col border border-success">
          <div style="height: 500px;">
            
          </div>
        </div>
      </div>
    </div>

完成

<!DOCTYPE HTML>
<html lang="zh-Hant-TW">
  <head>
    <!--必需的 meta tag -->
    <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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>20180402</title>
  </head>
  <body>
    <h1 class="text-center">20180402 嵌入Google表單</h1>
    <div class="container">
      <div class="row">
        <div class="col">
          <div>
            <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfYCIXPMXdNJtOn4QTo5HCzgKOeuMAInnBYPouj3vCXEqvztg/viewform?embedded=true" width="100%" height="1100" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>
            
          </div>
        </div>
        <div class="col">
          <div>
            <iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQnJ2lkZ1KUaT1dyYGF6TeH8UIY1vfIQ2R8HMEZrRAMvOlfEH-7H0BDvJXjIJIekAJxsZ_rxenNDd_W/pubhtml?gid=1223568601&amp;single=true&amp;widget=true&amp;headers=false" style="width: 100%;height: 1100px;"></iframe>
            
          </div>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

網頁設計好好玩

7. 整合Google日曆

一、新增日曆

二、設定日曆

設定和共用
學員e-mail
日曆設定
存取權限
與特定使用者共用日曆
通知
整合日曆

網頁設計好好玩

8. 套用免費樣板

免費樣板網站： start Bootstrap
下載樣板
將檔案下載至專案資料夾，並解壓縮
修改樣板資料
更換地圖

網頁設計好好玩

9. 嵌入Google Maps

一、Google Maps

官網：https://www.google.com/maps
輸入搜尋關鍵字
按「分享」
得到嵌入碼

二、導入嵌入碼

網頁設計好好玩

10. 嵌入聯絡我們表單

表單欄位：姓名、電話、email、聯絡事項
建立Google表單
取得表單嵌入碼
建立連結試算表按鈕

架構


    <!-- Footer -->
    <footer class="footer text-center">
      <div class="container">
        <div class="row">
          <div class="col-sm-8 offset-sm-2">
            .....
          </div>
        </div>

        <p class="text-muted small mb-0">Copyright &copy; Your Website 2018</p>
      </div>
    </footer>

位移類別
http://bootstrap.hexschool.com/docs/4.0/layout/grid/#offsetting-columns

網頁設計好好玩

11. 修改網站內容

學員網站：https://webugm.github.io/hhjh-10602.html
根據範本內容修改
例：https://webugm.github.io/portfolio/
適當的文字與圖片

網頁設計好好玩

12. 入口網站

一、搬站

在網站根目錄建立「web」資料夾
把網站搬進「web」

二、建立bootstrap4 框架

下載Bootstrap至我們的專案並解壓縮：https://github.com/twbs/bootstrap/releases/download/v4.1.0/bootstrap-4.1.0-dist.zip
下載JQuery：https://code.jquery.com/jquery-3.3.1.min.js
下載Popper：https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js

套用
將專案開啟至編輯器
新增一個檔案：index.html
注意js的順序

<!DOCTYPE html>
<html lang="zh-Hant-TW">
  <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="css/bootstrap.min.css">
    
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
 
    <title>Bootstrap 離線版</title>
  </head>
  <body>
 
  </body>
</html>

三、使用table建立入口網站

程式碼


    <div class="container my-5">
      <h1 class="text-center">入口網站</h1>
      <table class="table table-hover table-bordered">
        <thead>
          <tr>
            <th class="text-center" scope="col" style="width:10%">#</th>
            <th class="text-center" scope="col" style="width:20%">網站名稱</th>
            <th class="text-center" scope="col">網站</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th class="text-center align-middle" scope="row">0</th>
            <td class="text-center align-middle" >育將電腦工作室</td>
            <td class="text-center align-middle" >
              <a href="web/index.html" target="_blank">
                <img src="....">
              </a>
            </td>
          </tr> 
        </tbody>
      </table>
    </div>

建立qrcode：http://www.quickmark.com.tw/cht/qrcode-datamatrix-generator/default.asp?qrLink

網頁設計好好玩

13. 圖片處理

一、圖片處理

高清免費圖片：https://unsplash.com/
簡易圖片編輯軟體：http://www.faststone.org/
請下載幾張圖至 d:\ugm\source
線上編輯圖片：https://www.ugm.com.tw/modules/tad_book3/page.php?tbdsn=797

二、img

img-fluid：圖片自動響應
<a >： target="_blank" => 開新視窗

三、範例

https://webugm.github.io/portfolio/

網頁設計好好玩

14. 成果展

範例：https://webugm.github.io/petanque2017/
範例檔案下載：https://startbootstrap.com/template-overviews/landing-page/
下載至 e:\ugm\github
至GitHub新增 Repo
設定GitHub Pages，並得到網址
將目錄切換至「e:\ugm\github」，git clone .......
將範例加到入口網站：

網頁設計好好玩

15. 成果展

本節讓同學問問題，解決同學成果展網站的問題