Setelah kini Anda menguasai cara menambahkan halaman ke Cerita Web, cara menambahkan halaman berikutnya dalam cerita "The Joy of Pets" sangat mirip. Berdasarkan informasi yang diberikan di bawah, lanjutkan membuat halaman lainnya dengan memanfaatkan pengetahuan yang telah Anda pelajari sejauh ini. Jika menemui kesulitan, lihat kode (pets-completed.html) yang telah selesai.
KIAT – Ingatlah bahwa setiap halaman membutuhkan atribut "id" yang unik (cth.: id="page1").
Halaman 1: Kucing
Memperagakan cara menampilkan gambar dan teks dalam satu lapisan.
Sebuah elemen responsif untuk kutipan berikut ini: Anjing datang jika dipanggil. Kucing mengantarkan pesan dan kembali. --Mary Bly
Halaman 2: Anjing
Memperagakan cara menyusun teks dan menampilkan gambar yang memenuhi layar dengan dua lapisan.
Berisi 2 lapisan:
Lapisan 1: Menerapkan templat fill, dan berisi amp-img (dog.jpg, 720 x 1280px) responsif.
Lapisan 2: Menerapkan templat thirds dan berisi 2 elemen:
Sebuah elemen
dengan judul: Anjing
Sebuah elemen
yang menentukan grid-area yang menempati bagian lower-third dan berisi teks berikut ini: Anjing mungkin hewan yang dijinakkan pertama kali. Mereka telah menemani manusia selama sekitar 10.000 tahun. Sejumlah ilmuwan meyakini bahwa semua anjing, jinak dan liar, mempunyai nenek moyang yang sama, yaitu serigala kecil di Asia Selatan.
Halaman 3: Burung
Memperagakan cara menyusun teks, menampilkan gambar yang memenuhi layar, dan menyediakan audio latar belakang untuk halaman.
Berisi 3 lapisan:
Lapisan 1: Menerapkan templat fill, dan berisi komponen amp-img responsif (bird.jpg, 720 x 1280 piksel).
Lapisan 2: Menerapkan templat vertical dan berisi satu elemen:
Elemen
dengan judul: Burung
Lapisan 3: Menerapkan templat vertical dan berisi satu elemen:
Elemen untuk kutipan berikut ini: Burung terdiri dari tiga hal: bulu, penerbangan, dan lagu. Dari ketiganya, bulu adalah yang paling tidak penting.--Marjorie Allen Seiffert
Lapisan ketiga ini menetapkan class="bottom" untuk menyejajarkan elemen anak dengan bagian bawah layar.
Memutar berkas audio di latar belakang saat halaman ditampilkan. Anda dapat memutar audio di latar belakang untuk seluruh cerita, atau untuk satu halaman. Untuk memutar audio untuk satu halaman, tambahkan atribut background-audio="assets/bird-singing.mp3" ke elemen <amp-story-page>.
Halaman 4: Kelinci
Memperagakan cara menyusun teks, menampilkan video yang memenuhi layar untuk halaman.
Ingatlah untuk menambahkan skrip wajib untuk komponen amp-video di bagian agar video dapat ditampilkan.
Tetapkan gambar poster (rabbit.jpg). Atribut ini harus ada agar cerita AMP dinyatakan valid.
Atur video agar otomatis diputar dengan atribut autoplay. Atribut ini harus ada agar cerita AMP dinyatakan valid.
Atur video agar otomatis diulang lagi dengan atribut loop.
Atur dimensinya ke width="720"height="1280" dan layout="responsive".
Lapisan 2: Menerapkan templat vertical dan berisi satu elemen:
Elemen
dengan judul: Kelinci
Lapisan 3: Menerapkan templat vertical dan berisi satu elemen:
Elemen
yang memuat teks berikut ini: Kelinci dapat belajar mematuhi perintah-perintah suara sederhana dan mendekat jika namanya dipanggil, memiliki rasa ingin tahu yang tinggi, dan asyik diajak bermain.
Terapkan kelas CSS bottom ke lapisan ini untuk menyejajarkan elemen anak dengan bagian bawah layar.
Cerita "Joy of Pets" kita hampir selesai. Kita akan menggunakan animasi pada halaman terakhir untuk menampilkan semua hewan peliharaan bersama-sama.
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.