網站進階 編程課程

實體編程教學課程內容

課程簡介

本課程為網站開發的進階訓練班，專為已完成 HTML 與 CSS 入門課程的學員設計。課程集中於 互動式網頁設計、JavaScript 應用與動態效果，讓學員學會如何讓網站更具可用性與吸引力。

課堂透過實作練習教導學員使用 HTML5、CSS3 與 JavaScript 製作互動按鈕、導航列、圖片輪播、視覺動畫等功能，並簡介網站響應式設計（Responsive Design）的核心概念。課後學員將能獨立設計一個具動態互動效果與美觀布局的網站雛形，為邁向前端工程師或全端開發者打下基礎。

課程目標

1. 強化 HTML5 與 CSS3 的應用技巧與實務設計能力。

2. 掌握 JavaScript 的核心語法與互動功能開發概念。

3. 能建立含動態效果與使用者互動設計的網頁。

4. 了解響應式設計（RWD）原理與自適應排版。

5. 完成具視覺吸引力與功能性的網站範例。

適合對象

• 已具 HTML/CSS 基礎，想進一步學習互動功能的學員。

• 設計師、創業者或學生，欲提升網頁美感與互動度。

• 希望強化前端技能的成人學員或在職 IT 人士。

• STEM / ICT 課程進階學習與專題研究入門者。

課程時長與授課方式

• 全長 3 小時。

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

• 即時操作、成果展示與個人練習檔案製作。

課程大綱

第一部分：HTML5 + CSS3 強化技巧（約 45 分鐘）

• HTML5 新標籤介紹（header、nav、section、footer）。

• CSS3 特效與動畫（transition、transform、hover 效果）。

• Flexbox 與 Grid 排版應用。

• 實作練習：建立現代化網站版面與導航列。

第二部分：JavaScript 互動功能入門（約 75 分鐘）

• 認識 JavaScript：語法結構、變數、函式與事件（event）。

• 操作 DOM（文件物件模型）改變內容與樣式。

• 實作練習：

  • 點擊按鈕切換內容/顏色。

  • 圖片輪播與自動播放效果。

  • 簡易互動表單（輸入驗證與提示）。

第三部分：響應式設計與綜合專案（約 45 分鐘）

• 響應式設計（Responsive Design）概念與媒體查詢（Media Query）。

• 認識 Bootstrap / CSS Framework 的運用策略。

• 專案實作任務：

  • 製作「小型品牌展示頁」

  • 將互動功能與排版整合成完整網站。

第四部分：展示與延伸方向（約 15 分鐘）

• 學員展示成果網站並互評。

• 講師回饋：排版細節、互動邏輯與程式優化技巧。

• 延伸方向介紹：

  • 前端框架（React / Vue）

  • 全端應用（Node.js + Database）

  • 網站部署與維運（GitHub Pages / Netlify）。

課程特色

• 三小時密集進修，快速進階實戰能力。

• 整合 HTML5、CSS3、JavaScript 三大核心技術。

• 採用現代開發流程與專案式教學。

• 實作導向教學，即學即用，課後可持續開發專案。