新增更多頁面
既然您已熟悉如何在 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> 元素，指定佔據 lower-third 的 grid-area，並包含下列文字：狗可能是最早被馴養的動物。牠們陪伴人類約一萬年之久。有些科學家認為，所有家犬和野犬的共同祖先都是南亞小狼。 |
|
第 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 類別套用到圖層，將子元素對齊到螢幕底部。 |
|
我們的「寵物樂趣」故事即將完成。我們將在最後一頁使用動畫，讓所有寵物齊聚一堂。