چیدمان وب سایت

« صفحهٔ قبل

صفحهٔ بعد »

چیدمان (Layout) وب سایت

یک وب‌سایت اغلب به بخش‌های سر صفحه (Header)، منوها، محتوا و پاورقی (Footer) تقسیم می‌شود:

طراحی‌های گوناگونی از Layout برای استفاده وجود دارد. اما، ساختار بالا، یکی از رایج ترین‌ها است، و ما در این آموزش با آن بیشتر آشنا خواهیم شد.

Header

بخش سر صفحه معمولاً در بالای وب‌سایت (یا گوشه سمت راست پایین منوی navigation) قرار می‌گیرد. اغلب شامل یک لوگو یا نام وب‌سایت است:

نتیجه:

مثال

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

نتیجه:

مشاهدهٔ نتیجه

ناحیه Navigation

ناحیه navigation شامل لیستی از لینک‌ها برای کمک به بازدیدکنندگان برای جابه‌جایی در وب‌سایت است:

مثال

/* The navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Links - change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

نتیجه:

مشاهدهٔ نتیجه

محتوا

چیدمان در این بخش، اغلب به کاربران نهایی بستگی دارد. رایج‌ترین نوع چیدمان یکی ( یا ترکیبی) از موارد زیر است:

• ۱ - ستونه (اغلب برای مرورگرهای موبایل استفاده می‌شود)
• ۲ - ستونه (اغلب برای تبلت‌ها و لب تاب‌ها استفاده می‌شود)
• چیدمان ۳ - ستونه (تنها برای رایانه‌های pc استفاده می‌شود)

یک چیدمان سه ستونه خواهیم ساخت، و آن را برای صفحه نمایش‌های کوچک به یک ستونه تبدیل خواهیم کرد:

مثال

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

نتیجه:

مشاهدهٔ نتیجه

نکته: برای ساخت یک چیدمان ۲ ستونه، عرض را به ۵۰٪ تغییر دهید. برای ساخت یک چیدمان ۴ ستونه، از ۲۵٪ استفاده کنید.

نکته: آیا می‌خواهید بدانید چگونه قوانین @media کار می‌کند؟ می توانید مطالب بیشتری را در این‌باره در فصل Media Querieها در CSS بخوانید.

نکته: یک روش جدیدتر برای ساختن Layout ستون‌ها، استفاده از Flexbox در CSS است، اما هنوز در Internet Explorer 10 و نسخه های قدیمی تر پشتیبانی نمی‌شود. اگر پشتیبانی از IE6-10 را نیاز دارید (همانند آنچه در بالا گفته شد) از floatها استفاده کنید.

برای یادگیری بیشتر در مورد مدل چیدمان جعبه انعطاف‌پذیر، فصل Flexible را مظالعه کنید.

ستون های نابرابر

محتوای اصلی بزرگترین و مهمترین بخش سایت است.

استفاده از عرض‌های غیریکسان برای ستون‌ها رایج است، بنابراین بیشتر فضا برای محتوای اصلی رزرو می‌شود.
محتوای جانبی (side content) (در صورت وجود) اغلب به عنوان یک ناحیهٔ navigation جایگزین یا برای مشخص کردن اطلاعات مربوط به محتوای اصلی استفاده می‌شود.
عرض را به هر مقداری که دوست دارید تغییر دهید، تنها به یاد داشته باشید که مجموع آنها در کل 100% باشد:

مثال

.column {
  float: left;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

نتیجه:

مشاهدهٔ نتیجه

Footer (به فارسی: پاورقی)

Footer در پایین صفحه قرار می‌گیرد. اغلب شامل اطلاعاتی مانند کپی‌رایت و اطلاعات تماس است:

مثال

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

نتیجه:

مشاهدهٔ نتیجه

چیدمان واکنش گرای وب‌سایت

با استفاده از برخی از کدهای CSS بالا، ما یک Layout واکنش گرای وب‌سایت ساخته‌ایم، که با توجه به عرض صفحه نمایش بین حالت دو ستونه و حالت تمام عرض تغییر می‌کند:

مشاهدهٔ نتیجه

« صفحهٔ قبل

صفحهٔ بعد »