添加更多页面
既然您已经熟悉了如何向 Web Story 添加页面，那么在我们的“宠物之乐”故事中添加后续页面也非常相似。根据下面提供的信息，使用您目前所学的知识，继续创建剩余的页面。如果您遇到困难，请查看已完成的 (pets-completed.html) 代码。
提示 – 请记住，每个页面都需要一个唯一的“id”属性（例如，id="page1"）。
第 1 页：猫
演示如何在单个层中显示图像和文本。
- 包含 1 个层
- 实现
vertical 模板。 - 包含 3 个元素
- 一个
<h1> 元素，标题为：猫 - 一个响应式
amp-img（cat.jpg，720 x 1280 像素） - 一个
<q> 元素，用于以下引言：狗在被呼唤时会过来。猫会接收信息，然后回复你。--玛丽·布莱 |
|
第 2 页：狗
演示如何排列文本，并通过两个图层显示屏幕填充图像。
- 包含 2 个层
- 第 1 层：实现
fill 模板，并包含一个响应式 amp-img（dog.jpg，720 x 1280 像素）。 - 第 2 层：实现
thirds 模板，并包含 2 个元素 - 一个
<h1> 元素，标题为：狗 - 一个
<p> 元素，该元素指定一个 grid-area，该 grid-area 占据 lower-third 并包含以下文本：狗可能是最早被驯服的动物。它们陪伴人类大约有 10,000 年了。一些科学家断言，所有的狗，包括家养的和野生的，都源自于南亚小狼。 |
|
第 3 页：鸟
演示如何排列文本、显示屏幕填充图像，并为页面提供背景音频。
- 包含 3 个层
- 第 1 层：实现
fill 模板，并包含一个响应式 amp-img（bird.jpg，720 x 1280 像素）。 - 第 2 层：实现
vertical 模板，并包含一个元素 - 第 3 层：实现
vertical 模板，并包含一个元素 - 一个
<q> 元素，用于以下引言：鸟有三样东西：羽毛、飞行和歌声，而羽毛是最不重要的。--玛乔丽·艾伦·西弗特 - 第三层指定
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 故事，此属性是必需的。 - 通过
autoplay 属性将视频设置为自动播放。对于有效的 AMP 故事，此属性是必需的。 - 使用
loop 属性将视频设置为自动循环播放。 - 将尺寸设置为
width="720" height="1280" 和 layout="responsive"。 - 第 2 层：实现
vertical 模板，并包含一个元素 - 第 3 层：实现
vertical 模板，并包含一个元素 - 一个
<p> 元素，其中包含以下文本：兔子可以学会听懂简单的语音命令，并且在被叫到名字时过来，而且它们好奇又好玩。 - 将
bottom CSS 类应用于该层，以使子元素与屏幕底部对齐。 |
|
我们的“宠物之乐”故事即将完成。我们将在最后一页中使用动画，将所有宠物聚集在一起。