Canva 提供免費線上設計軟體,可以讓使用者輕鬆地製作各種網頁, 友善的使用者界面,即使沒有網頁設計基礎的人也能快速輕易上手,製作出自己專屬的實用網頁作品,幾乎可以滿足不同使用者的需求。你可以不用寫程式碼,完全交給Canva來幫你完成你所需要的網頁內容。 如下說明,
如何讓Canva8幫你完成你想要的網頁? (你可先參考之前的簡略說明文章:https://vocus.cc/article/68a5e354fd89780001fcefd6)步驟1
先登入Canva AI 網頁
你想要Canva幫你設計的內容,於對話區域內清楚地將要求內容書寫出來。如下:https://www.canva.com/ai/code

步驟2
思考要建構什麼樣的網頁內容?
為了節省時間,提高效率,事先寫出欲建置網頁的全體式樣規格,如網頁內容的呈現與構成,資料輸入的維護與查詢等功能。以便將需求的式樣規格提交給Canva。
如下為本文範例提交給Canva的需求內容:
----需求內容----
請幫忙設計網頁
首頁功能:
標題設為 "記事網頁"
請幫忙選擇一適當圖片當作首頁標誌用,首頁顯示兩個按鈕:
即 "記事維護"按鈕與"記事查詢"按鈕 。各按鈕的功能,如下敘述:
(1) 記事維護 點擊後 ,進入維護分頁,功能如下
包括 新增記事與 編輯記事,刪除記事
(1.1)新增記事,可以輸入包含如下四項目:
"日期", "分類","概要"、"說明",
新增項目規範如下
*日期:空白即為今日的系統日期,亦可讓使用者輸入日期
*分類:可輸入文數字,
*概要:可輸入文數字
*說明:該區域具有功能如下 :
可輸入文數字說明
可輸入外部連結網址
可以提供複數個檔案的儲存空間的連接網址,以便使用者可開啟檔案閱讀。
(1.2)記事編輯,編輯前,使用者先輸入"日期","分類",
依據上述使用者輸入的日期,分類。將滿足輸入條件的記事內容顯示出來,顯示內容包括上述四項目即"日期","分類","概要"、"說明"的 內容顯示出來
特別說明:
*"日期","分類" 使用者可以輸入欲編輯記事的日期或分類,
當"日期"或"分類" 無輸入值時,表示取出全部的記事
*注意顯示記事以記事日期為最新的列出在最上面,依此類推,即由最新至最舊記事顯示
*當這些被選中的記事內容,被顯示出來後,可以讓使用者進行修改記事的各項目內容。
*當使用者修改後,需有"儲存" 按鈕,以便系統執行更新該筆記事內容並存檔。
(1.3)記事刪除,刪除前,使用者先輸入"日期","分類",
依據使用者輸入的日期,分類。將滿足輸入條件的記事內容顯示出來
*當這些被選中的記事內容,被顯示出來後,可以讓使用者選擇欲刪除的記事標誌,支援 可以多筆紀事被刪除的功能,支援可以點選全選刪除所有記事的功能。
*勾選欲刪除記事後,需有"刪除確認"的按鈕,以便系統執行刪除這些記事的紀錄。
(2) 記事查詢 點擊後 ,進入查詢分頁,功能如下
記事查詢,查詢前,輸入項目包含"日期","分類"
*當"分類"欄,無輸入值時,表示欲查詢全部分類的記事,否則只列出輸入日期期間內的該分類別的記事。
* "日期"欄,可以選擇輸入期間,即輸入始日期, 終日期,當"始日期"無輸入時,即表示全部記事需列出,另外當"終日期"無輸入時,即表示終日期為最新的日期;否則列出輸入始日期與終日期,該段期間內的記事。
依據上述使用者輸入的分類和日期,顯示出該期間內記事之內容,包括:"日期", "分類","概要","說明"。
上述四項目的所有內容需全部顯示出來,並可打開記事內容註明的檔案網址,與對外連結網址,讓使用者可以瀏覽所對應的網頁。
查詢後顯示記事時,以記事日期最新的列出在最上面,從最新記事至最舊記事依序列出顯示,即列出順序之KEY值,第1 KEY為日期的值,第2 KEY為分類的值。
----需求內容 end----
步驟3
與Canva溝通提問,修改確認新建網頁內容
提交的式樣內容,經Canva思考後撰寫程式碼,Canva再將結果顯示出,可能使用者須與Canva多次溝通修改。如下圖是本文需求提交後,第11版的修改。

左邊是與CANVA溝通提問的區域,右邊是CANVA完成程式碼後顯示結果
當網頁程式無法當日修訂完成,或有他事須暫停修改,你可以隔日再進入Canva AI網頁,請它繼續幫你修改未完成的網頁。需記住Canva AI 網址,本案如下:
https://www.canva.com/ai/code/thread/a4829685-1a20-47cb-881a-4c8dbf87af3c
當你要再次進入網頁建置或修訂時,只要進入上述本案的Canva AI網址,便可請Canva繼續為你修改至滿足你的需求,並完成程式碼。
如下圖為與它多次交談項目中之一,這是第11次提問題給CANVA,它會將由11版修改後,再次將結果顯示,並註明為第 12版。

使用者與Canva交談的畫面
你亦可將CANVA完成的網頁程式碼顯示出來參考,若要自行修改亦可直接修改該網頁之程式碼,或是將程式碼備份複製一份,以供日後參考。

CANVA依據你的需求,自動設計完成的程式碼
本文範例經多次交談修改確認,最終Canva自動作成的網頁如下:

步驟4
新建網頁完成後,最後將該網頁"發佈網站"或"分享"
經使用者確認後,認為Canva自動撰寫的程式碼無問題,便可將該網頁發佈或分享給其他使用者。這樣才能於電腦上使用,也能在手機使用該網頁,只要手機在手,無論在何處,隨時隨地都可使用,極為方便又實用。
如下圖右上方使用者可以選擇"發佈網站"或"分享"

若按下發佈網站,將出現如下圖:

將下圖網站網址複製取得後,就可以在電腦或手機上使用該網頁程式

下圖為本範例完成之作品,於電腦上執行之畫面



記事查詢,當查詢條件空白時,將顯示出全部記事
下圖為記事編輯使用畫面,先查詢出記事,再點選欲刪除之記事項


查詢出記事,再點選欲刪除之記事項
手機上亦可執行新完成的網頁,如下:

於手機上,新增一筆記事,如下

查詢2026-4-1的記事,結果只出現這一筆,如下

當查詢條件空白,手機上顯示出全部記事,如下



如何利用CANVA完成網頁,只要遵照如上四個步驟進行,不用繕寫程式碼,依據不同需求,提交後便可產生網頁,讓你可以在網路上任何時間地點,將你的事件資料輸入編輯,點閱瀏覽,刪除維護,非常方便。你的各種寶貴資料將可以更有效率地維護管理,紀錄保存,並可輕易依分類,日期順序作查詢調閱。
--- by linct-----

















