الدرس الثالث: تصميم الموقع الإلكتروني (١)
انظر إلى الشكل: تصميم موقع إلكتروني ليس عبارة عن كتابة أكواد عشوائية، بل يبدأ بالخطوة الأولى وهي التخطيط، حيث تحدد الهدف والغرض وترسم البنية العامة. الخطوة الثانية هي التصميم، وترسم فيها المخطط العام على الورق للصفحة الرئيسية والفرعية. الخطوة الثالثة هي التنفيذ، وتستخدم فيها برامج مثل فيجوال ستوديو كود لكتابة الأكواد. الخطوة الرابعة هي الاختبار ونشر الموقع على الإنترنت للتأكد من عمل الروابط بشكل صحيح. أما الخصائص التي ينبغي توافرها في الموقع فهي محتوى واضح، ونسق لوني مناسب، وصور ورسوم مناسبة للمحتوى، وتنسيق مناسب للعرض على الهواتف النقالة.
يقوم الدرس على تصميم موقع إلكتروني متكامل عبر تقسيم الصفحة إلى أقسام رئيسية باستخدام وسم التقسم ومحدد الفئة، وربط ملف الأنماط لضبط تنسيقات الألوان والخلفيات وتجاوز السعة ونموذج الصندوق. انظر إلى الصفحة: لإنشاء صفحة مشجعي كرة القدم، أنشئ أربعة أقسام رئيسية وهي رأس الصفحة والمحتوى الرئيسي وألبوم الصور والتذييل، ثم اربط ملف الأنماط style.css داخل وسم الرأس في ملف لغة إعداد النص لتطبيق الألوان مثل تعيين لون الخلفية بالرمز البرمجي ولون الخط وموضع تجاوز السعة تلقائيا ليظهر شريط التمرير.
الفكرة الأساسية
تقسيم الموقع الإلكتروني إلى أجزاء مختلفة وتنسيقها باستخدام لغة الأنماط عبر إنشاء ملف خاص وارتباطه بالصفحة لتنظيم المحتوى وتوزيع الألوان والخلفيات والهوامش بوضوح.
الشرح
تعتمد عملية تصميم المواقع على تنظيم الصفحة أولا عبر تحديد الأجزاء الرئيسية مثل رأس الصفحة والمحتوى الرئيسي والتذييل. استخدم وسم التقسيم لإنشاء أقسام للمحتوى، وامنح كل قسم خاصية الفئة لكي تتمكن من تنسيق عناصرها بسهولة بملف الأنماط. لربط صفحة الأنماط، اكتب رابطا داخل قسم الرأس بهذا الشكل: . لتنسيق عنصر معين يحمل الفئة، ابدأ باسم الفئة مسبوقا بالنقطة، مثل.menu، ثم حدد الخصائص بين قوسين متعرجين مثل لون الخلفية background-color وخاصية تجاوز السعة overflow التي تأخذ قيمة تلقائية auto لتفعيل شريط التمرير عند زيادة المحتوى عن المساحة. أما نموذج الصندوق، فهو يتعامل مع كل عنصر كما لو كان له صندوق خاص للتحكم في الإطار والهمامش والفراغ المحيط بالمحتوى.
مثال محلول خطوة بخطوة
- أنشئ ملفا جديدا للأنماط باسم style.css في مجلد الصفحات داخل برنامج فيجوال ستوديو كود.
- اربط هذا الملف داخل قسم الرأس في صفحة الويب باستخدام الرابط المناسب.
- اكتب كود الأنماط الخاص بالفئة.menu لتغيير لون الخلفية وتفعيل خاصية تجاوز السعة هكذا:.menu { background-color: #426C35; overflow: auto; }
- احفظ الملف وافتح الصفحة في المتصفح لتلاحظ ظهور لون الخلفية الجديد في قسم القائمة.
أخطاء شائعة
- نسيان وضع النقطة (.) قبل اسم الفئة عند كتابة كود الأنماط في ملف الأنماط.
- كتابة رابط ملف الأنماط خارج قسم الرأس في ملف لغة إعداد النص.
- عدم تفعيل خاصية تجاوز السعة للقيمة المناسبة مما قد يتسبب في عدم رؤية باقي المحتوى الزائد.
سؤالان للتدريب مع الإجابة
السؤال الأول: ما هو الوسم المستخدم لإنشاء أقسام للمحتوى في لغة إعداد النص? الإجابة: وسم التقسيم.
السؤال الثاني: ما هي الخاصية المستخدمة للتحكم في لون خلفية العناصر في لغة الأنماط? الإجابة: خاصية لون الخلفية.