منظور از 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 تقسیم بندی میشوند.
اگر سوال پیشنهاد یا انتقادی داشتید حتما آن را برای من بنویسید و من صد در صد در اولین فرصت پاسخگو هستم.
تا جلسه بعدی فعلا…
6 پاسخ
سلام خسته نباشید
بخشید میتونید یه راه ارتباطی به من بدید تا سالمو درخواست کنم؟
باید با کلی عکس و ویدیو نشون بدم
سلام رعنا
میتونید از همین محیط کامنت ها استفاده کنید و اگر عکس یا فیلمی هست آپلود کنید تا سایر دوستان هم استفاده کنن.
سلام خسته نباشید الان من دچار یک سر درگمی شدم ک برای ایجاد layout از چه روشی استفاده کنم ک responsive باشه وب سایتم؟؟؟
سلام ببینید اصولی ترین راه این هست که از Media Query ها خودتون کد بزنید ولی فریمورک ها خیلی کارتون رو راحت میکنند و پیشنهاد میکنم برای تسریع در کار هاتون حتما از فریمورک هایی مثل بوت استرپ ، بولما یا فاوندیشن استفاده کنید.
aside رو بهتر توضیح میدید؟
سلام حمید رضا، حتما!
ببین از تگ Aside بیشتر برای نمایش متون به صورت یک ستون اضافه تر استفاده میکنند. مثلا عکس زیر رو ببین :
سمت راست که با یک خط جدا شده با استفاده از تگ Aside ایجاد شده. البته برای اینکار میتونی از Div هم استفاده کنی و فاصله رو ایجاد کنی. ولی خب بعضا پیش میاد میخوای فقط از تگ Aside استفاده کنی با یک استایلدهی ساده میتونی همچین متونی رو ایجاد کنی.