添加更多页面
既然您已经熟悉了如何向 Web Story 添加页面，那么在我们“宠物之乐”故事中添加下一页也非常相似。根据下面提供的信息，继续使用您目前所学的知识创建剩余的页面。如果您遇到困难，请查看已完成的 (pets-completed.html) 代码。
提示 – 请记住，每个页面都需要一个唯一的“id”属性（例如，id="page1"）。
第 1 页：猫
演示如何在单层中显示图像和文本。
- 包含 1 层
- 实现
vertical 模板。 - 包含 3 个元素
- 一个带有标题的
<h1> 元素：猫 - 一个响应式
amp-img（cat.jpg，720 x 1280px） - 一个用于以下引用的
<q> 元素：狗在被叫时会过来。猫会接收消息并回复你。 --Mary Bly |
|
第 2 页：狗
演示如何排列文本并使用两层显示屏幕填充图像。
- 包含 2 层
- 第 1 层：实现
fill 模板，并包含一个响应式 amp-img（dog.jpg，720 x 1280px）。 - 第 2 层：实现
thirds 模板，并包含 2 个元素 - 一个带有标题的
<h1> 元素：狗 - 一个
<p> 元素，它指定一个占用 lower-third 的 grid-area，并包含以下文本：狗可能是最早的驯养动物。它们已经陪伴人类大约 10,000 年了。一些科学家断言，所有的狗，家养和野生，都有一个共同的祖先，即南亚小狼。 |
|
第 3 页：鸟
演示如何排列文本，显示屏幕填充图像，并为页面提供背景音频。
- 包含 3 层
- 第 1 层：实现
fill 模板，并包含一个响应式 amp-img（bird.jpg，720 x 1280px）。 - 第 2 层：实现
vertical 模板，并包含一个元素 - 第 3 层：实现
vertical 模板，并包含一个元素 - 一个用于以下引用的
<q> 元素：一只鸟有三样东西：羽毛、飞行和歌声，而羽毛是其中最不重要的。--Marjorie Allen Seiffert - 第三层指定
class="bottom" 以将子元素对齐到屏幕底部。 - 在显示页面时在后台播放音频文件。您可以在整个故事或单个页面中在后台播放音频。要为页面播放音频，请将
background-audio="assets/bird-singing.mp3" 属性添加到 <amp-story-page> 元素。如果您的音频包含旁白或重要的音频信息，请确保也以文本形式传达相同的信息，以供可能听不到或关闭声音的用户使用。 |
|
第 4 页：兔子
演示如何排列文本并为页面显示屏幕填充视频。
- 包含 3 层
- 第 1 层：实现
fill 模板，并包含一个响应式 amp-video（rabbit.mp4）。 - 请记住在您的
<head> 部分中为 amp-video 组件添加必需的脚本，以便视频显示。 - 指定
poster 图像（rabbit.jpg）。此属性对于有效的 AMP Story 是必需的。 - 使用
autoplay 属性将视频设置为自动播放。此属性对于有效的 AMP Story 是必需的。 - 使用
loop 属性将视频设置为自动循环播放。 - 将尺寸设置为
width="720" height="1280" 和 layout="responsive"。 - 第 2 层：实现
vertical 模板，并包含一个元素 - 第 3 层：实现
vertical 模板，并包含一个元素 - 一个
<p> 元素，其中包含以下文本：兔子可以学会遵循简单的语音命令，并在被叫到名字时过来，它们好奇且爱玩。 - 将
bottom CSS 类应用于该层，以将子元素对齐到屏幕底部。 |
|
我们的“宠物之乐”故事即将完成。我们将在最后一页使用动画将所有宠物聚集在一起。