項目概述

本次期末大作業旨在運用HTML、CSS及基礎的JavaScript知識，設計并制作一個以經典動漫角色“海綿寶寶”為主題的靜態展示網頁。網頁主題積極向上，色彩鮮明，力求生動地展現海綿寶寶及其朋友們所居住的比奇堡海底世界的獨特魅力，同時體現網頁設計的基本規范與美學原則。

網頁結構設計

1. 頭部區域：包含網頁標題Logo（如一個卡通風格的海綿寶寶頭像與文字）和主導航欄。導航欄鏈接至以下幾個主要板塊：首頁、角色介紹、精彩劇集、海底畫廊、關于我們。
2. 主體內容區：

• 首頁Banner：設計一個醒目、動態（可使用CSS簡單動畫）的橫幅，展示海綿寶寶、派大星、章魚哥等主要角色的集體形象，并附有歡迎語。

• 角色介紹板塊：采用卡片式布局，為海綿寶寶、派大星、章魚哥、蟹老板、珊迪等核心角色分別設立介紹卡片，包含圖片、名字、性格簡介。

• 精彩劇集推薦板塊：以列表或網格形式展示幾集經典劇集的名稱、縮略圖和簡短介紹。

• 海底畫廊板塊：創建一個簡單的圖片畫廊，展示動漫中的經典場景、搞笑截圖或同人藝術作品，使用燈箱效果增強體驗。

• 關于我們板塊：介紹本次網頁設計作業的創作初衷、使用的技術棧（HTML5, CSS3等）以及作者信息。

1. 頁腳區域：包含版權信息、友情鏈接（可鏈接至官方或粉絲站點）以及一個返回頂部的按鈕。

視覺與交互設計

• 色彩方案：主色調采用海綿寶寶的明黃色、派大星的粉紅色以及海底的藍色系，營造歡快、活潑的視覺氛圍。
• 字體選擇：標題使用圓潤、可愛的無襯線字體，正文使用清晰易讀的默認字體。
• 響應式布局：使用媒體查詢（Media Queries）確保網頁在電腦、平板和手機等不同設備上都能良好顯示。
• 交互元素：為導航鏈接、按鈕和圖片添加鼠標懸停效果（如顏色變化、輕微放大）；畫廊圖片點擊可放大查看；確保所有鏈接和按鈕的可用性。

技術實現要點

• HTML5：使用語義化標簽如<header>, <nav>, <main>, <section>, <article>, <footer>來構建清晰的內容結構。
• CSS3：運用Flexbox或Grid布局實現頁面排版；使用漸變、陰影、圓角等樣式美化元素；利用@keyframes創建簡單的動畫效果（如Banner文字淡入）。
• JavaScript：可編寫少量代碼實現圖片燈箱效果、返回頂部按鈕的平滑滾動，以及移動端菜單的切換功能。

###

通過完成這個以“海綿寶寶”為主題的網頁項目，不僅綜合實踐了本學期所學的網頁前端技術，也鍛煉了將創意構思轉化為具體作品的能力。最終成品是一個結構清晰、視覺愉悅、內容豐富的動漫主題網站，充分展現了海綿寶寶這一經典IP的歡樂精神，也體現了網頁設計作為信息傳達與藝術表達結合體的特點。