آموزش چینش وب سایت در CSS

یک وب سایت، اغلب به بخش های هدرها(header)، منوها(menu) و فوتر(footer) تقسیم می شود:

برای چینش یک سایت، هزاران طرح وجود دارد. اما ساختار بالا، یکی از متداول ترین چینش ها است و در این مقاله آن را به طو دقیقتری بررس خواهیم کرد.

بررسی هدر(Header)

معمولاً یک هدر(header) در بالای یک وب سایت قرار می گیرد. که اغلب شامل یک لوگو یا نام یک وب سایت است. 

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

 بررسی منوی افقی(Navigation Bar)

یک منوی افقی، یک لیست از لینک ها است که به کاربران کمک می کند به صفحاتی از سایت منتقل شوند.

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

/* لینک های منو */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* می شود، رنگ  اش تغیی می کند hover وقتی ماوس روی ان می رود یعنی*/
.topnav a:hover {
  background-color: #ddd;
  color: black;
} 

 بررسی محتوا یا Content

چینش در این بخش، اغلب به کاربران هدف بستگی دارد. متداول ترین چینش یکی از موارد زیر، یا ترکیبی از آنها است:

• 1 ستون(که اغلب برای مرورگرهای موبایل استفاده می شود)
• 2 ستون(اغلب برای تبلت ها و لپ تاپ ها استفاده می شود).
• 3 ستون(تنها برای رایانه های رومیزی یا دسکتاپ ها استفاده می شود).

 در ادامه قصد داریم یک چینش سه ستونه داشته باشیم و برای صفحه های نمایشگر کوچکتر، آن را به یک ستون تغییر دهیم:

/* ایجاد سه ستون برابر که در کنار یکدیگر شناور می شوند*/
.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
/* می کند clear ها را پس از ستون ها float این دستور*/
.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%;
  }
} 

نکته: برای ایجاد یک چینش دو ستونه، width (عرض) را برابر با 50% قرار دهید. برای ایجاد یک چینش 4 ستونه، از 25% (برای عرض) استفاده کنید.

نکته: آیا از عملکرد media@ تعجب کرده اید؟ به مقاله ی آموزش مدیا کوئری ها در CSS مراجعه کنید.

نکته: یک راه مدرن برای ایجاد چینش ستون ها، استفاده از Flexbox در CSS است. اما این گزینه، در مرورگر اینترنت اکسپلورر 10 و ورژن های قبلی آن پشتیبانی نمی شود. اگر نیاز به استفاده از اینترنت اکسپلورر دارید، از float ها در مثال بالا استفاده کنید.

 ستون های نابرابر(Unequal)

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

.column {
  float: left;
}

/* ستون سمت چپ و راست */
.column.side {
  width: 25%;
}

/* ستون وسط */
.column.middle {
  width: 50%;
}

/* چینش واکنشگرا - باعث می شود سه ستون مورد نظر، به جای اینکه در کنار هم قرار گیرند، روی یکدیگر قرار گیرند. */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

بررسی فوتر(Footer)

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

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

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

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

* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 50px;
}