Wiesz już jak dodawać strony do relacji internetowej, a dodawanie kolejnych stron do naszej relacji „The Joy of Pets” przebiega bardzo podobnie. W oparciu o informacje podane poniżej utwórz pozostałe strony, korzystając z nabytej do tej pory wiedzy. Jeśli utkniesz, spójrz na ukończony kod (pets-completed.html).
PORADA — pamiętaj, że każda strona wymaga unikalnego atrybutu „id” (np. id="page1").
Strona 1: Cats
Prezentuje sposób wyświetlania obrazu i tekstu w jednej warstwie.
Responsywny element amp-img (cat.jpg, 720 x 1280px)
Element na następujący cytat: Dogs come when they're called. Cats take a message and get back to you. --Mary Bly
Strona 2: Dogs
Prezentuje sposób rozmieszczania tekstu i wyświetlania obrazu wypełniającego ekran w dwóch warstwach.
Zawiera 2 warstwy:
Warstwa 1: implementuje szablon fill i zawiera responsywny element amp-img (dog.jpg, 720 x 1280px).
Warstwa 2: implementuje szablon thirds i zawiera 2 elementy:
Element
z tytułem: Dogs
Element
określający obszar grid-area zajmowany przez element lower-third i zawierający następujący tekst: 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.
Strona 3: Birds
Prezentuje sposób rozmieszczania tekstu, wyświetlania obrazu wypełniającego ekran i zapewnienia tła dźwiękowego strony.
Zawiera 3 warstwy:
Warstwa 1: implementuje szablon fill i zawiera responsywny element amp-img (bird.jpg, 720 x 1280px).
Warstwa 2 implementuje szablon vertical i zawiera jeden element:
Element
z tytułem: Birds
Warstwa 3: implementuje szablon vertical i zawiera jeden element:
Element na następujący cytat: A bird is three things: Feathers, flight and song, And feathers are the least of these.--Marjorie Allen Seiffert
Ta trzecia warstwa określa atrybut class="bottom" w celu wyrównania elementów podrzędnych z dołem ekranu.
Odtwarza plik audio w tle, gdy strona jest wyświetlana. Możesz odtwarzać dźwięk w tle całej relacji lub pojedynczej strony. Aby odtworzyć dźwięk dla strony, dodaj atrybut background-audio="assets/bird-singing.mp3" do elementu <amp-story-page>.
Strona 4: Rabbits
Prezentuje sposób rozmieszczania tekstu i wyświetlania filmu wypełniającego ekran strony.
Zawiera 3 warstwy:
Warstwa 1: implementuje szablon fill i zawiera responsywny element amp-video (rabbit.mp4).
Pamiętaj o dodaniu skryptu wymaganego przez składnik amp-video w jego sekcji do wyświetlenia filmu.
Określ obraz poster (rabbit.jpg). Ten atrybut jest wymagany do prawidłowości relacji AMP.
Ustaw automatyczne odtwarzanie filmu za pomocą atrybutu autoplay. Ten atrybut jest wymagany do prawidłowości relacji AMP.
Ustaw automatyczne odtwarzanie filmu w pętli za pomocą atrybutu loop.
Ustaw wymiary width="720"height="1280" i layout="responsive".
Warstwa 2 implementuje szablon vertical i zawiera jeden element:
Element
z tytułem: Rabbits
Warstwa 3: implementuje szablon vertical i zawiera jeden element:
Element
zawierający następujący tekst: Rabbits can learn to follow simple voice commands and come when called by name, and are curious and playful.
Zastosuj klasę CSS bottom do warstwy, aby wyrównać elementy podrzędne z dołem ekranu.
Nasza relacja „Joy of Pets” jest prawie ukończona. Na naszej ostatniej stronie użyjemy animacji, aby wyświetlić wszystkie zwierzęta domowe.
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.