الدرس الثالث: تصميم الموقع الإلكتروني (٢)

يقوم الدرس على تطبيق خصائص تنسيق صفحات الويب باستخدام لغة CSS، وتحديداً التحكم في محاذاة العناصر، والمسافات عبر الحدود والهوامش، وتنسيق الصور بخصائص مثل نصف قطر الإطار لتغيير حوافها، إضافة إلى تنسيق أشرطة التصفح والقوائم التفاعلية لتتغير ألوان أزرارها عند تمرير الفأرة عليها. فمثلاً، إذا أردت جعل زوايا الصورة دائرية، فاستخدم خاصية نصف قطر الإطار بقيمة محددة مثل ستة بكسل لتظهر الحواف بانحناء جميل ومميز داخل الصفحة.

الفكرة الأساسية

تعتمد الفكرة على تحويل صفحات الويب البسيطة إلى مواقع جذابة ومنظمة باستخدام قواعد تنسيق لغة CSS، عبر ضبط الهوامش، والحدود، والفراغات، وتنسيق الصور، وأشرطة التنقل لتصبح تفاعلية وسهلة الاستخدام.

الشرح

ابدأ بتطبيق خصائص الهوامش والحدود والفراغات لإنشاء مساحات مناسبة بين العناصر داخل الصفحة. لتنسيق الصور، حدد حجمها ومحاذاتها، واستخدم خاصية نصف قطر الإطار لتغيير مظهر حوافها لتصبح دائرية عند ضبط القيمة مثل ستة بكسل، مع استخدام خصائص التغطية والموضع. لتنسيق شريط التصفح، اجعل عناصر القائمة تظهر في سطر واحد باستخدام خصائص العرض، وحدد ألوان الخلفية والنصوص، وقم بتفعيل تأثير تغيير اللون عند تمرير الفأرة عليها عبر إضافة خاصية التمرير للحصول على تفاعل بصري واضح.

مثال محلول خطوة بخطوة

لتنسيق قسم الصور بحيث تظهر بحدود ملونة وزوايا دائرية: ١. اكتب محدد قسم الصور والصور داخله هكذا:.photos img ٢. حدد نوع الحد بلون صلب، وعرض اثنين بكسل، ولون محدد. ٣. اجعل زوايا الصورة دائرية بكتابة خاصية نصف قطر الإطار بقيمة ستة بكسل. ٤. أضف هامشاً بقيمة اثنين بكسل لتوفير مسافة فاصلة. ٥. حدد كيفية تغطية الصورة داخل الحيز المخصص لها لتظهر بشكل متناسق.

أخطاء شائعة

استخدام أرقام كبيرة جداً عند تغيير خصائص نموذج الصندوق، مما يتسبب في تشوه مظهر الصفحة الإلكترونية بالكامل.

سؤالان للتدريب مع الإجابة

س١: كيف تجعل عناصر القائمة في شريط التصفح تظهر في سطر واحد؟ ج١: باستخدام خاصية العرض وقيمتها. س٢: ما الخاصية المستخدمة لتغيير مظهر حواف الصورة لتصبح دائرية؟ ج٢: خاصية نصف قطر الإطار.