為什麼要把「真實專案的複雜度」帶進教室？

在快速演進的數位產業中，「學到的語法」與「業界需要的能力」常存在落差。蘋果網頁設計長期耕耘品牌網站與整合開發專案，我們相信教育不只是工具教學，更是傳遞決策邏輯與協作方法。因此，本學期受 中信科技大學 邀請，我們以整學期課程的形式，讓學生在循序漸進的節奏中，實際走完一個網站從無到有的完整流程。

課程以「HTML 是結構、CSS 是裝潢」作為共通語言：設計不是表面美化，而是資訊架構的可視化；程式不是孤立技術，而是讓體驗被實現的橋樑。雙講師共同授課 — 于佳正（設計總監） 負責品牌與介面策略、版型與敘事；伍坦克（網站程式工程師） 則由工程角度補上功能與資料程式思維，讓作品同時兼具可讀性、可維護性與可擴充性。

課程設計：從概念到上線的四個階段

1. 第一階段｜基礎打底（第 1–4 週）

   建立語意化 HTML、層級化排版、RWD 響應式核心觀念。以小任務練習標題、段落、列表、圖片、表格與連結的語意使用，理解「內容先於視覺」。

2. 第二階段｜版型實作（第 5–10 週）

   導入模組化切版與設計系統（Design System）概念：字級階層、網格與留白、按鈕與表單樣式、導覽與頁尾規範；強調命名與結構的一致性，目標是「可維護的 CSS」。

3. 第三階段｜功能與資料（第 11–14 週）

   由伍坦克老師帶領導入互動行為與內容資料化：表單流程與驗證、狀態回饋、內容結構化與資訊可讀性優化，理解「能看」與「能用」的取捨。

4. 第四階段｜上線與成發（第 15–18 週）

   主機／網域對應、檔案結構與資源管理、基本壓縮優化與驗收清單。學生完成作品上線，於 5/16 現場進行簡報與講評，正式發表成果。

教學方法：把抽象語法變成可操作的設計語言

• 內容先行：從資訊架構與文案層次開始，先定義要說什麼，再決定怎麼設計。
• 比喻學習：以「房屋／裝潢」隱喻連結 HTML 與 CSS，降低初學門檻。
• 專案節奏：每階段皆有里程碑作業與講評，養成敘事能力與問題拆解能力。
• 可維護思維：命名、結構、重用與檔案管理，培養長期維運視角與團隊協作基礎。
• 雙師互補：設計總監談決策邏輯，程式工程師示範功能落地，讓畫面與技術互證。

設計不是美化，而是資訊結構的可視化；程式不是孤立技術，而是讓體驗被實現。

— 蘋果網頁設計 設計總監 于佳正

學生成果：從履歷頁到個人品牌網站

期末成果以「自我介紹／個人品牌網站」為題，學生需完成導覽、首頁與至少一頁內文模組，並在成發上以簡報方式說明「目標受眾、內容結構、設計決策與可維護性」。

設計師的畫面是起點，開發者的思維讓它能被世界看見。

— 蘋果網頁設計 資深網站程式工程師 伍坦克

學習成效與回饋：把「會做」變成「說得清楚」

• 敘事能力：能以設計語言解釋版型決策，並以開發語言說明限制與取捨。
• 系統化思維：從單頁切換到設計系統，建立規範可重用的元件與樣式。
• 合作意識：理解設計、前端、內容與維運之間的工作交會點與交付標準。
• 上線意識：培養佈署觀念與檔案結構，懂得為網站品質與經營負責。

常見問答

講師簡介