تخطيط الموقع بـ CSS
علّم Display و Position الصناديق كيف تجلس وتتراص. تخطيط الموقع يسأل السؤال الأكبر: كيف تتقاسم مناطق الصفحة — الهيدر والتنقل والمحتوى الرئيسي والشريط الجانبي والتذييل — شاشة واحدة بهدوء؟ ارسم الهيكل أولًا؛ Flexbox و Grid سيعمّقان حرفة الأعمدة قريبًا.
مجموعة أدوات مناطق التخطيط
📊 مناطق الصفحة بنظرة سريعة
| المنطقة | المهمة اليومية |
|---|---|
| Header | هوية الموقع، الإجراءات الرئيسية، وأحيانًا البحث |
| Navigation | روابط للأقسام المهمة (غالبًا داخل الهيدر أو تحته) |
| Main | المحتوى الأساسي الذي تدور حوله الصفحة |
| Aside / sidebar | روابط ذات صلة، نصائح، بطاقات ثانوية |
| Footer | ملاحظات قانونية، تنقل ثانوي، أثر الاتصال |
| Container | غلاف max-width يوسّط المحتوى المقروء |
التخطيط الجيد يبدأ بعلامات HTML الدلالية، ثم التباعد والأعمدة في CSS. طلاء كل صندوق بـ position: absolute نادرًا ما يتوسع جيدًا.
هيكل صفحة دلالي
سمِّ المناطق بعناصر حقيقية. الفئات تصقّل المظهر، لكن المعالم تحافظ على صدق البنية للقرّاء والتقنيات المساعدة.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
color: #222;
}
header,
nav,
main,
aside,
footer {
display: block;
}
حاوية max-width موسّطة
الأسطر الطويلة تُتعب العين. لفّ العمود المقروء في حاوية بـ max-width وmargin أفقي auto.
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
أساسيات شريط الهيدر
الهيدر غالبًا يمتد مع الحاوية أو بعرض كامل. حافظ على تباعد متسق واترك تنسيق التنقل العميق للدرس التالي.
.site-header {
padding: 1rem 0;
border-bottom: 1px solid #e5e5e5;
background: #fff;
}
.site-header .brand {
font-weight: 700;
font-size: 1.25rem;
}
مخطط بسيط لعمودين
حتى دروس Flexbox/Grid، يمكن لمخطط float هادئ أن يُظهر main + aside. فضّل تعلّم Flex/Grid لاحقًا لأعمدة الصفحة الحقيقية — هذا جسر، لا خطة أبدية.
.layout {
display: flow-root;
}
.layout__main {
float: left;
width: 68%;
}
.layout__aside {
float: right;
width: 28%;
}
التذييل تحت القصة
بعد أعمدة float، امسح التذييل بـ clear ليسقط تحت العمودين. لاحقًا تخطيطات Flex/Grid تحتفظ بالأعمدة دون عادات clearfix.
.site-footer {
clear: both;
margin-top: 2rem;
padding: 1.5rem 0;
border-top: 1px solid #eee;
font-size: 0.9rem;
color: #555;
}
عادة تخطيط هادئة
المعالم أولًا، الحاوية ثانيًا، التباعد ثالثًا. استخدم float فقط كرسم مؤقت للأعمدة. في الوحدات القادمة اتجه إلى Flexbox و Grid لبنية صفحة متينة — لا أكوام absolute ولا شبكات float أبدية.
.page {
min-height: 100vh;
}
.page__header { /* identity + nav hook */ }
.page__main { /* primary story */ }
.page__aside { /* secondary column */ }
.page__footer { /* closing chrome */ }
جرّب بنفسك
- ابنِ هيكل معالم: header و nav و main و aside و footer.
- لفّ المحتوى في
.containerبـ max-width وهوامش موسّطة. - نسّق شريط هيدر بسيطًا بحشوة وحد سفلي.
- ارسم main + aside بعروض float، ثم امسح التذييل.
- اكتب جملة: لماذا سيحل Flex/Grid محل مخطط float هذا لاحقًا؟
أخطاء شائعة
- وضع absolute لكل عمود في الصفحة
- ترك النص بعرض الشاشة كاملًا بلا max-width
- تخطي المعالم الدلالية لصالح أكوام div بلا اسم
- معاملة هذا الدرس كـ object-fit (إطارات وسائط لا مناطق صفحة)
- شحن شبكات float أبدية بدل تعلّم Flex/Grid التالي
الخلاصة
- تخطيط الموقع يعني تقاسم مناطق الصفحة لشاشة واحدة
- استخدم معالم دلالية مع حاوية max-width موسّطة
- مخطط float لـ main/aside يمكنه توضيح الأعمدة باختصار
- امسح التذييل تحت الـ float؛ فضّل Flex/Grid قريبًا للبنية
- Layout ≠ object-fit — مناطق مقابل ملاءمة وسائط داخل صندوق
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى