Ein Deckblatt erstellen
Eine Seite innerhalb einer Web Story wird durch die Komponente <amp-story-page> repräsentiert. Innerhalb einer amp-story kannst du eine oder mehrere <amp-story-page> Komponenten haben, die jede der einzelnen Seiten der Story enthalten. Die erste Seite, die du in der Reihenfolge des Dokuments angibst, ist die erste Seite, die in der Web Story angezeigt wird.
Füge das Element <amp-story-page> als untergeordnetes Element von amp-story hinzu, um eine Seite zu erstellen. Weise der Seite eine eindeutige ID zu. Weisen wir unserer ersten Seite – dem Deckblatt – die eindeutige ID cover zu:
<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>
Damit erhalten wir das Gerüst für unser Deckblatt. Unsere Story ist aber immer noch nicht gültig. Auf unserer Seite müssen wir mindestens eine Ebene angeben.
Ebenen auf einer Seite
Genau wie Ebenen in einer Grafik kannst du auch Ebenen auf AMP Story Seiten verwenden, um visuelle Effekte zu erstellen. Die Ebenen sind übereinander gestapelt, was bedeutet: Die erste Ebene ist die unterste, die nächste Ebene liegt darüber, und so weiter.
Unser Deckblatt besteht aus zwei Ebenen:
- Ebene 1: Ein Bild, das als Hintergrund dient
- Ebene 2: Titel und Zusatz für die Story
Ebene 1 erstellen
Fügen wir die erste Ebene zu unserem Deckblatt hinzu. Die Ebene enthält ein Bild, das den Bildschirm ausfüllt.
Erstelle die Ebene, indem du das Element <amp-story-grid-layer> als untergeordnetes Element von <amp-story-page> hinzufügst. Da das Bild den Bildschirm ausfüllen soll, gib das Attribut template="fill" für amp-story-grid-layer an. Füge innerhalb der Ebene das Element amp-img für die Datei cover.jpg hinzu und stelle sicher, dass es responsiv ist (d. h. layout="responsive") und als Maße 720x1280 px hat. So sieht unsere Ebene aus:
<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>
Sehen wir uns an, wie die Seite angezeigt wird. Öffne die Seite in deinem Browser: http://localhost:8000/pets.html.
So sollte sie aussehen:
Ebene 2 erstellen
Jetzt haben wir also einen Hintergrund, brauchen aber noch die zweite Ebene, die über dem Hintergrund liegt und Überschrift und Zusatzzeile enthält. Um die zweite Ebene hinzuzufügen, können wir genau so vorgehen wie bei Ebene 1. Aber statt fill verwenden wir hier vertical als Template. Bevor wir jedoch weitermachen, sollten wir uns mit Templates und dem Anordnen von AMP und HTML Elementen in <amp-story-grid-layer> näher auseinandersetzen.
Elemente mit einem Template anordnen
Das Element <amp-story-grid-layer> ordnet seine untergeordneten Elemente in einem Raster an (basierend auf dem CSS Raster). Um anzugeben, wie die untergeordneten Elemente angeordnet werden sollen, musst du eines der folgenden Layout Templates festlegen:
Template: Fill |
|
Das Template fill füllt den Bildschirm mit dem ersten untergeordneten Element der Ebene aus. Alle anderen Elemente dieser Ebene werden nicht angezeigt. Das Template "fill" eignet sich gut für Hintergründe, einschließlich Bildern und Videos. | |
Template: Vertical |
|
Das Template vertical ordnet die untergeordneten Elemente entlang der y-Achse an. Die Elemente werden am oberen Rand des Bildschirms ausgerichtet und nehmen den gesamten Bildschirm entlang der x-Achse ein. Das Template "vertical" ist sinnvoll, wenn du Elemente vertikal direkt untereinander stapeln möchtest. | |
Template: Horizontal |
|
Das Template horizontal ordnet die untergeordneten Elemente entlang der x-Achse an. Die Elemente werden am Bildschirmstart ausgerichtet und nehmen den gesamten Bildschirm entlang der y-Achse ein. Das Template "horizontal" ist sinnvoll, wenn du Elemente horizontal direkt nebeneinander stapeln möchtest. | |
Template: Thirds |
|
Das Template thirds unterteilt den Bildschirm in drei gleich große Zeilen und ermöglicht dir, Inhalte in jedem Bereich einzufügen. Du kannst außerdem einen benannten Bereich grid-area angeben, um zu bestimmen, in welchem Drittel sich dein Inhalt befinden soll: upper-third, middle-third oder lower-third. Mithilfe benannter Rasterbereiche kannst du anpassen, wo Elemente erscheinen sollen, und damit das Standardverhalten ändern. Wenn deine Ebene z. B. zwei Elemente enthält, kannst du angeben, dass sich das erste Element in grid-area="upper-third" und das zweite Element in grid-area="lower-third" befinden soll. |
|
Abschluss des Deckblatts
Da du nun ein grundlegendes Verständnis für Ebenen Templates hast, können wir die zweite Ebene unseres Deckblatts vervollständigen.
Wir möchten, dass auf Ebene 2 die Überschrift und die Zusatzzeile oben stehen und die Elemente nacheinander folgen. Deshalb geben wir als Template vertical an. Unsere zweite Ebene amp-story-grid-layer folgt der ersten:
<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>
Lade den Inhalt in deinem Browser neu und überprüfe das Ergebnis. Unser Deckblatt ist nun vollständig.
-