التمرين - تحرير الصفحَات
الغرض من هذا التدريب العملي على المختبر هو إنشاء صفحة ويب وتحرير التعليمات البرمجية المصدر باستخدام استوديو تصميم Power Pages.
في نهاية هذه التدريبات، يمكنك:
- افتح استوديو تصميم Power Pages لتحرير المدخل الخاص بك.
- إنشَاء صفحة جَديدة باستخدَام قَالب قيَاسي.
- عرض التعليمَات البرمجية المصدر للصفحة.
- إضافة تعليمة HTML البرمجية المخصصة مباشرةً.
لهذا التمرين، تحتاج إلى العناصر التالية:
- موقع Power Pages تم توفيره في بيئتك. إذا لم يكن لديك موقع Power Pages متوفر، فاتبع إرشادات إنشاء مواقع Power Pages وإدارتها لإنشاء موقع.
السيناريو
لتحسين تجربة موقع الويب للزوار، تحتاج في بعض الأحيان إلى إضافة محتوى HTML مخصص إلى صفحة. في هذا التمرين، يمكنك إضافة تعليمات HTML البرمجية التي تنشئ تنبيها قابلا للتجاهل. تتضمن التعليمات البرمجية أيضا جزءا صغيرا في لغة Liquid لإنشاء تحية ديناميكية للزائر.
الخطوات عالية المستوى
- افتح المدخل الخاص بك في استوديو تصميم Power Pages.
- قم بإنشَاء صفحة ويب هبوط جَديدة.
- قم بتحرير الصفحة، وأضف فاصلاً وعنصرَاً نَائباً للمحتوى، ثم أضف رمز HTML.
- احفظ الصفحة واستعرض الموقع لعرض النتائج.
الخطوات التفصيلية
تشغيل استوديو تصميم Power Pages
سجل الدخول إلى Power Pages.
حدّد بيئة مُستهدفة باستخدَام مُحدّد البيئة فِي الزاوية العلوية اليُمنى.
حدد موقعك، ثم حدد تحرير لبدء تشغيل استوديو التصميم.
تأكد مِن تحديد مسَاحة عَمل Pages.
إنشَاء صفحة ويب
- حدد + صفحة.
- أدخل اسم صفحة.
- حدد تخطيط الصفحة المقصودة القياسي، ثم حدد إضافة.
تحرير الصفحة
حدّد الزر الأول فِي الصفحة. اضغط على علامة الجمع (+)، ثم حدد عنصر Spacer . يضيف هذا الأمر مسافة صغيرة قبل المحتوى المخصص.
حدد مفتاح المسافة، واضغط على علامة الجمع (+)، ثم حدد عنصر النص . يضيف هذا الأمر عنصرًا نائبًا لمحتواك المخصص.
يجب أن تبدو الصفحة الخاصة بك كمَا يلي:
اضغط على تحرير التعليمات البرمجية لفتح الصفحة في تعليمة Visual Studio برمجية لمحرر ويب.
عند المطالبة، حدد افتح تعليمة Visual Studio برمجية:
يؤدي اختيار هذا الخيار إلى فتح نافذة جديدة أو علامة تبويب بـ تعليمة Visual Studio برمجية للويب. حدد موقع عنصر النص الذي أنشأته سابقا باستخدام الكلمات
Enter text:
انسخ التعليمات البرمجية التالية والصقها في مصدر الصفحة، واستبدل
<p>Enter text</p>المحتوى:<div role="alert" class="alert alert-info alert-dismissible"> <button type="button" data-bs-dismiss="alert" aria-label="Close" class="close"><span aria-hidden="true">×</span></button> <strong>Happy <span>{{ now | date: 'MMMM' }}</span>!</strong> Get your unlimited free education at <a href="https://learn.microsoft.com/">Microsoft Learn</a> </div>يجب أن يبدو المحتوى الآن كما يلي:
اضغط على Ctrl-S (⌘-S على نظام التشغيل macOS) لحفظ الملف.
قم بالتبديل إلى نافذة استوديو التصميم. اضغط على الزر Sync لمزامنة المحررين وإظهار المحتوى المحدث على اللوحة:
تظهر التغييرات على لوحة استوديو التصميم. اضغط على الزر معاينة في الزاوية العلوية اليسرى، ثم حدد سطح المكتب.
تفتح صفحتك المخصصة مع تنبيه قابل للتجاهل.
تأكد مِن أن التحية تتضمِن الشهر الحَالي.
اضغط عَلى الرمز (x) لرفض التنبيه.