---
title: "AI × HTML 新手實作課 不用寫程式，也能打造動態、靜態與互動式網頁 2.0"
slug: 6179cc6e-7b4e-4a8f-8d2e-f8bd6ad641ec
url: https://pgylab.ai/events/6179cc6e-7b4e-4a8f-8d2e-f8bd6ad641ec
state: completed
started_at: 2026-07-20T12:00:00.000Z
ended_at: 2026-07-20T13:30:00.000Z
hosting_type: custom
---
# AI × HTML 新手實作課 不用寫程式，也能打造動態、靜態與互動式網頁 2.0
## When
- Starts: 2026-07-20T12:00:00.000Z
- Ends: 2026-07-20T13:30:00.000Z
- Status: completed
## Where
- Hosting: custom
## Description
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 幫你做簡報。而是讓你的內容真正動起來、被看見、被分享，也能被操作。創意教學主題，非官方合作或授權課程。
## Hosts
- [光光](https://pgylab.ai/@wei)
## Tickets
- 2.0加課: Free
## Categories
- [講座](https://pgylab.ai/categories/20260110)