摄影作品展示网站

一个响应式的个人摄影作品展示网站，用于展示摄影作品集，包含作品分类、筛选、灯箱查看等功能。

功能特性

核心功能

• 响应式设计：适配手机、平板和桌面设备
• 作品分类筛选：按自然风光、城市建筑、人像摄影、街头摄影分类浏览
• 图片灯箱查看：点击作品可放大查看详细信息
• 平滑滚动导航：点击导航菜单平滑滚动到对应部分
• 移动端菜单：小屏幕显示汉堡菜单

页面结构

1. 首页 - 展示网站主题和主要作品
2. 作品集 - 展示所有摄影作品，支持分类筛选
3. 关于我 - 摄影师介绍和个人信息
4. 联系 - 联系方式和社会媒体链接

文件结构

my-website/
├── index.html          # 主页面文件
├── css/
│   └── style.css      # 样式文件
├── js/
│   └── script.js      # JavaScript交互文件
├── images/            # 图片目录（可存放本地图片）
└── README.md          # 项目说明文档

技术栈

• HTML5 - 页面结构
• CSS3 - 样式设计，包含Flexbox和Grid布局
• JavaScript (ES6) - 交互功能
• Font Awesome - 图标库
• Google Fonts - 字体库（Noto Sans SC, Playfair Display）

使用方法

1. 查看网站

直接在浏览器中打开 index.html 文件即可查看网站。

2. 替换图片

网站目前使用Unsplash的示例图片。要替换为自己的摄影作品：

1. 将图片文件放入 images/ 目录
2. 修改 index.html 中 <img> 标签的 src 属性：

   <!-- 示例 -->
   <img src="images/your-photo.jpg" alt="作品描述">

3. 修改内容

• 个人信息：在 index.html 的 #about 部分修改
• 联系方式：在 index.html 的 #contact 部分修改
• 作品信息：修改每个作品的标题和分类描述

4. 自定义样式

• 修改 css/style.css 中的CSS变量来改变主题颜色：

  :root {
      --primary-color: #2c3e50;    /* 主色调 */
      --secondary-color: #3498db;  /* 次要色调 */
      --accent-color: #e74c3c;     /* 强调色 */
  }

功能说明

作品筛选

• 点击分类按钮筛选对应类型的作品
• “全部”按钮显示所有作品
• 筛选时有平滑的过渡动画

灯箱查看

• 点击任意作品图片可放大查看
• 按ESC键或点击关闭按钮退出灯箱
• 点击灯箱背景区域也可关闭

响应式设计

• 桌面端：完整导航菜单，多列作品展示
• 平板端：调整布局，优化间距
• 手机端：汉堡菜单，单列作品展示

表单功能

• 联系表单包含基本的验证
• 提交后显示确认消息
• 表单数据不会实际发送（演示用途）

浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 11+
• Edge 79+

部署建议

本地部署

1. 将所有文件上传到Web服务器
2. 确保文件路径正确
3. 访问对应的URL即可

GitHub Pages部署

1. 创建GitHub仓库
2. 上传所有文件到仓库
3. 在仓库设置中启用GitHub Pages
4. 选择主分支作为源

自定义域名

1. 在域名服务商处配置DNS
2. 将域名指向服务器IP或GitHub Pages地址
3. 在服务器或GitHub Pages设置中添加自定义域名

扩展建议

添加的功能

1. 作品详情页 - 为每个作品创建单独页面
2. 作品搜索 - 添加搜索功能
3. 作品收藏 - 用户可收藏喜欢的作品
4. 作品下载 - 提供高质量图片下载
5. 作品评论 - 用户可对作品发表评论

技术改进

1. 图片懒加载 - 优化页面加载性能
2. 图片预加载 - 改善用户体验
3. PWA支持 - 添加离线访问功能
4. SEO优化 - 改善搜索引擎排名

注意事项

1. 图片优化：建议使用压缩后的图片以提高加载速度
2. 版权问题：确保使用的图片有合法使用权
3. 隐私保护：不要在网站上公开个人敏感信息
4. 备份：定期备份网站文件和数据库（如有）

联系方式

如需帮助或有问题反馈，请通过以下方式联系：

• 邮箱：photographer@example.com
• 电话：+86 138 0000 0000

许可证

本项目仅供学习和个人使用。如需商业用途，请确保遵守相关法律法规。

---

最后更新：2023年10月

版本：1.0.0