設定
先決條件
在開始本教學課程之前,您需要具備下列條件
- 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 的外觀,方法是存取下列 URL
https://127.0.0.1:8000/pets-completed.html
重要事項 – 請確認 URL 是從
localhost
提供服務,否則 Web Story 可能無法正確載入,而且您可能會遇到類似 "source" "must start with "https://" or "//" or be relative and served from either https or from localhost.
的錯誤。點擊瀏覽完成的故事,並了解我們將建立的內容。
-
作者: @bpaduch