چیدمان

---

« صفحهٔ قبل

صفحهٔ بعد »

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

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

HTML چند عنصر معنایی را که تفاوت بین بخش‌های یک صفحه وب را مشخص می‌کنند پیشنهاد می‌دهد:

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

• <header> - یک عنوان برای سند یا یک بخش تعریف می‌کند

• <nav> - یک ظرف برای لینک‌های راهبری (navigation) ایجاد می‌کند

• <section> - یک بخش در سند را مشخص می‌کند

• <article> - یک موضوع مستقل جامع را مشخص می‌کند

• <aside> - محتوای کنار محتوا را مشخص می‌کند (مانند sidebar)

• <footer> - برای سند یا یک بخش، پاورقی تعریف می‌کند

• <details>- جزئیات اضافی را تعریف می‌کند

• <summary> - یک عنوان برای عنصر <details> تعریف می‌کند

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

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

• جدول‌های HTML (توصیه نمی‌شوند)

• خصوصیت float در CSS

• Flexbox در CSS

• چارچوب CSS

• شبکه بندی CSS

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

جدول های HTML

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

نکته: از جدول‌ها برای چیدمان صفحه خود استفاده نکنید!

چارچوب های CSS

اگر می‌خواهید چیدمان را سریع ایجاد کنید، می‌توانید از یک چارچوب مانند WikiCod.CSS یا بوت استرپ استفاده کنید.

Floatهای CSS

استفاده از خصوصیت float در CSS برای ایجاد چیدمان‌های وب یک روش رایج است. یادگیری float ساده است – شما فقط نیاز دارید نحوه عملکرد float و خصوصیت‌های clear را بیاموزید.

معایب: عنصرهای floating به جریان (Flow) سند وصل هستند که ممکن است به انعطاف‌پذیری آسیب بزند. در مورد float در بخش CSS Float and Clear بیشتر بیاموزید.

مثال Float

ساخت نمونه مثال این بخش در دست اقدام است.

مشاهدهٔ نتیجه

CSS Flexbox

Flexbox یک چیدمان جدید در CSS3 است.

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

معایب: در IE10 و قدیمی‌تر اجرا نمی‌شود.

در مورد flexbox در بخش CSS Flexbox بیشتر بیاموزید.

مثال Flexbox

ساخت نمونه مثال این بخش در دست اقدام است.

مشاهدهٔ نتیجه

دیدن شبکه (grid view) در CSS

ماژول چیدمان شبکه بندی CSS یک سیستم چیدمان مبتنی بر شبکه با ستون‌ها و سطرها را پیشنهاد می‌دهد که طراحی صفحات وب را بدون نیاز به استفاده از float و مکانیابی آسانتر می‌کند.

معایب: نه در IE و نه در Edge 15 و قدیمی‌تر اجرا نمی‌شود.

در مورد شبکه بندی CSS در بخش CSS Grid View بیشتر بیاموزید.

---

« صفحهٔ قبل

صفحهٔ بعد »