【居久屋課程筆記】Canva一頁式網站設計全攻略｜用Canva打造互動網頁
🖥️ Canva也能寫網頁？真的假的！ 你沒聽錯，我們今天要用Canva來做網站！作為一個曾經苦於前端框架設定的老工程師，當我看到Canva網站建置功能時，真的是又驚又喜。這不再只是靜態設計工具，它已經升級為一個能輕鬆打造一頁式網頁的強大平台，還能加動畫、做特效、設定區段切換，根本就是夢寐以求的教學神器！ 🛠️ 一頁式網頁設計：從旅遊主題開始 這一次我們要製作的，是一個名為「馬祖漫遊」的旅遊網站，首頁打開就有帥氣的背景動畫，六個主要單元清楚排好：關於馬祖、馬祖行旅、景點介紹、馬祖美傳、馬祖盛世、聯絡我們。使用者點選上方按鈕，畫面就會自動捲動至相對區段，而且每一段都能套上不同的動畫特效，整體觀感超級順暢又專業。 📂 建立網站之前，你需要這份規劃書！ 茶米老師苦口婆心地提醒：做網站前一定要先規劃！這次他也貼心提供一份完整的網站規劃書，將整個網站的結構、各單元名稱、子頁面內容甚至連文字說明與素材都預先設計好。這不只是給學生教學的好工具，更是大人自己備課設計的典範！ 🎨 操作環節一：Canva網站編輯介面詳解 進入Canva網站模式後，我們可以從首頁或左上角進入「建立」選單，選擇「網站」。不管你挑的是商業、教育或活動類範本，實際尺寸都是一樣的，差別在於內建的設計範本。每個網站頁面都能包含多個「區段」，可以上下拖曳調整順序，也可以複製、刪除、修改內容。甚至，你還能預覽電腦版與手機版，確認畫面呈現效果。 🖼️ 實作一：首頁設計超吸睛 首先，將首頁背景設為馬祖海灣照片，接著用文字與圖形工具做出六顆按鈕，搭配自訂框線與毛筆字體，再加上模糊陰影與動畫特效，「馬祖漫遊」的形象馬上跳出來。當這些元件搭配背景動畫呈現時，簡直就像一個專業的形象網站！ 🔄 區段設計大解密：每一段都有不同玩法 每個單元都是新增一個「區段」，從「設計」中挑選你喜歡的版型進行編輯。茶米老師示範了如何做出關於馬祖、行旅介紹、美食照片與雕像區塊，並透過簡單的圖片搜尋與裁切功能，快速替換背景與主視覺。每段的配置不只有圖片與文字，還能換位置、加動畫、甚至複製後上下調整排序，實用度爆表！ 🧭 景點介紹頁：拉長頁面也能做到六景點 接下來來到第二頁「景點介紹」。Canva的網頁功能有一大特色：可以拉長頁面！茶米老師直接將頁面拉長，將景點區塊從三格複...