Creating the cover page
Uma página dentro de uma História Web é representada pelo componente <amp-story-page>. Em um amp-story, você pode ter um ou mais componentes<amp-story-page>, contendo cada uma das telas individuais de uma história. A primeira página que você especificar na ordem do documento é a primeira página exibida na História Web.
Para criar uma página, adicione o elemento <amp-story-page> como filho de um amp-story. Atribua um ID exclusivo à página. Para nossa primeira página, que será a de abertura, atribuiremos um ID exclusivo chamado 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>
Agora temos o shell da nossa página de abertura. No entanto, a história ainda não é válida. É preciso especificar pelo menos uma camada na página.
Camadas em uma página
Assim como as camadas em gráficos, você pode usar camadas em páginas de histórias AMP para criar efeitos visuais. As camadas são posicionadas umas em cima das outras. Assim, a primeira será a camada inferior, a próxima camada será posicionada em cima dela e assim por diante.
Nossa página de abertura é composta por duas camadas:
- Camada 1: uma imagem que serve como pano de fundo
- Camada 2: o título e a autoria da história
Criando a camada 1
Vamos adicionar a primeira camada à página de abertura. Essa camada contém uma imagem que preenche a tela.
Crie essa camada adicionando o elemento <amp-story-grid-layer> como filho de <amp-story-page>. Como a ideia é que a imagem preencha a tela, especifique o atributo template="fill" para amp-story-grid-layer. Dentro da camada, adicione um elemento amp-img ao arquivo cover.jpg e certifique-se de que ele seja responsivo (ou seja, layout="responsive") com as dimensões de 720 x 1280 px da imagem. A camada terá esta aparência:
<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>
Vejamos como a página é exibida. Abra a página no navegador: http://localhost:8000/pets.html.
Ela terá esta aparência:
Criando a camada 2
Já temos nosso pano de fundo. Agora, precisamos da segunda camada, que fica em cima do pano de fundo e contém o título e a autoria. Para adicionar a segunda camada, realizaremos as mesmas tarefas da criação da camada 1, mas, em vez de usar o modelo fill, usaremos o modelo vertical. No entanto, antes de continuar, vamos conhecer os modelos e aprender como podemos organizar os elementos AMP e HTML em um <amp-story-grid-layer>.
Layout dos elementos com um modelo
O elemento <amp-story-grid-layer> insere os respectivos elementos filhos em uma grade (baseada na CSS grid). Para indicar como você quer organizar os elementos-filho, é preciso especificar um dos seguintes modelos de layout:
Modelo: fill |
|
| O modelo de preenchimento preenche a tela com o primeiro elemento filho na camada. Nenhum outro filho é mostrado nessa camada. O modelo de preenchimento é bom para planos de fundo, incluindo imagens e vídeos. | |
Modelo: vertical |
|
O modelo vertical insere os elementos-filho ao longo do eixo y. Os elementos são alinhados na parte superior da tela e ocupam a tela inteira ao longo do eixo x. O modelo vertical funciona bem quando você deseja empilhar elementos um sobre o outro. | |
Modelo: horizontal |
|
| O modelo horizontal posiciona os elementos filhos no eixo x. Eles são alinhados no início da tela e a ocupam completamente ao longo do eixo y. O modelo horizontal funciona bem quando o objetivo é empilhar elementos horizontalmente, um após o outro. | |
Modelo: terços |
|
O modelo thirds divide a tela em três linhas de tamanho igual e permite inserir conteúdo dentro de cada área. Você também pode especificar um grid-area para indicar qual terça parte da tela você deseja usar para seu conteúdo. Pode ser : upper-third, middle-third ou lower-third. As áreas de grade identificadas são úteis para alterar o comportamento padrão de onde os elementos aparecem. Por exemplo, se você tiver dois elementos na camada, você pode especificar o primeiro elemento para estar em grid-area="upper-third" e o segundo para estar em grid-area="lower-third". |
|
Concluir a página de abertura
Agora que você conhece os modelos de camadas, vamos concluir a segunda camada da página de abertura.
Para a camada 2, vamos posicionar o título e a autoria na parte superior, e queremos que os elementos estejam um após o outro, por isso, especificaremos o modelo vertical. Nosso segundo elemento amp-story-grid-layer seguirá o primeiro, da seguinte forma:
<amp-story-grid-layer>
<!--nossa primeira camada -->
</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>
Atualize o navegador e revise seu trabalho. A página de abertura está pronta.
-