خانه / آموزش HTML / بخش بیست و پنجم-چیدمان HTML
راه اندازی سایت فروشگاهی دیجی کالا و بامیلو
"

تاریخ بروزرسانی: ۲ آذر ۱۳۹۷ تعداد بازدید : 24 بازدید بدون دیدگاه

بخش بیست و پنجم-چیدمان HTML

قدم قبلی >< قدم بعدی
چیدمان HTML
چیدمان HTML

در این آموزش html به چیدمان HTML می پردازیم.

عناصر چیدمان HTML

وب سایت ها اغلب محتوای نمایش داده شده را در چندین ستون (مانند مجله یا روزنامه) نمایش می دهند.

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

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

چیدمان HTML

تکنیک های چیدمان HTML

پنج روش مختلف برای ایجاد پوسته های چندگانه وجود دارد. هر راه دارای مزایا و معایب است:

  • جداول HTML (توصیه نمی شود)
  • CSS مالکیت شناور
  • CSS flexbox
  • چارچوب CSS
  • شبکه CSS

کدام یک را انتخاب کنید؟

جداول HTML

عنصر <table> برای طراحی پوسته طراحی نشده بود! هدف عنصر <table> برای نمایش داده های جدولی است. بنابراین، از جداول برای طرح بندی صفحه استفاده نکنید! آنها یک کدخاک را به شما نشان می دهند. و تصور کنید چقدر سخت است که پس از گذشت چند ماه از سایتتان دوباره طراحی کنید.

نکته: از جداول برای طرح بندی صفحه استفاده نکنید!

چارچوب ( Frameworks) در CSS

اگر می خواهید طرح خود را سریع ایجاد کنید، می توانید از یک چارچوب مانند W3.CSS یا Bootstrap استفاده کنید.

شناورهای (Floats) در CSS

شایع است که تمام پوسته های وب با استفاده از ویژگی شناور CSS انجام شود. شناور آسان است برای یادگیری – شما فقط نیاز به یاد داشته باشید که چگونه خواص شناور و روشن کار می کنند. معایب: عناصر شناور به جریان سند گره خورده است، که ممکن است به انعطاف پذیری آسیب برساند. بیشتر در مورد شناور در فصل CSS Float و Clear خود بیشتر بدانید.در تصویر زیر نمونه ی از روش شناور را مشاهده می کنید.

چیدمان HTML

Flexbox

Flexbox یک حالت طرح جدید در CSS3 است.

استفاده از flexbox تضمین می کند که عناصر به صورت قابل پیش بینی رفتار می کنند زمانی که طرح بندی صفحه باید اندازه صفحه نمایش های مختلف و دستگاه های مختلف صفحه نمایش را در خود جای دهد. معایب: در IE10 و قبل از آن کار نمی کند.در تصویر زیر نمونه ی از روش Flexbox را مشاهده می کنید.

چیدمان HTML
چیدمان HTML

CSS Grid View

ماژول CSS Grid Layout یک سیستم طرح بندی مبتنی بر شبکه با ردیف ها و ستون ها را ارائه می دهد که ساده تر ساختن صفحات وب را بدون نیاز به استفاده از شناورها و موقعیت ها انجام می دهد.

معایب: در اینترنت اکسپلورر و در لبه ۱۵ و قبل از آن کار نمی کند.

اطلاعات بیشتر در مورد شبکه های CSS در فصل مشخصات شبکه CSS ما.

 

گام قبلی >< گام بعدی
بخش بیست و پنجم-چیدمان HTML
لطفا امتیاز بدهید

لینک کوتاه این مطلب: https://tiktheme.com/?p=11896


کانال تلگرام تیک تم

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

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