17. Google地圖、影音套件

一、嵌入Google地圖

1. 網址：maps.google.com
2. 輸入搜尋地點的關鍵字、地址.....：台南市大成國中
3. 「分享/嵌入地圖/自訂大小/1170 x 300」
4. 得到嵌入碼

   <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>

    

5. 修改css 
   style="width:100%;height:300px;"
6. 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，再嵌入網站

1. 網址：https://www.youtube.com/
2. 搜尋「育將電腦工作室」，找到「台南社大-網頁設計-整體觀念20170509」
3. 「分享/嵌入」
4. 接下來與嵌入地圖同

三、google日曆

1. 網址：https://calendar.google.com/
2. 建立日曆
3. 設定日曆、共用日曆
4. 得到嵌入碼，接下來與嵌入地圖同