網站入門 編程課程

實體編程教學課程內容

網站入門編程精華班（3 小時）

課程簡介

本課程是一堂為完全零基礎學員設計的網站製作入門課，讓學員在 三小時內從零開始製作一個完整的網站頁面。課程將循序導入網站架構概念與基本語法，從 HTML（內容結構）到 CSS（樣式設計），再簡介 JavaScript（互動功能），並配合現場實作練習與範例講解。

課程以「理論 × 練習 × 創作」為主軸，幫助學員了解網頁的運作邏輯與開發流程，親手完成個人簡介或主題式網站頁面。同時啟發進一步學習的動機，為日後進入前端設計、數位行銷或 AI 網站應用奠定基礎。

課程目標

1. 了解網站的組成結構與瀏覽器運作原理。

2. 掌握 HTML 的基本標籤與內容架構。

3. 學會 CSS 的基礎樣式與排版技巧，打造美觀網頁。

4. 初步認識 JavaScript 的互動概念。

5. 能在課程結束時完成一個簡單、可運行的個人網站頁面。

適合對象

• 完全沒有網站製作或編程基礎者。

• 想學習建立個人網站、品牌頁面或作品展示頁的學生與上班族。

• 設計師或創業者希望了解網站前端架構者。

• 適合學校科技課程、課外活動或企業技能提升工作坊。

課程時長與授課方式

• 共 3 小時。

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

• 教學方式：講師引導 + 即時操作 + 成果展示。

課程大綱

第一部分：網站與前端開發基礎（約 40 分鐘）

• 網站運作原理：從網址到瀏覽器顯示的過程。

• 認識前端（HTML、CSS、JavaScript）與後端的差異。

• 建立第一個 HTML 文件。

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

• 實作練習：建立「個人介紹頁」。

第二部分：網站樣式與排版設計（約 70 分鐘）

• 認識 CSS 與樣式設定方式（顏色、字型、背景、邊框）。

• Inline、Internal、External 樣式概念。

• 認識 Box Model 與排版概念。

• 實作練習：設計配色與佈局，製作「我的興趣網頁」。

第三部分：互動效果與延伸應用（約 40 分鐘）

• 介紹 JavaScript 與網頁互動邏輯。

• 建立簡單互動按鈕（如：按下改變顏色、顯示訊息）。

• 認識開發者工具（Developer Tools）與除錯方式。

• 實作練習：增加互動功能提升使用者體驗。

第四部分：總結與成果展示（約 30 分鐘）

• 完成個人化網站作品並發表。

• 講師示範網站優化與排版建議。

• 延伸教學建議：響應式網頁、JavaScript 進階、網站部署。

• 學員展示成果並獲頒電子學習證書（可選）。

課程特色

• 三小時快速上手，零基礎也能做出完整網站。

• 注重「做中學」實作教學，學員即時看到成果。

• 認識最新網頁技術與未來延伸方向。

• 適合入門者、學生、創業者及設計師。