圖畫變網頁· P.1–3 我的故事
小朋友在創作

圖畫變故事
故事變網頁

我係一個 P.1–3 的學生。
我畫咗 4 張圖，用 AI 變成故事書，
再將故事書變成屬於我的個人網站！

睇我的故事 → 我的作品集
向下滾動 ↓
🖼️ 名片卡 HTML  ·  📖 4張故事圖  ·  🎨 條幅設計  ·  🤖 AI 故事書  ·  🌐 個人網站  ·  🖼️ 名片卡 HTML  ·  📖 4張故事圖  ·  🎨 條幅設計  ·  🤖 AI 故事書  ·  🌐 個人網站  · 
My Creative Journey · 我的創作歷程

四張圖畫，一個故事

由構思故事到展示作品，我用四張手繪圖畫，配合 AI 技術，創作了屬於自己的故事書同網站。

思考
1
💭 開始 · Begin

我想講咩故事？

第一步係計劃！我坐低思考，用第一張圖畫記錄我的故事靈感。同時用 HTML 製作咗我的第一張個人名片卡。

選擇
2
⚡ 比較 · Compare

哪個方向更好？

我畫咗幾個方向，比較哪個故事最有趣、最值得講。選擇好方向，先開始畫齊 4 張連環故事圖！

創作
3
🎨 創作 · Create

畫出我的故事！

畫齊 4 張圖之後，放入條幅輪播，加上顏色同背景設計。再用 AI 將圖畫變成故事書文字！

分享
4
🌟 展示 · Present

向全班展示！

將故事書放上個人網站，加入聯絡資料。展示日當天，我向同學同老師分享整個創作旅程！

Course Lessons · 課程內容

六堂課，六個突破

由第一張圖畫到最後展示日，每一堂都係新的冒險，一步一步建立屬於自己的數碼故事。

01

🖼️ 一張圖畫 + HTML 名片

畫出第一張代表自己的圖畫，學習用 HTML 製作個人名片卡——係我第一個網頁！

02

📖 計劃故事 + 4 張圖 + 輪播

構思一個完整故事，畫出 4 張連環圖，再放入相片輪播，讓故事動起來！

03

🎨 條幅設計 + 上色 + 背景

將 4 張圖放入跑馬燈條幅，選擇顏色心理學配色，設計專屬背景風格。

04

🤖 AI 生成故事書 + 聯絡

用 AI 將 4 張圖變成一本真正的故事書！再加入聯絡資料，令作品更完整。

05

🌐 上載網站 + 個人模板

將故事書上載到自己的個人網站，用老師的模板設計獨一無二的作品集頁面。

06

🎤 展示日！

向全班同學同老師展示自己的故事網站。用自己的話講解創作過程，接受掌聲！

What I Learned · 我學到的嘢

數字說故事

六堂課完成後，我學識的唔只係技術，仲有設計思維、AI 應用同創意表達。

6堂 課程
4張 故事圖畫
1本 AI 故事書
1個 屬於我的網站
🖼️
圖畫係故事的起點 由一張圖到四張連環圖，我學識用視覺順序講一個完整的故事，每張圖都有意義。
🎨
顏色心理學 條幅設計同背景顏色，直接影響觀眾的感受。設計係一種溝通語言！
🤖
AI 係我的創作夥伴 用 AI 將我的圖畫變成故事書文字，AI 幫我擴展創意，唔係取代我！
🌐
我係小小網頁設計師 用 HTML 模板，我建立了自己的個人網站，發佈到互聯網，全世界都可以睇到！
My Portfolio · 我的作品集

呢個就係我的網頁

我用六堂課設計的 Portfolio，有名字、4張故事圖淡入淡出輪播、跑馬燈同聯絡資料。全部由我自己設計！

abc.website.me
✨ 我的名字 · My Name ✨
故事圖 1
故事圖 2
故事圖 3
故事圖 4
Welcome to my portfolio :)  ·  歡迎來到我的作品集 :)  ·  Welcome to my portfolio :)  ·  歡迎來到我的作品集 :)
🎬 故事片段 My Story Video
Email 電郵 you@example.com
📱
Phone 手機 +852 1234 5678
Bridge & Build
讓創意教學與數碼工具真正落地
© Bridge & Build · 版權所有
My Story Video · 我的故事片段

睇睇我的故事

由圖畫到故事書，到個人網站——呢段短片記錄了我整個創作旅程。

你的圖畫，等緊你來畫！

由一張圖畫，到 AI 故事書，到個人網站——每個小朋友都可以做到。加入我們，開始你的創作旅程！

開始課程 → 試玩 Portfolio Builder