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

آشنایی با مفهوم layout در HTML

بخش های اصلی هر صفحه در HTML

منظور از layout چیست‌؟ چگونه صفحات هر صفحه بخش بندی می‌شوند؟ هر صفحه از چه بخش های اصلی تشکیل شده است؟ در این مقاله با لایه ها در HTML آشنا می‌شویم.

عناصر یک layout در HTML

وبسایت ها اغلب محتوای صفحات را در چندین ستون نمایش می دهند(مانند یک روزنامه یا مجله). در این حالت ستون ها در کنار یک دیگر قرار می گیرند و محتوای صفحه در داخل این ستون ها نمایش داده می شوند.

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

نسخه HTML5 عناصر جدیدی برای تعریف بخش های مختلف صفحات وب دارند. این اجزا شامل موارد زیر هستند:

  • <header> – یک هدر برای صفحه یا یک section تعریف می کند.
  • <nav> – برای تعریف یک نگهدارنده جهت لینک های ناوبری
  • <section> – تعریف یک بخش جدید در صفحه
  • <article> – یک نگهدارنده خود مختار برای تعریف یک مقاله مستقل
  • <aside> – تعریف محتوا در کنار محتوای دیگر (مانند سایدبار)
  • <footer> – تعریف یک فوتر برای یک صفحه یا بخش
  • <details> – تعریف بخش جزییات بیشتر
  • <summary> – تعریف یک heading برای تگ <details>

مثال استفاده از Layout

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

dark

همانطور که در مثال مشاهده می‌کنید بخشی به عنوان CSS موجود است که استایل قرار گیری هر لایه را مشخص می‌کند،‌ همچنین برای نمایش عالی در تمامی صفحات از متا تگ viewport و استایل های MediaQuery برای واکنش‌گرایی (ریسپانسیو) استفاده شده است.

تکنیک های استفاده از layout در HTML

به طور کلی پنج راه برای طراحی یک layout چند ستونه وجود دارد. هر راه مزایا و معایب خود را دارد:

  • جدول های HTML (توصیه نمی شود)
  • خاصیت float در css
  • قابلیت flexbox در css
  • فریم ورک css
  • گرید های css

کدام یک را انتخاب کنیم؟ در ادامه با این موارد به صورت کوتاه آشنا می‌شویم.

جدول های HTML

عنصر <table> موجود در HTML برای طراحی layout طراحی نشده است و استفاده از آن توصیه نمی‌شود.

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

فریم ورک css

اگر قصد دارید در کمترین زمان ممکن یک layout ایجاد کنید، استفاده از فریم ورک css  بهترین گزینه است. محبوب ترین فریم ورک های موجود w3.css یا bootstrap هستند.

خاصیت float در css

یکی از رایج ترین گزینه طراحی layout استفاده از این گزینه است. خاصیت float برای یادگیری و استفاده آسان است. تنها چیزی که برای استفاده از این گزینه باید بدانید، نحوه کار با خاصیت های float و clear است.

معایب: خاصیت float در css به صفحه گره می خورد، که این مسئله باعث بروز مشکلاتی در انعطاف پذیری صفحه خواهد شد.

قابلیت css flexbox

قابلیت flexbox در نسخه css3 جدید است.

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

گرید در css

قابلیت grid موجود در css یک سیستم گرید محور که به ردیف و ستون های مختلف تقسیم شده است را ارائه می دهد. استفاده از این سیستم باعث آسانتر شدن طراحی صفحات وب بدون استفاده از خاصیت float و موقعیت دهی می شود.

معایب: در مرورگر های IE یا edge نسخه 15 به قبل کار نخواهد کرد.

نتیجه گیری

در این مقاله با layout در HTML آشنا شدیم و متوجه شدیم که چگونه صفحات در HTML تقسیم بندی می‌شوند.

اگر سوال پیشنهاد یا انتقادی داشتید حتما آن را برای من بنویسید و من صد در صد در اولین فرصت پاسخگو هستم.

تا جلسه بعدی فعلا…

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

‫4 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

  1. سلام خسته نباشید الان من دچار یک سر درگمی شدم ک برای ایجاد layout از چه روشی استفاده کنم ک responsive باشه وب سایتم؟؟؟

    1. سلام ببینید اصولی ترین راه این هست که از Media Query ها خودتون کد بزنید ولی فریمورک ها خیلی کارتون رو راحت می‌کنند و پیشنهاد میکنم برای تسریع در کار هاتون حتما از فریمورک هایی مثل بوت استرپ ، بولما یا فاوندیشن استفاده کنید.

    1. سلام حمید رضا، حتما!
      ببین از تگ Aside بیشتر برای نمایش متون به صورت یک ستون اضافه تر استفاده می‌کنند. مثلا عکس زیر رو ببین :

      نمونه از تگ Aside

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

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

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


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر