随着互联网技术的普及，旅游信息的数字化展示与传播变得至关重要。本设计以“桂林旅游”为主题，旨在通过一个结构清晰、视觉美观、具备基础交互功能的静态网站，展示桂林独特的自然风光与人文魅力，同时作为《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文件及图片资源）均已打包，可供直接部署或作为学习参考。
