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