新增更多頁面
既然您已熟悉如何將頁面新增至 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 的 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 類別套用至圖層，將子元素對齊到螢幕底部。 |
|
我們的「寵物樂趣」故事即將完成。我們將在最後一頁使用動畫，讓所有寵物齊聚一堂。