使用Gemini撰寫網頁程式及實際運用的流程範例

更新 發佈閱讀 2 分鐘

這篇文章是用來讓學生理解使用 Gemini 撰寫網頁程式實際使用的流程之用。題目是:做一個具即時匯率的幣值換算互動式網頁。參考以下的做法,看看該如何處理?

vocus|新世代的創作平台

題目裡面包含了,匯率即時換算互動網頁等概念。

所以,先找到一個有提供世界各國匯率的網頁,例如,台灣銀行的牌告匯率網頁:https://rate.bot.com.tw/xrt?Lang=zh-TW

vocus|新世代的創作平台

在此,我使用非機構的 Google 帳號,可以在完成網頁後以方便進行分享(機構帳號預設無法分享)。

然後,在 Gemini 中的 Canvas 模式下使用提示詞:
根據這個網頁的內容:https://rate.bot.com.tw/xrt?Lang=zh-TW,產生一個可以依據這個網頁的即時匯率以換算幣值的互動式網頁,每隔60秒自動更新網頁匯率內容。

vocus|新世代的創作平台

將 Gemini 寫好的程式在共用中選取分享,以取得分享網址。

vocus|新世代的創作平台

並且運用 Chrome 的分割畫面功能進行比對。

vocus|新世代的創作平台

如果在分享中選取複製內容,可以將取得的程式碼,貼至記事本中,並儲存為*.html檔,就可以在瀏覽器中使用這個網頁程式了。

vocus|新世代的創作平台

或是在協作平台上匯入整頁內容的 HTML程式碼:

vocus|新世代的創作平台

日後,可以在自己的協作平台上使用。

vocus|新世代的創作平台


留言
avatar-img
學不完.教不停.用不盡
245會員
192內容數
分享個人電腦教學,回答網友提問,解決資料處理與設計問題。
2026/01/20
ChatGPT、Gemini 等對話式生成式 AI 在回應使用者問題或產出內容時,往往會自動套用 Markdown 語法格式。這類格式包含標題符號、粗體與斜體、項目符號清單、程式碼區塊以及超連結等,能讓文字在結構與可讀性上更加清楚。由於 Markdown 屬於輕量化標記語言,同時具備易讀性與可轉換性
Thumbnail
2026/01/20
ChatGPT、Gemini 等對話式生成式 AI 在回應使用者問題或產出內容時,往往會自動套用 Markdown 語法格式。這類格式包含標題符號、粗體與斜體、項目符號清單、程式碼區塊以及超連結等,能讓文字在結構與可讀性上更加清楚。由於 Markdown 屬於輕量化標記語言,同時具備易讀性與可轉換性
Thumbnail
2026/01/19
Google 簡報的新功能:轉換為影片,這是透過另一個線上軟體來操作:Vids。
Thumbnail
2026/01/19
Google 簡報的新功能:轉換為影片,這是透過另一個線上軟體來操作:Vids。
Thumbnail
2026/01/19
就讓 Gemini 打造你的個人化的 AI 助手! 透過與日常常用應用程式的整合,Gemini 不再只是回應指令的聊天工具,而是能理解使用者工作與生活脈絡的智慧助理。
Thumbnail
2026/01/19
就讓 Gemini 打造你的個人化的 AI 助手! 透過與日常常用應用程式的整合,Gemini 不再只是回應指令的聊天工具,而是能理解使用者工作與生活脈絡的智慧助理。
Thumbnail
看更多
你可能也想看
Thumbnail
最近要去參加重大災難照護訓練種子教師訓練課程,於是想到用最近很紅的Gemini動態檢視功能做個互動網頁測試看看~ 這邊提供互動式網頁連結,有興趣的朋友歡迎使用! 個人覺得基本重點有說明到,但一些細節沒有呈現出來
Thumbnail
最近要去參加重大災難照護訓練種子教師訓練課程,於是想到用最近很紅的Gemini動態檢視功能做個互動網頁測試看看~ 這邊提供互動式網頁連結,有興趣的朋友歡迎使用! 個人覺得基本重點有說明到,但一些細節沒有呈現出來
Thumbnail
見諸參與鄧伯宸口述,鄧湘庭於〈那個大霧的時代〉記述父親回憶,鄧伯宸因故遭受牽連,而案件核心的三人,在鄧伯宸記憶裡:「成立了成大共產黨,他們製作了五星徽章,印刷共產黨宣言——刻鋼板的——他們收集中共空飄的傳單,以及中國共產黨中央委員會有關文化大革命決議文的英文打字稿,另外還有手槍子彈十發。」
Thumbnail
見諸參與鄧伯宸口述,鄧湘庭於〈那個大霧的時代〉記述父親回憶,鄧伯宸因故遭受牽連,而案件核心的三人,在鄧伯宸記憶裡:「成立了成大共產黨,他們製作了五星徽章,印刷共產黨宣言——刻鋼板的——他們收集中共空飄的傳單,以及中國共產黨中央委員會有關文化大革命決議文的英文打字稿,另外還有手槍子彈十發。」
Thumbnail
5 月,方格創作島正式開島。這是一趟 28 天的創作旅程。活動期間,每週都會有新的任務地圖與陪跑計畫,從最簡單的帳號使用、沙龍建立,到帶著你從一句話、一張照片開始,一步一步找到屬於自己的創作節奏。不需要長篇大論,不需要完美的文筆,只需要帶上你今天的日常,就可以出發。征服創作島,抱回靈感與大獎!
Thumbnail
5 月,方格創作島正式開島。這是一趟 28 天的創作旅程。活動期間,每週都會有新的任務地圖與陪跑計畫,從最簡單的帳號使用、沙龍建立,到帶著你從一句話、一張照片開始,一步一步找到屬於自己的創作節奏。不需要長篇大論,不需要完美的文筆,只需要帶上你今天的日常,就可以出發。征服創作島,抱回靈感與大獎!
Thumbnail
這篇文章記錄我第一次嘗試寫程式的經驗,起因是學做甜點時,常因手邊材料與食譜比例不同,換算過程既麻煩又容易出錯。於是我開始嘗試用 Google Gemini 協助,做出一個能貼上食譜、選擇材料並自動換算比例的烘焙工具。不只是完成一個實用小工具,更是一段把生活需求轉化為程式、踏出學習寫程式第一步的紀錄。
Thumbnail
這篇文章記錄我第一次嘗試寫程式的經驗,起因是學做甜點時,常因手邊材料與食譜比例不同,換算過程既麻煩又容易出錯。於是我開始嘗試用 Google Gemini 協助,做出一個能貼上食譜、選擇材料並自動換算比例的烘焙工具。不只是完成一個實用小工具,更是一段把生活需求轉化為程式、踏出學習寫程式第一步的紀錄。
Thumbnail
當代名導基里爾.賽勒布倫尼科夫身兼電影、劇場與歌劇導演,其作品流動著強烈的反叛與詩意。在俄烏戰爭爆發後,他持續以創作回應專制體制的壓迫。《傳奇:帕拉贊諾夫的十段殘篇》致敬蘇聯電影大師帕拉贊諾夫。本文作者透過媒介本質的分析,解構賽勒布倫尼科夫如何利用影劇雙棲的特質,在荒謬世道中尋找藝術的「生存之道」。
Thumbnail
當代名導基里爾.賽勒布倫尼科夫身兼電影、劇場與歌劇導演,其作品流動著強烈的反叛與詩意。在俄烏戰爭爆發後,他持續以創作回應專制體制的壓迫。《傳奇:帕拉贊諾夫的十段殘篇》致敬蘇聯電影大師帕拉贊諾夫。本文作者透過媒介本質的分析,解構賽勒布倫尼科夫如何利用影劇雙棲的特質,在荒謬世道中尋找藝術的「生存之道」。
Thumbnail
即使沒有程式基礎,也能免費生成網頁。詳細介紹了操作步驟,包括利用Canvas 模式快速生成、調整局部細節,以及 如何在 Google AI Studio 中創建網頁。此外,文中強調了 API 金鑰的安全使用、免費額度限制,並提供了將生成的網頁部署到 Cloudflare Pages 的建議。
Thumbnail
即使沒有程式基礎,也能免費生成網頁。詳細介紹了操作步驟,包括利用Canvas 模式快速生成、調整局部細節,以及 如何在 Google AI Studio 中創建網頁。此外,文中強調了 API 金鑰的安全使用、免費額度限制,並提供了將生成的網頁部署到 Cloudflare Pages 的建議。
Thumbnail
Gemini 3 Pro 是什麼?Google AI 世代革命性進化 Google 於 2025 年 11 月正式推出的新一代模型 Gemini 3,是目前被譽為「最聰明、推理能力最強」的多模態大型語言模型。其核心模型 Gemini 3 Pro 已全面導入 Google 搜尋 AI 模式、Gemi
Thumbnail
Gemini 3 Pro 是什麼?Google AI 世代革命性進化 Google 於 2025 年 11 月正式推出的新一代模型 Gemini 3,是目前被譽為「最聰明、推理能力最強」的多模態大型語言模型。其核心模型 Gemini 3 Pro 已全面導入 Google 搜尋 AI 模式、Gemi
Thumbnail
Google Gemini 最新推出的「Canvas」功能,為用戶提供了一個全新的互動創作空間,能夠將文字描述快速轉化為應用程式、互動式圖表、測驗等多種形式,進一步提升創作與學習的效率。 🤩 Gemini Canvas 五大隱藏功能 一直以為 Gemini 的 Canvas 畫布功能只是個普
Thumbnail
Google Gemini 最新推出的「Canvas」功能,為用戶提供了一個全新的互動創作空間,能夠將文字描述快速轉化為應用程式、互動式圖表、測驗等多種形式,進一步提升創作與學習的效率。 🤩 Gemini Canvas 五大隱藏功能 一直以為 Gemini 的 Canvas 畫布功能只是個普
Thumbnail
Gemini nano banana 製作的圖,解析度越來越高了 (目前為2.8K),不管是寫文章或簡報的配圖,幾乎都用它來產出,但多少會因圖片上的watermark,覺得多少有點瑕疵。 所以構思撰寫個網頁程式來移除浮水印的可行性
Thumbnail
Gemini nano banana 製作的圖,解析度越來越高了 (目前為2.8K),不管是寫文章或簡報的配圖,幾乎都用它來產出,但多少會因圖片上的watermark,覺得多少有點瑕疵。 所以構思撰寫個網頁程式來移除浮水印的可行性
Thumbnail
2025/11/18,Google 發表了 Gemini 3,號稱目前最聰明的模型。 這次不只性能大幅升級,還把具備更強推理能力、動態體驗更豐富的 Gemini 3 直接導入搜尋的「AI 模式」。 模型發表當天,就已同步上線到 Google 搜尋裡了。 還同步登陸各大核心平台: ✔️ Gemi
Thumbnail
2025/11/18,Google 發表了 Gemini 3,號稱目前最聰明的模型。 這次不只性能大幅升級,還把具備更強推理能力、動態體驗更豐富的 Gemini 3 直接導入搜尋的「AI 模式」。 模型發表當天,就已同步上線到 Google 搜尋裡了。 還同步登陸各大核心平台: ✔️ Gemi
Thumbnail
如何讓Google試算表連動ChatGPT?也就是如何讓AI也能在EXCEL 表格裡面使用?就是可以在 excel 裡面安裝「GPT for Sheets and Docs」的外掛程式。安裝這個外掛程式有什麼功用?它可以生成報告摘要、整理數據、翻譯資料、撰寫電子郵件 ...... 等等,大幅提升
Thumbnail
如何讓Google試算表連動ChatGPT?也就是如何讓AI也能在EXCEL 表格裡面使用?就是可以在 excel 裡面安裝「GPT for Sheets and Docs」的外掛程式。安裝這個外掛程式有什麼功用?它可以生成報告摘要、整理數據、翻譯資料、撰寫電子郵件 ...... 等等,大幅提升
Thumbnail
當時間變少之後,看戲反而變得更加重要——這是在成為母親之後,我第一次誠實地面對這一件事:我沒有那麼多的晚上,可以任性地留給自己了。看戲不再只是「今天有沒有空」,而是牽動整個週末的結構,誰應該照顧孩子,我該在什麼時間回到家,隔天還有沒有精神帶小孩⋯⋯於是,我不得不學會一件以前並不擅長的事:挑選。
Thumbnail
當時間變少之後,看戲反而變得更加重要——這是在成為母親之後,我第一次誠實地面對這一件事:我沒有那麼多的晚上,可以任性地留給自己了。看戲不再只是「今天有沒有空」,而是牽動整個週末的結構,誰應該照顧孩子,我該在什麼時間回到家,隔天還有沒有精神帶小孩⋯⋯於是,我不得不學會一件以前並不擅長的事:挑選。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News