页面结构与区块分工

课程案例与前端范围

在这门课程中，我们将以一个真实的作品整理工具（帮独立创作者把散落的项目整理成作品页）为连续案例，从零搭建一个产品官网。

我们在浏览器里能够看到、能够点击的所有元素，包括标题、正文、按钮、图片、导航栏以及点击后的即时提示，统称为前端↗。这门课涉及的页面制作全部属于前端范围。

产品官网的第一版通常是一个最小可行产品↗（MVP）。制作 MVP 官网时，重点是用最少的内容把产品能解决的问题说明清楚，暂时不涉及复杂的后台开发。

那些不直接呈现在界面上的部分，比如数据保存在哪台数据库服务器、怎样自动发送确认邮件、账号权限如何加密验证，统称为后端。如果我们暂时没有后端接口，页面上的「加入候补名单」按钮可以先只展示一个「已收到」的提示状态。明确前端与后端的边界，我们在向 AI 描述需求时，就不会把界面的排版交互与底层的数据存储混在一起。

页面区块的职责分工

一个结构清晰的官网，是由不同职责的独立区块组合而成的。在网页开发中，我们把这些可复用、具有明确职责的独立模块称为组件↗。能够准确叫出每个区块的标准名称与分工，我们就能指引 AI Agent 单独修改某一块，而不影响其他已经调好的内容。

在实际制作中，页头和导航栏经常被混淆：

• 页头负责展示产品的品牌名称与 Logo，确认产品身份；
• 导航栏负责提供各个关键区块的跳转入口，指引页面位置。

如果只对 AI 说「把顶部改一下」，AI 往往把整个页头、导航和首屏一起重写；如果我们说「把页头的 Logo 调小一点，导航栏的文字间距拉开一些」，AI 就能准确定位修改范围。

• 页头：展示产品名称与品牌标识，确认产品身份。
• 导航栏：放置功能、示例、常见问题等快捷跳转链接。
• 首屏：说明产品定位与核心价值，配一个主要操作按钮。
• 内容区：介绍产品解决的问题、主要功能与具体示例。
• 页面底栏：放置版权声明、友情链接或联系方式。

单页滚动的结构顺序

对于轻量产品，常见且高效的官网结构是单页滚动布局↗。访客不需要在多个子页面之间来回跳转，顺着页面从上往下浏览，就能了解整个产品。

单页官网各个区块的排列，按照访客了解产品的自然顺序展开：

• 先在首屏看清产品是什么、适合谁使用；
• 再往下查看具体功能和实际界面展示；
• 接着查看用户评价、价格方案与常见问题；
• 最后在底栏找到补充说明与联系方式。

每个区块负责回答一个具体问题，前一个问题交代清楚后，再展开下一个。

• 对 AI 这样说：“帮我搭建一个单页滚动的官网骨架，从上到下依次是：页头与导航、首屏 Hero、三项核心能力展示卡片、真实证据与 FAQ、页面底栏。首屏只放一个主要操作按钮。”