AMP

Dodawanie kolejnych stron

Wiesz już jak dodawać strony do relacji internetowej, a dodawanie kolejnych stron do naszej relacji „The Joy of Pets” przebiega bardzo podobnie. W oparciu o informacje podane poniżej utwórz pozostałe strony, korzystając z nabytej do tej pory wiedzy. Jeśli utkniesz, spójrz na ukończony kod (pets-completed.html).

PORADA — pamiętaj, że każda strona wymaga unikalnego atrybutu „id” (np. id="page1").

Strona 1: Cats

Prezentuje sposób wyświetlania obrazu i tekstu w jednej warstwie.

  • Zawiera 1 warstwę:
    • Implementuje szablon vertical.
    • Zawiera 3 elementy:
      • Element

        z tytułem: Cats

      • Responsywny element amp-img (cat.jpg, 720 x 1280px)
      • Element na następujący cytat: Dogs come when they're called. Cats take a message and get back to you. --Mary Bly

Strona 2: Dogs

Prezentuje sposób rozmieszczania tekstu i wyświetlania obrazu wypełniającego ekran w dwóch warstwach.

  • Zawiera 2 warstwy:
    • Warstwa 1: implementuje szablon fill i zawiera responsywny element amp-img (dog.jpg, 720 x 1280px).
    • Warstwa 2: implementuje szablon thirds i zawiera 2 elementy:
      • Element

        z tytułem: Dogs

      • Element

        określający obszar grid-area zajmowany przez element lower-third i zawierający następujący tekst: 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.

Strona 3: Birds

Prezentuje sposób rozmieszczania tekstu, wyświetlania obrazu wypełniającego ekran i zapewnienia tła dźwiękowego strony.

  • Zawiera 3 warstwy:
    • Warstwa 1: implementuje szablon fill i zawiera responsywny element amp-img (bird.jpg, 720 x 1280px).
    • Warstwa 2 implementuje szablon vertical i zawiera jeden element:
      • Element

        z tytułem: Birds

    • Warstwa 3: implementuje szablon vertical i zawiera jeden element:
      • Element na następujący cytat: A bird is three things: Feathers, flight and song, And feathers are the least of these.--Marjorie Allen Seiffert
      • Ta trzecia warstwa określa atrybut class="bottom" w celu wyrównania elementów podrzędnych z dołem ekranu.
  • Odtwarza plik audio w tle, gdy strona jest wyświetlana. Możesz odtwarzać dźwięk w tle całej relacji lub pojedynczej strony. Aby odtworzyć dźwięk dla strony, dodaj atrybut background-audio="assets/bird-singing.mp3" do elementu <amp-story-page>.

Strona 4: Rabbits

Prezentuje sposób rozmieszczania tekstu i wyświetlania filmu wypełniającego ekran strony.

  • Zawiera 3 warstwy:
    • Warstwa 1: implementuje szablon fill i zawiera responsywny element amp-video (rabbit.mp4).
      • Pamiętaj o dodaniu skryptu wymaganego przez składnik amp-video w jego sekcji do wyświetlenia filmu.
      • Określ obraz poster (rabbit.jpg). Ten atrybut jest wymagany do prawidłowości relacji AMP.
      • Ustaw automatyczne odtwarzanie filmu za pomocą atrybutu autoplay. Ten atrybut jest wymagany do prawidłowości relacji AMP.
      • Ustaw automatyczne odtwarzanie filmu w pętli za pomocą atrybutu loop.
      • Ustaw wymiary width="720" height="1280" i layout="responsive".
    • Warstwa 2 implementuje szablon vertical i zawiera jeden element:
      • Element

        z tytułem: Rabbits

    • Warstwa 3: implementuje szablon vertical i zawiera jeden element:
      • Element

        zawierający następujący tekst: Rabbits can learn to follow simple voice commands and come when called by name, and are curious and playful.

      • Zastosuj klasę CSS bottom do warstwy, aby wyrównać elementy podrzędne z dołem ekranu.

Nasza relacja „Joy of Pets” jest prawie ukończona. Na naszej ostatniej stronie użyjemy animacji, aby wyświetlić wszystkie zwierzęta domowe.