AMP
TR
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский 中文 Polski Tiếng việt

Daha fazla sayfa ekleme

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.

  • 1 katman içerir:
    • vertical şablonunu uygular.
    • 3 öğe içerir:
      • Bir

        öğesi ve şu başlık: Cats
      • Duyarlı bir amp-img (cat.jpg, 720 x 1280px)
      • 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. Katman vertical ş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. Katman vertical ş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.

Önceki bölüm Sonraki bölüm