CSS – طرح‌بندی وب‌سایت (Website Layout)

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

یک وب‌سایت معمولاً به اجزای زیر تقسیم می‌شود:

  • Header (سربرگ)
  • Navigation Menu (منوی ناوبری)
  • Content (محتوا)
  • Footer (پاورقی)

این ساختار یکی از رایج‌ترین ساختارهاست که در این آموزش به آن می‌پردازیم.

Header (سربرگ)

سربرگ معمولاً در بالای وب‌سایت قرار می‌گیرد و شامل لوگو یا نام وب‌سایت است.

مثال:

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

Navigation Bar (نوار ناوبری)

نوار ناوبری شامل لیستی از لینک‌ها است که به کاربران کمک می‌کند تا در سایت شما پیمایش کنند.

مثال:

/* کانتینر نوار ناوبری */
.topnav {
  overflow: hidden;
  background-color: #333;
}

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

/* تغییر رنگ لینک‌ها هنگام هاور */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Layout Columns (ستون‌بندی محتوا)

چیدمان محتوا بسته به نوع کاربران هدف متغیر است. چیدمان‌های معمول شامل موارد زیر هستند:

  • 1-ستونه: اغلب برای مرورگرهای موبایل
  • 2-ستونه: اغلب برای تبلت‌ها و لپ‌تاپ‌ها
  • 3-ستونه: برای دسکتاپ‌ها

مثال: ساختار 3-ستونه

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

/* پاکسازی شناور‌ها بعد از ستون‌ها */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* چیدمان واکنش‌گرا: ستون‌ها به جای کنار هم قرار گرفتن، روی هم می‌افتند در صفحه‌های کوچک‌تر از 600 پیکسل */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

ستون‌های نامساوی

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

مثال: ستون‌های نامساوی

.column {
  float: left;
}

/* ستون‌های کناری */
.column.side {
  width: 25%;
}

/* ستون وسط (محتوای اصلی) */
.column.middle {
  width: 50%;
}

/* چیدمان واکنش‌گرا: ستون‌ها روی هم قرار می‌گیرند در صفحه‌های کوچک‌تر از 600 پیکسل */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Footer (پاورقی)

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

مثال:

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

چیدمان واکنش‌گرا (Responsive Website Layout)

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

نکته:

  • برای ایجاد یک چیدمان 2-ستونه، عرض ستون‌ها را به 50% تغییر دهید.
  • برای چیدمان 4-ستونه، از عرض 25% استفاده کنید.
  • برای آشنایی بیشتر با Flexbox و چیدمان‌های مدرن‌تر، به فصل CSS Flexbox مراجعه کنید.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.