چیدمان وب‌سایت با CSS
درس‌های Display و Position گفتند جعبه چطور بنشیند و لایه بگیرد. چیدمان وب‌سایت سؤال بزرگ‌تری می‌پرسد: نواحی صفحه — هدر، نویگیشن، داستان اصلی، سایدبار، فوتر — چطور یک صفحه را آرام تقسیم کنند؟ اول اسکلت را بکشید؛ Flexbox و Grid به‌زودی ستون‌سازی را عمیق‌تر می‌کنند.
جعبهٔ ابزار نواحی چیدمان
📊 نواحی صفحه یک‌نگاهه
| ناحیه | کار روزمره |
|---|---|
| Header | هویت سایت، اقدام اصلی، گاهی جستجو |
| Navigation | پیوند به بخش‌های مهم (اغلب داخل یا زیر هدر) |
| Main | محتوای اصلی که صفحه درباره‌اش است |
| Aside / sidebar | پیوند مرتبط، نکته، کارت فرعی |
| Footer | نکتهٔ حقوقی، نویگ فرعی، ردپا تماس |
| Container | پوشش max-width که محتوای خوانا را وسط می‌چیند |
چیدمان خوب از landmarkهای HTML شروع می‌شود، بعد فاصله و ستون با CSS. رنگ‌کردن هر جعبه با position: absolute معمولاً مقیاس‌پذیر نیست.
اسکلت معنایی صفحه
نواحی را با عنصر واقعی نام بگذارید. کلاس ظاهر را ریز می‌کند، ولی landmark ساختار را برای خواننده و فناوری کمکی صادق نگه می‌دارد.
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 float ستون‌ها را مهار می‌کند.
.site-footer {
clear: both;
margin-top: 2rem;
padding: 1.5rem 0;
border-top: 1px solid #eee;
font-size: 0.9rem;
color: #555;
}
عادت آرام چیدمان
اول landmark، دوم ظرف، سوم فاصله. float را فقط اسکچ موقت ستون بدانید. برای ساختار پایدار صفحه در ماژول‌های بعد سراغ Flexbox و Grid بروید — نه تودهٔ absolute و نه شبکهٔ ابدی float.
.page {
min-height: 100vh;
}
.page__header { /* هویت + قلاب نویگ */ }
.page__main { /* داستان اصلی */ }
.page__aside { /* ستون فرعی */ }
.page__footer { /* کروم پایانی */ }
خودتان امتحان کنید
- اسکلت landmark بسازید: header، nav، main، aside، footer.
- محتوا را در
.containerبا max-width و margin وسط بپیچید. - نوار هدر ساده با padding و حاشیهٔ پایین استایل کنید.
- main + aside را با عرض float اسکچ کنید، بعد فوتر را clear کنید.
- یک جمله بنویسید: چرا بعداً Flex/Grid جای این اسکچ float را می‌گیرد؟
اشتباه‌های رایج
- absolute کردن هر ستون صفحه
- رها کردن متن در عرض کامل viewport بدون max-width
- رد کردن landmark معنایی به‌نفع تودهٔ div بی‌نام
- دیدن این درس مثل object-fit (قاب رسانه، نه نواحی صفحه)
- فرستادن شبکهٔ ابدی float بدون یادگیری Flex/Grid بعدی
جمع‌بندی
- چیدمان وب‌سایت یعنی نواحی صفحه که یک صفحه را تقسیم می‌کنند
- از landmark معنایی به‌علاوهٔ ظرف max-width وسط‌چین استفاده کنید
- اسکچ float برای main/aside می‌تواند ستون را کوتاه نشان دهد
- فوتر را زیر float clear کنید؛ به‌زودی Flex/Grid را برای ساختار ترجیح دهید
- Layout ≠ object-fit — نواحی صفحه در برابر جا شدن رسانه داخل جعبه
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود