این بخش کامل
درباره ساخت Layoutهاست
پس قبل از اینکه واقعا شروع کنیم
بیایید درباره اینکه Layout دقیقا یعنی چی
و همچنین سه روش اصلی
که الان می‌تونیم با CSS Layout بسازیم صحبت کنیم
پس در طراحی و توسعه وب وقتی می‌گیم Layout
منظورمون در واقع روشی هست که متن
تصاویر و بقیه محتوا قرار می‌گیرن
و روی صفحه وب چیدمان می‌شن
اینجا در سمت راست
یه نمونه از یک وبسایت خیلی ساده دارم
که چندتا بخش محتوا توش هست
و مشخصه که به یک شکل خاصی چیده شدن درسته؟
پس دوباره روشی که این‌ها چیده شدن
و روی این وبسایت قرار گرفتن در اصل همون Layout
طراحی محسوب می‌شه
پس Layout به این صفحه می‌ده
چیزی که بهش ساختار بصری می‌گیم
و بعد توی اون ساختار محتوا رو قرار می‌دیم
یکی از کارهای اصلی توسعه‌دهندگان Front-end
یعنی توسعه‌دهنده‌های HTML CSS و JavaScript
ساخت Layoutهاست
که دلیلش اینه کل یه بخش اختصاص دادیم
فقط به ساخت Layout
طبق این تعریف از Layout
ساخت Layout یعنی چیدن المان‌های صفحه
توی یک ساختار بصری خاص
به جای اینکه همه المان‌ها
یعنی همه محتوا فقط پشت سر هم قرار بگیرن
تصور کنید توی این سایت نمونه
همه این هفت بخش محتوا فقط پشت سر هم
چیده می‌شدن
خب این از نظر بصری خیلی جالب نبود درسته؟
و همینطور باعث می‌شد سخت‌تر بشه
واقعا محتوایی که اینجا منتقل می‌شه
رو درک کنیم
پس Layout یه دلیل مشخص داره
چون باعث می‌شه سایتمون راحت‌تر درک بشه
و همچنین از نظر بصری جذاب‌تر باشه
حالا به طور کلی دو نوع Layout وجود داره
یکی Layout صفحه و یکی Layout کامپوننت.
Layout صفحه همون چیزیه که تا الان
دربارش حرف زدم یعنی چیدن المان‌ها
یعنی بخش‌های بزرگ محتوا داخل یک صفحه وب
یا یک وبسایت
از طرف دیگه همین Layoutهای بزرگ صفحه
خودشون از کامپوننت‌هایی مثل این ساخته شدن
و این کامپوننت‌ها خودشون
نیاز به نوعی Layout دارن
چون این کامپوننت‌ها هم
از بخش‌های کوچکتر محتوا ساخته شدن
که اون‌ها هم باید به یک شکل خاصی چیده بشن
پس می‌تونیم بگیم خود کامپوننت‌ها هم
یه Layout دارن
پس دوباره ما نمی‌خوایم
این ۱۲ بخش محتوا فقط پشت سر هم
چیده بشن درسته؟
اونطوری منطقی نمی‌شه
بنابراین
باید به کامپوننت‌های کوچیک‌تر هم
یه نوع Layout بدیم
خب حالا که می‌دونیم Layout چیه
و چه نوع Layoutهایی می‌تونیم بسازیم
بیایید ببینیم چطور واقعا می‌تونیم با CSS اون‌ها رو بسازیم
اولین تکنیک ساخت Layout در CSS
استفاده از Float Layoutهاست
که در واقع روش قدیمی ساخت Layoutهاست
با استفاده از خاصیت float در CSS
حالا این نوع Layoutها سریع دارن جایگزین می‌شن
با تکنولوژی‌های جدیدتری مثل Flexbox و CSS Grid
ولی هنوز تو بعضی موارد استفاده می‌شن
به خصوص توی وبسایت‌های قدیمی‌تر
پس ما همچنان یاد می‌گیریم چطور Float Layout بسازیم
فقط برای اینکه بدونید چطور کار می‌کنن اگه یه روزی
تو مسیر کاری‌تون باهاشون مواجه شدید
مثلا وقتی روی یک وبسایت قدیمی کار می‌کنید
اما در بخش اصلی کار
ما سریع می‌ریم سراغ
یکی از روش‌های جدیدتر ساخت Layout
که استفاده از Flexbox هست.
Flexbox یکی از روش‌های مدرن برای چیدمان المان‌هاست
و توی Flexbox
کاملا مناسب ساخت Layoutهای یک‌بعدیه
یعنی Layoutی که فقط یک ردیف باشه
و بدون استفاده از float
پس Flexbox عالیه برای Layoutهای ساده‌تر کامپوننت‌ها
دقیقا مثل همونی که توی اسلاید قبلی دیدیم
روش مدرن دیگه‌ای که هست
برای چیدمان المان‌ها CSS Grid هست
با CSS Grid
می‌تونیم Layoutهای کامل دو‌بعدی بسازیم
که خیلی عالیه برای Layoutهای بزرگ صفحه
و همینطور کامپوننت‌های پیچیده‌تر
مثل همونی که توی اسلاید قبلی دیدیم
پس Flexbox و CSS Grid کاملا متحول کردن
روش ساخت Layoutها توی CSS امروزی رو
و به همین دلیل بیشتر این دوره رو صرف یادگیری اون‌ها
و استفاده ازشون توی پروژه بزرگ وبسایتمون می‌کنیم
اما فعلا بیایید سریع شروع کنیم به یادگیری
Float Layoutها توی جلسه بعدی