在本教程结束时，您将获得一页服务草稿，其中包含清晰的顺序、可用的图像、合理的联系路径以及可以实际测试的清单。您可以在现有的网站构建器中组装它，或使用本指南提供的可编辑的 HTML 起始模板。
我们将使用虚构的厨房组织服务。它的名称、产品和插图都是练习材料，而不是真实的客户故事。在发布之前，用有关您自己工作的事实替换每个示例。
您需要一个文本编辑器或注释文档、您的网站构建器或起始文件以及一个浏览器。一张经过批准的照片就足以开始。如果您没有，请使用带有标签的插图进行练习，而不是假装它展示了您的作品。
1. 用一句话写出页面的工作
使用这个形状：
“此页面有助于[人]了解[具体报价]和[下一步]。”
我们的例子：
“此页面可以帮助房主了解厨房组织访问并询问它是否适合他们的空间。”
在构建时将这句话放在页面旁边。对于此练习，请忽略不相关的服务。您可以稍后在其他地方链接到它们。
选择您可以真正支持的下一步。查询与确认预订不同。我们将使用“询问厨房重置”，因为可用性和范围仍然需要对话。
2.在装饰之前写下六个部分
打开文档并按此顺序添加这些标题。用您自己的话填写它们，或者使用下面的虚构副本来练习组装页面。
第 1 部分：报价
标题：“让您的厨房更易于使用。”
说明：“一次有针对性的组织访问，帮助您对日常厨房用品进行分类，并为您使用的物品选择实用的位置。”
按钮：“询问厨房重置事宜。”
按钮旁边的简短期望：“从一个问题开始。预约细节另行商定。”
标题应该说一些具体的东西。如果你的描述可以同样好地描述健身教练、簿记员和家具店，请说得更具体。
第 2 部分：包含哪些内容
标题：“我们共同致力于什么。”
三颗子弹：
- 找出最令人沮丧的厨房区域。
- 对商定的项目进行排序并决定哪些属于一起。
- 将日常物品放置在适合您使用房间的方式的地方。
边界：“此示例涵盖组织服务，而不是清洁、维修或处置服务。”
将列表和边界替换为您的真实范围。不要因为示例中包含服务而承诺某项服务。
第 3 部分：访问者可以评估的内容
标题：“解释该方法的简单方法。”
使用一张经过批准的图像并附上有用的标题。在练习页面中，带有标签的架子插图显示了三组：日常使用、偶尔使用和一起复习。它解释了这个想法，但没有假装是一个已完成的项目。
如果您有真实的项目照片，请解释可见的内容以及您实际执行的工作。如果您没有经过许可的示例，请显示您的流程。不要编造推荐或前后结果来填补空白。
第 4 部分：接下来会发生什么
标题：“从问题到计划。”
三个步骤：
- 描述空间和您想要的帮助类型。
- 讨论范围、地点、时间安排和成本。
- 在预订之前确认约定的访问。
您的实际步骤可能会有所不同。让它们足够短，以便第一次访问者能够跟上。
第五部分：实际问题
从三个问题开始：哪里可以买到？什么影响成本？我需要先买什么东西吗？
根据您的实际安排回答他们。在示例页面中，这些被明显标记为要完成的项目，因为虚构的位置或虚构的价格会使模板不太可信。
对于夏威夷企业来说，位置答案可能需要区分岛屿、实际旅行区域和远程工作。对于亚特兰大地区的服务，可能需要现实的旅行边界或接送安排。写入更改某人是否可以使用该服务的信息。
第 6 部分：接触步骤
从开口处重复相同的下一步动作。说明哪些信息有用以及该人将如何与您联系。
对于本练习，从允许您发布的受监控的企业电子邮件地址开始。您可以稍后添加正确配置的表单。不要仅仅因为您的构建器提供上传字段而收集文档或敏感信息。
3.先组装一根立柱
在您的构建器中，创建一个未发布的页面，其中这六个部分按相同的顺序排列。使用其当前文档来定位部分、标题级别、图像设置和预览控件；它们的名称因产品和版本而异。
如果您使用提供的起始模板，请将 landing-page-starter.html 和资产文件夹放在一起。在浏览器中打开 HTML 文件进行预览。在纯文本编辑器中打开同一文件以更改内容标记之间的示例文本，保存并刷新浏览器。不需要软件包安装、帐户或构建命令。
从较窄的宽度开始。对于本示例，使用以下设计选择：
- 一列，内容与每边之间有 20 像素的空间。
- 正文文本大约 18 像素，行高为 1.55。
- 自然换行而不是被迫占一行的标题。
- 主要部分之间大约有 40–64 像素。
- 一个坚实的、高对比度的按钮，至少 44 像素高，有足够的空间容纳标签。
- 段落周围没有固定高度的框。
这些是此布局的起始值，而不是通用标准或可访问性认证。如果内容感觉拥挤，请在缩小文本之前调整间距。
使用一个主页标题和以下部分的描述性标题。选择结构的标题级别，然后设置它们的样式。 W3C的 标题教程 解释了为什么该组织对于导航（包括辅助技术）很重要。
4. 准备一张可以在小屏幕上显示的图像
对于练习图像，请使用随附的 1600 × 1000 SVG 插图。它无需大照片即可缩放。对于您自己的照片，请从您有权使用的原件开始，并制作单独的网络副本。保留原件。
此示例的实际首次导出为 1600 × 1000 像素，比例为 1.6:1。这适合宽度约为 800 像素、像素密度是其两倍的图像区域。这是一个起始计算，而不是每个网站所需的大小。
刻意裁剪。让重要拍摄对象远离边缘，然后以手机宽度预览图像。不要将肖像拉伸成宽矩形。选择不同的裁剪或让图像保持其形状。
对于照片，如果您的构建器支持，请导出压缩的 WebP 或 JPEG。按照读者将看到的尺寸将输出与原始文件进行比较。此单个图像大约 150-300 KB 的工作预算是一个有用的起始目标，而不是通过/失败规则。细节和质量需求各不相同。如果文件有几兆字节，请尝试更小的尺寸和更强的压缩，然后再次检查它。
设置图像以适应可用宽度，同时保留其比例。在 HTML 中，起始模板使用最大宽度 100%、自动高度以及显式宽度和高度属性。这些尺寸有助于浏览器预留空间。谷歌的 响应式图像指南 解释了这种行为以及拟合和裁剪图像之间的区别。
为图像所传达的内容写下替代文本。对于所提供的插图：“练习货架布局将物品分为日常使用、偶尔使用和一起回顾的组。”附近的标题清楚地表明这是一个插图。不要将服务名称、价格或按钮隐藏在图像中。
5. 在添加更多功能之前先使联系步骤发挥作用
起始模板的按钮移至联系部分。他们不发送消息或创建约会。联系方式部分特意包含一个可见的 [您的企业电子邮件] 占位符，这样您就不会将其误认为是工作企业地址。
将该占位符替换为您的受监控地址。对于可点击的电子邮件链接，请在可见文本和链接的邮件目标中使用相同的地址。保持地址可读，以便其他人在其设备未配置电子邮件应用程序时可以复制该地址。
如果您改用表单，请使用该提供商的当前说明配置其收件人和任何所需的传递设置。为每个字段提供可见的标签，解释错误，并显示清晰的完成消息。然后使用您自己的信息发送一份经过授权、贴有标签的测试，并验证其是否到达预期的收件箱。页面上写着“谢谢”并不能证明已送达。
当目的地仍未知时，不要将明显有效的表单放在页面上。 W3C的 表格指导 是标签、必填字段和反馈的有用参考。
6.让宽版从窄版发展起来
现在增加预览宽度。桌面版本可以将部分文本放在其插图旁边，并并排显示三个流程步骤。当这些区域再次堆叠时，保持阅读顺序合乎逻辑。
在起始模板中，一个 CSS 媒体查询引入了 48rem 的更宽布局，大约 768 像素，通常为 16 像素基本尺寸。该断点适合本示例的内容。如果较长的标题或导航需要更多空间，请更改内容需要的布局，而不是针对一种手机型号。
起始模板包括设备宽度视口设置并使用流体宽度。 MDN 的 响应式设计指南 解释了视口、灵活布局和媒体查询的作用。
7. 运行此通过/失败检查
在浏览器中打开实际预览，而不仅仅是编辑器画布。将每项检查标记为“通过”、“修复”或“不适用”。
- 含义：隐藏图片。您还能确定服务、受众和下一步吗？
- 窄屏：在 320 和 390 CSS 像素宽时，您可以在不横向滚动的情况下阅读普通页面内容吗？按钮标签和长联系方式是否可以换行？
- 缩放：增加浏览器缩放。在 1280 像素宽的视口中，检查 400% 缩放作为回流练习。对于这种简单的布局，基本文本和控件应保持可用，无需双向滚动。 W3C的 回流焊指导 解释了 320-CSS-像素关系和异常。
- 键盘：使用Tab、Shift+Tab和Enter。您能看到重点控制并跟踪每个链接吗？跳过链接是否到达主要内容？
- 图像：确认图像加载，裁剪保留主题，标题准确，替代文本传达有用的信息。
- 接触：确认按钮到达正确位置。如果使用表格，请验证收到测试。如果使用电子邮件链接，请验证目的地，而不要发送意外消息。
- 事实：在页面和来源中搜索括号、“虚构”、“实践”和“示例”。更换或有意保留每个培训标签。请勿公布发明的范围、地点、价格或证据。
- 电话：尽可能在真实电话上检查页面。以正常尺寸和放大尺寸阅读；尝试下一步。
这是有用的首次审查，而不是完整的可访问性、安全性或启动审核。写下任何失败的检查以及您期望的结果。修复这些项目并重复相关测试。
你现在应该拥有什么
您应该有一份完整的私人草稿：精心排序的六个部分、合适的图像、经过测试或明确标记为未完成的联系路径以及记录的测试结果。
在进行进一步更改之前保存副本。如果仍然需要修复，清单会告诉您需要做什么。您无需添加动画、新闻通讯或另外五个页面即可使此练习变得有价值。