سمات المدخل
يستخدم Power Pages إطار Bootstrap للواجهة الأمامية للتحكم فِي تصميم وتخطيط موقع الويب. Bootstrap عبارة عن حزمة من قوالب تصميم HTML وأوراق الأنماط المتتالية (CSS) لأسلوب الطباعة والنماذج والأزرار والتنقل وعناصر أخرى، بالإضافة إلى ملحقات JavaScript الاختيارية. واحدة من العديد من الميزات الجذابة التي يقدمها Bootstrap خارج الصندوق هو تصميمه المتجاوب، والذي يقوم تلقائياً بضبط موقع الويب الخاص بك للحصول على مظهر جميل من الناحية الجمالية على جميع الأجهزة، من الهواتف الصغيرة إلى أجهزة الكمبيوتر المكتبية الكبيرة.
أساسيات السمة
تحدّد السمة مظهر كل صفحات الويب فِي موقع الويب لضمان التناسق المرئي. يتحكم النسق فِي البنية التنقلية والشعار والألوان والخطوط والعناصر المرئية الأخرى لصفحة الويب.
يمكنك تنفيذ قوالب الويب المضمنة فِي Power Pages باستخدام مكونات Bootstrap القياسية مع الحد الأدنى من الأنماط المخصصة الأخرى. لذا، يمكن لمواقع الويب التي تعتمد على هذه القوالب الاستفادة من خيارات التخصيص التي يوفرها Bootstrap. يمكنك تخصيص السمة بطريقة يتم تطبيقها باستمرار على موقع الويب بالكامل.
CSS على صفحات الويب
أوراق الأنماط المتتالية (CSS) هي لغة تحدّد نمط صفحة الويب من خلال وصف كيفية عرض عناصر HTML الخاصة بها، بما فِي ذلك النصوص والخطوط والألوان والخلفيات والحدود والهوامش.
يمكن أن يكون إجراء تغييرات فِي نمط صفحات موقع الويب الخاص بك بسيطاً مثل تطبيق عبارات CSS مباشرة على الصفحة. عندما تقوم بتحرير محتوى الصفحة باستخدام Visual Studio Code، CSS يتوفر كملف منفصل. ثم يتم تخزين محتوى هذا الملف فِي العمود المخصص CSS لصف صفحة الويب. يتم تضمين CSS وجزء من الصفحة، ويتم تطبيق الأنماط تلقائياً. على سبيل المثال، إذا كنت بحاجة إلى زيادة ارتفاع شريط التنقل فِي الجزء العلوي من الصفحة الرئيسية لملاءمة شعار، فيمكنك تحرير CSS الملف وإضافة عبارة CSS مخصصة.
.navbar-static-top.navbar { min-height: 100px; }
ملاحظة
يتم تطبيق عبارات CSS التي تمت إضافتها مباشرةً إلى صفحة ويب على صفحة الويب هذه فقط.
تعمل هذه العملية لإجراء تعديلات صغيرة على صفحة واحدة أو عندما تتطلب الصفحة تصميماً فريداً، على سبيل المثال، صفحة مقصودة لحدث معين. تتمثل الطريقة الأفضل والأكثر مرونة فِي تسجيل التخصيصات فِي ملف CSS واحد أو أكثر ثم تطبيقها على موقع الويب بأكمله أو أجزاء منه.
تطبيق التخصيصات
يقدم Power Pages مجموعة شاملة من السمات والأدوات لتصميم موقع الويب الخاص بك. اختر من بين العديد من السمات لاستخدامها على موقع الويب الخاص بك وقم بإضفاء الطابع الشخصي عليها باستخدام خيارات التصميم.
تتحكم مساحة عمل التصميم فِي استوديو تصميم Power Pages فِي أنماط CSS التي يتم تطبيقها على موقع الويب، وتمكنك من تنفيذ تصميمات مواقع عالمية. يمكنك دمج تعديلات العلامة التجارية للشركة وعرض التعديلات فِي إصدار أولي الجانب الأيمن لنافذة التطبيق. يوفر التصميم سمات متعددة مصممة مسبقاً، ولكل منها، يمكنك تعديل نظام الألوان ولون الخلفية وأنواع الخطوط وتصميمات الأزرار وتباعد الأقسام.
السمات
تُنشئ النُسق مظهراً وسلوكاً شاملين للموقع عن طريق تحديد أنماط لعناصر نصية متنوعة وأزرار وارتباطات وتخطيطات أقسام. إذا كان الموقع يتطلب المزيد من التخصيصات، فيمكنك استخدام ميزة إدارة CSS.
في مساحة عمل الأنماط، يمكنك الاختيار من بين السمات المتاحة. بعد تحديد سمة، يمكنك تخصيص عناصر فردية بشكل أكبر لإنشاء التصميم المطلوب.
إدارة CSS
للوصول إلى ميزة إدارة CSS، حدّد علامة الحذف (...) ثم حدّد إدارة CSS فِي اللوحة.
تحتوي جميع مواقع ويب Power Pages على الملفات التالية مضمنة بالفعل فِي جميع الصفحات: bootstrap.min.css, theme.css وportalbasictheme.css. تحدّد هذه الملفات أنماطاً لموقع الويب بالكامل. يمكنك تحميل المزيد من ملفات CSS باستخدام الارتباط تحميل ثم التحرير فِي محرر Visual Studio Code. لمزيد من المعلومات، راجع إدارة ملفات CSS فِي Power Pages.
تحتاج إلى التفكير فِي النهج الذي يجب اتباعه لإجراء تعديلات على النمط لموقع الويب الخاص بك:
- أنشئ تصميماً كاملاً للموقع بالكامل ثم استبدل محتوى ملف CSS. تعمل هذه العملية بصورة جيدة إذا كنت تمتلك حق الوصول إلى مصممين بمستوى جيد يمكنهم ضمان تحديد جميع العناصر ذات الصلة. ينشئ هذا النهج تصميماً يتم التحكم فيه مركزياً ويضمن الاتساق فِي جميع جوانب موقع الويب.
- إعادة تعريف العناصر التي تتطلب تعديلات فقط، مثل الألوان وحجم الخط. قم بإنشاء ملف CSS وتحميله حيث يحتوي فقط على هذه التسويات المتزايدة. تعمل هذه العملية بشكل جيد إذا كان تصميمك المستهدف قريباً من التصميم المضمن فِي القالب المحدّد والمطلوب فقط تعديلات طفيفة على التصميم. يسمح هذا الأسلوب بالتعديلات الإضافية التي يمكنك التراجع عنها.
التحذير
إذا قررت الكتابة فوق ملفات bootstrap.min.css أو theme.css، فتأكد من تنزيل نسخة احتياطية من هذه الملفات قبل استبدالها. إذا كان CSS البديل الخاص بك غير صالح أو غير مكتمل، فقد لا تتمكن من التراجع عن الاستبدال. وبالتالي، ستحتاج إلى استعادة محتوى هذه الملفات إذا أصبح موقع الويب غير فعال.
تعديلات CSS المترجمة
بدلاً من تطبيق CSS على الموقع بأكمله، يمكنك تحميل CSS كملفات ويب باستخدام تطبيق إدارة المدخل. ينطبق CSS الموجود فِي ملف الويب على الصفحة الأصلية للملف وجميع العناصر المتفرعة من تلك الصفحة، مما يتيح لك إمكانية إنشاء أقسام مخصصة بالكامل من موقعك.
على سبيل المثال، إذا كنت تريد تطبيق نمط مختلف على قسم الأخبار الخاص بك وجميع المقالات الجديدة الموجودة تحته، فانتقل إلى الأخبار، وأنشئ ملف ويب فرعياً بامتداد .css، ثم قم بتحميل ملف CSS (الاسم لا يهم). بعد ذلك، سيتم تطبيق النمط على قسم الأخبار ومحتوياته فقط.
هام
يجب أن ينتهي عنوان URL الجزئي بـ .css حتى يتعرف موقع الويب عليه ويطبقه على صفحة الويب وصفحاتها الفرعية.
تخصيص تمهيد التشغيل
الطريقة القياسية لإنشاء إصدار مخصص من Bootstrap هي من خلال موقع Bootstrap الرسمي. ومع ذلك، نظراً لشعبية Bootstrap، تم أيضاً إنشاء العديد من مواقع المصدر الأخرى المخصصة لهذا الغرض. قد توفر هذه المواقع واجهة أكثر سهولة فِي الاستخدام لتخصيص Bootstrap أو إصدارات مصممة مسبقاً من Bootstrap لتنزيلها. يحتوي موقع تخصيص Bootstrap الرسمي على مزيد من المعلومات حول تخصيص Bootstrap.
تلميح
عندما تقوم بتخصيص Bootstrap، حدّد فقط العناصر التي تتطلب التعديل. على سبيل المثال، إذا كنت ترغب فقط فِي استبدال الخطوط بالخطوط القياسية لشركتك، فحدّد مكونات أسلوب الطباعة لـ Bootstrap، مما يقلل من فرص إعادة كتابة عناصر CSS الأخرى.
بعد أن قمت بتخصيص Bootstrap، فإنه سينشئ ملفاً واحداً أو أكثر تريد تحميله كملفات ويب. ما لم يكن هدفك هو استبدال الأنماط الأصلية تماماً، فتأكد من أنك لا تستخدمها bootstrap.css, bootstrap.min.css, theme.css, أو theme.min.css فِي عناوين URL الجزئية بسبب كيفية تعامل Power Pages مع ملفات CSS متعددة.