طرح‌بندی وب‌سایت CSS

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

وب‌سایت معمولاً به سربرگ، منو، محتوا و پایش تقسیم می‌شود:

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

سربرگ

سربرگ (header) معمولاً در بالای وب‌سایت قرار دارد (یا زیر منو ناوبری). معمولاً شامل لوگوی (لوگوی) یا نام وب‌سایت است:

مثال

.header {
  background-color: #F1F1F1;
  text-align: center;
  پادینگ: 20px;
}

نتیجه:

سربرگ

آزمایش کنید

ناوبری

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

مثال

/* محفظه ناوبری */
.topnav {
  پر کردن: مخفی;
  رنگ پس‌زمینه: #333;
}
/* لینک‌های ناوبری */
.topnav a {
  float: left;
  نمایش: بلوک;
  رنگ: #f2f2f2;
  text-align: center;
  پادینگ: 14px 16px;
  زیرخط نداشته باشد;
}
/* تغییر رنگ لینک - در حال حرکت */
.topnav a:hover {
  رنگ پس‌زمینه: #ddd;
  رنگ: سیاه;
}

نتیجه:

آزمایش کنید

محتوا

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

  • 1-ستونقالب‌بندی (معمولاً برای مرورگرهای موبایل استفاده می‌شود)
  • 2-ستونقالب‌بندی (معمولاً برای تبلت‌ها و لپ‌تاپ‌ها استفاده می‌شود)
  • 3-ستونقالب‌بندی (فقط برای رایانه‌های رومیزی)

1-ستون:

2-ستون:

3-ستون:

ما قصد داریم قالب‌بندی 3 ستونی ایجاد کنیم و در صفحه‌های کوچک‌تر آن را به 1 ستون تغییر دهیم:

مثال

/* سه ستون برابر ایجاد می‌کند که به هم نزدیک و شناور هستند */
.column {
  float: left;
  عرض: 33.33%;
}
/* شناورهای پس از ستون‌ها را پاک می‌کند */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* قالب‌بندی واکنش‌گرا - سه ستون را به جای قرار دادن به صورت موازی، روی هم قرار می‌دهد در صفحه‌های کوچک‌تر (عرض 600 پیکسل یا کمتر) */
@media screen and (max-width: 600px) {
  .column {
    عرض: 100%;
  }
}

نتیجه:

دستورالعمل کامل فناوری وب

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

این شامل استانداردهای W3C مانند HTML، CSS، XML است. و همچنین فناوری‌هایی مانند JavaScript، PHP، SQL و غیره.

ابزار تست نمونه آنلاین

در CodeW3C.com، ما هزاران مثال ارائه می‌دهیم.

با استفاده از ویرایشگر آنلاین ما، می‌توانید این مثال‌ها را ویرایش کنید و کد را آزمایش کنید.

روش یادگیری سریع و آسان

یک دقیقه زمان، یک مثقال طلا است، بنابراین، ما محتوای یادگیری سریع و آسان را برای شما فراهم می‌کنیم.

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

آزمایش کنید

توجه:برای ایجاد قالب‌بندی 2 ستونی، عرض را به 50٪ تغییر دهید. برای ایجاد قالب‌بندی 4 ستونی، از 25٪ استفاده کنید.

توجه:آیا می‌خواهید بدانید که قاعده @media چگونه کار می‌کند؟ در دستورالعمل‌های ما بخوانید: جستجوی رسانه CSS در این فصل بیشتر درباره این موضوعات یاد می‌گیرید.

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

برای اطلاعات بیشتر در مورد ماژول‌های قالب‌بندی Flexible Box، دستورالعمل‌های ما را بخوانید: Flexbox CSS آموزش.

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

محتوای اصلی (main content) بزرگترین و مهم‌ترین بخش وب‌سایت شماست.

شرایطی که عرض ستون‌ها برابر نیستند، بسیار رایج است زیرا بیشتر فضای موجود برای محتوای اصلی حفظ می‌شود. محتوای جانبی (در صورت وجود) معمولاً به عنوان جایگزین ناوبری یا اطلاعات مشخصی که با محتوای اصلی مرتبط است استفاده می‌شود. شما می‌توانید عرض را تغییر دهید، فقط باید به خاطر بسپارید که مجموع آن باید 100٪ باشد:

مثال

.column {
  float: left;
}
/* ستون‌های چپ و راست */
.column.side {
  عرض: 25%;
}
/* ستون وسط */
.column.middle {
  عرض: 50%;
}
/* قالب‌بندی واکنش‌گرا - سه ستون را به جای قرار دادن به صورت موازی، روی هم قرار می‌دهد */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    عرض: 100%;
  }
}

نتیجه:

دستورالعمل کامل فناوری وب

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

این شامل استانداردهای W3C مانند HTML، CSS، XML است. و همچنین فناوری‌هایی مانند JavaScript، PHP، SQL و غیره.

ابزار تست نمونه آنلاین

در CodeW3C.com، ما هزاران مثال ارائه می‌دهیم.

با استفاده از ویرایشگر آنلاین ما، می‌توانید این مثال‌ها را ویرایش کنید و کد را آزمایش کنید.

روش یادگیری سریع و آسان

یک دقیقه زمان، یک مثقال طلا است، بنابراین، ما محتوای یادگیری سریع و آسان را برای شما فراهم می‌کنیم.

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

آزمایش کنید

پایین صفحه

پایین صفحه در پایین صفحه قرار دارد. معمولاً شامل اطلاعات مانند حق نشر و اطلاعات تماس است:

مثال

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

نتیجه:

پایین صفحه

آزمایش کنید

طرح وب واکنش‌گرا

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

آزمایش کنید