Подготовка
Предварительные требования
Чтобы завершить этот урок, вам понадобятся:
- Базовые знания HTML, CSS и JavaScript
- Базовое понимание основных концепций AMP (см. урок Преобразование HTML в AMP)
- Браузер (на ваш выбор)
- Текстовый редактор (на ваш выбор)
Подготовка среды разработки
Шаг 1. Скачайте код
-
Скачайте код для данного урока, упакованный в виде zip-файла, со следующего URL-адреса: /static/files/tutorials/amp-pets-story.zip
-
Распакуйте содержимое zip-файла. В каталоге amp-pets-story находятся изображения, видео, аудио и файлы данных, которые мы будем использовать для создания нашей истории. Файл pets.html — это стартовая точка нашей истории. Полную версию истории можно найти в файле pets-completed.html.
Шаг 2. Запустите страницу-пример
Чтобы протестировать историю-пример, ее файлы необходимо открывать с веб-сервера. Существует несколько способов создать временный локальный веб-сервер для тестирования. Вот несколько вариантов; выберите тот, который вам лучше всего подходит:
После настройки локального веб-сервера посмотрите, как наша завершенная веб-история будет выглядеть в конце этого урока, перейдя по следующему URL-адресу:
http://localhost:8000/pets-completed.html
localhost
; в противном случае веб-история может загружаться неправильно, и вы можете столкнуться с ошибками, например с такими, как: "source" "must start with "https://" or "//" or be relative and served from either https or from localhost.
Просмотрите готовую историю, чтобы получить представление о том, что мы будем создавать.
-
Written by @bpaduch