Creazione della copertina
Una pagina all'interno di una storia web è rappresentata dal componente <amp-story-page>. All'interno di un elemento amp-story, ci possono essere uno o più componenti <amp-story-page>, ciascuno contenente le singole schermate della storia. La prima pagina specificata nell'ordine del documento è la prima pagina che viene visualizzata nella storia web.
Per creare una pagina, aggiungere l'elemento <amp-story-page> come figlio di amp-story. Assegnare un ID univoco alla pagina. Per la nostra prima pagina, cioè la copertina, assegniamo un ID univoco di cover:
<amp-story standalone
title="Joy of Pets"
publisher="AMP tutorials"
publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
poster-portrait-src="assets/cover.jpg">
<amp-story-page id="cover">
</amp-story-page>
</amp-story>
Ora abbiamo il contenitore della nostra copertina. Tuttavia, la nostra storia non è ancora valida. All'interno della nostra pagina, dobbiamo specificare almeno un livello.
Livelli in una pagina
Come i livelli di un grafico, i livelli nelle pagine di una storia AMP permettono di creare effetti visivi. I livelli sono innestati uno sull'altro, quindi il primo livello è il livello inferiore e il livello successivo è sopra al precedente e così via.
La nostra copertina è in realtà composta da due livelli:
- Livello 1: un'immagine che funge da sfondo
- Livello 2: il titolo e le righe della storia
Creazione del livello 1
Aggiungiamo il nostro primo livello alla copertina. Il livello contiene un'immagine che riempie lo schermo.
Creare il livello aggiungendo l'elemento <amp-story-grid-layer> come figlio di <amp-story-page>. Poiché vogliamo che l'immagine riempia lo schermo, indicare l'attributo template="fill" per amp-story-grid-layer. All'interno del livello, aggiungere un elemento amp-img per il file cover.jpg assicurandosi che sia reattivo (cioè con layout="responsive") con un'immagine da 720 x 1280 pixel. Ecco come appare il nostro livello:
<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
<amp-img src="assets/cover.jpg"
width="720" height="1280"
layout="responsive">
</amp-img>
</amp-story-grid-layer>
</amp-story-page>
Vediamo come appare la pagina. Aprire la pagina nel browser: http://localhost:8000/pets.html.
Ecco come dovrebbe apparire:
Creazione del livello 2
Quindi, abbiamo il nostro sfondo, ma ora abbiamo bisogno del secondo livello, che si trova sopra lo sfondo e contiene il titolo e le righe di testo. Per aggiungere il nostro secondo livello, effettuiamo le stesse operazioni eseguite per il livello 1, ma invece di utilizzare il modello fill, utilizzeremo il modello vertical. Tuttavia, prima di proseguire, dobbiamo conoscere i modelli e imparare a disporre gli elementi AMP e HTML in un elemento <amp-story-grid-layer>.
Disposizione degli elementi in un modello
L'elemento <amp-story-grid-layer> dispone i suoi elementi figli in una griglia (basata sulla griglia CSS). Per indicare come disporre tali elementi, è necessario specificare uno dei seguenti modelli di layout:
Modello: fill |
|
Il modello fill riempie lo schermo con il primo elemento figlio nel livello. Eventuali altri elementi figli nel livello non saranno visualizzati. Tale modello funziona bene per immagini e video di sfondo. | |
Modello: Vertical |
|
Il modello vertical dispone gli elementi figli lungo l'asse y. Gli elementi sono allineati dalla parte alta dello schermo e occupano tutto lo schermo lungo l'asse x. Il modello verticale funziona bene nei casi in cui si vogliono innestare verticalmente gli elementi l'uno dopo l'altro. | |
Modello: Horizontal |
|
Il modello horizontal dispone gli elementi figli lungo l'asse x. Gli elementi sono allineati all'inizio dello schermo e lo occupano interamente lungo l'asse y. Il modello orizzontale funziona bene per innestare gli elementi orizzontalmente uno dopo l'altro. | |
Modello: Thirds |
|
Il modello thirds divide lo schermo in tre righe delle stesse dimensioni e consente di assegnare i contenuti in ciascuna area. Si può anche indicare il nome di una grid-area per specificare in quale terzo dello schermo si vuole inserire un contenuto: upper-third, middle-third, o lower-third. Le aree della griglia con nome permettono di modificare il comportamento predefinito degli elementi e dove essi appariranno. Ad esempio, con due elementi nel livello, si può collocare il primo elemento in grid-area="upper-third" e il secondo elemento in grid-area="lower-third". |
|
Completiamo la nostra copertina
Ora che abbiamo compreso i modelli con livelli, completiamo il nostro secondo livello per la copertina.
Per il livello 2, vogliamo che l'intestazione e le righe siano in alto e vogliamo che gli elementi si susseguano l'uno dopo l'altro, quindi specificheremo il modello vertical. Il nostro secondo elemento amp-story-grid-layer segue il primo, in questo modo:
<amp-story-grid-layer>
<!--our first layer -->
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>The Joy of Pets</h1>
<p>By AMP Tutorials</p>
</amp-story-grid-layer>
Aggiorniamo il browser e rivediamo il lavoro. La nostra copertina è ora completa.
-