設定

先決條件

開始本教學課程前，您需要準備以下項目

HTML、CSS 和 JavaScript 的基本知識
對 AMP 核心概念的基本瞭解 (請參閱「將 HTML 轉換為 AMP」教學課程)
您選擇的瀏覽器
您選擇的文字編輯器

設定您的開發環境

步驟 1：下載程式碼

下載本教學課程的程式碼，程式碼壓縮為 zip 檔案，網址如下：/static/files/tutorials/amp-pets-story.zip
解壓縮 zip 檔案的內容。「amp-pets-story」目錄中包含我們將用來建立故事的圖片、影片、音訊和資料檔案。「pets.html」檔案是我們故事的起點。故事的完整版本可在 pets-completed.html 檔案中找到。

步驟 2：執行範例頁面

為了測試我們的範例 Web Story，我們需要從網路伺服器存取這些檔案。有多種方法可以建立暫時的本機網路伺服器以進行測試。以下是一些選項，請選擇最適合您的方法

設定好本機網路伺服器後，請存取以下網址，看看本教學課程結束時完成的 Web Story 會是什麼樣子

https://127.0.0.1:8000/pets-completed.html

重要事項 – 請務必從 localhost 提供網址，否則 Web Story 可能無法正確載入，而且您可能會遇到類似 "source" "must start with "https://" or "//" or be relative and served from either https or from localhost. 的錯誤訊息。

點閱完成的故事，瞭解我們將建立的內容。

作者： @bpaduch