Brivon 是一套面向商业摄影工作室的多页网站模板，适合展示时装企划、产品静物、建筑空间和编辑摄影作品。它用黑色背景、荧光绿点缀和大幅照片组织页面，包含首页、作品、工作室、服务与联系五个 HTML 页面，便于把作品展示和项目询盘放进同一个站点。
这套设计对照片的要求比较高。首页让一张人像占据首屏右侧，再以大小不一的作品网格向下展开。手里已有一组画面风格相近、适合裁切的商业作品时，更容易延续这种视觉效果。
五页怎样串起业务
导航把作品、团队、服务和询盘分开，读者可以先看拍摄风格，再了解工作方式与合作条件。
| 页面 | 主要内容 | 改站时的重点 |
|---|---|---|
首页 index.html | 大标题与人像、7 张精选作品、能力介绍、流程和动态卡片 | 精简开场文案，用代表项目建立第一印象 |
作品 work.html | 12 张作品卡片、案例叙述、12 条归档记录 | 配齐图片、项目名称与拍摄类别 |
工作室 studio.html | 成立故事、工作原则、两处空间和 8 位团队成员 | 换成真实人员、空间与业务经历 |
服务 services.html | 3 档服务卡、8 步流程和 6 条常见问题 | 按交付范围重写服务与合作条件 |
联系 contact.html | 三类联系渠道、项目询盘表单、位置与资料卡片 | 配置有效收件方式，清理示例地址与资料入口 |
首页底部还有动态卡片，但包内没有配套的文章详情页或内容管理后台。作品页中的案例说明也直接排在当前页面内，不能把这五页理解为已包含完整案例库和博客系统。
黑底与照片如何搭配
配色以深炭黑 #0A0A0C、纸白 #F4F4F0 和荧光绿 #D4FF3D 为主。绿色集中出现在强调文字、标签与行动按钮上；中间穿插浅底章节，让长页面有明暗变化。正文和图片之间留白较多，适合展示需要观看细节的作品。
作品网格采用 CSS Grid，以不同宽度组合图片。多数卡片使用 4:5 比例，大卡片另有 16:11 和 4:3，图片通过 object-fit: cover 填满区域。更换照片时要逐张检查人物面部、建筑边缘和产品主体，重要信息靠近边缘的原图可能会被裁掉。
标题使用 Boldonse，正文使用 Inter Tight，编号和图注使用 Geist Mono，字体由 Google Fonts 加载。改成中文时需要另选合适的中文字体，并重新检查字号、行距和手动换行；直接照搬英文标题里的 <br>，很容易把中文切成不自然的短句。
响应式样式在 1100px 和 720px 两个断点调整布局：宽屏保留左右分栏和混排网格，窄屏逐步改为单列，顶部导航收起为抽屉菜单。换图和改字后，首屏标题与纵向照片仍应一起检查。
图库和询盘的实际边界
包内 JavaScript 负责移动菜单、内容进入视口时的渐显，以及滚动后的页眉阴影。图库页面看起来有筛选与翻页入口，但对应业务逻辑尚未实现。
- 分类与分页：7 个分类按钮、上一页和下一页按钮没有筛选或分页事件；页面上的数量与页码都是示例文字。
- 作品详情：作品卡片和“阅读完整案例”等入口使用占位链接，没有独立详情页或图片灯箱。正式使用时可以补页面，也可以去掉这些入口。
- 询盘表单：有姓名、品牌、邮箱、职务、服务档位、日期、地点、项目说明和参考链接共 9 项。原始提交逻辑只阻止默认提交并把按钮改成感谢文字，没有发送邮件、保存数据或上传文件。
- 服务报价：三档金额、预约周期和交付承诺均为演示内容，需要按实际业务重写；页面没有在线付款或日历预订流程。
如果只需要一个摄影工作室展示站，保留页面结构、补上真实联系方式就能继续整理；若要在线收集项目需求，还需要接入表单服务或服务端收件程序，并验证成功与失败反馈。
从哪些文件开始改
Brivon 使用 HTML、CSS 和原生 JavaScript，没有 Bootstrap，也不依赖 Node.js 构建。保留五个 HTML 文件与 assets/ 的目录关系，即可放到静态托管或普通网站空间；外部字体仍需要网络访问。
建议先替换 assets/img/ 中的项目、团队和空间照片，再修改各页文案。工作室成立时间、客户数量、奖项、刊物名称和示例人物资料都应逐项核对，不能跟着版式一起当作真实业务信息保留下来。
统一配色、字体和间距从 assets/css/styles.css 顶部的 :root 变量调整；菜单和渐显逻辑位于 assets/js/site.js。五页各自保存页眉与页脚，改品牌名称、导航或联系信息时要同步修改，避免首页正确而内页仍留着旧内容。
最后检查作品入口、动态卡片、资料下载、隐私与法律信息等占位内容，补齐目标或移除无用按钮，再处理询盘收件。
暂无评论内容