38 Gemini的Canvas寫網頁程式

(2025/09/11)

• Gemini：https://gemini.google.com/app?hl=zh-TW 

一、認識多功能的創作平台Canvas

• Canvas是一個多功能的創作平台，讓使用者用不同方式表達他們的想法，可以支援以下幾種用途：

  • 圖像生成：你可以輸入文字描述，讓我幫你生成對應的圖像。

  • 文字創作：你可以像在一個筆記本上一樣，寫下任何你想寫的內容，例如故事、文章、詩歌或程式碼。

  • 想法整理：你可以用它來進行頭腦風暴，整理和連接不同的想法，就像一個心智圖一樣。

  • 資訊整合：你可以把來自不同來源的文字、圖片和程式碼整合在一起，製作成一份完整的報告或簡報。

• 簡而言之，Canvas就是一個讓你自由發揮創意、整理想法和創作內容的數位空間，也可視為一個內建 AI 輔助的簡易文字編輯器

• 利用Canvas撰寫網頁(站)程式

  • 【網頁】通常指著是單頁，多頁我就把它稱為【網站】

  • 網頁(站)程式常見的有下列三種

    • 遊戲

      • 您想得到的遊戲都可以請AI來寫寫看，如

        • 五子棋遊戲 (本次以此遊戲做範例)

        • 數獨遊戲

        • 貪吃蛇遊戲

        • 跳恐龍遊戲

        • 俄羅斯方塊

        • 大富翁遊戲

        • 彈珠台遊戲

        • 小蜜蜂遊戲

        • 射擊遊戲....

    • 教學小工具

      • 老師教學上會用到的小工具，做為老師的小幫手

      • 如學生上課加扣分、特殊表現記錄、抽籤、倒數計時、聯絡簿、檢查作業、點名、請假、排座位...非常多元

      • 我之前利用Websim所寫的班級小管家就是其中的一種 ，如下：https://sites.google.com/site/wenyunotify/15-ai%E7%9B%B8%E9%97%9C/36-websim%E8%A3%BD%E4%BD%9C%E7%8F%AD%E7%B4%9A%E5%B0%8F%E7%AE%A1%E5%AE%B6 

    • 教學網站

      • 顧名思義就是對於課程內容老師如何教、學生如何學的網站，各種科目都有，如：

      • 國語領域：教作文、教筆順、各種文體的比較、唐詩(宋詞)介紹網站...

      • 數學領域：加(減、乘、除)的教學及實作、分數教學、看時鐘教學、座標教學、比例教學、各式面積教學...

      • 自然領域：植物、星空觀察、電池接法、磁鐵....

      • 其他：因為我要教利用AI寫網頁程式，所以大家可能要對HTML及CSS語法要有一些認識，所以我就來寫一個認識HTML及CSS的教學網站

二、遊戲製作：五子棋遊戲

• • 記得先點擊Canvas

  • 提示詞(Prompt)

1.請做一個5子棋遊戲 

• • 分享

    • 利用網頁的方式分享(但使用教育版的帳號無法利用此方式分享)

      • 點擊右上角【共用】/【分享】

      • 本作品的分享網址：https://g.co/gemini/share/2c2e93a9f741 

      • 別人複製分享出來的Canvas後，可繼續對話，進行自己的版本更新(站在巨人肩膀上)

• • 利用Google協作平台發布網站

    • 點擊右上角【共用】/【複製內容】

• • 發布的網址：https://sites.google.com/view/wenyugomoku/%E4%BA%94%E5%AD%90%E6%A3%8B 

三、教學網站製作：HTML&CSS入門教學

• • 記得先點擊Canvas

  • 提示詞(Prompt)

1. 請製作一個HTML及CSS教學的網站  

• • 提示詞(Prompt)，一共下了33個prompt，如下：

1. 請製作一個HTML及CSS教學的網站  

2. 請增加一個編輯器，可以在此編輯器輸入HTML語言，並可看到結果 

3. 請在編輯器上方，增加一些標籤按鈕，方便寫程式時直接點取，而不用自己打這些標籤字 

4. 編輯器的功能太簡單，請再加入更多標籤，而且請美化編輯器的外觀 

5. 請將HTML、CSS、編輯器利用按鈕分開成3個分頁，而不要一直往下推疊而把網頁拉長 

6. HTML分頁，除了常用的標籤，也再增加更多的標籤，如表格、按鈕、下拉式選單...請根據功能，做好分類介紹，使其教學功能更完整 

7. 在"HTML基礎"的按鈕後面，新增一個"HTML進階"的按鈕，並放上更多的HTML進階功能 

8. 請分別在HTML基礎及進階中放上更多的範例，方便學習 

9. 請在CSS基礎增加屬性的介紹，有多少屬性，它的功能分別是什麼 

10. 能在CSS下方製作一個改變這些參數的值，每個都用下拉式選單來改變其值，參數如下color、background-color、font-size、padding、margin、border、text-align、 

11. 還有哪些參數可以加在CSS 屬性互動調整器的 

12. 請再將尺寸、圓角、陰影、透明度以及變形（旋轉）這些參數可以加在＂CSS 屬性互動調整器＂中，最後並生成CSS程式碼 

13. 請刪除此版本，回到上一版本 

14. 再請刪除此版本，回到上一版本 

15. 再請刪除此版本，回到上一版本 

16. 回到太前面版本了！再呈現後面版本 

17. 請回到"HTML 與 CSS 教學網站"的最後一個版本 

18. 請記住目前的這一版本才是我需要的，請再保留一次這版本 

19. 請再將尺寸、圓角、陰影、透明度以及變形（旋轉）這些參數可以加在"CSS基礎"下＂CSS 屬性互動調整器＂中，最後並生成CSS程式碼 

20. 同樣在最下方最增加一個HTML程式碼 

21. 請將實時編輯器的程式區與展示區用一欄就好，程式區在上方，中間有"運行"按鈕，展示區在下方 

22. 請再實時編輯器增加更多常用功能，如表格框線、粗細、顏色... 

23. 請在"實時編輯器"的最下方新增10個HTML+CSS各類型的程式碼範例，方便學生複製到編輯器內看結果，範例也要有簡單的文字說明 

24. 請將這一版的範例加在上一版的"實時編輯器"內的最下方 

25. 當按下這10個範例的"複製程式碼"時，會自動把這程式碼複製並張貼到編輯區內，且螢幕畫面會回到編輯區，方便按"運行" 

26. 請在"運行"後方增加範例1、範例2...範例10的字樣，並且點擊這些範例後，就直接移到該範例 

27. 請回到上一版 

28. 請在"實時編輯器"的"運行"後方增加例1、例2...例10的字樣，並且點擊這些範例後，就直接移到該範例 

29. 請再修改上方10個範例的連結是連結到範例的標題處，而不是到程式碼 

30. 點擊"實時編輯器"的"運行"後方的例1、例2...例10時，會連結到該範例的標題處，如到"1. 帶有懸停效果的按鈕"，而不是直接到程式碼 

31. 請再"實時編輯器"所有按鈕前面加上一個"基本結構"的按鈕，內容為HTML的基本結構程式 

32. 請在"實時編輯器"的編輯區內右上角新增一個"清空內容"的按鈕，按此鍵後，把編輯器內的程式碼清空 

33. 這個網站已大致完成了，請再看要增加什麼內容或功能，能讓這網站更完整 

• 分享網址：https://g.co/gemini/share/0f03654f2a56 

• 發布協作平台網址：https://sites.google.com/view/wenyutest2025/htmlcss%E6%95%99%E5%AD%B8