AI × HTML 新手實作課 不用寫程式，也能打造動態、靜態與互動式網頁 2.0

Steve Jobs 教你做 AI HTML 簡報

不會寫程式，也能把一份內容，變成可互動、可分享、可上台的網頁

你還在使用 AI，製作一頁一頁切換的傳統簡報嗎？

當多數人還停留在整理文字、套用模板、調整字體與圖片的位置時，下一代的內容展示方式，已經開始從 PowerPoint 走向 HTML。

因為一份好的內容，不應該只能被「播放」。

它還可以被閱讀、點擊、操作、分享，甚至直接成為一個可以公開瀏覽的網頁。

這一次，我們要帶你學習的，不只是用 AI 做出另一份簡報，而是把你原本的文字、筆記、企劃、課程內容與提案資料，進一步轉換成具有視覺、動畫與互動效果的 HTML 頁面。

AI × HTML，讓內容不只是被看見，而是被體驗

HTML 不只能拿來製作網站。

它也可以成為你的：

• 互動式簡報

• 課程講義

• 品牌介紹頁

• 個人作品集

• 產品展示頁

• 活動宣傳頁

• 商業提案頁

• 互動式報告

• 數位發表會

• 可公開分享的知識頁面

過去，你可能需要工程師、設計師與前端開發人員，才能做出具有動畫、互動與響應式設計的網頁。

現在，透過 ChatGPT、GPT Work、Gemini Canvas 與 Notion，即使沒有任何程式背景，也能透過正確的工作流程，逐步完成自己的 HTML 作品。

你不需要先背會複雜的程式語法。

你真正需要學會的，是如何整理內容、描述需求、建立架構，並且清楚指揮 AI，把腦中的想法做出來。

一套初學者也記得住的 AI HTML 製作口訣

視、地、服；架、佈、試

為了讓第一次接觸 HTML 的學員，也能快速掌握完整製作流程，這堂課將使用一套簡單而實用的六字口訣：

視：先決定網站的視覺焦點

觀眾打開頁面的第一眼，要先看到什麼？

是課程名稱、產品特色、關鍵數據、人物故事，還是最重要的行動按鈕？

先決定視覺焦點，才能避免頁面資訊太多、重點失焦。

地：規劃網站地圖與操作路徑

使用者進入頁面之後，要先看什麼、再看什麼？

內容要從上往下閱讀，還是透過按鈕切換？

網站地圖就像一張導覽圖，幫助你安排章節、流程與使用者的瀏覽順序。

服：確認網站要服務的對象

這個頁面是要給主管、客戶、學員、合作夥伴，還是一般消費者使用？

不同的使用者，需要不同的資訊密度、文字語氣、視覺風格與操作方式。

架：使用 HTML 建立內容架構

把標題、段落、圖片、資訊卡片、圖表、按鈕與章節，整理成清楚的內容結構。

HTML 就像建築物的骨架，決定頁面有哪些內容，以及內容之間的關係。

佈：使用 CSS 完成版面佈局

調整顏色、字體、間距、圖片大小、資訊卡片、背景、陰影與響應式畫面。

CSS 負責讓原本只有結構的頁面，變成有質感、能閱讀、具有品牌特色的視覺作品。

試：測試互動功能與不同裝置

按鈕能不能點？

內容能不能展開？

動畫是否正常？

手機、平板與電腦開啟時，畫面是否都能清楚閱讀？

一份真正可以交付的 HTML 頁面，最後一定要經過測試與修正。

課程中，你將實際完成四種成果

一、靜態知識頁

將原本散落的文字、筆記、圖片與資訊，整理成具有清楚層級與視覺質感的單頁式內容。

適合應用在：

• 品牌介紹

• 個人簡介

• 課程說明

• 產品資訊

• 專案提案

• 活動頁面

• 知識文章

• 服務流程介紹

你將學會如何讓一份普通文字，不再只是貼在文件裡，而是成為可以直接閱讀與分享的網頁。

二、互動式 HTML 簡報

將傳統簡報的內容，轉換成可以滑動、點擊、切換與操作的互動式頁面。

你可以加入：

• 章節選單

• 內容切換

• 展開與收合

• 分頁展示

• 互動按鈕

• 進度顯示

• 圖表切換

• 點擊式資訊卡片

讓觀眾不只是坐著觀看，而是可以主動探索內容。

三、動態視覺效果

在頁面中加入適量的動畫與轉場，包含：

• 文字進場

• 圖片移動

• 數字跳動

• 區塊淡入

• 滑動視差

• 時間軸動畫

• 卡片翻轉

• 滾動觸發效果

讓原本平面的資訊，透過節奏與動態，引導觀眾一步一步看見重點。

四、發布與分享網址

完成作品之後，我們也會帶你認識如何將 HTML 頁面發布到網路上。

讓你的作品不再只存在電腦資料夾裡，而是可以透過網址直接分享給：

• 客戶

• 主管

• 學員

• 合作夥伴

• 社群成員

• 活動參與者

對方不需要安裝軟體，也不需要下載檔案，只要打開網址，就能直接閱讀與操作。

這堂課將從一份內容出發

你可以帶著任何一份已經擁有的內容來參加，例如：

• 一份 PowerPoint 簡報

• 一份 Word 文件

• 一篇文章

• 一份課程講義

• 一份 Notion 筆記

• 一份產品介紹

• 一份活動企劃

• 一份品牌簡介

• 一份工作報告

• 一份還沒有整理完成的想法

課程中，我們會帶你把這份內容，逐步轉換成一個真正可以使用的 HTML 頁面。

從內容整理、網站地圖、版面架構、視覺風格，到動畫、互動與發布，讓你親自走過一次完整流程。

課程實作流程

這不是一堂只介紹工具、觀看示範的課程。

我們將以實際操作為主，一步一步完成：

第一步：整理原始內容

將文字、圖片、重點與資料，整理成適合網頁閱讀的內容。

第二步：確認服務對象

判斷這份頁面要給誰看，以及對方最需要看到什麼。

第三步：建立網站地圖

規劃頁面的章節、閱讀順序與操作路徑。

第四步：撰寫 AI 提示詞

學習如何向 AI 描述：

• 頁面用途

• 視覺風格

• 內容架構

• 色彩設定

• 互動功能

• 動畫效果

• 裝置需求

第五步：生成 HTML 第一版

使用 AI 將內容轉換成可以直接開啟的 HTML 頁面。

第六步：修改版面與視覺

調整文字、顏色、圖片、字體、間距、卡片與整體版面。

第七步：加入動畫與互動

根據頁面用途，加入適合的按鈕、切換、展開、圖表與動態效果。

第八步：測試不同裝置

確認作品在手機、平板與電腦上，都能正常閱讀與操作。

第九步：發布與分享

將完成的作品轉換成可以公開瀏覽的網址。

課程結束後，你將更了解

• 如何把原本的簡報內容轉換成 HTML 頁面

• 如何將 Word、Notion 與文字筆記整理成網頁

• 如何判斷頁面的服務對象與視覺焦點

• 如何規劃網站地圖與閱讀路徑

• 如何向 AI 描述版面、風格與功能需求

• 如何修改 AI 生成的文字、顏色、圖片與區塊

• 如何建立資訊卡片、章節與互動按鈕

• 如何加入簡單的動畫與轉場效果

• 如何製作手機、平板與電腦都能閱讀的頁面

• 如何讓作品更適合提案、教學、行銷與品牌展示

• 如何將完成成果分享給客戶、主管、學員與合作夥伴

• 如何建立一套未來可以重複使用的 AI HTML 工作流程

這堂課不只是教你做出一個好看的網頁

更重要的是，幫助你建立一套能夠持續使用的內容製作方法。

未來，當你需要製作簡報、企劃、作品集、產品頁面、課程內容或活動介紹時，你不必再從空白頁開始，一個字、一張圖慢慢排版。

你可以先把想法、素材與內容交給 AI。

再透過清楚的指令，要求 AI 幫你整理資訊、設計架構、建立版面、加入動畫與互動，快速完成一份真正可以使用的作品。

AI 不只是幫你寫文字。

它可以成為你的內容企劃、網頁設計師、前端助手與互動體驗製作夥伴。

這堂課適合誰？

這堂課特別適合經常需要整理資訊、製作簡報與對外展示內容的你：

• 企業講師

• 顧問

• 業務人員

• 企業主

• 部門主管

• 行銷人員

• 社群小編

• 活動企劃

• 自由工作者

• 內容創作者

• 教育工作者

• 專案經理

• 個人品牌經營者

• 想學習 AI 實際應用，卻沒有程式背景的人

你不需要成為工程師。

也不需要花大量時間背誦程式碼。

你需要學會的，是如何把自己的想法說清楚，讓 AI 理解你的需求，再把內容真正做出來。

活動資訊

課程主題｜Steve Jobs 教你做 AI HTML 簡報

日期｜2026 年 7 月 20 日，星期一

時間｜晚上 8:00

地點｜蒲公英 AI 知識群

使用工具｜ChatGPT × GPT Work × Gemini Canvas × Notion

上課前請準備

• 一台可以操作的筆記型電腦

• 穩定的網路環境

• 一份想要轉換成 HTML 的內容

• ChatGPT、Gemini 或其他可使用的 AI 工具

• 一顆願意嘗試新方法的心

你可以帶一份簡報、文章、課程、企劃、產品介紹，甚至只是一份還沒有整理好的筆記。

帶一份內容來，帶一個網站回家。

這次，不只是讓 AI 幫你做簡報。

而是讓你的內容真正動起來、被看見、被分享，也能被操作。

創意教學主題，非官方合作或授權課程。