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

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

一、嵌入Google地圖

1. 網址：[maps.google.com](http://maps.google.com)
2. 輸入搜尋地點的關鍵字、地址.....：台南市大成國中
3. 「分享/嵌入地圖/自訂大小/1170 x 300」
4. 得到嵌入碼 ```
  <pre class="brush:as3;">
  <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 ```
  <pre class="brush:as3;">
  
                      <li>
                          <a class="page-scroll" href="#maps">電子地圖</a>
                      </li>
  ```
  
   ```
  <pre class="brush:as3;">
  
      
      <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 ```
  <pre class="brush:as3;">
  
  /* 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. 得到嵌入碼，接下來與嵌入地圖同

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown