項目概述

本期末大作業旨在設計并開發一個以“桂林旅游”為主題的靜態網站，綜合運用HTML、CSS和JavaScript技術，展示網頁設計與開發的核心技能。網站將圍繞桂林的自然風光、人文歷史和旅游服務進行構建，共計7個主要頁面，形成一個完整、美觀且具備基本交互功能的旅游信息門戶。

網站結構設計

網站采用清晰的層級結構，確保用戶導航流暢。主要頁面規劃如下：

1. 首頁（index.html）：網站門戶，包含大幅桂林山水輪播圖、精華景點推薦、快速導航和歡迎語。
2. 風景名勝（scenery.html）：詳細介紹漓江、象鼻山、龍脊梯田、陽朔西街等核心景點，配以高清圖片和文字說明。
3. 旅游攻略（guide.html）：提供行程規劃、旅行貼士、最佳游覽季節和經典路線推薦。
4. 美食文化（food.html）：展示桂林米粉、啤酒魚等地方特色美食及其文化背景。
5. 人文歷史（culture.html）：介紹桂林的歷史沿革、少數民族（如壯族、瑤族）風情和傳統節慶。
6. 交通住宿（service.html）：提供實用的交通指南（飛機、高鐵、本地交通）和酒店住宿信息參考。
7. 聯系我們（contact.html）：設計咨詢表單，模擬旅游項目策劃咨詢功能，并包含虛擬聯系方式與地圖位置。

技術實現細節

1. HTML結構

采用HTML5語義化標簽構建，如 <header>, <nav>, <main>, <section>, <footer>，確保代碼結構清晰且有利于SEO。每個頁面保持一致的導航欄和頁腳，實現站點統一性。

2. CSS樣式設計

• 布局：采用Flexbox與Grid布局實現響應式設計，確保在電腦、平板和手機端均有良好顯示效果。
• 風格：主色調選取青綠色（#4CAF50）和白色，搭配水墨風格的圖片和邊框，體現桂林山水的清新與詩意。
• 動畫：使用CSS3過渡（transition）和關鍵幀動畫（@keyframes）實現導航欄懸停效果、圖片淡入淡出等微交互，提升用戶體驗。

3. JavaScript交互功能

為實現靜態網頁的“動感”，集成以下輕量級JavaScript功能：

• 圖片輪播：在首頁實現自動輪播和手動切換的景點展示大圖。
• 表單驗證：在“聯系我們”頁面，對咨詢表單的姓名、郵箱、留言內容進行非空和格式校驗，并給出友好提示。
• 返回頂部按鈕：滾動頁面時顯示浮動按鈕，點擊可平滑返回頁面頂部。
• 選項卡切換：在“旅游攻略”或“風景名勝”頁面，使用選項卡來分類展示不同內容，節省空間并提升交互性。

旅游開發項目策劃咨詢功能模擬

作為項目亮點，在“聯系我們”頁面，設計了一個模擬的旅游項目策劃咨詢表單。表單字段包括：

- 咨詢項目類型（如景區開發、旅游線路設計、文旅融合策劃）
- 預算范圍
- 聯系人信息
- 詳細需求描述
提交時，通過JavaScript進行前端驗證，并彈窗提示“感謝您的咨詢，我們的專業團隊將盡快與您聯系！”，模擬了后端咨詢提交的流程，體現了網站作為潛在商業項目的策劃與服務屬性。

與展望

本項目通過一個完整的桂林旅游網站設計，系統實踐了從頁面規劃、UI設計到前端代碼實現的完整流程。網站不僅滿足了靜態網頁制作的課程要求，還通過合理的交互設計和模擬業務功能，展示了將前端技術應用于實際旅游開發項目咨詢場景的潛力。所有源代碼結構清晰、注釋完整，適合作為《Web網頁設計與開發》課程的結課作業提交。未來如需擴展，可考慮接入動態數據、增加用戶評論系統或集成第三方地圖API，使其成為一個功能更全面的動態網站。