| 週次 |
授課內容 |
| 第1週 |
課程導論與網頁環境概論:
1.網頁開發工作流 (Workflow) 介紹。
2.解析度（DPI/PPI）、色彩模式 (RGB) 與螢幕尺寸規範。 |
| 第2週 |
Photoshop 網頁視覺編輯_1
1.Banner 影像合成、調色與文字排版實作。
2.圖層管理 |
| 第3週 |
Photoshop 網頁視覺編輯_2
1.UI 元件製作：按鈕、圖標、背景裝飾物
2.圖片格式選擇實務：WebP vs. SVG vs. PNG 的壓縮比與適用情境。 |
| 第4週 |
HTML 核心結構解析
1.語意化標籤 (Header, Nav, Section, Footer) 的重要性。
2.建立基礎 HTML 骨架。 |
| 第5週 |
CSS 樣式與排版基礎
1.CSS 觀念
2.調整套版文字顏色、邊距與背景圖替換。 |
| 第6週 |
Flexbox 與 Grid 佈局實作
1.解析套版中的排版邏輯。
2.實作基本的Bootstrap兩欄式或三欄式網頁佈局 |
| 第7週 |
CSS與樣式修改
1.CSS 優先級權重解析。
2.如何在不破壞原始碼的情況下，透過外部樣式表修改套版視覺。 |
| 第8週 |
整合 PS 素材至 HTML 頁面，檢視初步視覺效果。 |
| 第9週 |
RWD 響應式設計原理
1.媒體查詢 (Media Queries) 應用。
2.斷點 (Breakpoints) 設置：手機、平板、桌面端的轉換。 |
| 第10週 |
JavaScript 基礎與套件導入
1.JS 基礎語法修改
2.查讀套板內的JS語法參數 |
| 第11週 |
互動功能微調_1：導覽列與選單 |
| 第12週 |
互動功能微調_2：輪播圖與燈箱 |
| 第13週 |
網站整合優化與 Debug |
| 第14週 |
網站整合優化與 Debug_2 |
| 第15週 |
網站整合優化與 Debug_3 |
| 第16週 |
成果發表 |
自主學習
內容 |
02.閱覽產業及學術相關多媒體資料
03.製作專題報告
|