搜尋

常用網頁元素

過去要設計網頁,通常都要學習 HTML、CSS、JavaScript 等網頁語法,而 Canva 只需要幾個步驟,就能輕鬆地搭配各種網頁元素,並將設計轉換成網頁,這篇教學會介紹 Canva 裡常用的網頁元素。

快速導覽:

Canva 教學 - 常用網頁元素介紹

常用網頁元素

網頁設計和一般的設計比較不同的地方,網頁設計會使用「網頁元素」來呈現網頁內容,雖然使用 Canva 進行網頁設計時並不會直接編輯網頁程式碼,但使用了下列的元素,仍然會轉換成網頁語法來呈現,Canva 裡常用的網頁元素如下:

元素 說明
網頁標題 網頁 title 元素,不會顯示在畫面中,但會出現在搜尋引擎和瀏覽器頁籤上。
頁面標題 連結每個頁面的標題文字,Canva 作為導覽列專用的連結標記。
標題、副標題 網頁 h1~h6 標題元素,一個網頁通常只有一個 h1 標題,內容和 title 相同,但 Canva 並沒有使用標準 h1~h6 作為標題,而是透過網頁 CSS 設定文字格式。
內文 網頁 p 段落元素。
連結 網頁 a 超連結元素。
表格 網頁 table 表格元素。
清單 網頁 ul、li 清單元素。
圖片 網頁 img 圖片元素。
形狀 網頁 SVG 圖形元素。
影片 網頁 video 影片元素。

網頁標題

「網頁標題」是網頁的 title 元素,不會顯示在畫面中,但會出現在搜尋引擎和瀏覽器頁籤上,Canva 的網頁標題就是「這個專案的名稱」,從「檔案」和最上方的輸入欄位 ( 畫面夠寬就會顯示 ) 可以進行設定。

Canva 教學 - 常用網頁元素 - 設定網頁標題

發佈並開啟網頁後,從瀏覽器頁籤和原始碼裡,就會看見設定的標題名稱 ( 參考「網頁標題 title」 )。

Canva 教學 - 常用網頁元素 - 觀察網頁標題

頁面標題

「頁面標題」是連結每個頁面的標題文字,也是 Canva 作為導覽列專用的連結標記,從「頁面」可以進行設定。

Canva 教學 - 常用網頁元素 - 設定頁面標題

當設計專案有「多個頁面」,轉換成網頁後就會變成「單頁式」網站裡有「多個區塊」,透過導覽列就能快速前往指定的區塊,例如下圖從網頁原始碼裡,就會看見不同區塊的名稱。

Canva 教學 - 常用網頁元素 - 查看頁面標題

標題、副標題

「標題、副標題」通常是指網頁的 H1~H6 元素,一個網頁只會放置一個 h1 標題,其內容通常和 title 相同,但 Canva 並沒有使用標準 H1~H6 作為標題,而是透過網頁 CSS 設定文字格式,使用的方式只需要添加文字,將文字樣式設定為標題或副標題即可。

Canva 教學 - 常用網頁元素 - 設定標題、副標題

發佈並開啟網頁後,從網頁原始碼裡,就會看見網頁標題和副標題使用 span 標籤,並非 H1~H6 的標題標籤 ( 參考「標題 h1~h6」 )。

Canva 教學 - 常用網頁元素 - 標題、副標題

內文

「內文」通常是網頁的 p 元素裡的內容,通常會放置主要的文字,並透過不同的 p 元素進行分段,在 Canva 裡只需要添加文字,將文字樣式設定為內文即可。

Canva 教學 - 常用網頁元素 - 設定內文

發佈並開啟網頁後,從網頁原始碼裡,就會看見設定的內文 ( 參考「段落 p」 )。

Canva 教學 - 常用網頁元素 - 觀察內文

連結

「連結」是網頁的 a 元素所實現的「超連結」,可以開啟其他的網頁或前往頁面中指定的位置,選擇畫面中的元素或文字,點擊「,,,」選擇「連結」,就能替元素或文字加入連結。

Canva 教學 - 常用網頁元素 - 加入連結

加入的連結可以選擇 Canva 中已經發佈為網頁的專案,或這個專案裡的指定頁面。

Canva 教學 - 常用網頁元素 - 加入連結

除了 Canva 本身的頁面,也可以填入外部的連結網址。

Canva 教學 - 常用網頁元素 - 加入外部連結

發佈並開啟網頁後,從網頁原始碼裡,就會看見設定的連結,仔細觀察可以發現如果是連結到「頁面的特定區塊」,網址使用「#」的方式連結到指定的 id ( 參考「超連結 a」、「HTML 元素屬性」 )。

Canva 教學 - 常用網頁元素 - 觀察連結

清單

「清單」是網頁 ul 和 li 等元素所組成的條列項目,在 Canva 裡使用文字的「清單」按鈕,就能將分段的文字轉換成清單。

Canva 教學 - 常用網頁元素 - 設定清單

發佈並開啟網頁後,從網頁原始碼裡,就會看見設定的清單 ( 參考「無序清單 ul、li」 )。

Canva 教學 - 常用網頁元素 - 觀察清單

表格

「表格」是網頁 table、th、tr、td 等元素所組成的表格,在 Canva 裡加入「表格」設計元素,就能夠開始使用表格。

Canva 教學 - 常用網頁元素 - 設定表格

發佈並開啟網頁後,從網頁原始碼裡,就會看見設定的表格 ( 參考「表格 table、tr、td」 )。

Canva 教學 - 常用網頁元素 - 觀察表格

圖片

「圖片」是透過網頁 img 元素所顯示的圖片,只要是 Canva 可以進行「編輯照片」的圖片元素,都是屬於圖片類型。

Canva 教學 - 常用網頁元素 - 加入圖片

某些小動畫元素,也是屬於圖片類型。

Canva 教學 - 常用網頁元素 - 加入圖片

發佈並開啟網頁後,從網頁原始碼裡,就會看見加入的圖片,仔細看可以發現小動畫使用 .gif 格式,靜態圖片使用 .jpg 格式 ( 參考「圖片 img」 )。

Canva 教學 - 常用網頁元素 - 觀察表格

形狀

「形狀」是透過網頁 SVG 元素所顯示的圖片,只要是 Canva 可以進行「編輯影像」的形狀或向量圖元素,都是屬於形狀類型。

Canva 教學 - 常用網頁元素 - 加入形狀

此外,便利貼或圖表元素,也屬於形狀類型。

Canva 教學 - 常用網頁元素 - 加入形狀

發佈並開啟網頁後,從網頁原始碼裡,就會看見使用 SVG 呈現形狀元素 ( 參考「向量圖形 svg」 )。

Canva 教學 - 常用網頁元素 - 觀察形狀

影片

「影片」是使用網頁 video 元素所呈現的影片,只要在 Canva 設計專案中加入影片元素,都會使用這種方式呈現,點擊「播放」按鈕可以設定網頁載入時影片播放的方式。

注意,轉換成網頁的專案,無法使用「聲音」檔案。

Canva 教學 - 常用網頁元素 - 加入影片

發佈並開啟網頁後,從網頁原始碼裡,就會看見使用 video 標籤播放影片 ( 參考「播放影片 video」)。

Canva 教學 - 常用網頁元素 - 觀察影片

如果使用 Youtube 應用程式加入 Youtube 影片,則會使用 iframe 的方式呈現 ( 參考「網頁中嵌入 YouTube 影片」 )。

Canva 教學 - 常用網頁元素 - 觀察影片

小結

如果較為熟悉網頁 HTML 語法,則就更能掌握 Canva 發佈成網頁之後,各個元素彼此之間的運作原理,也更能做出漂亮精美的網頁囉。

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

Canva 教學

基本介紹

關於 Canva 註冊、登入、方案 主畫面 專案管理 ( 資料夾、課程 ) 專案管理 ( 設計、影像 ) 專案類型 相關設定

展示&分享&下載

展示簡報的方式 分享簡報 下載檔案 網頁中嵌入簡報

共用設計功能

專案設計介面 使用範本和樣式 添加元素 加入文字 上傳檔案 繪圖工具 加入專案

簡報&設計

基本功能、使用範本 頁面管理、背景圖片 儲存、下載、匯入

文件&白板

文件 ( 建立、文字樣式 ) 文件 ( 圖片、表格、清單 ) 文件 ( 圖表、嵌入網頁 ) 文件轉換成簡報 使用白板

影像&照片

編輯向量圖 編輯點陣圖 單純編輯照片 使用 Scratch 繪製圖形

影片&聲音

剪輯、調整、播放速度 串連其他影片 分割頁面、轉場 加入文字和圖形 影片靜音、背景音樂 使用雅婷文字轉語音

網頁設計

建置、發佈網站 網域設定管理 常用網頁元素

應用程式

YouTube Google 地圖 圖片快速套用模型 角色製作工具 表情符號和小動畫 可愛&趣味貼圖 產生 QRCode AI 人像表情 AI 手繪影像轉換 AI 清晰&放大照片

AI 魔法功能

AI 魔法媒體工具 AI 魔法工作室 AI 魔法變形工具 AI 魔法文案工具