新增更多頁面
既然您已熟悉如何將頁面新增至網路故事，那麼在我們的「寵物樂趣」故事中新增後續頁面的方式也非常相似。根據以下提供的資訊，請繼續使用您目前學到的知識來建立剩餘的頁面。如果您遇到困難，請查看已完成的 (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> 元素，指定一個佔據 lower-third 的 grid-area，並包含以下文字：狗可能是最早被馴養的動物。牠們陪伴人類已約有 1 萬年之久。有些科學家認為，所有家犬和野犬都與南亞小狼有共同的祖先。 |
|
第 3 頁：鳥
示範如何排列文字、顯示填滿螢幕的圖片，並為頁面提供背景音訊。
- 包含 3 個圖層
- 圖層 1：實作
fill 範本，並包含一個回應式 <amp-img> (bird.jpg，720 x 1280 像素)。 - 圖層 2：實作
vertical 範本，並包含一個元素 - 圖層 3：實作
vertical 範本，並包含一個元素 - 一個
<q> 元素，用於以下引言：鳥有三件事：羽毛、飛行和歌唱，而羽毛是最不重要的。--瑪jorie Allen Seiffert - 第三個圖層指定
class="bottom"，以將子元素對齊到螢幕底部。 - 在顯示頁面時，於背景播放音訊檔。您可以為整個故事或單一頁面在背景播放音訊。若要為頁面播放音訊，請將
background-audio="assets/bird-singing.mp3" 屬性新增至 <amp-story-page> 元素。如果您的音訊包含旁白或重要的音訊資訊，請確保也以文字傳達相同的資訊，以方便可能無法聽到聲音或關閉聲音的使用者。 |
|
第 4 頁：兔子
示範如何排列文字，並為頁面顯示填滿螢幕的影片。
- 包含 3 個圖層
- 圖層 1：實作
fill 範本，並包含一個回應式 <amp-video> (rabbit.mp4)。 - 請記住在您的
<head> 區段中為 <amp-video> 元件新增必要的指令碼，以便顯示影片。 - 指定海報圖片 (
rabbit.jpg)。有效 AMP 故事必須具備此屬性。 - 使用
autoplay 屬性將影片設定為自動播放。有效 AMP 故事必須具備此屬性。 - 使用
loop 屬性將影片設定為自動循環播放。 - 將尺寸設定為
width="720"、height="1280" 和 layout="responsive"。 - 圖層 2：實作
vertical 範本，並包含一個元素 - 圖層 3：實作
vertical 範本，並包含一個元素 - 一個
<p> 元素，包含以下文字：兔子可以學會聽從簡單的語音指令，並在被叫到名字時前來，而且牠們好奇又愛玩。 - 將
bottom CSS 類別套用至圖層，以將子元素對齊到螢幕底部。 |
|
我們的「寵物樂趣」故事即將完成。我們將在最後一頁中使用動畫，將所有寵物聚集在一起。