用 Webflow 制作活动网站，可以在同一套页面中练习布局、CMS 和响应式发布：首页介绍活动，讲师列表读取 CMS，每位讲师使用同一套详情页模板。内容更新时新增讲师条目即可，无需反复复制页面。先发布到测试域名，再确认手机排版与报名入口。
1. 准备首页和讲师内容
先写好首页的四个区块：活动名称与一句价值说明、时间地点、讲师介绍、报名入口。练习文案可以使用“周末产品设计工作坊”“面向刚开始做原型的产品与设计同学”，报名按钮先链接到站内的联系区块，不接收真实报名信息。
给两位虚构讲师准备姓名、职位、简介和头像替代文本。两段简介故意使用不同长度，帮助发现卡片对齐与文字溢出问题。准备文件时，将图片压缩到网页实际需要的尺寸，记录文件名和授权来源。
2. 在画布中搭建页面层级
新建站点后，从空白首页或适合的模板开始。先用 Navigator 查看元素树，再按“页面—区块—内容容器—标题/段落/按钮”的顺序组织内容。首屏只保留一个主标题；后续区块使用二级标题。为反复出现的样式取可理解的类名，例如 section、speaker-card、button-primary。
- 给主要内容容器设置合理的最大宽度和左右内边距，让大屏不拉得过宽。
- 用 Grid 或 Flex 布置讲师卡片，先让两张卡片能随内容变化，再调整字体和颜色。
- 为报名入口填写实际目标，检查它跳到站内区块还是另一页面；不要留下仅有视觉效果的空链接。
- 把导航、页脚等重复部分整理为可复用组件，修改一处后检查所有使用位置。
如果已经有 Pixso 设计稿，可把它作为尺寸、字体和状态的参考；在 Webflow 中仍需建立网页结构、链接及响应式规则。
3. 建立讲师 CMS Collection
在 CMS 中新建名为 Speakers 的 Collection，设置姓名、slug、职位、简介、头像等字段，再录入两条练习数据。Collection 是内容类型，Collection item 是一位讲师的数据，Collection page 是这些讲师共同使用的详情页模板。三者不要混淆。
- 在首页放入 Collection list，选择 Speakers 作为数据来源。
- 在列表项内放置图片、姓名和职位，并分别绑定对应字段。
- 进入 Collection page 模板，放入姓名、头像和完整简介；确保这些元素绑定当前讲师的数据。
- 把首页卡片的链接指向当前 Collection item 的详情页。
- 再新增一位讲师，检查是否无需复制静态页面就能显示新内容。
出现空列表时，依次检查数据源、筛选条件、字段绑定和条目的发布状态；首页有卡片但详情页空白时，重点查看模板中的动态字段。CMS 概念与模板关系可参阅 Webflow CMS 官方说明。
4. 检查断点与长内容
先完成桌面基础样式，再切换到平板和手机断点。Webflow 的基础断点样式会向其他断点继承；在较小断点设置的覆盖值会影响更小尺寸，因此手机排版异常时应先检查继承关系，而不是不断叠加样式。具体规则见 断点官方文档。
需要同时比较各尺寸时，点击画布栏中的 Expand canvas，让桌面、平板和手机断点并排显示。选中某一断点后调整样式，观察其他尺寸的变化；点击 Focus canvas 可回到单个断点继续编辑。
- 桌面双列卡片在窄屏改为单列，检查列间距、图片比例和容器宽度。
- 把活动标题加长一倍，确认标题能换行，按钮不被挤出屏幕。
- 检查导航展开、按钮焦点、图片替代文本和文本对比度。
- 在断点之间拖动画布宽度，确认不是只有预设的几个尺寸正常。
5. 先发布到测试域名再验收
打开 Publish，选择站点的 webflow.io 测试域名；如果已绑定正式域名，本轮先取消正式域名的勾选，再发布所选域名。打开发布后的地址重新检查首页、讲师详情和导航。编辑器预览不能替代真实 URL 验收。发布选项见 Webflow 发布说明。
验收记录至少包括：首页 URL、两位讲师详情 URL、桌面与手机检查结果、报名入口目的地、待办问题。正式上线前填写每页独立标题与描述，确认图片可加载、链接无死链，并按网站用途配置索引和域名设置。自定义域名、CMS 数量及团队权限需要结合当前套餐核对。
6. 处理导出和后续维护
上线后再增加一位讲师、修改一段简介，确认内容维护人员能够操作。若计划迁移到自己的服务器，应先验证导出边界：Webflow 的代码导出受 Workspace 套餐约束，静态代码包不包含完整 CMS 数据库与动态功能，不能把下载 ZIP 当成整站迁移完成。参阅 代码导出说明。
设计规范需要多人持续评审时，可在 Pixso 设计文件中记录组件和改版意见，再将确认后的改动落实到网站。
