YT YouTube2Text

YouTube2Text → Transcripts → 全能小編特訓班 2025 開跑啦 #4 Canva [網站製作] 從零開始！

全能小編特訓班 2025 開跑啦 #4 Canva [網站製作] 從零開始！ — Transcript

by PAPAYA 電腦教室 · 602 words · 418 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:02嗨，大家好
0:04今天的影片是 Canva 基礎教學系列的最後一集
0:08在前三集我們扮演了旅行社的小編
0:10用 Canva 練習製作了貼文、簡報和影片等作品
0:14而今天我們要來練習「網站」的製作
0:18好，我們登入到 Canva 之後
0:20首先我到左上角點擊「建立設計」
0:23選擇「網站」來建立一個新的空白頁面
0:26製作網站跟製作貼文和簡報一樣
0:29我們可以先找找看有沒有合適的範本可以套用
0:32這樣不僅可以節省時間
0:34也能從範本中獲得一些設計的靈感
0:37譬如這個範本總共有 6 個頁面
0:39包含了首頁橫幅
0:41雙欄和卡片式佈局等常見的版型
0:44而如果你想要多一點彈性
0:46不需要套用全部頁面的話
0:48也可以選擇只套用其中一頁
0:50然後再去做內容的修改
0:53譬如刪除掉原來的背景
0:54替換成其它的圖片
0:56或是拖曳區塊的下邊緣來調整橫幅的高度等
1:00那這邊我們就接續之前首爾自由行的主題
1:03到側邊欄找一張跟首爾相關的照片
1:06將它拉到網頁之中
1:08並且放大佔滿整個橫幅區塊
1:10再將照片的圖層順序移到最後面
1:13來作為橫幅的背景
1:15那接著我們就可以來修改一下文字
1:18來突顯公司目前正在促銷的活動
1:20加上一些吸引人的價格和優惠資訊
1:24然後我把按鈕移到標題的下方
1:26引導用戶能快速找到相關資訊來完成預訂的流程
1:30至於左上角的地圖圖示
1:32我們可以考慮將它保留下來
1:34於是我把多餘的文字刪除掉
1:37將它放到大標題的左側
1:38來作為視覺上的點綴
1:41最後我再從電腦資料夾將公司的 Logo 拖曳進來
1:44安排在頁面角落
1:46這樣一個網頁的主視覺區就大致完成囉
1:50好，如果你希望用戶在點擊預訂按鈕後
1:53能跳轉到一個外部的網頁
1:55例如 Google 表單
1:57那麼你可以先發布這個表單
1:59將它設成公開的狀態
2:01然後替表單生成一個連結
2:03將連結做個複製
2:05再回到 Canva 對著按鈕打開右鍵選單
2:08來把連結按下 Ctrl +V 貼上
2:11點擊「完成」
2:12而如果你想要測試一下這個連結是否能正常運作
2:16你可以到右上角點擊「預覽」按鈕
2:19這裡 Canva 可以呈現「桌面」和「手機」兩種不同的版面
2:23只可惜目前手機版面僅提供預覽的功能
2:26無法進行客製化調整
2:28至於按鈕的部分
2:29點擊後 Google 表單會開啟在新的視窗
2:32如此用戶就能透過這個表單來填寫預訂的資訊囉
2:36OK，接著我們來新增網頁的第二個區塊
2:40我到底部點擊「新增頁面」的按鈕
2:43在頁面左側
2:44Canva 有提供了幾個頁面管理的功能
2:47例如鎖定
2:48複製和刪除頁面等
2:50點擊工具列的色盤則可變更區塊的背景色
2:54譬如我選擇了一個從照片擷取出來的紅色
2:57接著我在側邊欄點擊「設計」
3:00切換到「版面配置」
3:02這裡提供了各式各樣的網頁版型
3:05那考慮到這個區塊
3:06我打算用來列舉首爾自由行的特色
3:09所以我選擇了一個三欄式的版型
3:12然後將大標題選取起來
3:14按住 Shift 鍵不放將選取範圍擴展到底下的文字
3:18來將它們的色彩統一設為白色
3:21於是我們就可以準備來修改文字內容
3:24那你可以考慮加大標題字母的間距
3:27增加標題的視覺張力
3:29然後繼續完成底下每一欄的內容
3:31分別是歷史古蹟
3:33購物天堂和美食巡禮
3:35至於圓框內的影像
3:37我們就同樣回到側邊欄
3:39從現成的圖庫內找一些合適的素材
3:42有需要的話
3:43你也可以修改一下搜尋的關鍵字
3:46例如加上「美食」等其它詞彙
3:48這樣就能更容易找到適合的照片
3:51那為了讓這三個圓框跟背景能產生明確的區隔
3:55使觀眾視線更容易聚焦在影像本身
3:58我們可以替這些照片加上邊框
4:00邊框的色彩可以套用一個較柔和的米色
4:04只要設好了第一個圖案
4:06我們就可以啟用複製格式的功能
4:08將同一個設計快速套用到其它兩張圖片
4:11使整個頁面呈現一致的視覺效果
4:14而如果你想要讓這個區塊增添一些東方傳統的風格
4:18你可以到側邊欄找一些傳統的圖案
4:21將它拖曳到頁面的中央
4:23圖案的色彩我們就同樣設為米色
4:26並且將透明度調低
4:28使圖案呈現一種若隱若現的感覺
4:31而圖層順序要移到最後面來當成背景
4:34那一張圖案看起來不足以覆蓋整個頁面
4:38對此我們只要按住 Alt 鍵不放
4:40將圖案向右複製一份就 OK 了
4:43那最後我們可以為頁面內的元素添加動畫的效果
4:47譬如套用平移
4:49揚升和淡化等
4:50而如果頁面內有多個元素要套用動畫的話
4:54你也可以切換到「頁面」標籤來快速完成動畫的設定
4:58動畫套用完成後
5:00記得要點擊「預覽」來做個檢查
5:02確保每個元素的動畫都能如期運作
5:05好，我們繼續來新增下一個頁面
5:08如果你在設定頁面色彩時
5:10側邊欄沒有你要的色彩
5:12你可以直接在搜尋框內輸入色彩代碼
5:15來精確指定你想要的顏色
5:18那在設計網頁版面時
5:20我們不一定要仰賴 Canva 提供的版型範本
5:23而是去嘗試自由發揮
5:25譬如在頁面內放置一些富有意義的引言
5:28像是公司的品牌願景
5:30座右銘
5:31或是旅遊相關的名人名言等
5:34藉以傳達公司的理念和價值觀
5:36而在引言的下方
5:38我打算建立一個區塊
5:39用來放置公司的簡介
5:41於是我按下 R 新增一個矩形
5:44色彩選用米色來呼應上方的設計
5:47接著再按住 Alt 鍵不放將矩形加寬
5:50並且在角落加上圓角的效果
5:53使整體的設計更為柔和圓潤
5:55接下來我按下 T 新增一個文字框
5:58用來輸入「關於我們」四個字
6:00我把這個標題放到矩形的左側
6:03然後按下 L 新增一條直線
6:05直線的粗細我設為 1
6:07角度設為垂直
6:09使這條線成為標題和內文之間的分隔線
6:13最後我再按下 T 新增第二個文字框
6:15來貼上公司的簡介
6:17像是服務項目和經營理念等
6:19那 Canva 有個很方便的功能
6:22就是讓我們能靈活調整每個區塊的順序
6:25譬如你可以把這個區塊上移一層
6:27讓用戶在看到網站的主視覺圖後
6:29就能立即看到公司的背景和經營理念
6:32藉此建立用戶對公司的信任感
6:35好，那我繼續在三欄式版面的下方
6:37新增一個空白頁面
6:39這一次我打算在頁面兩側各放置一個文字框
6:42用來展示公司的服務內容和競爭優勢
6:46除了套用傳統兩欄式的版面之外
6:48我們也可以嘗試一些較具有創意的設計手法
6:51譬如我們可以找一張首爾塔的照片來當成頁面的背景
6:55並且讓塔身自然地將頁面分隔成左右兩個區塊
6:59不過目前塔身兩側的空間不太充足
7:02難以容納完整的文字說明
7:05所以我們可以到工具列點擊「裁切」按鈕
7:07來啟用 Canva 的 AI 展開功能
7:10展開的尺寸就選擇「完整頁面」
7:12接著再點擊底部的「展開」
7:15過了一會兒
7:16AI 就會將天空自動向上延伸
7:18產生了一個更寬闊的背景空間
7:21不過這張照片目前還是有點灰暗
7:23對比度略顯不足
7:25對此我們可以到工具列點擊「編輯」按鈕
7:28切換到「調整」分頁
7:30藉由調整亮度和陰影等參數
7:33使整張照片的明暗顯得更加層次分明
7:36此外我們還可以提升「飽和度」使色彩變得更為鮮艷
7:40以及搭配「清晰度」的調整來突顯影像的細節
7:43最後再巧用「暈影」效果將視覺焦點集中在照片的主題
7:48好，那接著我們就可以按下 T 新增一個文字框
7:51搬移到左側的天空
7:53來輸入第一段的標題內容
7:55然後按下 T 新增第二個文字框
7:57用來說明公司服務的競爭優勢
8:00那這一行我們可以把它轉換成清單
8:02讓重點資訊變得更加清晰有條理
8:06撰寫完畢後
8:07我們就可以把這兩個文字框
8:09按住 Alt 鍵不放複製到版面的右側
8:12再將文字內容做個修改
8:14這樣我們就完成了一個兼具質感和創意的雙欄式版面囉
8:18OK，接下來我們要來製作客戶推薦的區塊
8:22我打算使用可以左、右滑動的相簿圖庫來呈現
8:25雖然 Canva 本身並沒有內建相簿圖庫的功能
8:29不過我們可以改用 Canva 的簡報來做出類似的效果
8:33好，那我先把要用到的客戶照片上傳到 Canva
8:37上傳完畢後到底部點擊「新增頁面」
8:40這裡我們要先決定相簿的高度
8:43譬如我設為 560 像素
8:45然後我到左上角點擊「檔案」來建立一個新的設計
8:49尺寸就輸入剛才看到的 1366 x 560 像素
8:53那這一頁的背景色
8:54我選擇了一個略帶有棕色調的深灰
8:57然後我按下 R 新增一個矩形
9:00按住 Alt 鍵不放將它加寬和拉高
9:03再利用上方的工具列
9:05將矩形套用少許的圓角
9:07下一步
9:08我打算在矩形內側插入客戶的照片
9:11而且照片是呈現圓形的造型
9:14於是我到側邊欄使用「邊框」作為關鍵字來進行搜尋
9:18在頁面內插入一個圓形的邊框
9:20放置到版面的左側
9:22這樣我們就可以把剛上傳的客戶照片
9:24拖曳到邊框內
9:26製作出圓框相片的效果
9:28至於客戶推薦的文字
9:30我們就同樣按下 T 新增一個文字框
9:32來將推薦的內容貼上
9:34然後再按一次 T 來輸入客戶的稱謂
9:37放到推薦文字的右下角
9:39最後我們還要加上客戶評價的滿意度
9:42你可以輸入「星星評分」來做個搜尋
9:45將你要的評分圖案插入到頁面內
9:47然後做一些大小和位置的調整
9:50那製作好第一張卡片之後
9:52我們可以到右下角切換成簡報的檢視模式
9:55並且對著第一頁按下 Ctrl +D
9:58即「複製」的指令兩次
10:00這樣我們就可以用相同的版面配置
10:02來展示不同客戶的推薦內容
10:05我們只要替換掉圓框內的照片
10:07修改一下推薦文字和客戶稱謂
10:09就能製作出一系列風格一致的客戶推薦卡片
10:13最後為了製作出卡片左、右滑動的效果
10:16我們要在頁面之間加上轉場的動畫
10:19轉場的類型設為「滑動」
10:22然後捲到底部點擊「套用至所有頁面」
10:25那要把這個簡報嵌入到網站裡面的話
10:28我們要打開「查看全部」的選項來選擇「嵌入」
10:32這裡要選擇開頭為 https 的連結
10:35那要注意這個連結的後面有分成 watch 和 view 兩種模式
10:39前者有點類似影片
10:41會自動展示所有製作好的內容
10:44而後者則類似投影片
10:45能讓觀眾使用手動的方式來切換頁面
10:49你可以視自己的需求決定後面是要寫 watch 或是 view
10:53然後回到網站
10:54到左下角點擊「應用程式」
10:57輸入 embed (嵌入) 作為關鍵字
10:59找到一個同名的 App
11:01並且將剛才的連結貼上
11:03點擊「加入」
11:04最後再把卡片的大小做個調整
11:07好，我們來預覽一下效果
11:09而此時當我們用滑鼠點擊嵌入的卡片時
11:12它就會流暢的橫向滑動
11:14來顯示不同客戶的推薦內容囉
11:17好，接下來我們要在網頁中加入一個重要的互動元素
11:21聯絡表單
11:22讓訪客能輕鬆地和我們聯繫與互動
11:25而這裡我就使用大家很熟悉的 Google 表單來製作
11:29表單的結構非常簡單
11:31基本上就是訪客的姓名、電子郵件地址
11:34以及他們想要留下的訊息
11:36同時你可以依據需求將指定的欄位設為「必填」
11:41那為了讓表單的外觀
11:42能更符合網站的整體設計風格
11:45這裡我們可以到上方點擊「調色盤」
11:47來將主題色彩套用紅色
11:49然後將這個表單執行「發布」
11:52打開旁邊的選單來選取「嵌入 HTML」
11:55就可以得到一個嵌入的連結
11:58這個連結我們同樣只需要包含 https 的那一段
12:02將它拷貝下來後
12:03我們就回到 Canva 來新增一個頁面
12:06並且把連結貼到剛才的文字欄
12:09點擊「加入」
12:10接著再調整一下表單的位置和大小
12:13那我發現 Google 表單的頁首
12:15跟網站整體的風格有點不太協調
12:18為了讓表單能更融入網站的設計主題
12:21我們不妨可以新增一個矩形
12:23來將它的色彩設成跟背景相同的紅色
12:26然後使用這個矩形覆蓋住原來表單的頁首
12:30至於被覆蓋掉的訊息
12:32我們就按下 T 新增一個文字框來作為表單的標題
12:35然後再另外寫一段簡短的歡迎訊息
12:38以提升訪客填寫表單的意願
12:41那這個網頁的最後一個區塊
12:43是用來放置公司的聯絡資訊和社群媒體的連結
12:47通常這個區塊會採用深色的背景
12:49讓頁尾的資訊能跟網站主要的內容有明顯的區隔
12:53然後我按下 T 新增一個文字框
12:56搬移到版面的左側
12:57並且將公司的聯絡資訊和版權聲明貼上
13:01至於社群媒體的連結
13:03我們可以先到側邊欄輸入關鍵字來尋找適合的圖示
13:07例如 Instagram 和 Facebook 等
13:09插入圖示後
13:11我們要將它的色彩設為淺色
13:13使其能在深色背景上清晰可見
13:16最後再利用右鍵選單
13:18將公司的社群媒體連結貼到圖示內
13:21只要重複這個步驟
13:22我們就可以依序完成其它社群媒體的設定
13:25那在預覽這個網站時
13:28你可能有注意到底部有一個「包含導覽選單」的選項
13:31它可以在網頁上方自動生成一個導覽列
13:34讓用戶能跳轉到網頁不同的區塊
13:37而要做出這個效果
13:39我們必須先為個別區塊設定一個頁面標題
13:42譬如把第 2 頁命名為「關於 Vision Travel」
13:46第 3 頁命名為「旅遊行程」
13:48以及網頁最底部的「聯絡我們」表單
13:51命名完畢後
13:52你可以重新打開「預覽」的介面
13:54來勾選「包含導覽選單」的選項
13:57如此設好的頁面標題就會自動轉換成導覽列
14:00讓訪客能快速跳轉到他們感興趣的內容
14:04不過要特別注意
14:05Canva 目前主要是適用於「單頁式」的網站設計
14:09像是活動宣傳網站或個人作品集等
14:12因此這個導覽列僅支援在同一個網頁內進行跳轉
14:15而無法連結到其它頁面或外部網站喔
14:19OK，最後我們來談一下網站的發布
14:22你可以在頁面右上角找到「發佈網站」的按鈕
14:25這裡你可以選擇
14:26是否要讓 Canva 自動為手機版面進行最佳化的調整
14:30以及是否要包含剛才談到的導覽列
14:33至於網址的部分
14:35如果沒有打算付費的話
14:36我們可以直接使用 Canva 提供的子網域來發布網站
14:40再下來底部有一個「發佈設定」的選項
14:43這邊我們可以設定顯示在瀏覽器標籤的名稱
14:47以及「網站說明」
14:49而如果網站本身仍在開發中或是僅供內部使用
14:52我們也可以選擇關閉搜尋引擎的索引功能
14:55來避免網站內容被公開搜尋
14:58最後按下「發布網站」
15:00訪客就能透過剛才設定的網址來造訪這個網站
15:04而如果你覺得 Canva 提供的免費網址不夠正式專業
15:07你也可以點擊「取得新網域」
15:10這裡提供了兩個方式
15:11一個是直接透過 Canva 來購買網域
15:14這個方式雖然費用較高
15:16但設定過程都在同一個平台內
15:18特別適合不熟悉技術的初學者
15:21而另一個選擇是透過第三方的網域註冊商來購買網域
15:25這個方式需要花一點時間做設定
15:28但價格通常較為經濟實惠
15:31那這裡我以 GoDaddy 這個知名的網域註冊商為例
15:34你可以直接輸入想要的網域名稱
15:37Godaddy 就會列出許多可用的網域供我們選擇
15:40而且第一年通常都會有特別的價格優惠
15:44那這邊我就選擇一個價格合理的網域
15:46來示範後面的步驟
15:48點擊「前往購物車」
15:50而租用的年限
15:51這裡我就先設為 1 年
15:54然後準備進行結帳
15:55最後再按下「完成購買」的按鈕就 OK 了
15:59那要注意 GoDaddy 預設一年後會自動續約
16:02如果你不打算長期使用這個網域
16:05建議可以先關閉自動續約的功能
16:07以避免一年之後被自動扣款
16:09造成意外的費用支出
16:11網域購買完成後
16:13我們就可以回到 Canva 將它輸入到名稱欄
16:16點擊「繼續」
16:18「檢視步驟」
16:19那這裡我們需要新增一筆所謂的 A 記錄
16:22它的功用是將我們購買的網域
16:24對應到 Canva 所提供的 IP 地址
16:27所以我們要把右邊這一串數字拷貝起來
16:30回到 GoDaddy 的網站
16:32進入網域設定的頁面
16:34點擊「管理 DNS」
16:36接著按下「新增記錄」
16:38記錄類型我們就設為 A
16:40而旁邊的名稱欄則要輸入一個 @ 符號
16:43代表我們購買的網域
16:45最後再把 Canva 提供的 IP 地址貼到內容值的欄位
16:49點擊「儲存」
16:51那底下我有發現一筆重複的 A 記錄
16:54這個要把它刪除掉
16:56以確保我們的網域只會指向 Canva
16:58設定完成後
17:00我們就回到 Canva 的介面點擊「已新增記錄」
17:03而此時 Canva 會要我們新增第二個 A 記錄
17:06讓前面有包含三個 w 的網址也能連結到我們的網站
17:11那同樣地
17:12我發現 GoDaddy 也有一個重複的記錄
17:14裡面已包含了三個 w
17:16所以這個我們一樣要把它刪除掉
17:19然後點擊「新增」
17:21記錄的類型同樣是 A
17:23不過名稱欄這一次要輸入 www
17:26然後將同一個 IP 地址貼到內容值的欄位
17:29點擊「儲存」
17:31那 Canva 最後會請我們新增一個 TXT 記錄
17:34用來驗證網域的擁有權
17:36於是我把 Canva 提供的數值同樣做個複製
17:39在 GoDaddy 點擊「新增記錄」
17:42而記錄的類型這一次要設為 TXT
17:45然後在名稱欄輸入一個 @ 符號
17:48以及把剛複製的值貼到「內容值」的欄位
17:51點擊「儲存」
17:53這樣子網域的部分就算是設定完成了
17:56處理的時間大約需要等 20 分鐘
17:58但最久可能會長達 72 個小時
18:01那網域正式生效後
18:03我們會收到一封來自 Canva 的確認郵件
18:06點擊「查看」
18:07我們就能用自己購買的網域來瀏覽這個網站囉
18:11OK，那希望這一系列的 Canva 教學
18:14能協助大家更順利地踏上設計創作的旅程
18:17那今天我們就聊到這邊
18:19我們下回再見，拜拜

About this transcript

This page contains the full transcript of 全能小編特訓班 2025 開跑啦 #4 Canva [網站製作] 從零開始！ by PAPAYA 電腦教室, generated from the public captions YouTube serves with the video. The transcript has 602 words across 418 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.