AMP

Добавление новых страниц

Процедура добавления следующих страниц в нашу историю «Домашние питомцы» довольно схожа с уже знакомым вам процессом добавления страницы в веб-историю. Используя уже имеющиеся у вас знания и информацию, представленную ниже, создайте оставшиеся страницы. Если вы зашли в тупик, вы можете свериться с завершенным кодом (pets-completed.html).

СОВЕТ. Помните, что каждой странице нужен уникальный атрибут «id» (например, id="page1").

Страница 1. Кошки

Демонстрирует, как отобразить изображение и текст на одном слое.

  • Содержит 1 слой:
    • Реализует шаблон vertical.
    • Содержит 3 элемента:
      • Элемент

        с заголовком Cats

      • Адаптивный элемент amp-img (cat.jpg, 720 x 1280px)
      • Элемент со следующим текстом: Dogs come when they're called. Cats take a message and get back to you. --Mary Bly

Страница 2. Собаки

Демонстрирует, как расположить текст и отобразить изображение, заполняющее экран, используя два слоя.

  • Состоит из двух слоев:
    • Слой 1: реализует шаблон fill и содержит адаптивный элемент amp-img(dog.jpg, 720 x 1280px).
    • Слой 2: реализует шаблон thirds и содержит 2 элемента:
      • Элемент

        с заголовком: Dogs

      • Элемент

        , указывающий grid-area, занимающий lower-third (нижнюю треть экрана) и содержит следующий текст: Dogs were probably the first tame animals. They have accompanied humans for some 10,000 years. Some scientists assert that all dogs, domestic and wild, share a common ancestor in the small South Asian wolf.

Страница 3. Птицы

Демонстрирует, как расположить текст, добавить изображение, заполняющее экран, а также обеспечить фоновое звуковое сопровождение страницы.

  • Содержит 3 слоя:
    • Слой 1: реализует шаблон fill и содержит адаптивный элемент amp-img (bird.jpg, 720 x 1280px).
    • Слой 2: реализует шаблон vertical и содержит один элемент:
      • Элемент

        с заголовком Birds

    • Слой 3: реализует шаблон vertical и содержит один элемент:
      • Элемент для следующей информации: A bird is three things: Feathers, flight and song, And feathers are the least of these.--Marjorie Allen Seiffert
      • Третий слой использует свойство class="bottom" для выравнивания дочерних элементов по низу экрана.
  • Воспроизводит аудиофайл в фоновом режиме, пока страница продолжает отображаться. Воспроизводить фоновое аудио можно как во всей истории, так и на одной странице. Чтобы воспроизводить аудио только на странице, добавьте в элемент <amp-story-page> атрибут background-audio="assets/bird-singing.mp3".

Страница 4. Кролики

Демонстрирует, как расположить текст и отобразить заполняющее экран видео.

  • Содержит 3 слоя:
    • Слой 1: реализует шаблон fill и содержит адаптивный элемент amp-video (rabbit.mp4).
      • Не забывайте о размещении обязательного скрипта для компонента amp-video в своем разделе , чтобы видео отображалось.
      • Укажите изображение poster (rabbit.jpg). Этот атрибут является обязательным для корректно сформированных AMP-историй.
      • Чтобы видео воспроизводилось автоматически, установите атрибут autoplay. Этот атрибут является обязательным для корректно сформированных AMP-историй.
      • Чтобы видео воспроизводилось циклически, установите атрибут loop.
      • Установите размер: width="720" height="1280" и макет: layout="responsive".
    • Слой 2: реализует шаблон vertical и содержит один элемент:
      • Элемент

        с заголовком: Rabbits

    • Слой 3: реализует шаблон vertical и содержит один элемент:
      • Элемент

        , который содержит следующий текст: Rabbits can learn to follow simple voice commands and come when called by name, and are curious and playful.

      • Примените к слою CSS-класс bottom, чтобы корректно выровнять дочерние элементы по низу экрана.

Наша история «Домашние питомцы» почти завершена. На нашей последней странице мы используем анимацию, чтобы собрать всех питомцев вместе.