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

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.

Capitolo precedente Prossimo capitolo