Da du mit dem Hinzufügen einer Seite zu einer Web Story nun vertraut bist, sollte dir das Hinzufügen der nächsten Seiten in unserer Story "Die Freude an Haustieren" nicht schwerfallen. Nutze die unten angegebenen Informationen und wende dein neues Wissen an, um die restlichen Seiten zu erstellen. Wenn du nicht weiterkommst, kannst du dir den fertigen Code ansehen (pets-completed.html).
TIPP: Denke daran, dass jede Seite ein eindeutiges Attribut "id" benötigt (z. B. id="page1").
Seite 1: Katzen
Demonstriert, wie Bild und Text in einer einzigen Ebene angezeigt werden.
Ein Element für das folgende Zitat: Dogs come when they're called. Cats take a message and get back to you. --Mary Bly
Seite 2: Hunde
Demonstriert, wie man Text anordnet und ein bildschirmfüllendes Bild mit zwei Ebenen anzeigt.
Enthält 2 Ebenen:
Ebene 1: Implementiert das Template fill und enthält ein responsives amp-img (dog.jpg, 720 x 1280px).
Ebene 2: Implementiert das Template thirds und enthält 2 Elemente:
Ein Element
mit dem Titel: Dogs
Ein Element
, welches das Attribut grid-area festlegt, welches den Bereich lower-third ausfüllt und den folgenden Text enthält: 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.
Seite 3: Vögel
Demonstriert, wie man Text anordnet, ein bildschirmfüllendes Bild mit zwei Ebenen anzeigt und Hintergrundsound für die Seite bereitstellt.
Enthält 3 Ebenen:
Ebene 1: Implementiert das Template fill und enthält ein responsives amp-img (bird.jpg, 720 x 1280px).
Ebene 2 Implementiert das Template vertical und enthält 1 Element:
Ein Element
mit dem Titel: Birds
Ebene 3: Implementiert das Template vertical und enthält 1 Element:
Ein Element für das folgende Zitat: A bird is three things: Feathers, flight and song, And feathers are the least of these.--Marjorie Allen Seiffert
Diese dritte Ebene gibt class="bottom" an, um die untergeordneten Elemente am unteren Bildschirmrand auszurichten.
Spielt eine Audiodatei im Hintergrund ab, während die Seite angezeigt wird. Du kannst den Ton im Hintergrund für die gesamte Story oder für eine einzelne Seite abspielen. Um den Ton für eine Seite abzuspielen, füge das Attribut background-audio="assets/bird-singing.mp3" im Element <amp-story-page> ein.
Seite 4: Kaninchen
Demonstriert, wie man Text anordnet und ein bildschirmfüllendes Video für die Seite anzeigt.
Enthält 3 Ebenen:
Ebene 1: Implementiert das Template fill und enthält ein responsives amp-video (rabbit.mp4).
Vergiss nicht, das erforderliche Skript für die Komponente amp-video in deinem Abschnitt hinzuzufügen, damit das Video angezeigt wird.
Gib ein poster Bild an (rabbit.jpg). Dieses Attribut ist für gültige AMP Storys erforderlich.
Stelle das Video mit dem Attribut autoplay so ein, dass es automatisch abgespielt wird. Dieses Attribut ist für gültige AMP Storys erforderlich.
Stelle das Video mit dem Attribut loop so ein, dass es automatisch in einer Endlosschleife wiedergegeben wird.
Gib als Abmessung width="720"height="1280" und layout="responsive" an.
Ebene 2 Implementiert das Template vertical und enthält ein Element:
Ein Element
mit dem Titel: Rabbits
Ebene 3: Implementiert das Template vertical und enthält ein Element:
Ein Element
mit dem folgenden Text: Rabbits can learn to follow simple voice commands and come when called by name, and are curious and playful.
Wende die CSS Klasse bottom auf die Ebene an, um die untergeordneten Elemente am unteren Bildschirmrand auszurichten.
Unsere Story "Joy of Pets" ist fast vollständig. Auf unserer letzten Seite verwenden wir Animationen, um alle Haustiere zusammenzubringen.
We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our use of cookies and privacy policy.