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.
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.
We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our use of cookies and privacy policy.