育將電腦工作室 - 線上書籍

Google雲端無紙化工作術
==============

### <span style="font-size:18px;">一、網頁編輯器</span>

1. <span style="font-size:18px;">[32bit sublime text3](https://www.google.com/url?q=https://github.com/webugm/tools/raw/master/ugm_show/Sublime%20Text%20Build%203126-32.zip&sa=D&ust=1516153107253000&usg=AFQjCNFgu8un_pfxOGzISyuvXNzGV_vhOg)</span>
2. <span style="font-size:18px;">[64bit sublime text3](https://www.google.com/url?q=https://github.com/webugm/tools/raw/master/ugm_show/Sublime_20160915_3114_x64.zip&sa=D&ust=1516153107253000&usg=AFQjCNFJZg0j8jHd52JIGhlU8y90QzjcJQ)</span>
 
### <span style="font-size:18px;">二、Bootstrap4 響應式框架簡介</span>

1. <span style="font-size:18px;">中文網站：<https://bootstrap.hexschool.com/></span>
 
### <span style="font-size:18px;">三、安裝與使用</span>

1. <span style="font-size:18px;">index.html</span>
2. <span style="font-size:18px;">下載：<https://bootstrap.hexschool.com/docs/4.1/getting-started/download/></span>
3. <span style="font-size:18px;">範本：</span> ```
  <pre class="brush:as3;">
  <!doctype html>
  <html lang="en">
    <head>
      
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
      
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  
      <title>網站標題</title>
    </head>
    <body>
      <h1>哈囉！世界</h1>
      <div class="container">
        <div class="row">
          <div class="col-sm-6">左邊</div>
          <div class="col-sm-6">右邊</div>
        </div>
      </div>
  
      
      
      <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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
    </body>
  </html>
  ```
4. <span style="color:#FF0000;"><span style="font-size:22px;">運用</span></span><span style="font-size:18px;">，下個星期，老師要帶學員，<span style="color:#FF0000;">安裝「全家便利商店」的APP</span>，並要<span style="color:#FF0000;">送學員咖啡</span>，需要收集學員的<span style="color:#FF0000;">手機號碼</span>(<span style="color:#FF0000;">無紙化作業流程情境教學</span>)。</span>
  1. <span style="font-size:18px;">[<span style="color:#000080;">https://tawan158.github.io/</span>](https://tawan158.github.io/)<span style="color:#000080;"></span></span>
  2. <span style="font-size:18px;">建立Google表單及試算表</span>
  3. <span style="font-size:18px;">建立「Google表單」QRCODE</span>
  4. <span style="font-size:18px;">讓學員填表單(用手機掃QRCODE)</span>
  5. <span style="font-size:18px;">將結果秀在網頁上(只出現姓名)</span>
  6. <span style="font-size:18px;">帶學員安裝「全家便利商店」的APP</span>
  7. <span style="font-size:18px;">老師透過APP贈送學員咖啡(<span style="color:#FF0000;">通過在GitHub建立一個專案，並將上面範本製作成網頁檔上傳成一個網站，才能喝到咖啡</span>)</span>
  8. <span style="font-size:18px;">走，下課前30分鐘，一起去「全家」用APP拿咖啡</span>
  9. ![](https://images.unsplash.com/photo-1529892485617-25f63cd7b1e9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6f3d3508fe6a3a1adb8301aa284f9381&auto=format&fit=crop&w=500&q=60)
 
</body></html>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown