جلسه هجدهم: چیدمان وبسایت Website Layout در CSS

چیدمان وبسایت Website Layout در CSS

خوش اومدین به هجدهمین جلسه از دوره آموزش رایگان CSS. در این جلسه قرار هست در مورد چیدمان وبسایت (website layout) با همدیگه صحبت کنیم. همونطور که میدونید صفحات وب ما از تگ های HTML تشکیل میشن. خیلی از این عناصر ظاهر اولیه ندارند و بدون محتوا حتی دیده نمیشوند. حتی با وجود محتوا هم حدود و مرز اونها قابل مشاهده نیست. این CSS هست که باعث میشه استایل خاصی برای یک عنصر تعریف بشه. ما تا اینجای دوره با ویژگی های زیادی از CSS آشنا شدیم. امروز قرار هست با استفاده از این ویژگی ها یک نمونه ساده از استاندارد طراحی وب سایت در CSS رو پیاده سازی کنیم.

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

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

قالب کلی یک وب سایت

همونطور که گفتم هیچ قالب یکسان و ثابتی برای وب سایت وجود نداره ولی معمولا وبسایت ها شامل بخش های header و menu در بالای صفحه / محتوا و سایدبارها در میان صفحه و / footer در پایین صفحه هستند.

تصویر زیر رو ببینید:

طرح های زیادی برای قالب یه وب سایت وجود داره که طرح بالا یکی از رایج ترین اونهاست. ما در اینجا به بررسی بخش های مختلف و کدهای CSS هر بخش میپردازیم.

بخش Header وبسایت

header همونطور که از اسمش مشخص هست معمولا بالای صفحه قرار میگیره و شامل اسم یا لوگو وبسایت میشه. این بخش معمولا کلا عرض بالای صفحه رو میگیره. ممکن هست توی بعضی از طراحی ها این بخش رو در سمت راست یا چپ صفحه ببینید.

بخش Navigation Menu

این بخش شامل لینک های صفحات مهم و پرکاربرد وبسایت هست که برای دسترسی آسان و راحت کاربرها تعبیه میشه. این بخش معمولا زیر header قرار میگیره. ما در جلسات قبلی با نحوه ایجاد یک navigation bar آشنا شدیم. قطعه کد زیر رو ببینید:

/* 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;
}

ما با استفاده این قطعه کد css میتونیم یه navigation ساده رو در خروجی داشته باشیم:

بخش محتوا

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

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

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

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

برای نمونه من با استفاده از قطعه کد زیر سه ستون ایجاد میکنم.

.column {
  float: left;
  width: 33.33%;
}

ما با مقدار دهی ویژگی width هر ستون روی عدد 33.33% میتونیم یک سوم از فضای عرض صفحه رو به هر ستون اختصاص بدیم. حالا کافیه که سه تا div با کلاس column داشته باشم. به این ترتیب سه ستون هم اندازه خواهم داشت.

ما موفق شدیم سه ستون هم اندازه رو بوجود بیاریم. حالا اگه قصد داشته باشیم که عرض ستونهای ما متفاوت باشد باید چکار کنیم؟

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

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

.column {
  float: left;
}
 
/* Left and right column */
.column.side {
  width: 25%;
}
 
/* Middle column */
.column.middle {
  width: 50%;
}

حالا کافیه که از کدهای html زیر استفاده کنم:

<div class="column side">
<div class="column middle">
<div class="column side">

به این ترتیب در خروجی داریم:

بخش Footer

footer آخرین بخش یک قالب هست که در پایین وبسایت قرار میگیره و معمولا حاوی copyright هست. این بخش و header و navigation bar معمولا در تمامی صفحات وبسایت هستند و تنها بخش محتوا تغییر میکنه. در خیلی از طراحی ها بخش footer شامل لینک ها مفید برای کاربران و لینک شبکه های اجتماعی و… هست و همچنین بجای یک ستون از چند ستون هم استفاده میشه.

همه ویدیوهای دوره آموزش CSS