( Day 41 ) HTML 網頁中嵌入 Canva 簡報

2023 iThome 鐵人賽

Modern Web

跟著 OXXO 一起學 HTML系列第 88 篇

15th鐵人賽 html html教學

oxxo

2023-10-11 16:45:55

951 瀏覽

分享至

Canva 簡報 ( Canva presentation ) 是一個非常好用的線上簡報應用程式，除了可以運用 Canva 裡提供的各種樣板，更可以分享到各個平台進行觀看，這篇教學會介紹如何透過 HTML 的實作，將 Canva 簡報加到網頁中。

原文參考：網頁中嵌入 Canva 簡報

將 Canva 簡報發布到網路

登入 Canva 之後後前往自己的專案，開啟要分享的 Canva 簡報，點擊右上角的「分享」。

HTML 教學 - 網頁中嵌入 Canva 簡報 - 點擊右上角的「分享」

點擊後開啟分享選單後，點擊「顯示更多」。

HTML 教學 - 網頁中嵌入 Canva 簡報 - 點擊「顯示更多」

展開更多選單後，點擊「嵌入」。

HTML 教學 - 網頁中嵌入 Canva 簡報 - 點擊「嵌入」

嵌入的功能會將 Canva 簡報設為「公開檢視」，確認後點擊「嵌入」

HTML 教學 - 網頁中嵌入 Canva 簡報 - 將 Canva 簡報設為「公開檢視」

完成後會出現嵌入的 HTML 程式碼和網址，點擊複製 HTML 程式碼。

HTML 教學 - 網頁中嵌入 Canva 簡報 - 點擊複製複製程式碼

嵌入 Canva 簡報

複製 HTML 程式碼之後，貼到網頁中的 <body> 裡，執行後就會看見 Canva 簡報出現在網頁中。

<div style="position: relative; width: 100%; height: 0; padding-top: 56.2500%;
padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
border-radius: 8px; will-change: transform;">
  <iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
    src="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAFw6l_Byv4&#x2F;view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
  </iframe>
</div>
oxxo 設計的 <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAFw6l_Byv4&#x2F;view?utm_content=DAFw6l_Byv4&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Page 1</a>

HTML 教學 - 網頁中嵌入 Canva 簡報 - 看見 Canva 簡報出現在網頁中

修改嵌入的 Canva 簡報 HTML

觀察嵌入的 Canva 簡報 HTML，可以發現主要的 <iframe> 放在 <div> 裡，因此如果不想要使用 Canva 預設的樣式，可以單純取出 <iframe>，並修改 style，就能增加嵌入 Canva 簡報的彈性，此外，如果不需要連結資訊，只要移除 <div> 的下方額外的連結資訊即可，下方的範例會使用註解的方法，隱藏將不需要的部分，並移除 <iframe> 原本的樣式，使用其他樣式取代。

  <style>
    iframe{
      width:300px;
      height:200px;
      border:1px solid #000;
    }
  </style>
<!-- <div style="position: relative; width: 100%; height: 0; padding-top: 56.2500%;
padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
border-radius: 8px; will-change: transform;"> -->
  <iframe loading="lazy" src="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAFw6l_Byv4&#x2F;view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
  </iframe>
<!-- </div>
oxxo 設計的 <a href="https:&#x2F;&#x2F;www.canva.com&#x2F;design&#x2F;DAFw6l_Byv4&#x2F;view?utm_content=DAFw6l_Byv4&amp;utm_campaign=designshare&amp;utm_medium=embeds&amp;utm_source=link" target="_blank" rel="noopener">Page 1</a> -->

HTML 教學 - 網頁中嵌入 Canva 簡報 - 修改嵌入的 Canva 簡報 HTML