HTML + CSS +Javascript 網站三劍俠 編程課程

實體編程教學課程內容

課程簡介

本課程是為初學者精心設計的「網站三劍俠」入門實作班。學員將在三小時內快速認識 HTML（結構）、CSS（樣式） 與 JavaScript（互動） 三項網站開發核心技術。

透過循序漸進的教學與實作練習，學員將學會如何建立網站架構、設計網頁風格與加入動態互動功能，從而完成一個具現代感的網頁作品。課堂以「所見即所得」的方式讓學員立刻感受程式碼的轉換效果，體驗從靜態到互動網頁的完整過程，為未來進階前端開發打下紮實基礎。

課程目標

1. 了解 HTML、CSS、JavaScript 在網站開發中的分工與關係。

2. 能建立具標題、圖片、連結的完整 HTML 頁面。

3. 學會使用 CSS 設定顏色、排版及版面設計。

4. 初步掌握 JavaScript 的互動功能（如按鈕切換顏色、動態訊息）。

5. 完成一個具結構、美觀與互動效果的迷你網站專案。

適合對象

• 無基礎或剛接觸網站開發的初學者。

• 學校 STEM、資訊科技課程學員。

• 想學習網站設計、行銷頁面製作或個人作品展示的學生與上班族。

• 想了解網站開發全流程的設計師、創業者或內容創作者。

課程時長與授課方式

• 全長三小時。

• 理論講解 30%，實作練習 70%。

• 提供可自訂的範例與即時操作練習檔案。

課程大綱

第一部分：HTML – 打造網站骨架（約 50 分鐘）

• 認識網站的組成與運作方式。

• HTML 基礎語法：標題、段落、圖片、連結、按鈕。

• 製作完整網頁結構（header、main、footer）。

• 實作練習：建立「個人首頁」HTML 架構。

第二部分：CSS – 為網站上色與美化（約 60 分鐘）

• 認識 CSS 與 HTML 的連結方式（外部樣式表）。

• 顏色、排版、背景、邊框與字型設計。

• 使用 class、id 及 Flexbox 進行排版。

• 實作練習：設計屬於自己的網頁風格與佈局。

第三部分：JavaScript – 讓網站動起來（約 60 分鐘）

• 認識 JavaScript 角色：讓網站具備邏輯與行動。

• 語法入門：變數、函式、事件（click）。

• 操作 DOM（文件物件模型）：改變文字、顏色與圖片。

• 實作練習：

  • 點擊按鈕切換背景顏色

  • 顯示互動訊息（如問候語、日期時間）

第四部分：整合應用與成果展示（約 30 分鐘）

• 整合三大技術，完成一個互動式迷你網站。

• 學員作品展示與講師指導調整。

• 延伸發展方向說明：

  • 響應式設計（Responsive Design）入門

  • 使用前端框架（Bootstrap / React）基礎介紹。

課程特色

• 三小時完整教學，快速掌握「網站三劍俠」基礎技能。

• 理論 × 實作雙軌並行，立即看到學習成果。

• 零基礎入門，難度適中，重點式教學。

• 完成「結構 + 美感 + 互動」的完整網頁頁面。