Tworzenie strony tytułowej
Strona w relacji internetowej jest reprezentowana przez składnik <amp-story-page>. W składniku stamp-story można mieć jeden lub wiele składników <amp-story-page>, zawierających poszczególne ekrany relacji. Pierwszą stroną wyświetlaną w relacji internetowej będzie pierwsza strona, którą określisz w kolejności dokumentów.
Aby utworzyć stronę, dodaj element <amp-story-page> jako element podrzędny składnika amp-story. Przypisz stronie unikalny identyfikator. Do naszej pierwszej strony, która jest stroną tytułową, przypiszmy unikalny identyfikator 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>
Teraz mamy powłokę na reklamę. Nasza relacja nadal jednak nie jest prawidłowa. W naszej stronie musimy określić co najmniej jedną warstwę.
Warstwy w stronie
Podobnie jak w grafice, warstw można używać w stronach relacji AMP do tworzenia efektów wizualnych. Warstwy są układane jedna na drugiej, pierwsza warstwa jest więc warstwą dolną, następna jest nad nią i tak dalej.
Nasza strona tytułowa składa się faktycznie z dwóch warstw:
- Warstwa 1: obraz, który służy nam za tło
- Warstwa 2: tytuł i autor relacji
Tworzenie warstwy 1
Dodajmy pierwszą warstwę do strony tytułowej. Warstwa ta zawiera obraz, który wypełnia ekran.
Utwórz warstwę, dodając element <amp-story-grid-layer> jako element podrzędny elementu <amp-story-page>. Chcemy, aby obraz wypełniał ekran, należy więc określić atrybut template="fill" dla elementu amp-story-grid-layer. W warstwie dodaj element amp-img pliku cover.jpg i ustaw go jako responsywny (tj. layout="responsive") z wymiarami obrazu równymi 720 x 1280 px. Nasza warstwa wygląda tak:
<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>
Zobaczmy, jak wygląda strona. Otwórz w przeglądarce stronę: http://localhost:8000/pets.html.
Powinna wyglądać tak:
Tworzenie warstwy 2
Mamy więc tło, ale teraz potrzebujemy drugiej warstwy, znajdującej się nad tłem i zawierającej nasz nagłówek i autora. Aby dodać naszą drugą warstwę, wykonajmy te same zadania, które wykonaliśmy w przypadku warstwy 1, ale zamiast używać szablonu fill, użyjemy szablonu vertical. Zanim jednak przejdziemy dalej, dowiedzmy się nieco o szablonach i o tym jak możemy ułożyć elementy AMP i HTML w elemencie <amp-story-grid-layer>.
Układanie elementów za pomocą szablonu
Element <amp-story-grid-layer> układa swoje elementy podrzędne w siatce (na podstawie siatki CSS). Aby wskazać, jak mają być rozmieszczone elementy podrzędne, należy określić jeden z następujących szablonów układu:
Szablon: fill |
|
Szablon fill wypełnia ekran pierwszym elementem podrzędnym w warstwie. W tej warstwie nie zostaną pokazane żadne inne elementy podrzędne. Szablon fill dobrze sprawdza się w przypadku tła, w tym obrazów i filmów. | |
Szablon: vertical |
|
Szablon vertical układa elementy podrzędne wzdłuż osi Y. Elementy są wyrównywane do góry ekranu i zajmują cały ekran wzdłuż osi X. Szablon vertical jest przydatny, gdy chcesz układać elementy jeden nad drugim w pionie. | |
Szablon: horizontal |
|
Szablon horizontal układa elementy podrzędne wzdłuż osi X. Elementy są wyrównane do góry ekranu i zajmują cały ekran wzdłuż osi Y. Szablon horizontal jest przydatny, gdy chcesz układać elementy jeden za drugim w poziomie. | |
Szablon: thirds |
|
Szablon thirds dzieli ekran na trzy równe wiersze i pozwala na wstawienie zawartości do każdego z nich. Możesz również określić nazwany atrybut grid-area, aby wskazać jedną trzecią, w której ma się znaleźć treść — upper-third, middle-third, lub lower-third. Nazwane obszary siatki są przydatne do zmiany domyślnego sposobu działania elementów. Jeśli na przykład masz dwa elementy w warstwie, możesz określić pierwszy element, który ma się znaleźć w obszarze grid-area="upper-third" i drugi element, który ma się znaleźć w obszarze grid-area="lower-third". |
|
Kończenie strony tytułowej
Teraz, gdy już znasz szablony warstw, ukończmy naszą drugą warstwę strony tytułowej.
W warstwie 2 chcemy, aby nagłówek i dane autora znajdowały się u góry, a elementy następowały jeden po drugim, więc określamy szablon vertical. Nasz drugi szablon amp-story-grid-layer następuje po pierwszym, tak jak tu:
<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>
Odśwież przeglądarkę i sprawdź swoje dzieło. Strona tytułowa jest ukończona.
-