國立中興大學教學大綱
課程名稱 (中) 網頁設計(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/