--- title: "Canva Code × Google Sheets：實戰動態網頁" slug: aeam040p1 url: https://www.cite.tw/courses/aeam040p1 type: paid --- # Canva Code × Google Sheets：實戰動態網頁 ## Description 你是否玩過 Vibe Coding，但發現生成的網頁一旦「做完」就變成「孤兒」？想要修改一個價格、換一張圖片，卻發現看不懂程式碼，根本改不動？別讓你的創意變成一次性的內容！真正的 AI 網頁，要能陪你長久運營。 這堂課將帶你掌握 Canva Code 結合 Vibe Coding 的開發模式。我們不只教你用 AI 生成網頁，更教你如何打造「可持續更新」的內容系統。 你不需要成為工程師，只需扮演「產品經理」，指揮 AI 建立後台與資料庫。從此，更新網頁就像改Excel一樣簡單，即使課程結束，你依然擁有100%的內容掌控權，隨時隨地都能讓網頁內容保持最新狀態！ 什麼是 Vibe Coding？寫程式不再是寫 Code，而是透過自然語言與 AI 對話。你負責「描述想像」：告訴 AI 你要的風格、功能與互動方式。AI 負責「實踐創造」：AI 替你處理那些繁瑣的語法與邏輯。這堂課將教你運用提示詞工程 (Prompt Engineering) 黃金公式：角色設定 + 視覺風格 + 功能需求 + 限制條件，將腦中的畫面轉化為真實運作的網頁應用，生成高質感的設計師級介面。 課程亮點拒絕「一次性」網頁！四大優勢，讓你的作品真正落地運營市面上許多 AI 生成教學只求「當下好看」，但我們更在乎「後續好用」。Canva Code 結合了設計與資料串接，帶來前所未有的「可持續性」創作體驗：解決 Vibe Coding 最大痛點教你打造「動態資料庫」，將網頁內容與程式碼分離，解決了「做完不能改」的致命傷。直覺式 Vibe Coding 開發用白話文描述需求，AI 就能精準生成對應的程式碼，懂設計就能做網頁。超越靜態，動態資料串接透過 Canva Code 串接 Google Sheets 試算表，讓你的網頁「活」起來。即時預覽，極速迭代左邊寫指令，右邊馬上看效果。所見即所得，將試錯成本降到最低。 實戰專案：你將親手打造兩大「可更新」互動作品 專案一：自帶內容管理系統後台的「專業級數位名片 App」亮點：把「修改權」還給自己這不只是一張名片，更是一個 App！我們將實作隱藏的「老闆編輯模式」。實戰成果：未來換了職稱、想改自我介紹，不用重新生成程式碼。直接在網頁上點擊隱藏按鈕，就能像填表單一樣修改內容並儲存。這才是真正能陪你職涯成長的數位名片。 專案二：串接 Google Sheets 的「動態品牌官網」亮點：Google 試算表就是你的網站後台告別「為了改一個價格，搞壞整個網頁」的惡夢。我們將網站連動到你的 Google Sheets。實戰成果：當店裡商品要調價，或者遇到颱風天要發公告，你只需要打開 Google Sheets 修改。回到網頁一鍵刷新，內容瞬間同步更新！就算完全不懂程式的店員也能輕鬆維護網站。 誰適合這門課？如果你符合以下任一身份，這門課程將是你跨入 AI 互動設計的最佳起點：被 AI 程式碼嚇到的初學者：想玩 Vibe Coding，但怕生成出來的東西之後不會改、壞了沒人修。行銷企劃人員：需要常態性更新活動資訊，不想每次都還要拜託工程師或重新製作頁面。小型創業者/店家：需要一個能隨時用手機更新菜單、發布公告的低成本官網。 設計師與創作者：想讓平面設計「動」起來，並提供客戶「容易維護」的網頁作品。 課程內容（一）Vibe Coding 思維啟動從 Coding 到 Vibe Coding：觀念翻轉，建立 AI 協作心態。提示詞工程 (Prompt Engineering) 黃金公式：學會精準指令，讓 AI 一次就懂你要什麼（二）專案一：專業級數位名片 App AI 視覺引導：運用指令生成高品質介面。自製後台系統 (核心教學)：教你如何讓 AI 寫出「前端編輯功能」，實現「不碰程式碼也能改內容」的內容管理系統體驗。（三）專案二：動態數據串接品牌官網品牌視覺與動態首頁：製作吸睛的輪播牆與視覺風格。雲端連動與自動更新 (核心教學)：建立雲端菜單，讓網站直接讀取 Google Sheets 資料。（四）部署與發布：讓全世界看到你的作品完全免費的網頁託管：一鍵發布到 Canva 提供的免費網域，立即上線。RWD 響應式完美適配：確保手機、電腦瀏覽都完美。進階部署 (Advanced)：原始碼匯出與外部平台 (Netlify/GitHub) 部署教學。 講師介紹講師：黃信溢（茶米老師）● 跨域技術整合專家： 長期深耕 AI 人工智慧、程式設計、雲端開發與多媒體影音 四大領域，擅長將複雜的「硬技術」轉化為直覺的「軟應用」，是少數能同時駕馭設計與程式的兩棲專家。 ● 資深企業顧問與圖書作者： 具備豐富的專案實戰底蘊，曾任多家知名企業與教育機構之講師顧問，並出版多本專業電腦圖書，擁有深厚的知識轉譯能力。● 實務導向的教學風格： 拒絕枯燥理論，擅長以「實務案例」直球對決工作痛點。引導學員循序漸進，從零建立完整的知識架構與解決問題的能力。● 數位轉型的最佳引路人： 致力於降低科技學習門檻，協助學員在快速變動的 AI 浪潮中，快速掌握強化專業競爭力與創新思維的關鍵鑰匙。 上課方式上課方式：課程使用 Zoom 軟體進行直播，專屬會議連結最晚將於課前1小時發送至您的信箱。直播時間： 2026/01/30(五) 14:00~16:00 影片上架時間：課程影片預計於直播結束後一週內上架，每堂課上架後都會通知學員。影片可於2027年03月31日 23:59 前重複回看，不用擔心線上首播時間撞期其他行程。 注意事項 此課程同步錄製2026年01月30日舉行的【線上直播】內容，保留原始授課節奏與講師風格，購買前請先確認此類直播實錄呈現是否符合您的觀看需求。 ## Learning Objectives - 自然語言開發：透過對話描述需求，由 AI 負責實踐程式語法與邏輯 。 - 動態資料串接：將 Google 試算表連結至網頁，更新內容就像改 Excel 一樣簡單。 - 雙專案實作：親手打造具備後台編輯功能的數位名片 App 與品牌官網 。 - 快速部署上線：學習如何將成品發布至免費網域或 Netlify 等外部平台 。 ## Course Info - Lectures: 2 - Video: 2.5h - Downloadable resources: 1 ## Instructors ### 黃信溢（茶米老師） *資深企業AI講師／顧問* ● 跨域技術整合專家： 長期深耕 AI 人工智慧、程式設計、雲端開發與多媒體影音 四大領域，擅長將複雜的「硬技術」轉化為直覺的「軟應用」，是少數能同時駕馭設計與程式的兩棲專家。 ● 資深企業顧問與圖書作者： 具備豐富的專案實戰底蘊，曾任多家知名企業與教育機構之講師顧問，並出版多本專業電腦圖書，擁有深厚的知識轉譯能力。 ● 實務導向的教學風格： 拒絕枯燥理論，擅長以「實務案例」直球對決工作痛點。引導學員循序漸進，從零建立完整的知識架構與解決問題的能力。 ● 數位轉型的最佳引路人： 致力於降低科技學習門檻，協助學員在快速變動的 AI 浪潮中，快速掌握強化專業競爭力與創新思維的關鍵鑰匙。 ### T客邦 《T客邦》是台灣最大的科技媒體，站在科技浪潮最前線，去蕪存菁，鎖定關鍵趨勢。我們陪你從『關注』到『駕馭』，在 AI 時代將焦慮轉化為競爭力，預約更強大的自己！ ## Curriculum ### 課程 (2h 27m) - Canva Code × Google Sheets：實戰動態網頁 (2h 27m) ### 講義 (0m) - 課程講義 (0m) ## Pricing ### 限時優惠價 - NT$1,200 *Original price: NT$1,800* 回放影片觀看期限至 2027年03月31日 23:59為止，購課前請留意。