تخصيص صفحَات الويب

مكتمل

فِي هَذا التمرين، ستقوم بتخصيص صفحَات الويب باتباع الخطوَات التَالِية.

1. إذَا لم يكن مفتوحًا بالفعل، فافتح Power Pages maker portal.

2. فِي الزَاوية العلوية اليمِنى، تحقق مِن أنك لست فِي البيئة الافترَاضية وأنك فِي بيئة Dataverse الخَاصة بك.

   

3. فِي الصَفحَة الرئيسية، ضِمِنَ المواقع النشطة، حدد موقع Power Pages الذي قمت بإنشَائه مسبقًا، ثم حدد تحرير.

   

4. ضِمِنَ استوديو التصميم، ضِمِنَ قسم الصفحَات، حدد الصَفحَة الرئيسية.

   

5. قم بتمرير مؤشر المَاوس فوق القسم الموجود أسفل الرأس مباشرة ثم حدده. حدد تخطيط ثم حدد التخطيط الخَامس، الثلث الأيمِن. نريد أن تشغل الصورة ثلثي هَذا القسم، وبهذه الطريقة يمكننَا إدرَاج نَص عَلى اليسَار.

   

6. حدد الصورة فِي العمود الثَاني، ثم حدد صورة > تحميل صورة. استعرض للوصول إلى مجلد صور موقع CC فِي ملفات الطلبة لديك، وقم بتحميل hero.png

   • (يمكن العثور عليه مِن خلال الانتقَال إلى مجلد صور موقع: CC: '1. Dev Resources and Solution Packages\Graphical Resources\CC site images.)

   

7. حدد مُوَافق.

   ملاحظة

   إذَا كنت تستخدم قَالبًا آخر غير Template 1، فقم بإزَالة أي أقسَام أو عنَاصر إضَافِية لا تحتَاج إليهَا بَعد إجرَاء التغييرَات المطلوبة التَالية.

8. فِي العمود الأول، اختر أو قم بإضَافَة مكون نَص ليتم تحويله إلى العنوان لديك. قم بتحرير نَص المكون ليطَابق النَص التَالي: تجهيزك لتحضير الشرَاب بشكل مثَالي. قم بتغيير النمط إلى العنوان 1 ولون الخط إلى الأسود.

   

9. حدد علامة الجمع (+) الموجودة أسفل النَص ثم قم بإضَافَة مكون نَص، أو قم بتحرير مكون النَص الموجود أسفل العنوان الخَاص بك.

   

10. أضف نَصًا وصفِيًا، مثل مهمتنَا هي إنتَاج آلات إسبرسو استثنَائية توفر باستمرَار درجة الحرَارة والقوة والرغوة المِثَالية لإرضَاء ذوق أي محب للقهوة. تغيير الخط إلى الفقرة، ولون الخط إلى الأسود.

    

    قد تتسبب مجموعة الألوان الحَالية فِي إجهَاد العين عندمَا يحَاول ‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫المُستَخدِمون قرَاءة العنوان، وقد يصعب رؤية حواف الزر الذي نخطط لإضَافته. لإصلاح ذلك، نحتَاج إلى خيَار مجموعة ألوان يسهل عَلى ‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫المُستَخدِمين قرَاءتهَا.

11. لتسهيل قرَاءة النَص عَلى ‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫المُستَخدِمين، قم بتغيير لون خلفِية القسم الحَالي إلى اللون الأبيض.

    

12. إذَا لزم الأمر، حدد علامة الجمع (+) الموجودة أسفل النَص ثم قم بإضَافَة زر جَديد، أو حدد الزر الموجود أسفل الفقرة الموجودة.

    

13. قم بتعيين تسمية الزر إلى إنشَاء حسَاب مورد. حدد الخيَار رابط إلى عنوان URL، ثم أضف /Account/Login/Register?returnUrl=%2F فِي مربع النَص. وأخيرًا، قم بتعيين الزر Style إلى ثَانوي.

    

14. حدد مُوَافق. 

15. إذَا لم يكن هنَاك عمود بالفعل، فحدد علامة الجمع (+) ثم أضف فاصلًا أسفل القسم الذي يحتوي عَلى العمودين. حدد تحرير الخلفِية عَلى مكون الفاصل.

    

16. حدد علامة التبويب صورة، ثم حدد ‏إضَافَة صورة. قم بتحميل الصورة spacer.png، والتي يمكنُك العثور عليهَا فِي مجلد صور موقع CC فِي ملفات الطلبة لديك.

    

17. حدد أيقونة الترس الموجود عَلى يمين تحرير الخلفِية، ثم قم بتعديل ارتفاع الفاصل إلى 25 بكسل.

    

18. يمكنُك تخصيص الأقسَام الأخرى إذَا أردت، أو يمكنُك إزَالتهَا.