本課程旨在引導設計領域學生跨越技術門檻，建立從「視覺設計」到「網頁實踐」的全方位思維。課程目標分為三個核心維度：首先，使學生掌握 No-code 工具與 AI 協作技術，能快速將創意原型轉化為具備專業質感的互動網站，並學會利用 AI 輔助素材生成與文案修飾。 其次，透過 Dreamweaver 實作，學生將理解 HTML 結構與 CSS 樣式的運作邏輯，建立正確的網頁骨架與響應式佈局（RWD）觀念，確保設計能適應多元裝置。 最後，學生將學習數位資產管理與 Neocities 平台部署，完成個人數位作品集的發布。 透過本課程，學生不僅能獨立製作美感與功能兼具的網站，更能為後續進階網頁程式課程奠定堅實的技術銜接基礎。

1. 數位觀念建立與 AI 輔助快速產出： 本階段著重於「網頁基礎認知」與「效率工具」的運用。首先引導學生理解網際網路的基本運作原理，包括 IP、伺服器與網域概念。接著導入 Strikingly、Wix 或 WordPress 等 No-code 工具，讓學生在不接觸代碼的情況下，快速建立對網頁版型、組件與導覽邏輯的直覺。同時，課程將整合 AI 生成工具（如 ChatGPT、Midjourney）與 Canva，協助學生在設計初期就能產出高品質的視覺素材與網站文案，降低初學者的技術焦慮。 2. UI/UX 視覺設計與響應式邏輯規劃： 為了讓學生具備專業網頁設計師的素養，此階段將重心轉移至「原型設計（Prototyping）」。學生將學習使用 Figma 繪製線框圖（Wireframe）與視覺稿，理解網格系統（Grid System）與響應式網頁設計（RWD）的斷點邏輯，確保設計能兼顧電腦與行動裝置的體驗。這不僅是為了後續的實作鋪路，更是為了培養學生在進入程式開發前的設計思考能力，學會如何系統化地規劃網頁資訊架構。 [Image showing RWD layouts on desktop, tablet, and mobile screens] 3. Dreamweaver 實作與 HTML/CSS 核心結構： 此階段進入手寫代碼的銜接期，透過 Adobe Dreamweaver 的視覺化操作介面，帶領學生拆解網頁的底層邏輯。課程將聚焦於 HTML 標籤語義與 CSS 樣式控制（如 Box Model 與 Flexbox），讓學生理解「結構」與「美化」的關聯。教學重點不在於死背語法，而是學會如何閱讀代碼，並利用 AI 輔助 Debug，使學生具備修改網頁細節的能力，為未來更高階的網頁程式課程打下扎實的「語感」基礎。 4. 雲端部署發布與個人作品集優化： 最後階段強調「實戰應用」與「數位資產管理」。學生將學習如何將自己在 Dreamweaver 實作的網頁檔案，透過 FTP 或平台介面上傳至 Neocities 等免費空間，完成真正的網頁發布。此外，課程將加入 SEO（搜尋引擎優化）與網站效能優化的基本觀念，引導學生將前述階段的產出整合為一套具備專業度的「個人數位作品集」。透過期末的展演發表，學生將學會如何向他人介紹自己的數位作品，完成從設計者到開發者的初次跨界體驗。

無