113學年下學期
廖廣仁老師
資工系 系專業必修
二年級
33人
《網頁前端設計初階》課程以深坑老街文化為核心主題，結合 HTML 與 CSS 的技術教學，帶領學生進行一場文化與數位的跨域對話。從課程初期的USR計畫導入與小組任務分工開始，學生逐步學習網頁語法與版面設計技巧，並同步建立以深坑地區為素材的網頁內容。課程設計強調任務導向與小組合作，讓學生在實作中強化技術能力，也培養溝通與分工協作的經驗。
課程中安排實地走訪深坑老街，學生透過拍攝、訪談與觀察，深入理解當地文化與空間特色，並將蒐集到的素材導入網站開發。從豆腐文化、古建築到在地人物故事，皆成為網頁內容的重要元素。學生不僅在網站中實踐視覺設計與排版技巧，更進一步將深坑老街的色彩語彙與文化符碼轉化為網頁風格，展現地方美學。
在期末成果發表中，各組展示以「文化旅程」為主軸的靜態網站，不僅呈現技術成果，更回應了文化永續與USR實踐的核心精神。整體學習歷程融合技術學習、文化詮釋與在地關懷，讓學生在設計中認識地方、在轉譯中實踐社會參與，進而成就一場具深度與影響力的數位文化行動。
本課程以地方文化主題為核心，指導學生學習 HTML 與 CSS 技術，將文化故事透過網頁形式呈現，增強學生的文化詮釋與表達能力。
課程安排實地參訪深坑老街，學生透過走訪、拍攝與訪談方式蒐集在地文化資料，並於課堂中轉化為靜態網站內容。
課程採小組合作方式，以任務導向學習進行文化主題靜態網站開發，提升學生實作能力與團隊溝通協作技巧。
學生在學習 CSS 過程中，融合地方色彩、傳統元素與排版風格，培養數位設計與地方美學的整合能力。
學生網站成果可作為地方文化推廣平台，讓技術學習成為文化保存與數位永續的實踐行動，呼應大學社會責任精神。
(1)技術技能：熟練 HTML、CSS，能製作多頁靜態網站。
(2)文化涵養：深化在地文化理解，具文化詮釋與轉譯能力。
(3)社會參與：培養USR精神，落實技術回饋地方社會。
(4)團隊協作：強化小組合作與成果發表能力。
(5)美學素養：培養數位設計美感與地方視覺風格調和能力。
本課程為配合USR第四期「文化韌性永續簪纓」計畫所設計，旨在透過HTML與CSS技術，協助學生將地方文化內容轉化為靜態網頁形式，並結合深坑老街實地參訪活動，蒐集第一手文化素材，深化學生文化觀察與數位詮釋能力。
在課堂教學方面，學生依循HTML語法結構與CSS樣式語言，逐步完成分頁式文化主題網站，課程內容涵蓋標準語法應用、版面設計、色彩搭配與響應式網頁入門等。
課程中安排第10週前往深坑老街進行實地參訪，學生於活動中拍攝建築、商店、文化意象等素材，作為網站內容的主視覺與內文呈現，並透過小組討論與內容轉譯，完成具有在地特色的文化導覽網站成果
學生於廟宇壁畫前拍照記錄導覽過程，並欣賞民俗浮雕藝術。
學生於廟埕聆聽導覽解說， 了解深坑信仰空間的歷史背景與建築細節。
深坑景點介紹
深坑老街｜特色美食推薦
深坑文化散步行程建議
深坑交通地圖
本網站以《深坑老街》為主題，透過網頁設計展現地方文化的多元面貌。網站內容涵蓋「關於深坑」、「老街景點」、「深坑四寶」、「深坑美食」、及「一日行程」等七大主題，詳實介紹如德興居、深坑廳、人孔蓋等地標背後的歷史脈絡，並呈現豆腐、黑毛豬、綠竹筍與茶葉等在地特色物產。
團隊亦規劃一日遊路線，提供遊客深度體驗深坑文化的實用建議。整體網站結合實地調查成果與視覺設計技巧，將深坑的人文底蘊與旅遊魅力，轉化為一個具文化詮釋力的數位平台。
深坑老街一日遊建議
將深坑四寶以創新方式對外推廣
人孔蓋、深坑廳、 德興居、百年榕樹的介紹
深坑特色美食介紹
本網站致力於介紹深坑老街的文化魅力與自然風景，帶領您以輕鬆的步調深入認識這座充滿歷史記憶的小鎮。
在這裡，您可以了解在地文化與歷史背景，從街屋、古建築到地方故事，體會深坑的時代變遷；欣賞自然景觀，走訪景美溪畔、溪橋與周邊步道，感受山城的靜謐；品嘗傳統美食，不論是烤臭豆腐還是豆香冰品，都能留下深刻的味覺印象。
希望透過這個網站，讓您不只遊覽深坑，更能看見它背後的文化與人情味。