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

網頁設計與雲端應用
=========

一、輕鬆的建立互動表單

1. 登入gmail
2. 啟動 雲端硬碟(google drive)
3. 移至表單存放目錄
4. 「新增/google表單」
5. 問卷「標題」「說明」：台南社大網頁設計期中聚餐調查 、星期六用晚上時間、星期日用早午餐時間
6. 問題：  
   姓名(簡答)  
   電話(簡答)  
   email(簡答)：回應驗證=> 文字：電子郵件地址  
   是否願意參加(單選)：是、否  
   日期(核取方塊)：說明=>可以複選，星期六用晚上時間、星期日用早午餐時間 , 2017-05-20(六)、2017-05-21(日)、2017-05-27(六)、2017-05-28(日)、其他  
   推廌餐廰(段落)：說明=>請填店名，請簡述推廌理由
7. 建立試算表：回覆
8. 改變外觀：調色盤
9. 預覽表單
10. 設定：收集電子郵件地址、需要登入、在提交後進行編輯
11. 傳送表單
 
二、將表單嵌入至網頁

1. 使用bootstrap容器，放置嵌入碼
2. 將寬度改成響應式，並調整適合高度 ```
  <pre class="brush:as3;">
  
  <html lang="zh-Hant-TW">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      
      <title>Bootstrap 101 Template</title>
  
      
      <link href="css/bootstrap.min.css" rel="stylesheet">
      
      <link rel="stylesheet" type="text/css" href="css/style.css">
  
      
      
      
      
      <script src="js/jquery.min.js"></script>
      <style type="text/css">
        
      </style>
    </head>
    <body>
      <div class="container">
        <h1>台南社大網頁設計期中聚餐調查</h1>
        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSdy8tcdkLy2pQhrNYfEUOintb7f042rZm1Re3FYqzuypuYX0g/viewform?embedded=true" style="width:100%;height:1700px;" frameborder="0" marginheight="0" marginwidth="0">載入中…</iframe>
        
      </div>
  
  
  
      
      <script src="js/bootstrap.min.js"></script>
    </body>
  </html>
  ```
 
三、將Google雲的資料權限設定

1. 開啟「網頁設計班期中聚餐調查表 (回應)」：這是表單接收資料的地方
2. 請按「共用」=> 選擇「進階」
3. 變更「擁有存取權的使用者」=> 公開在網路上
4. 「檔案/發佈到網路」=> 選擇「內嵌」、「工作表」
5. 取得嵌入碼
6. 使用bootstrap容器，放置嵌入碼
7. 將寬度改成響應式，並調整適合高度
 
</body></html>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown