AMP
FR
English Deutsch العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Ajouter plus de pages

Maintenant que vous êtes familiarisé(e) avec l'ajout d'une page à une story Web, l'ajout des pages suivantes dans notre histoire "La joie des animaux domestiques" est très similaire. Sur la base des informations fournies ci-dessous, créez les pages restantes en utilisant ce que vous avez appris jusqu'à présent. Si vous êtes bloqué(e), regardez le code complet (pets-completed.html).

CONSEIL - N'oubliez pas que chaque page a besoin d'un attribut unique "id" (par exemple, id="page1").

Page 1 : chats

Montre comment afficher une image et du texte dans une seule couche.

  • Contient 1 couche :
    • Implémente le modèle vertical.
    • Contient 3 éléments :
      • Un élément

        avec le titre : Chats
      • Un amp-img réactif (cat.jpg 720 x 1280px)
      • Un élément pour la citation suivante : Les chiens viennent quand on les appelle. Les chats prennent le message et reviennent vers vous quand ça les arrange. --Mary Bly

Page 2 : chiens

Montre comment organiser le texte et afficher une image de remplissage d'écran avec deux couches.

  • Contient 2 couches:
    • Couche1: implémente le modèle fill, et contient un amp-img interactif (dog.jpg, 720 x 1280px).
    • Couche 2: implémente le modèle thirds et contient 2 éléments:
      • un élément

        avec le titre: Chiens
      • Un élément

        qui spécifie une zone grid-area qui occupe la zonelower-third et contient le texte suivant: Les chiens sont probablement les premiers animaux que nous avons apprivoisés. Ils accompagnent les humains depuis près de 10 000 ans. Certains scientifiques affirment que tous les chiens, domestiques et sauvages, partagent comme ancêtre commun le loup d'Asie du Sud.

Page 3 : oiseaux

Montre comment organiser le texte, afficher une image qui remplit l'écran et fournir un son d'arrière-plan pour la page.

  • Contient 3 couches :
    • Couche 1 : implémente le modèle fill et contient une image réactive amp-img (bird.jpg, 720 x 1280px).
    • Couche 2 : implémente le modèle vertical et contient un élément :
      • Un élément

        avec le titre : Oiseaux
    • Couche 3 : implémente le modèle vertical et contient un élément :
      • Un élément pour la citation suivante : Un oiseau se résume en trois choses : les plumes, le vol et le chant. Et les plumes sont ce qu'il y a de moins important.--Marjorie Allen Seiffert
      • Cette troisième couche spécifie class="bottom" pour aligner les éléments enfants au bas de l'écran.
  • Joue un fichier audio en arrière-plan lorsque la page est affichée. Vous pouvez reproduire du son en arrière-plan pour toute l'histoire ou pour une seule page. Pour reproduire du son pour une page, ajoutez l'attribut background-audio="assets/bird-singing.mp3" à l'élément <amp-story-page>.

Page 4 : lapins

Demonstrates how to arrange text and display a screen-filling video for the page.

  • Contient 3 couches :
    • Couche 1 : Implémente le modèle fill, et contient une vidéo interactive amp-video (rabbit.mp4).
      • Souvenez-vous d'ajouter le script requis pour le composant amp-video dans votre section pour que la vidéo apparaisse.
      • Spécifiez une image poster (rabbit.jpg). Cet attribut est requis pour les stories AMP valides.
      • Configurez la vidéo pour qu'elle se reproduise automatiquement avec l'attribut autoplay. Cet attribut est requis pour les stories AMP valides.
      • Configurez la vidéo pour qu'elle soit lue en boucle avec l'attribut loop.
      • Configurez les dimensions sur width="720" height="1280" et layout="responsive".
    • Couche 2 : Implémente le modèle vertical et contient un élément :
      • Un élément

        avec le titre : Lapins
    • Couche 3 : Implémente le modèle vertical et contient un élément :
      • A

        qui contient le texte suivant : Les lapins peuvent apprendre à suivre des ordres vocaux simples et viennent lorsqu'on les appelle par leur nom. Ils sont également curieux et joueurs.
      • Appliquez la classe CSS bottom à la couche pour aligner les éléments enfants au bas de l'écran.

Our "Joy of Pets" story is nearly complete. We'll use animations in our last page to bring all the pets together.

Chapitre précédent Chapitre suivant