چیدمان وب سایت (Website Layout)
چیدمان وب سایت یعنی چطور بخش ها کنار هم قرار می گیرند. در چیدمان وب سایت معمولاً «هدر (Header)»، «منو (Navigation)»، «محتوا (Content)» و «فوتر (Footer)» داریم. با CSS می توانیم این بخش ها را ساده و واکنش گرا کنیم.
هدر ساده در بالا
هدر معمولاً بالای صفحه است. معمولاً لوگو یا نام سایت داخل آن است.
header {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
}
نوار ناوبری با فهرست لینک ها
نوار ناوبری، لیستی از لینک هاست. کاربر را بین صفحات جابه جا می کند.
ul.topnav {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
}
ul.topnav li a {
display: block;
color: #f1f1f1;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover {
background-color: #dddddd;
color: black;
}
چیدمان ستونی واکنش گرا
واکنش گرا یعنی ظاهر با عرض صفحه تغییر کند. با «فلکس باکس (Flexbox)» و «مدیا کوئری (Media Query)» ستون ها را تنظیم کن.
div.flex-container {
display: flex;
flex-direction: row;
}
div.flex-container > div {
margin: 10px;
}
@media screen and (max-width: 600px) {
div.flex-container {
flex-direction: column;
}
}
نکته: برای ادامه چیدمان وب سایت در موبایل، صفحه طراحی واکنش گرا را هم ببین.
فوتر پایه
فوتر پایین صفحه است. معمولاً کپی رایت و راه های تماس آنجاست.
footer {
background-color: #f1f1f1;
text-align: center;
padding: 8px;
}
فوتر ثابت همیشه نمایان
گاهی می خواهی فوتر همیشه دیده شود. پس آن را ثابت کن.
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #f1f1f1;
padding: 8px;
text-align: center;
z-index: 1000;
}
گام های عملی سریع
- یک هدر ساده بساز.
- منوی افقی با flex بساز.
- ستون ها را با مدیا کوئری تغییر بده.
- فوتر پایه را اضافه کن.
- در صورت نیاز، فوتر را ثابت کن.
جمع بندی سریع
- چیدمان وب سایت را بخش بندی کن.
- منو را ساده و قابل کلیک بساز.
- ستون ها در موبایل یک ستونه شوند.
- فوتر اطلاعات مهم را نگه دارد.