隨著互聯網技術的普及，旅游信息的數字化展示與傳播變得至關重要。本設計以“桂林旅游”為主題，旨在通過一個結構清晰、視覺美觀、具備基礎交互功能的靜態網站，展示桂林獨特的自然風光與人文魅力，同時作為《Web前端設計與開發》課程的綜合性期末大作業，全面運用HTML5、CSS3及JavaScript核心技術。
一、 項目概述與設計目標
本項目是一個包含7個主要頁面的靜態網站，分別為：首頁（index.html）、景點介紹（attractions.html）、美食文化（food.html）、旅游攻略（guide.html）、行程預訂（booking.html）、關于我們（about.html）以及一個模擬的登錄/注冊頁（login.html）。設計核心目標如下：
- 主題鮮明：圍繞“桂林山水”設計統一的視覺風格，以青綠色、水墨感為主色調，突出清新、自然的意境。
- 結構完整：網站包含導航、橫幅、內容區、頁腳等標準模塊，各頁面邏輯清晰，鏈接暢通。
- 技術實現：純前端技術棧，HTML負責結構，CSS負責樣式與響應式布局（適配不同屏幕尺寸），JavaScript實現簡單的交互功能（如圖片輪播、表單驗證、選項卡切換等）。
- 內容充實：每個頁面提供與主題相關的圖文內容，信息詳實。
二、 網站結構與頁面設計
- 首頁 (index.html)：作為門戶，采用全屏輪播圖展示漓江、象鼻山、龍脊梯田等標志性景觀。下方設計“精選推薦”、“特色美食”、“旅行貼士”三個卡片式內容區塊，吸引用戶瀏覽。導航欄固定于頂部，確保隨時跳轉。
- 景點介紹 (attractions.html)：采用網格布局展示多個景點卡片。每張卡片包含圖片、名稱、簡短描述和一個“了解更多”的按鈕。點擊按鈕可通過JavaScript彈窗或跳轉到詳情區域展示更詳細信息。
- 美食文化 (food.html)：使用選項卡（Tab）組件，分類介紹桂林米粉、啤酒魚、荔浦芋扣肉等特色美食。每個選項卡下包含圖片和文字介紹。
- 旅游攻略 (guide.html)：以時間線或文章列表形式，提供不同季節、不同天數的旅游路線建議和實用貼士（如交通、住宿、注意事項）。
- 行程預訂 (booking.html)：設計一個模擬預訂表單，包含目的地選擇、日期、人數等輸入項。使用JavaScript進行表單驗證（如非空檢查、日期格式驗證），提交時彈出模擬成功提示。
- 關于我們 (about.html)：介紹網站創建目的、團隊（可虛構）及聯系方式。
- 登錄/注冊頁 (login.html)：設計簡潔的模態框或獨立頁面，包含用戶名、密碼輸入及“登錄”、“注冊”切換功能，前端驗證輸入有效性。
三、 核心技術應用細節
- HTML5：使用語義化標簽如
<header>,<nav>,<main>,<section>,<article>,<footer>構建頁面骨架。在景點頁面使用<figure>和<figcaption>組合圖片與說明。 - CSS3：
- 布局：采用Flexbox與Grid布局實現靈活的頁面排版，確保內容區域在不同設備上的美觀性。
- 樣式：定義全局變量（CSS Custom Properties）管理主題色。使用漸變、陰影（box-shadow）、圓角（border-radius）美化按鈕和卡片。為導航鏈接和按鈕添加平滑的過渡（transition）效果。
- 響應式：通過媒體查詢（@media）調整導航欄（在小屏幕下變為漢堡菜單）、圖片尺寸和布局方式，實現移動端友好。
- JavaScript：
- 交互增強：實現首頁圖片輪播（自動播放與手動切換）、美食頁的選項卡切換、導航欄移動端漢堡菜單的展開/收起。
- 表單處理：為預訂和登錄頁面編寫表單驗證函數，提供即時反饋。
- 動態內容：可通過內聯或外部JSON數據模擬動態加載景點信息（盡管是靜態頁，但展示數據綁定概念）。
四、 開發與課程收獲
本“桂林旅游網站”項目完整實現了從設計稿到可運行網頁的全過程。通過本次大作業，系統鞏固了以下Web前端開發核心技能：
- 頁面架構能力：規劃多頁面網站的結構與信息流轉。
- 樣式設計與實現能力：將視覺概念轉化為具體的CSS代碼，并保證跨瀏覽器兼容性和響應式體驗。
- 基礎編程邏輯：使用JavaScript為靜態頁面添加“動態”交互，提升用戶體驗。
- 項目組織能力：合理規劃文件目錄（如images、css、js文件夾），編寫清晰、可維護的代碼。
該網站作為結課作業，不僅是一個功能完整的靜態作品，更是一個展示桂林旅游資源的有效數字窗口，體現了Web前端技術在信息展示與交互設計方面的基礎價值。所有源代碼（.html, .css, .js文件及圖片資源）均已打包，可供直接部署或作為學習參考。
