آموزش طراحی سایت

جلسه ۷۹ – layout در CSS

در این مطلب از مجله آموزش تبلیغات و بازاریابی به موضوع جلسه ۷۹ – layout در CSS میپردازیم که در دسته مطالب آموزش طراحی سایت قرا میگیرد.

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

مفهوم layout

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

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

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

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

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

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

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

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

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

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

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

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

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

main

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

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

این قسمت، محتوایی رو معرفی می‌کنه که دارای اولویت کمتری نسبت به محتوا 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 می‌رسیم.

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

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

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

 

نوشته های مشابه

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

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

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