中华青铜文明

一、项目简介

中华青铜文明（青铜器博物馆）是一个面向文化传播与互动体验的静态 Web 展示项目。网站以中华青铜文明为主线，从夏商周至秦汉的历史脉络出发，系统呈现青铜器的历史渊源、器型分类、纹饰艺术、铸造工艺与三星堆专题等内容，并辅以数字展厅、文物对话、知识挑战等互动模块，帮助用户以沉浸式方式了解与感受青铜文化。

项目采用原生 HTML、CSS、JavaScript 构建，不依赖后端服务，可直接通过浏览器打开访问；用户登录与注册数据保存在浏览器本地存储中。

---

二、技术栈

类别	说明
页面结构	HTML5
样式	CSS3（各页面独立样式 + 公共样式 common.css）
脚本	JavaScript（jQuery）
动画	Animate.css
轮播	Swiper
3D 展示	Three.js（三星堆 3D 沉浸页）
多媒体	图片、视频资源

---

三、功能模块介绍

1. 首页（index.html）

网站入口与总览页，主要包含：

• 全屏 Banner 与粒子背景动效
• 历史渊源时间线：从夏商萌芽到秦汉传承五个阶段概览
• 青铜艺术卡片：礼器、兵器、乐器、生活用器四大类别介绍
• 传承保护板块：政策支持、传承人培养、走进校园、文旅融合等方向展示
• 统一顶部导航与页脚，支持滚动动画与回到顶部

2. 历史溯源（history.html）

以「吉金铸史」为主题，深入梳理青铜文明发展脉络：

• 首屏大标题与滚动引导
• 交互式历史时间轴：按朝代/阶段展示关键事件与背景
• 各时期配图与文字说明，呈现从夏商到秦汉的青铜礼乐演变

3. 器型分类（type.html）

系统介绍青铜器的主要器型与用途：

• 首屏 Swiper 轮播展示代表性器物
• 按礼器、乐器、兵器、生活用器等类别分类浏览
• 各类器物配图、名称、功能与历史背景说明

4. 纹饰艺术（pattern.html）

聚焦青铜器表面装饰与符号体系：

• 首屏轮播展示饕餮纹、夔龙纹、凤鸟纹等典型纹饰
• 分栏介绍饕餮纹、夔龙纹、凤鸟纹、云雷纹、蟠螭纹等纹饰类型
• 说明纹饰的寓意、时代特征与艺术价值

5. 三星堆专题（sanxingdui.html / sanxingdui-3d.html）

以古蜀三星堆文化为核心的专题模块：

• 专题页：震撼首屏、数据概览、代表性文物介绍、发现历程与文化解读
• 3D 沉浸观赏页：基于 Three.js 的全屏 3D 文物展示
  • 支持模型旋转、缩放、自动旋转
  • 可切换场景背景（青墨、深褐、暖沙、墨绿、暮紫等）
  • 可切换材质预设（原色、青铜、铜绿、鎏金等）
  • 提供重置视角、全屏等控制功能

6. 数字展厅（gallery.html）

虚拟博物馆式浏览体验：

• 左侧器物目录，右侧视频与详情展示
• 收录青铜大立人像、青铜纵目面具、叠瓣龙纹鼎、青铜人头像等代表性文物
• 点击目录项切换对应文物的视频播放与文字介绍（年代、类型、尺寸、描述等）

7. 铸铜工艺（craft.html）

介绍古代青铜铸造技术与流程：

• 工艺概述：从矿石到成器的整体流程
• 范铸法、失蜡法等主要铸造方法的图文说明
• 各步骤（制模、合范、熔炼、浇铸、修整等）的分步展示
• 火焰粒子等视觉装饰，强化「炉火匠心」主题

8. 互动区（interact.html）

「与文物对话」沉浸式互动体验：

• 选择四位文物守护者：青铜大立人像、青铜纵目面具、叠瓣龙纹鼎、青铜人头像
• 切换文物后更新展示图与对话内容
• 模拟与文物进行问答式对话，以第一人称视角讲述文物背后的故事与历史

9. 知识挑战（quiz.html）

青铜文明主题趣味测验：

• 共 10 道选择题，涵盖历史、器型、纹饰、工艺、三星堆等知识点
• 答题进度与即时反馈
• 结束后展示得分与评价，巩固学习成果

10. 登录注册（login.html）

用户账户管理（前端本地实现）：

• 登录 / 注册 Tab 切换
• 用户名与密码校验，注册信息存入浏览器本地存储
• 支持「记住用户名」
• 登录成功后导航栏显示用户名与退出按钮
• 已登录状态下可查看登录时间与退出操作

---

四、公共能力

全站通过公共脚本与样式实现一致体验：

能力	说明
统一导航	header-menu.js 动态生成导航菜单，自动高亮当前页，并根据登录状态显示「登录」或「用户名 + 退出」
统一页脚	footer.js 按页面生成对应文案的页脚
滚动交互	导航栏滚动变色、元素进入视口动画、回到顶部按钮
移动端适配	汉堡菜单、响应式布局
视觉风格	青铜色调、纹饰装饰、粒子与过渡动画，整体呈现博物馆气质

---

五、目录与文件结构

homework-qingtongwenhua/          # 项目根目录
│
├── 项目说明.md                    # 项目说明文档（本文件）
│
├── index.html                     # 首页
├── history.html                   # 历史溯源
├── type.html                      # 器型分类
├── pattern.html                   # 纹饰艺术
├── sanxingdui.html                # 三星堆专题
├── sanxingdui-3d.html             # 三星堆 3D 沉浸观赏
├── gallery.html                   # 数字展厅
├── craft.html                     # 铸铜工艺
├── interact.html                  # 互动区
├── quiz.html                      # 知识挑战
├── login.html                     # 登录注册
│
├── common.css                     # 全站公共样式（导航、页脚、通用组件等）
├── index.css                      # 首页样式
├── history.css                    # 历史溯源页样式
├── type.css                       # 器型分类页样式
├── pattern.css                    # 纹饰艺术页样式
├── sanxingdui.css                 # 三星堆专题页样式
├── sanxingdui-3d.css              # 三星堆 3D 页样式
├── gallery.css                    # 数字展厅页样式
├── craft.css                      # 铸铜工艺页样式
├── interact.css                   # 互动区页样式
├── quiz.css                       # 知识挑战页样式
├── login.css                      # 登录注册页样式
│
├── css/                           # 第三方样式库
│   ├── animate.min.css            # Animate.css 动画库
│   └── swiper-bundle.min.css      # Swiper 轮播组件样式
│
├── js/                            # 脚本目录
│   ├── jquery.min.js              # jQuery 库
│   ├── swiper-bundle.min.js       # Swiper 轮播组件
│   ├── common.js                  # 公共脚本（滚动动画、回到顶部、粒子等）
│   ├── header-menu.js             # 统一导航栏生成与登录状态
│   ├── footer.js                  # 统一页脚生成
│   ├── gallery.js                 # 数字展厅交互逻辑
│   ├── sanxingdui.js              # 三星堆专题页交互
│   └── sanxingdui-viewer.js       # 三星堆 3D 模型展示（Three.js）
│
├── images/                        # 图片资源
│   ├── logo.png                   # 站点 Logo
│   ├── banner*.png / banner*.jpg  # 各页 Banner 与背景图
│   ├── type/                      # 器型分类相关图片
│   ├── pattern/                   # 纹饰艺术相关图片
│   ├── dalirenxiang.jpg           # 青铜大立人像等文物图
│   ├── qingtongmianju.jpg
│   ├── longwending.jpg
│   ├── touxiang.jpg
│   ├── sanxingdui.png             # 三星堆专题配图
│   └── …                          # 其他页面配图与装饰素材
│
├── videos/                        # 视频资源（数字展厅播放）
│   ├── dalirenxiang.mp4           # 青铜大立人像
│   ├── qingtongmianju.mp4         # 青铜纵目面具
│   ├── longwending.mp4            # 叠瓣龙纹鼎
│   └── touxiang.mp4               # 青铜人头像
│
└── 3d/                            # 3D 模型资源（备用）
    └── model.glb                  # GLB 格式 3D 模型文件

---

六、页面导航关系

首页
 ├── 历史溯源
 ├── 器型分类
 ├── 纹饰艺术
 ├── 三星堆专题 ──→ 3D 沉浸观赏
 ├── 数字展厅
 ├── 铸铜工艺
 ├── 互动区
 ├── 知识挑战
 └── 登录 / 注册

---

七、使用说明

1. 将项目文件夹完整下载或克隆到本地。
2. 使用现代浏览器（Chrome、Edge、Firefox、Safari 等）打开 index.html 即可浏览。
3. 三星堆 3D 页需联网加载 Three.js 及远程 3D 模型资源；若网络不可用，3D 功能可能无法正常显示。
4. 数字展厅依赖 videos/ 目录下的本地视频文件，请确保资源完整。
5. 登录注册为前端演示功能，用户数据保存在当前浏览器的本地存储中，清除浏览器数据后账户信息将丢失。

---

八、项目定位

本项目适用于：

• 青铜文化、非遗主题的 Web 前端课程大作业展示
• 博物馆、文化展览类的静态宣传与科普站点
• HTML/CSS/JavaScript 多页面站点结构与交互效果的实践参考