【居久屋課程筆記】Canva一頁式網站設計全攻略｜用Canva打造互動網頁

🖥️ Canva也能寫網頁？真的假的！

你沒聽錯，我們今天要用Canva來做網站！作為一個曾經苦於前端框架設定的老工程師，當我看到Canva網站建置功能時，真的是又驚又喜。這不再只是靜態設計工具，它已經升級為一個能輕鬆打造一頁式網頁的強大平台，還能加動畫、做特效、設定區段切換，根本就是夢寐以求的教學神器！

🛠️ 一頁式網頁設計：從旅遊主題開始

這一次我們要製作的，是一個名為「馬祖漫遊」的旅遊網站，首頁打開就有帥氣的背景動畫，六個主要單元清楚排好：關於馬祖、馬祖行旅、景點介紹、馬祖美傳、馬祖盛世、聯絡我們。使用者點選上方按鈕，畫面就會自動捲動至相對區段，而且每一段都能套上不同的動畫特效，整體觀感超級順暢又專業。

📂 建立網站之前，你需要這份規劃書！

茶米老師苦口婆心地提醒：做網站前一定要先規劃！這次他也貼心提供一份完整的網站規劃書，將整個網站的結構、各單元名稱、子頁面內容甚至連文字說明與素材都預先設計好。這不只是給學生教學的好工具，更是大人自己備課設計的典範！

🎨 操作環節一：Canva網站編輯介面詳解

進入Canva網站模式後，我們可以從首頁或左上角進入「建立」選單，選擇「網站」。不管你挑的是商業、教育或活動類範本，實際尺寸都是一樣的，差別在於內建的設計範本。每個網站頁面都能包含多個「區段」，可以上下拖曳調整順序，也可以複製、刪除、修改內容。甚至，你還能預覽電腦版與手機版，確認畫面呈現效果。

🖼️ 實作一：首頁設計超吸睛

首先，將首頁背景設為馬祖海灣照片，接著用文字與圖形工具做出六顆按鈕，搭配自訂框線與毛筆字體，再加上模糊陰影與動畫特效，「馬祖漫遊」的形象馬上跳出來。當這些元件搭配背景動畫呈現時，簡直就像一個專業的形象網站！

🔄 區段設計大解密：每一段都有不同玩法

每個單元都是新增一個「區段」，從「設計」中挑選你喜歡的版型進行編輯。茶米老師示範了如何做出關於馬祖、行旅介紹、美食照片與雕像區塊，並透過簡單的圖片搜尋與裁切功能，快速替換背景與主視覺。每段的配置不只有圖片與文字，還能換位置、加動畫、甚至複製後上下調整排序，實用度爆表！

🧭 景點介紹頁：拉長頁面也能做到六景點

接下來來到第二頁「景點介紹」。Canva的網頁功能有一大特色：可以拉長頁面！茶米老師直接將頁面拉長，將景點區塊從三格複製為六格，再搭配事先準備好的景點圖片與文字說明，整個展示頁在數分鐘內就能完成。如果你曾用過Google Sites、Wix或是WordPress，絕對會對這種「直接拉長頁面＋自由組合元素」的模式愛不釋手！

🔗 建立超連結：單頁內跳轉、跨頁連結都搞定

網站完成後最重要的一步，就是把六顆首頁按鈕連到對應區段，景點介紹按鈕連到第二頁，並在每個段落右下角加上「回到首頁」的向上箭頭。Canva網站的連結功能不僅支援單頁區段跳轉，還能跨頁指定區塊，是製作教學頁面與專題作品時的關鍵技能。

🌐 自訂網址與發佈技巧

當一切完成，只要點選右上角「發布網站」，就能立即上線！若你是Pro帳號，還可以自訂網域名稱，甚至結合自己的DNS設定。學生帳號雖然不能直接發佈，但仍可從「分享」功能內取得網站連結。茶米老師也示範如何將網址貼到Padlet中分享，讓每位學員的成果都有地方展示。

🎉 結語：用Canva寫網站，其實一點都不難！

從一開始的規劃書到網站編輯、區段設計、素材搭配、動畫設定、超連結設計，一直到網站正式上線，整整一堂課，一氣呵成。茶米老師不只把Canva用到極致，更提供了清楚的流程與具體建議，讓即便是第一次接觸網站製作的老師與學生，也能做出漂亮又實用的網頁。如果你想要一個能教學、能作品發表、能展示專題的網站，Canva 絕對值得一試！

🎁 喜歡我們的課程嗎？

如果你想要學習更多學科教學知識與科技應用，歡迎訂閱謙懿科技Youtube頻道，記得按讚追蹤我們的節目，一起探索教育的無限可能。

留言

張貼留言

這個網誌中的熱門文章

【居久屋課程筆記】當教育遇上法律：老師該如何自保？這些原則你一定要知道！

圖片
當教育遇上法律：老師該如何自保？這些原則你一定要知道！ 🛡️ 校園法律風險升溫，我們該怎麼辦？ 各位老師，晚安！再幾天就放暑假了，我知道大家正咬牙苦撐著。不過今天這場「微醺夜」的分享我真心希望大家不要錯過——因為它關係到我們每一位教育工作者的職涯安全與心理健康。 這幾年來，校園法律風險大幅上升，尤其是教師法修訂後，性平事件、教學不力、體罰與不當管教等，皆可能成為被檢舉調查的原因。你以為自己教書認真、從沒越線，就一定沒事？錯！很多案例正是「太有原則」的老師被捲入。 ⚖️ 為什麼好老師也可能被調查？ 法規修訂後，家長申訴門檻大幅降低，「教學不力」、「輕視溝通不良」都成為可被檢舉的項目。現在投訴管道暢通，甚至匿名檢舉也可開案。曾有老師因「打得好」的玩笑話而被學生家長投訴差別待遇，更別說過往誤認為「罰站、青蛙跳」是可以管教的手段，其實通通都屬體罰。 我們看到的不是惡意的狼師或收賄，而是兢兢業業的教師，一個步伐沒踩對，就掉進調查深淵。 🚫 如何避免成為下一個案例？ 遠離風險的三大原則： 嚴守師生界線 ：老師是老師，學生是學生，無論畢業與否，都不要發展私人關係。 社交媒體慎用 ：聊天、開玩笑、送禮物都可能變成呈堂證供。 避免密閉空間獨處 ：無論男女，避免與學生一對一處於密閉空間，哪怕是在旅館、車內或校園內偏僻角落。 而最常被投訴的，莫過於「教學不力」。包括語言羞辱、處罰尺度不當、溝通不良、班級經營欠佳……這些模糊又主觀的指控，正是讓老師最無力的地方。 📑 該怎麼面對被投訴的現實？ 一旦接到通知，你會發現：你不知道是誰檢舉你，不知道檢舉內容。你可以做的，就是保留所有有利證據：聯絡簿、LINE 截圖、學校監視器、健康中心紀錄與輔導紀錄（尤其B卡，千萬不要事後修改！）。 訪談當天，記得： 冷靜、實問實答、避免情緒化。 不要揣測學生或家長的動機，也不要試圖影響學生說詞。 可書面補充陳述，記得爭點才是關鍵。 調查期可能長達半年，期間不能退休、不能調動，壓力非常大。 🧭 要不要找律師？該信誰？ 調查人員通常是三人一組，像法官與檢察官。是否要請律師，可以根據案件複雜度與投訴者的態度決定： 對方只是要聽一句道歉？或是想讓你丟了飯碗？ 提出...
閱讀完整內容

【居久屋課程筆記】新世代閱讀選擇：深入解析得報平臺的教學魔法與設計巧思

圖片
新世代閱讀選擇：深入解析得報平臺的教學魔法與設計巧思 🌟 新世代閱讀超展開：我在得報平臺看見的可能 📚 不是多看一篇，而是學會閱讀的方法 還記得那天晚上，在《居久屋微醺夜》的燈光下，我靜靜地聽著欣希教授娓娓道來「得報」平臺的誕生故事。那不是一場產品介紹，而是一場關於閱讀、關於孩子、關於教學方法的熱情告白。 得報不是資訊堆疊的資料庫，而是為這個世代的孩子量身打造的學習場域。它從「方法」出發，用閱讀養成感受力、思考力與表達力。我聽著，心裡一次又一次被點燃：原來閱讀不只是讀懂，更是去感受、去思辨、去表達。 🖼️ 美感設計的第一印象，打開了互動的魔法門 「歡迎來到得報，這一期的主題是……」還沒點開文章，我就被那張設計感滿滿的封面圖吸引。原來，得報從一進站就開始說故事。圖像裡藏著謎語、小問號，勾起了好奇心，這些細節，不只是視覺吸引，更是在訓練孩子的觀察與探索力。 接著我看到主題探索窗、學習啟安館、創世研究院、書海奇遇與世界觀察塔……這些命名也太浪漫了吧！這根本是用遊戲的思維在設計閱讀場域！ 🧠 教孩子方法，而不是只塞給他文章 得報的核心理念，不是「多看」，而是「學會看」。我最喜歡欣希教授說的那句話：「有時候，不是先有興趣才有能力，而是教會方法，能力提升了，孩子才會喜歡閱讀。」 這句話打中我——我們總期待孩子自動自發、愛上閱讀，可我們真的有教他們「怎麼讀」嗎？得報不只是有文章，還搭配多元任務：像「聽說劇場」會要求孩子朗讀文章、上傳音檔，由 AI 評分並給予回饋，甚至提出改善建議。這才是真正的教學設計！ 🎯 任務設計超細緻，自主閱讀不再放牛吃草 暑假來了怎麼辦？得報設計了「閱讀地圖任務」！孩子根據生日選文章、根據喜好選作家，進行八個小挑戰，完全 gamification 的設計，讓孩子有選擇權，同時廣泛接觸不同類型文本。 最感動的是那個「故事轉折任務」：讀完一篇故事，請孩子找出轉折點並改寫結局，然後由 AI 給分、給回饋。這是創意與理解力的結合，也是寫作訓練的黃金橋段！ 🧩 金幣制度：讓參與變成貢獻，讓獎勵變成影響力 得報的金幣制度超有哲學！不是比誰分數高，而是鼓...
閱讀完整內容

【居久屋課程筆記】GPT提示詞高手的魔法練成術：居久屋微醺夜的創作實驗室

圖片
GPT提示詞高手的魔法練成術：居久屋微醺夜的創作實驗室 🎯 我與AI提示詞的浪漫冒險：從一張照片到一本百科全書 💡 從「一句話」開始，開啟創作魔法 你相信嗎？只要一句話，就能讓 AI 生成一本書、一個網站，甚至一場攝影展！ 這場微醺夜，我帶著自己長期實驗的「提示詞魔法」，從最簡單的生活應用聊起──叫醒我起床的鬧鐘、幫我排程的助理，到能幫我出版繪本、設計網站、製作食譜的創作夥伴。關鍵，就是這一串「提示詞」。 提示詞不只是命令，更是一把鑰匙，打開 AI 世界的無限創意。 🧙‍♂️ 提示詞 × 占卜？寫出前世今生的繪本故事 還記得那天我用「阿卡西記錄」這個提示詞，讓 GPT-4o 根據我和朋友的合照，生出一段如電影情節般的故事。從前世的相遇、今生的羈絆，到未來的使命，一個個情節躍然紙上。 這不只是靈性趣味，更是一種敘事創作的靈感開關。若你是老師、創作者，甚至只是想跟孩子一起說故事，這組提示詞你一定得試！ 🤖 打造你的專屬 GPTs：攝影學院、百科全書、AI客服都能生出來！ 除了提示詞，我也展示了我設計的 GPTs──像是內建「拍攝技法」的攝影學院機器人，只要輸入畫面，它會告訴你用什麼鏡頭、怎麼打光，甚至還會教你攝影！ 還有一本我最愛的「電影百科筆記本」，只要輸入片名，就會自動排版：一句金句、劇情摘要、角色分析、關鍵詞、劇照風格，全部都來。 從少年Pi到新天堂樂園，換個片名就是一本新筆記──這才是學習與創作的新方式！ 🛠️ 提示詞也能蓋房子、做LOGO、寫食譜？當然可以！ 我也分享了幾個實際案例： 📖 用提示詞寫食譜，還指定「高質感85mm鏡頭、巴洛克風格」來生成食物圖 🏠 用提示詞討論「綠建築」的規劃，生成平面圖、報價單、建材建議，一次搞定 🧼 拍一塊羊奶皂，AI幫我生成完整「使用者手冊」+海報視覺設計！ 這些都是我真的在用的提示詞應用，從實驗中誕生，也歡迎大家複製、延伸、玩出自己的風格。 🌀 從碎片到系統：提示詞如何幫我找回靈感的主線 當我們與 GPT 互動久了，它會記得我們說過的事。 我用提示詞，請它幫我找回「曾經聊過但還沒發展的點子」，讓它自動生成「十天創作挑戰主題」，每天一個洞察力...
閱讀完整內容