القسم الثالث من دورة المبتدئين
أهلاً بكم في القسم 3 من دورة تدريب موقع الويب للمبتدئين.
بعد إكمال هذا القسم، سوف تكون قادرًا على:
- قم بتغيير الخطوط العامة المعروضة على موقعك الإلكتروني
- تغيير الخطوط في صفحة معينة من موقعك الإلكتروني
- قم بتغيير الألوان العامة المعروضة على موقعك الإلكتروني
- تغيير الألوان في صفحة معينة من موقعك الإلكتروني
تغيير نوع الخط وحجمه
يمكنك تغيير نوع وحجم الخط من خلال خيار "التصميم" في القائمة (لكامل الموقع) أو في كل صفحة (لكل صفحة على حدة). سنركز أولًا على خط الموقع بأكمله. من قائمة "التصميم"، اختر "الألوان والخطوط".
مرر لأسفل الصفحة حتى ترى خيارات مربع الخطوط. هنا يمكنك تعديل: الخط العام، وخط العناوين، وحجم الخط، وارتفاع السطر.
لاختيار خط جديد، انقر على الزر الأزرق "اختيار الخط". في هذا المثال، سنقوم بتعديل الخط الرئيسي (عام) وحجم الخط إلى الخيار Arial، Helvetica، URW Gothic L، sans-serif، وبحجم 16 بكسل.
ستجد أيضًا مربعًا بعنوان "الخطوط المخصصة (بيانات التعريف المضمنة)". هنا يمكنك لصق الكود المحدد من خطوط جوجل، وهو ما سنفعله لعنوان الخط. للقيام بذلك، افتح علامة تبويب جديدة في المتصفح، ثم انتقل إلى خطوط جوجل ابحث عن خط Merriweather على الموقع الإلكتروني، ثم حدده، وسيعرض لك موقع Google Fonts شيئًا كهذا:
يجب نسخ الكود الموجود أسفل "Standard @ Import" ثم لصقه في مربع "Custom Fonts". انقر على "تحرير" في مربع "Custom Fonts"، ثم الصق الكود أسفل الكود الموجود كما يلي:
انقر على زر "حفظ التغييرات" ثم أغلق المحرر. بعد ذلك، انسخ نص عائلة الخط والصقه في مربع "الخط (العناوين)"، كما هو موضح في الصورة أدناه، ثم اضغط على "نشر" لحفظ عملك حتى الآن.
تغيير الخط في صفحة ويب محددة
افتح صفحة الشروط والأحكام الخاصة بك، حيث سنقوم بتغيير نوع الخط وحجمه لهذه الصفحة فقط.
أولاً، حدد العنوان الفرعي "سياسة الإرجاع"، ثم انقر على السهم المنسدل بجوار مربع "نوع الخط" في شريط أدوات التحرير. لاحظ أن هذا سيبدو مختلفًا إذا كنت تستخدم محررًا آخر غير المحرر الذي نستخدمه حاليًا، TinyMCE3510 (يمكنك رؤية اسم المحرر الحالي في الزاوية العلوية اليمنى، وتغيير وضع التحرير).
اختر خط Comic Sans MS، وسيتحول النص المحدد فقط إلى هذا الخط، بينما يبقى باقي الصفحة كما هو. حدد نص "سياسة الإرجاع" مرة أخرى، ثم انقر على السهم المنسدل بجوار "حجم الخط"، واختر خيار 24 نقطة. ستلاحظ أيضًا أن هذا العنوان كان افتراضيًا من نوع H3 (عنوان من المستوى 3)، وهو مناسب لهذه الصفحة. تبدو صفحة الشروط والأحكام الآن كما يلي (انظر السهم الأحمر - حيث يكون العنوان الفرعي أكبر وبخط مختلف):
تغيير الألوان العامة لموقعك الإلكتروني
لتغيير الألوان العامة لموقعك الإلكتروني بالكامل، انتقل إلى تبويب "التصميم"، ثم اختر خيار "الألوان والخطوط". بمجرد دخولك إلى صفحة "خيارات التصميم"، ستتمكن من تعديل الألوان للعديد من أقسام موقعك الإلكتروني.
تُعطى الألوان رمزًا سداسيًا أو رقمًا لونيًا، مما يجعلها أكثر تحديدًا من مجرد تسميتها "أزرق داكن" مثلًا. يمكنك إدخال رمزك السداسي في المربع المجاور للعنصر الذي تريد تغيير لونه، ثم النقر في مربع آخر لحفظه. أو يمكنك النقر على زر "اختيار اللون" ثم اختيار لون يدويًا من معالج الألوان، ثم اختيار زر "استخدام اللون".
هام - دوّن رمز اللون السداسي العشري لكل لون من اختياراتك في مكان آمن مثل مفكرة أو ملف على جهازك، حيث سيساعدك هذا إذا احتجت إلى تعديل تصميم موقعك الإلكتروني. (كما هو الحال في القسم الأول من دورة المستوى المتوسط).
وهذه هي الألوان التي اخترناها للاستخدام:
احفظ عملك بالنقر على زر "حفظ التغييرات" ثم زر "نشر".
تغيير لون النص في صفحات الويب الفردية
افتح صفحة الشروط والأحكام مرة أخرى. ستجد أن لون العنوان قد تغير وفقًا للون الذي اخترته في خيارات التصميم. هذا تغيير شامل للموقع.
لكن من الممكن تغيير لون النص في صفحة محددة، وهذا ما سنفعله الآن. حدد عنوان "سياسة الإرجاع"، ثم اختر القائمة المنسدلة بجوار أيقونة "لون النص". سيؤدي هذا إلى فتح مجموعة ألوان محددة مسبقًا للاختيار من بينها، بالإضافة إلى إمكانية اختيار ألوان أخرى بالنقر على خيار "ألوان إضافية".
في هذا المثال، سنختار خيار "ألوان إضافية"، ثم ندخل رمز اللون السداسي العشري #0628f8 في خانة اللون، ثم نضغط على زر "تطبيق". سيتغير لون العنوان ليصبح كما يلي:
انقر على زر "حفظ التغييرات" ثم زر "نشر" لحفظ عملك حتى الآن.
تهانينا، لقد أتممتَ للتوّ القسم الثالث من دورة المستوى المبتدئ. يوجد الآن تقييمٌ عليك إكماله، وهو التقييم الأول، ويستخدم المهارات التي تعلمتها في الأقسام الأول والثاني والثالث من هذه الدورة. يجب إكمال هذا التقييم بنجاح للحصول على شهادتك، وسيقوم أحد أعضاء فريق دعم موقع Website World بتقييمه.
