خرید گوشی اورجینال تصویر بنر
آموزش طراحی سایت

(وردپرس تم) | جلسه ۷۹ – layout در CSS

(وردپرس تم) | جلسه ۷۹ – layout در CSS

سرفصل‌های پست

  • 1 مفهوم layout
  • 2 قسمت های مختلف یک صفحه وب سایت
    • 2.1 header
    • 2.2 main
    • 2.3 sidebar
  • 3 روش های طبقه بندی محتوا
    • 3.1 روش float
    • 3.2 روش flexbox
    • 3.3 روش سیستم grid
  • 4 پایان ترم
  • 5 نتیجه گیری

مفهوم layout

به طور خلاصه، layout به ساختار و ترتیب محتوا در صفحه وب سایت اطلاق می‌شه.

این مفهوم، تنها مختص به CSS و آموزش طراحی وب سایت نیست، بلکه یک مفهوم عموما طراحی محور محسوب می‌شه که تجربه کاربری (UX) و رابط کاربری (UI) در اون نقش مهمی رو ایفا می‌کنن و در نهایت، طراحی و پیاده سازی اون، توسط HTML، CSS و جاوا اسکریپت انجام می‌گیره.

هدف از داشتن یک layout مناسب برای وب سایت، هدایت کاربر به سمت محتوای درست و مورد نظر خودمونه.

قسمت های مختلف یک صفحه وب سایت

یک وب سایت، می‌تونه شامل قسمت های مختلفی باشه.

عمومی ترین ساختار و قسمت های یک وب سایت، به فرم زیر تعریف می‌شه:

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

اما هر کدوم از این قسمت ها چی هستن و چه کاری انجام می‌دن؟

header

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

عمومی ترین وظیفه header، در بر داشتن منو و لوگوی وب سایت ماست.

منو یا همون navbar، کاربر رو علاوه بر آشنا کردن با قسمت های مختلف وب سایت ما،‌ به قسمت های مختلف راهنمایی می‌کنه. بدین منظور لازمه که در navbar گزینه های مناسبی رو داشته باشیم.

ترتیب قرار گرفتن لوگو و navbar در وب سایت ما، می‌تونه به صورت عمودی و یا افقی باشه.

این موضوع به طراحی کلی وب سایت ما بستگی داره.

در مورد navbar ها و منو ها، می‌تونین به صورت کامل تر تو مقاله منو ها در CSS میزفا مطالعه کنین.

main

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

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

sidebar

این قسمت، محتوایی رو معرفی می‌کنه که دارای اولویت کمتری نسبت به محتوا main ما هستن.

برای مثال، معرفی محتوای قدیمی تر یا محتوای پیشنهاد شده توسط وب سایت، بر عهده ی این قسمته.

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

footer

در این قسمت، اطلاعاتی نظیر تماس با کارشناسان وب سایت و هشدار های کپی رایت قرار می‌گیره.

روش های طبقه بندی محتوا

تا اینجا فهمیدیم که یک وب سایت از چه قسمت هایی تشکیل می‌شه.

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

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

  • float یا محتوای شناور
  • flexbox
  • سیستم grid

روش float

این روش، عمومی ترین و ساده ترین روش برای توسعه ساختار یک وب سایت محسوب می‌شه.

در این روش، از خاصیت float استفاده می‌کنیم.

وظیفه این خاصیت، شناور کردن عناصر به سمت چپ و یا راست viewport ماست.

برای مثال، به منظور شناور کردن یک عنصر div در راستا های مورد نظرمون، از کد های زیر استفاده می‌کنیم.

/* --- شناور شدن به چپ --- */
div{
   float: left;
}
/* --- شناور شدن به راست --- */
div{
   float: right;
}

این روش رو به صورت کامل می‌تونین تو مقاله آموزش float میزفا مطالعه کنین.

روش flexbox

روش مورد نظر، سنگین تر و پیچیده تر از روش قبلیه. به همون تناسب،‌ می‌تونه ساختار های پیچیده تری رو توسعه بده.

فرض کنین که می‌خوایم عناصر موجود در یک عنصر div‌ رو به کمک این روش کنار هم بچینیم.

کافیه دستور زیر رو به عنصر div اختصاص بدیم و سپس با استفاده از خاصیت های دیگه ی flexbox، چیدمان عناصر فرزند رو مشخص کنیم:

div{
   display: flex;
}

برای مطالعه کامل این روش، می‌تونین به مقاله آموزش flexbox میزفا مراجعه کنین.

اگه جایی از مطالب به سوال و یا ابهامی برخوردین، حتما تو قسمت نظرات بپرسین که کمکتون کنیم 🙂

روش سیستم grid

این روش، مثل روش flexbox عمل می‌کنه. با یک سری تفاوت های کوچیک، مثل دو بعدی بودن.

به این معنا که می‌تونه عناصر رو در دو جهت مرتب سازی کنه.

برای استفاده از این روش، کافیه به عنصر پدر عناصر مورد نظرمون، دستور زیر رو اختصاص بدیم و سپس با استفاده از خاصیت های دیگه ی grid، چیدمان این عناصر رو تعیین کنیم.

div{
   display: grid;
}

این روش رو می‌تونین تو مقاله آموزش grid میزفا مطالعه کنین.

پایان ترم

سوال:

چرا نمی‌تونیم گزینه های هدایتی یک وب سایت رو (مثل دسته بندی محصولات، مقاله های بیشتر و …) به جای header داخل footer قرار بدیم؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

خب به پایان این فصل کوتاه در آموزش CSS می‌رسیم.

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

امیدوارم که از این فصل بهره کافی رو برده باشید 🙂

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

مدیر محتوا: علی اسمعیلی‌

 

(وردپرس تم) | جلسه ۷۹ – layout در CSS

لینک منبع

هیچ کالایی را بدون تخفیف نخرید تصویر بنر

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا