網站初級 編程課程

實體編程教學課程內容

課程簡介

本課程以三小時為單位，帶領學員快速入門 網站設計與前端開發的基礎概念。課程將從 HTML、CSS 入手，講解「網頁是如何組成」與「如何用程式讓畫面變美」，並實際操作製作一個個人化的簡易網站頁面（如個人介紹頁、產品展示頁或迷你作品集）。

課程以「學得快、看得見成果」為宗旨，結合理論與實作，幫助初學者在短時間內了解網站運作架構與設計邏輯，並建立持續進階（如 JavaScript 互動功能、前端開發框架）的學習基礎。

課程目標

1. 理解網站的基本結構與前端開發原理。

2. 掌握 HTML 與 CSS 的基本語法與應用。

3. 親手建立一個具基本版面與樣式的網站頁面。

4. 能修改文字、圖片、顏色與佈局。

5. 為進一步學習 JavaScript 或進階前端技術奠定基礎。

適合對象

• 網頁設計或前端開發初學者。

• 學生、上班族、創業人士或設計師想學習自製網站。

• 適合用於學校 STEM / ICT / 數位創意工作坊。

• 無需任何程式基礎即可參加。

課程時長與授課方式

• 全長三小時。

• 理論講解 30%，實際操作 70%。

• 需具備電腦與瀏覽器使用基礎。

課程大綱

第一部分：網站基礎概念與 HTML 結構（約 60 分鐘）

• 什麼是前端與後端？網站如何運作？

• 認識 HTML 結構（標籤、屬性、標題、段落、圖片、連結）。

• 製作第一個 HTML 網頁檔案。

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

第二部分：CSS 美化與版面設計（約 70 分鐘）

• 認識 CSS 的角色與連結方式。

• 顏色、字型、對齊、背景與邊框設計。

• CSS 選擇器與階層（class、id 基本用法）。

• 實作練習：讓網頁變得更美觀（改變顏色、調整排版）。

第三部分：網站排版與延伸應用（約 50 分鐘）

• 認識盒模型（Box Model）與版面配置（Layout）。

• 使用 Flexbox 或 Grid 進行簡單排版。

• 加入圖片區塊、按鈕與導覽列。

• 實作挑戰：完成小型作品頁面。

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

• 學員展示個人作品並互相交流。

• 講師回饋與建議優化方式。

• 延伸方向簡介：

  • JavaScript 互動特效入門

  • 響應式網頁設計（Responsive Design）

  • 網頁部署（上傳網站至線上平台）。

課程特色

• 三小時快速入門，完成第一個屬於自己的網站。

• 理論與實作並重，即學即做，成果可視化。

• 零基礎友善設計，適合任何年齡層初學者。

• 課堂包含美學與邏輯雙向訓練，啟發創意思維。