【網頁設計】職種　【術科】模擬試題卷

一、主題說明：（請詳細閱讀）

親愛的網頁設計師們：

「河港老街」曾是百年前的貨運碼頭，紅磚街屋、老藥行與木造戲院沿著河岸排開。碼頭沒落後，年輕人外移，老街一度只剩假日的零星遊客。三年前，在地店家與返鄉青年一起辦起「河港燈會」，用手作燈籠點亮老街，讓老店重新被看見。

今年燈會邁入第三屆，主辦單位希望建置官方網站，讓第一次來的遊客知道「什麼時候來、看什麼、吃什麼、怎麼去」，也讓在地人願意把老街的故事分享出去。網站要有節慶的熱鬧，但不能掩蓋資訊；遊客在老街現場用手機查詢時，也要看得清楚、找得到。

二、圖形檔：

1. 至少使用主辦單位提供的「圖案檔」15 張以上。
2. 圖案檔（jpg）共有 26 張，可依照需要進行去背、合成、修改或重新繪製。
3. 圖案檔名可依照需求修改（不可使用中文檔名）。

三、製作內容：

1.【網站名稱與重點規劃】

1. 以「第三屆河港燈會」為主題，構思主視覺標語（Slogan）。
2. 網站請依照下列重點進行規劃：
   1. 遊客最常問的「時間、地點、交通」要在首頁三秒內找到。
   2. 節目與攤位資訊多，請以分類、篩選或頁籤整理，不要一次全部攤開。
   3. 手機版以「現場查詢」為優先情境設計。

2.【網頁基礎內容】

1. 【首頁】（Home）：主視覺、活動名稱與 Slogan、活動日期與地點、距離開幕的倒數、三個快速入口（節目表、老街地圖、交通）。
2. 【活動節目表】（Program）：依日期分成三天呈現參考資料中的節目。
3. 【老街散步地圖】（Street Map）：以示意圖或列表呈現參考資料中的店家與攤位，可依類別篩選。
4. 【老街故事】（Our Story）：以時間軸呈現老街的歷史。
5. 【燈籠工作坊報名】（Workshop）：工作坊介紹與報名表單。
6. 【交通與服務】（Visit）：交通方式、接駁車、服務台與注意事項。

3.【網頁互動內容】

1. 妥善設計網站地圖與基礎內容中各個項目的排版布局與互動方式。
2. 節目表頁籤：切換三天的節目，同一時間只顯示一天。
3. 攤位篩選：可依「美食」「手作」「老店」篩選。
4. 報名表單驗證：姓名、手機、場次、人數為必填；手機須為 09 開頭的 10 位數字；人數 1 到 4 人。送出後在頁面上顯示報名摘要（本題不需傳送到伺服器）。
5. 燈會作品集：點選縮圖以燈箱方式放大，可用 Esc 鍵關閉。

4.【其他加分項目】

除了上述對於本網站需求之外，可以發揮你的創意性、設計感、技術力，增加一些可供額外加分的內容。

四、設計要求：

1. 響應式網站設計：確保網站在手機、平板與桌機上都有良好的顯示效果（涉及媒體查詢和 CSS 選擇器的使用），網頁呈現形式和頁數不限。
2. 使用者體驗（UX）：製作考慮過「視覺動線」、「色彩心理應用」、「圖片選擇」以及「導航結構」、「易讀性」和「功能性」的網站。

五、參考資料（文字素材）：