新增更多頁面
您現在已熟悉如何將頁面新增至 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> 元素，包含以下引言：鳥有三樣東西：羽毛、飛行和歌唱，而羽毛是最不重要的。—瑪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 元件新增必要指令碼，讓影片能夠顯示。 - 指定
poster 圖片 (rabbit.jpg 檔案)。此屬性是有效的 AMP 故事必要屬性。 - 使用
autoplay 屬性將影片設定為自動播放。此屬性是有效的 AMP 故事必要屬性。 - 使用
loop 屬性將影片設定為自動循環播放。 - 將尺寸設定為
width="720" height="1280" 和 layout="responsive"。 - 圖層 2 實作
vertical 範本，並包含一個元素 - 圖層 3：實作
vertical 範本，並包含一個元素 - 一個
<p> 元素，包含以下文字：兔子可以學會聽從簡單的語音指令，並在被叫到名字時靠近，而且牠們充滿好奇心且愛玩。 - 將
bottom CSS 類別套用至圖層，將子元素對齊螢幕底部。 |
|
我們的「寵物樂趣」故事即將完成。我們將在最後一頁使用動畫，讓所有寵物齊聚一堂。