Ora che abbiamo imparato come aggiungere una pagina a una storia web, possiamo procedere all'aggiunta di altre pagine alla nostra storia "The Joy of Pets" in modo molto simile. Sulla base delle informazioni fornite di seguito, proviamo a continuare con la creazione delle pagine rimanenti utilizzando quanto appreso finora. In caso di problemi, puoi consultare il codice completato (pets-completed.html).
SUGGERIMENTO: Ricorda che ogni pagina richiede un proprio attributo "id" univoco (ad esempio, id="page1").
Pagina 1: Gatti
Indica come visualizzare un'immagine e un testo in un unico livello.
un elemento dinamico amp-img (cat.jpg, 720 x 1280px)
un elemento per la seguente citazione: Dogs come when they're called. Cats take a message and get back to you. --Mary Bly
Pagina 2: Cani
Indica come disporre il testo e visualizzare un'immagine a schermo intero con due livelli.
Contiene 2 livelli:
Livello 1: Implementa il modello fill e contiene un elemento dinamico amp-img (dog.jpg, 720 x 1280px).
Livello 2: Implementa il modello thirds e contiene 2 elementi:
Un elemento
con il titolo: Cani
Un elemento
che indica un elemento grid-area che occupa la posizione lower-third e contiene il seguente testo: 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.
Pagina 3: Uccelli
Indica come disporre il testo, visualizzare un'immagine a schermo intero e fornire audio di sottofondo per la pagina.
Contiene 3 livelli:
Livello 1: Implementa il modello fill e contiene un elemento dinamico amp-img (bird.jpg, 720 x 1280px).
Livello 2 Implementa il modello vertical e contiene un elemento:
Un elemento
con il titolo: Uccelli
Livello 3: Implementa il modello vertical e contiene un elemento:
Un elemento per la seguente citazione: A bird is three things: Feathers, flight and song, And feathers are the least of these.--Marjorie Allen Seiffert
Questo terzo livello specifica la classe class="bottom" per allineare gli elementi figli in fondo allo schermo.
Riproduce un file audio di sottofondo durante la visualizzazione della pagina. L'audio di sottofondo può essere riprodotto su una sola pagina o sull'intera storia. Per riprodurre l'audio su una sola pagina, aggiungere l'attributo background-audio="assets/bird-singing.mp3" all'elemento <amp-story-page>.
Pagina 4: Conigli
Indica come disporre il testo e visualizzare un video a schermo intero per la pagina.
Contiene 3 livelli:
Livello 1: Implementa il modello fill e contiene un elemento dinamico amp-video (rabbit.mp4).
Ricordiamo di aggiungere lo script richiesto per il componente amp-video nella sezione in modo che il video appaia.
Indicare un'immagine poster (rabbit.jpg). Questo attributo è obbligatorio nelle storie AMP valide.
Impostare la riproduzione automatica del video con l'attributoautoplay. Questo attributo è obbligatorio nelle storie AMP valide.
Impostare la riproduzione ciclica automatica del video con l'attributo loop.
Definire le dimensioni width="720"height="1280" e un layout="responsive".
Livello 2 Implementa il modello vertical e contiene un elemento:
Un elemento
con il titolo: Conigli
Livello 3: Implementa il modello vertical e contiene un elemeno:
Un elemento
che contiene il seguente testo: Rabbits can learn to follow simple voice commands and come when called by name, and are curious and playful.
Applicare la classe CSS bottom al livello per allineare gli elementi figli in fondo allo schermo.
La nostra storia "Joy of Pets" è quasi completa. Useremo le animazioni nella nostra ultima pagina per riunire tutti gli animali domestici.
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.