國立中興大學教學大綱

課程名稱	(中) 網頁設計(1920)
	(Eng.) Web Design
開課單位	文學院
課程類別	必修			學分	2	授課教師	劉佳育
選課單位	文學院			授課使用語言	中文	開課學期	1142
課程簡述	1. 影像處理與網頁素材準備 (Adobe Photoshop) 網頁視覺編輯： 學習針對網頁顯示環境（如 72dpi、RGB 模式）進行圖片精修與合成。 資產輸出與優化： 實作切圖（Slicing）與匯出技術，理解 WebP、SVG、PNG 等不同格式對載入速度的影響。 UI 素材製作： 製作符合網頁規範的 Banner、按鈕及背景圖層。 2. 前端架構基礎 (HTML / CSS) 版面解析： 現有套版的結構，理解 HTML 語意化標籤。 樣式覆寫 (Overriding)： 學習如何修改 CSS 原始碼，調整色彩系統、排版佈局與響應式斷點。 3. 動態交互與功能擴充 (JavaScript) 腳本修改： 針對現有 JS 套件（如輪播圖、選單、燈箱效果）進行參數微調。 4.利用AI解答輔助網站製作與修改
先修課程名稱

課程與核心能力關聯配比(%)			課程目標之教學方法與評量方法
課程目標	核心能力	配比(%)	教學方法	評量方法
實際架設個人網站			習作 討論 講授	作品 實作
授課內容(單元名稱與內容、習作/每週授課、考試進度-共16週加自主學習)
週次 授課內容 第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.製作專題報告
學習評量方式
教科書＆參考書目(書名、作者、書局、代理商、說明)
課程教材（教師個人網址請列在本校內之網址）
課程輔導時間
聯合國全球永續發展目標(連結網址)
04.教育品質 提供體驗課程：N

請尊重智慧財產權及性別平等意識，不得非法影印他人著作。
更新日期 西元年/月/日：2026/01/13 16:20:01	列印日期 西元年/月/日：2026 / 3 / 13
MyTB教科書訂購平台：http://www.mytb.com.tw/