Artık bir Web Hikayesine sayfa eklemeye aşina olduğunuza göre, "The Joy of Pets" hikayemize sonraki sayfaları eklemek benzer bir şekilde olacaktır. Aşağıda verilen bilgilere göre şu ana kadar öğrendiklerinizi kullanarak devam edin ve kalan sayfaları oluşturun. Takılırsanız, tamamlanmış koda (pets-completed.html) bakın.
İPUCU – Her sayfanın benzersiz bir "id" özniteliği (örneğin, id="page1") alması gerektiğini unutmayın.
1. Sayfa: Kediler
Tek bir katmanda bir görüntünün ve metnin nasıl görüntüleneceğini gösterir.
Aşağıdaki alıntı için : Dogs come when they're called. Cats take a message and get back to you. --Mary Bly
2. Sayfa: Köpekler
Metnin nasıl düzenleneceğini ve iki katmanla ekran dolduran bir görüntünün nasıl görüntüleneceğini gösterir.
2 katman içerir:
1. Katman: fill şablonunu uygular ve duyarlı bir amp-img (dog.jpg, 720 x 1280px) içerir.
2. katman: thirds şablonu uygular ve 2 öğe içerir:
Bir
öğesi ve şu başlık: Dogs
Bir
öğesi; bu öğe bir grid-area belirtir, bu alan lower-third bölümünü kaplar ve aşağıdaki metni içerir: 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.
Sayfa 3. Kuşlar
Metnin nasıl düzenleneceğini, ekranı dolduran bir resmin nasıl görüntüleneceğini ve sayfa için arka plan sesinin nasıl sağlanacağını gösterir.
3 katman içerir:
1. Katman: fill şablonunu uygular ve duyarlı bir amp-img (bird.jpg, 720 x 1280px) içerir.
2. Katmanvertical şablonunu uygular ve bir öğe içerir:
Bir
öğesi ve şu başlık:Birds
3. Katman: vertical şablonu uygular ve şu öğeyi içerir:
Aşağıdaki alıntı için öğesi: A bird is three things: Feathers, flight and song, And feathers are the least of these.--Marjorie Allen Seiffert
Bu üçüncü katman, alt öğeleri ekranın altına hizalamak için class="bottom" özniteliğini belirtir.
Sayfa görüntülenirken arka planda bir ses dosyası çalar. Hikayenin tamamı veya tek bir sayfa için arka planda ses çalabilirsiniz. Bir sayfada ses çalmak için background-audio="assets/bird-singing.mp3" özniteliğini <amp-story-page> öğesine ekleyin.
4. Sayfa: Tavşanlar
Sayfa için metnin nasıl düzenleneceğini ve ekran dolduran bir videonun nasıl görüntüleneceğini gösterir.
3 katman içerir:
1. Katman:fill şablonu uygular ve duyarlı bir amp-video (rabbit.mp4 içerir).
Videonun görünmesi için bölümünüzde amp-video bileşeni için zorunlu betiği eklemeyi unutmayın.
Bir poster resmi (rabbit.jpg) belirtin. Bu öznitelik geçerli AMP hikayeleri için zorunludur.
Videonun autoplay özniteliğinde otomatik olarak oynatılacak şekilde ayarlayın. Bu öznitelik geçerli AMP hikayeleri için zorunludur.
Videoyu loop özniteliğiyle otomatik olarak döngü yapacak şekilde ayarlayın.
Boyutları şu şekilde ayarlayın: width="720"height="1280" ve layout="responsive".
2. Katmanvertical şablonunu uygular ve bir öğe içerir:
Bir
öğesi ve şu başlık: Rabbits
3. Katman: vertical şablonunu uygular ve bir öğe içerir:
Bir
öğesi; bu öğe aşağıdaki metni içerir: Rabbits can learn to follow simple voice commands and come when called by name, and are curious and playful.
Alt öğeleri ekranın altına hizalamak için bottom CSS sınıfını katmana uygulayın.
"Joy of Pets" hikayemiz neredeyse tamamlandı. Tüm evcil hayvanları bir araya getirmek için son sayfamızda animasyonlar kullanacağız.
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.