创意机构网站模板：5 页响应式 HTML 作品集与询盘页面 – Axioma

Axioma 是一套面向创意机构、独立设计工作室、品牌顾问与自由创意团队的五页响应式 HTML 网站模板。它把案例展示、服务说明、团队介绍和项目询盘放在同一套静态前端中，适合先搭出品牌展示站，再根据实际业务替换文字、图片和联系方式。

这不是带后台和数据库的内容管理系统。资源包采用原生 HTML、CSS 与 JavaScript，不依赖 Bootstrap、React 或 npm 构建流程；解压后可以直接打开 index.html 预览，正式上线时再部署到普通虚拟主机、对象存储或静态网站托管环境。

五个页面如何分工

这样的结构适合需要同时展示作品证据、服务范围和团队背景的服务型业务：首页负责建立第一印象，作品页承载案例，服务页解释交付范围，工作室页补充团队信息，联系页则把访客引导到更具体的项目沟通。

固定导航、配色和字体如何修改

桌面端采用左侧固定品牌与导航栏、右侧滚动内容面板的布局；视口宽度不超过 768px 时，左侧栏会折叠为顶部栏，并通过覆盖式菜单提供移动端导航。配色以纸张白 #F5F4F0 和墨黑 #0E0E0E 为主，用荧光青柠色 #C8FF3D 强调按钮与行动区域。

标题使用 Bricolage Grotesque，正文和标签使用 Geist、Geist Mono，字体由 Google Fonts 加载。颜色、字体、间距、导航宽度和动效参数集中在 assets/css/styles.css 顶部的 CSS 自定义属性中，适合先调整设计令牌，再逐页替换业务文案。如果部署环境不能稳定访问 Google Fonts，应改用本地字体栈或自行托管字体。

图片和示例内容需要自行替换

资源包中的 SVG 是带标签的占位图，不是可直接用于商业项目的摄影素材。README 为作品卡片建议 1200×900 的 4:3 图片，为团队肖像建议 600×750 的 4:5 图片，为工作室图片建议 800×1000 的 4:5 图片。替换时还要同步检查文件路径和 alt 文本，避免把模板里的示例人物、客户或地址直接带入正式站点。

现有脚本能完成哪些交互

• 滚动显现：使用 IntersectionObserver 为进入视口的元素添加状态类，动画主要改变透明度和位移。
• 移动导航：控制覆盖式菜单的打开、关闭、焦点状态和页面滚动。
• 作品筛选：读取案例卡片的 data-tags 属性，在浏览器中切换项目的显示状态，不依赖第三方筛选库。
• 减少动态效果：检测 prefers-reduced-motion，在访客启用系统级减少动态效果时跳过滚动动画。

这些功能属于浏览器端展示逻辑，不等同于 CMS、数据库或服务端检索。作品筛选只能隐藏和显示现有卡片；如果需要由非技术人员持续增加案例、管理多语言内容或接入权限系统，应考虑接入 WordPress、静态站点生成器或自有 CMS。

联系表单上线前必须补齐后端

联系页已经提供姓名、邮箱、公司、角色、项目类型、预算、计划启动时间、获知渠道和留言等字段，但资源包本身只有静态前端文件，没有邮件发送接口、数据库或表单服务。因此本地看到表单并不代表已经能够收件。

上线前至少要选择一种实际提交路径，例如 Formspree、Netlify Forms、Cloudflare Workers、WordPress 接口或自建后端，并补充提交成功与失败反馈、隐私说明、输入校验和反垃圾措施。接入后应分别测试正常提交、必填项错误、重复提交和移动端操作，不要把演示地址直接当成生产收件系统。

建议按这个顺序完成二次修改

1. 解压后打开 index.html，确认 HTML、CSS、JavaScript 和字体加载路径正常。
2. 在五个 HTML 文件中统一替换 Axioma 品牌名、标语、邮箱、电话、地址、团队和客户信息。
3. 先修改 assets/css/styles.css 中的颜色、字体和间距变量，再逐页调整布局。
4. 按照 README 的尺寸建议替换作品、团队和工作室占位图，并检查图片路径与 ALT。
5. 为联系表单接入可用的提交接口，实际测试成功、失败、重复提交和隐私提示。
6. 在 320、768、1024、1440 和 1920 像素等宽度下检查导航、长标题、作品筛选、表单和键盘操作，再部署到正式环境。