چیدمانها
محتویات
مثال چیدمان 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 اطمینان میدهد که هنگامی که چیدمان صفحه باید با سایزهای مختلف صفحه نمایش انطباق یابد، رفتار عنصرها قابل پیشبینی است.
مثال Flexbox
ساخت نمونه مثال این بخش در دست اقدام است.
دیدن شبکه (به انگلیسی: grid view) در CSS
ماژول چیدمان شبکه بندی CSS یک سیستم چیدمان مبتنی بر شبکه با ستونها و سطرها را پیشنهاد میدهد که طراحی صفحات وب را بدون نیاز به استفاده از float و مکانیابی آسانتر میکند.
در مورد شبکه بندی CSS در بخش CSS Grid View بیشتر بیاموزید.
منابع آموزشی