網頁設計與雲端應用
一、輕鬆的建立互動表單
- 登入gmail
- 啟動 雲端硬碟(google drive)
- 移至表單存放目錄
- 「新增/google表單」
- 問卷「標題」「說明」：台南社大網頁設計期中聚餐調查 、星期六用晚上時間、星期日用早午餐時間
- 問題：
姓名(簡答)
電話(簡答)
email(簡答)：回應驗證=> 文字：電子郵件地址
是否願意參加(單選)：是、否
日期(核取方塊)：說明=>可以複選，星期六用晚上時間、星期日用早午餐時間 , 2017-05-20(六)、2017-05-21(日)、2017-05-27(六)、2017-05-28(日)、其他
推廌餐廰(段落)：說明=>請填店名，請簡述推廌理由 - 建立試算表：回覆
- 改變外觀：調色盤
- 預覽表單
- 設定：收集電子郵件地址、需要登入、在提交後進行編輯
- 傳送表單
二、將表單嵌入至網頁
- 使用bootstrap容器，放置嵌入碼
- 將寬度改成響應式，並調整適合高度
<!DOCTYPE html>
<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">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- 自訂樣式表 -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<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>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
三、將Google雲的資料權限設定
- 開啟「網頁設計班期中聚餐調查表 (回應)」：這是表單接收資料的地方
- 請按「共用」=> 選擇「進階」
- 變更「擁有存取權的使用者」=> 公開在網路上
- 「檔案/發佈到網路」=> 選擇「內嵌」、「工作表」
- 取得嵌入碼
- 使用bootstrap容器，放置嵌入碼
- 將寬度改成響應式，並調整適合高度