搜尋

建置網站、發佈網站

過去要設計網頁,除了要學習網頁語法,更需要具有網頁空間,才能讓大家瀏覽網頁,而 Canva 提供了好用的「發佈網站」功能,只需要幾個步驟,就能將設計轉換成網頁,這篇教學會介紹如何使用 Canva 建置網站以及發佈網站。

快速導覽:

Canva 教學 - 建置網站、發佈網站

使用範本建立網頁

從右上角「建立設計」選擇「網站」,就能使用網站範本開始建立網頁。

Canva 教學 - 建置網站、發佈網站 - 使用範本建立網頁

或者也可以在首頁點擊「網站」,從下方選擇預設的網站範本建議網頁。

Canva 教學 - 建置網站、發佈網站 - 使用範本建立網頁

建立網站專案後,從上方檔案選單中,會看見這個專案屬於 website 類型。

Canva 教學 - 建置網站、發佈網站 - 這個專案屬於 website 類型

左側的設計範本,預設使用網頁設計相關範本。

Canva 教學 - 建置網站、發佈網站 - 預設使用網頁設計相關範本

選擇適合的範本,就可以根據這個範本開始編輯。

Canva 教學 - 建置網站、發佈網站 - 選擇適合的範本

使用一般專案建立網頁

除了直接建立網站類型專案,也可以使用一般的設計專案進行設計,以下圖為例,建立一個空白的簡報專案,因為是簡報專案,左側設計元素會呈現簡報相關範本,並不會呈現網站範本。

Canva 教學 - 建置網站、發佈網站 - 使用一般專案建立網頁

如果要將一般專案轉換成網頁,可以點擊右上方「分享」,選擇「網站」。

Canva 教學 - 建置網站、發佈網站 - 預點擊右上方「分享」,選擇「網站」

繼續點擊「轉換成網站」,這個專案就會轉換成網站類型。

Canva 教學 - 建置網站、發佈網站 - 專案就會轉換成網站類型

轉換成網站類型後,就能開始使用網站相關的設計範本。

Canva 教學 - 建置網站、發佈網站 - 開始使用網站相關的設計範本

設定頁面標題

使用 Canva 打造的網站,專頁術語稱之為「一頁式網站」,意思是設計專案裡的所有「分頁」,都會變成區塊的形式「垂直排列」,再透過點擊「導覽列」或捲動網頁的方式瀏覽,因為要設定導覽列,所以必須要替所有的分頁設定「頁面標題」。

點擊分頁的「...」按鈕,接著點擊分頁名稱旁的鉛筆圖示,就能修改頁面標題。

Canva 教學 - 建置網站、發佈網站 - 設定頁面標題

切換不同頁面

如果有不同分頁,也可以透過「連結」的方式切換頁面,在需要連結的文字、圖片或形狀上按下右鍵,或點擊「...」按鈕,選擇「連結」。

實際變成網站後,不通分頁切換頁的效果會採「垂直上下滑動」的方式呈現。

Canva 教學 - 建置網站、發佈網站 - 透過「連結」的方式切換頁面

開啟連結視窗後,選擇指定的分頁,當發佈網站之後,點擊連結就會前往該頁面。

Canva 教學 - 建置網站、發佈網站 - 點擊連結後,就會前往該頁面

加入超連結

除了透過連結切換分頁,也可以選擇「已經發佈為網頁」的「不同專案」,同樣在需要連結的文字、圖片或形狀上按下右鍵,或點擊「...」按鈕,選擇「連結」,開啟連結視窗後,選擇指定的「專案」就可以進行連結。

Canva 教學 - 建置網站、發佈網站 - 開啟連結視窗後,選擇指定的「專案」

如果要連接到外部網頁,只需要在上方輸入欄位輸入網址,當發佈網站之後,點擊連結就會開啟指定的網頁。

Canva 教學 - 建置網站、發佈網站 - 在上方輸入欄位輸入網址

發佈網站

網站設計完成後,接著就要將網站「發佈」到網際網路中,讓網站具有「網址」,如果是網站類型 ( website ) 的專案,點擊右上方「發佈網站」就可以進入網站發佈流程。

如果是其他類型的設計專案,則需要先點擊右上方「分享」,選擇「網站」後將專案「轉換成網站」,才能使用發佈網站功能

Canva 教學 - 建置網站、發佈網站 - 點擊右上方「發佈網站」就可以進入網站發佈流程

開啟發佈網站視窗,進入第一步驟的設定,勾選「在行動裝置上調整尺寸」,設定「包含導覽列」以及使用「免費網域」,相關說明如下:

  • 在行動裝置上調整尺寸:畫面元素會根據瀏覽裝置的不同,自動適應排列或縮放大小,可以避免在行動裝置瀏覽時太小或太擁擠的狀況 ( 專業術語稱作 Responsive Web Design,RWD、響應式網頁設計 )。
  • 包含導覽列:將分頁名稱獨立到最上方,點擊後可快速前往該分頁的位置。
  • 免費網域:由 Canva 的「主網域」和使用者自訂的「子網域」和「路徑」所組合成的免費網址,也可以綁定自己購買的網域或透過 Canva 購買,免費使用者可以自訂五個網址,教育版或 Pro 版使用者可無限設定。

Canva 教學 - 建置網站、發佈網站 - 點網站發佈流設定

點選「繼續」,進入第二步驟的設定,點擊上方「鉛筆」按鈕可以編輯網站的「標題」和「圖示」,頁面 URL 可以設定頁面的路徑,頁面描述則是關於這個網站的敘述,開啟進階設定選擇「停用密碼保護」、啟用「搜尋引擎能見度」和「連結預覽」,相關說明如下:

  • 網站標題和圖示:提供給搜尋引擎的標題和圖示,通常也會呈現在搜尋結果,如果將網站儲存成書籤預設也採用此標題和圖示。
  • 頁面 URL:這個網頁的網址,如果不設定則是「/」表示根目錄,設定後表示使用其他路徑,可以不斷使用「/」區分不同路徑。
  • 頁面描述:提供給搜尋引擎的網站敘述,通常也會呈現在搜尋結果中。
  • 密碼保護:開啟網頁需要密碼,因為會影響瀏覽,通常不會啟用。
  • 搜尋引擎能見度:啟用後搜尋引擎就可以搜尋到這個網頁,也會開始將網頁收錄到搜尋結果中。
  • 連結預覽:分享網頁時的預覽圖。

Canva 教學 - 建置網站、發佈網站 - 第二步驟的設定

如果點擊上方「鉛筆」按鈕,會彈出修改標題和圖示的小視窗,點擊前方 C 的按鈕就能上傳網站圖示。

Canva 教學 - 建置網站、發佈網站 - 修改標題和圖示

發佈完成後,就可以透過網址,開始瀏覽網站。

Canva 教學 - 建置網站、發佈網站 - 透過網址,開始瀏覽網站

取消發佈、更新網站

發佈網站後,如果有更新內容或修改設計,則必須要「重新發佈網站」,才能夠正確更新網站內容,如果要取消發佈網站,只要點擊右上方「發佈網站」,點擊「取消發佈網站」就能取消,這個步驟也會「釋放網址」,讓其他的專案可以使用這個網址

Canva 教學 - 建置網站、發佈網站 - 取消發佈、更新網站

除了一個專案一個專案的手動取消,也可以從個人的「設定 > 網域」裡,直接將網域刪除,網域刪除後,會取消所有已經發佈的網頁,一次解除所有專案與發佈網址間的連動

Canva 教學 - 建置網站、發佈網站 - 直接將網域刪除

小結

Canva 的網頁設計功能很容易上手,但也因為容易上手,所以相對會犧牲一些進階的網頁功能 ( 例如表單、SEO、Google 分析、進階程式...等 ),不過如果想要快速建置網站,但又不會網頁語法,倒是可以使用 Canva 快速實現心中的想法。

意見回饋

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

Canva 教學

基本介紹

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

展示&分享&下載

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

共用設計功能

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

簡報&設計

基本功能、使用範本 頁面管理、背景圖片 儲存、下載、匯入 使用動畫、動畫順序 自製圖片或文字邊框 文字雲特效

文件&白板

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

影像&照片

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

影片&聲音

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

網頁設計

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

應用程式

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

AI 魔法功能

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