جدول المحتويات

إضافة المزيد من الصفحات

Now that you are familiar with adding a page to a Web Story, adding the next pages in our "The Joy of Pets" story is very similar. Based on the information provided below, go ahead and create the remaining pages by using what you've learned so far. If you get stuck, look at the completed (pets-completed.html) code.

ملحوظة – تذكر أن كل صفحة تحتاج إلى سمة "معرِّف" فريدة (على سبيل المثال، id="page1").

الصفحة 1: القطط

توضح طريقة عرض صورة ونص في طبقة واحدة.

تحتوي على طبقة واحدة:
- تطبِّق النموذج vertical.
- تتضمن 3 عناصر:
  - عنصر بالاسم: قطط
  - amp-img (cat.jpg، 720 x 1280 بكسل) سريعة الاستجابة
  - عنصر للاقتباس التالي: تجري الكلاب نحوك عند استدعائها. فيما تتلقى القطط رسالة وتعود إليك. --Mary Bly

الصفحة 2: الكلاب

توضح طريقة ترتيب النص وعرض صورة ملء الشاشة بطبقتين.

تحتوي على طبقتين:
- الطبقة 1: تطبِّق النموذج fill وتتضمن amp-img (dog.jpg, 720 x 1280 بكسل) سريعة الاستجابة.
- الطبقة 2: تطبِّق النموذج thirds وتحتوي على عنصرين:
  - عنصر بالاسم: كلاب
  - وعنصر الذي يحدد grid-area التي تحتل lower-third وتتضمن النص التالي: ربما كانت الكلاب هي الحيوانات المروضة الأولى. لقد رافقوا البشر منذ حوالي 10000 عام. ويؤكد بعض العلماء أن جميع الكلاب، المنزلية منها والبرية، تتشارك أسلاف مشتركة من ذئب جنوب آسيا الصغير.

الصفحة 3: الطيور

توضح طريقة ترتيب النص وعرض صورة ملء الشاشة وتوفير صوت خلفية للصفحة.

تحتوي على 3 طبقات:
- الطبقة 1: تطبِّق قالب fill وتتضمن amp-img (bird.jpg, 720 x 1280 بكسل).
- الطبقة 2 تطبِّق القالب vertical وتتضمن:
  - عنصر بالاسم: طيور
- الطبقة 3: تطبِّق القالب vertical وتحتوي على عنصر واحد:
  - عنصر للاقتباس التالي: يتكون الطائر عبارة عن ثلاثة أشياء: الريش، والطيران، والغناء؛ أقلها الريش.--Marjorie Allen Seiffert
  - تحدد الطبقة الثالثة هذه class="bottom" لمحاذاة العناصر التابعة في الجزء السفلي من الشاشة.
تشغِّل ملفًا صوتيًا في الخلفية أثناء عرض الصفحة. ويمكنك تشغيل الصوت في الخلفية للقصة بأكملها أو لصفحة واحدة. لتشغيل ملف صوتي لصفحة، أضف السمة background-audio="assets/bird-singing.mp3" إلى العنصر <amp-story-page>.

الصفحة 4: الأرانب

Demonstrates how to arrange text and display a screen-filling video for the page.

تحتوي على 3 طبقات:
- الطبقة 1: تطبِّق النموذج fill وتتضمن amp-video (rabbit.mp4) سريع الاستجابة.
  - تذكر إضافة النص البرمجي المطلوب لمكون amp-video في قسم الخاص بك ليتسنى ظهور الفيديو.
  - حدد صورة poster (rabbit.jpg). هذه السمة مطلوبة للحصول على قصص AMP صالحة.
  - قم بتعيين ليعمل تلقائيًا باستخدام السمة autoplay. هذه السمة مطلوبة للحصول على قصص AMP صالحة.
  - قم بتعيين الفيديو ليعمل تلقائيًا مرة أخرى على نحو متواصل باستخدام السمة loop.
  - قم بتعيين الأبعاد إلى width="720" height="1280" layout="responsive".
- الطبقة 2 تطبِّق النموذج vertical وتتضمن:
  - عنصر بالاسم: أرانب
- الطبقة 3: تطبِّق النموذج vertical وتتضمن عنصرًا واحدًا:
  - عنصر يحتوي على النص التالي: يمكن للأرانب أن تتعلم اتباع الأوامر الصوتية البسيطة وأن تجري نحوك عند مناداتها بالاسم وتكون فضولية ومرحة.
  - طبِّق فئة CSS bottom على الطبقة لمحاذاة العناصر التابعة في الجزء السفلي من الشاشة.

Our "Joy of Pets" story is nearly complete. We'll use animations in our last page to bring all the pets together.

الفصل السابق الفصل التالي

Written by @bpaduch

{{#initial}}مكونات مهمة{{/initial}}{{^initial}}المكونات{{/initial}}

{{#initial}}<{{title}}>{{/initial}}{{^initial}}{{title}}{{/initial}}

{{#initial}}المقالات الرائجة{{/initial}}{{^initial}}النتائج{{/initial}}

{{title}}

;(

حدث خطأ…

¯\_(ツ)_/¯

لم يتم العثور على نتائج.

إضافة المزيد من الصفحات

الصفحة 1: القطط

الصفحة 2: الكلاب

الصفحة 3: الطيور

الصفحة 4: الأرانب