網頁設計與雲端應用
一、嵌入Google地圖
- 網址：maps.google.com
- 輸入搜尋地點的關鍵字、地址.....：台南市大成國中
- 「分享/嵌入地圖/自訂大小/1170 x 300」
- 得到嵌入碼
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3673.221962794082!2d120.19572831442864!3d22.978863984975167!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346e75d66763542d%3A0x75457923247277f7!2z6Ie65Y2X5biC56uL5aSn5oiQ5ZyL5rCR5Lit5a24!5e0!3m2!1szh-TW!2stw!4v1498002096290" width="1170" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
- 修改css
style="width:100%;height:300px;" - new-age/index.html
<li>
<a class="page-scroll" href="#maps">電子地圖</a>
</li>
<!-- 電子地圖 -->
<section id="maps" class="maps">
<div class="container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3673.221962794082!2d120.19572831442864!3d22.978863984975167!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346e75d66763542d%3A0x75457923247277f7!2z6Ie65Y2X5biC56uL5aSn5oiQ5ZyL5rCR5Lit5a24!5e0!3m2!1szh-TW!2stw!4v1498002577802" style="width:100%;height:300px;" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</section>
new-agenew-age/css/new-age.css
/* ugm */
.maps{
background: url("../img/bg-pattern.png"), #7b4397;
/* fallback for old browsers */
background: url("../img/bg-pattern.png"), -webkit-linear-gradient(to left, #7b4397, #dc2430);
/* Chrome 10-25, Safari 5.1-6 */
background: url("../img/bg-pattern.png"), linear-gradient(to left, #7b4397, #dc2430);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
二、將影音放上Youtube，再嵌入網站
- 網址：https://www.youtube.com/
- 搜尋「育將電腦工作室」，找到「台南社大-網頁設計-整體觀念20170509」
- 「分享/嵌入」
- 接下來與嵌入地圖同
三、google日曆
- 網址：https://calendar.google.com/
- 建立日曆
- 設定日曆、共用日曆
- 得到嵌入碼，接下來與嵌入地圖同