Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
IT
English Deutsch Français العربية Español Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Aggiunta di altre pagine

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.

  • Contiene 1 livello:
    • Implementa il modello vertical.
    • Contiene 3 elementi:
      • Un elemento

        dal titolo: Gatti
      • 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
Page 1 - Cats

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 .

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.

Capitolo precedente Prossimo capitolo