چیدمان‌ها

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	ویرایشگرها
۴	پایه
۵	عنصرها
۶	ویژگی‌ها
۷	عنوان‌ها
۸	پاراگراف‌ها
۹	استایل‌ها
۱۰	قالب‌بندی
۱۱	نقل‌قول‌ها
۱۲	توضیحات
۱۳	رنگ‌ها RGB HEX HSL
۱۴	CSS
۱۵	لینک‌ها رنگ‌های لینک نشانک‌های لینک
۱۶	تصاویر نقشه‌های تصویری تصاویر پس‌زمینه عنصر Picture
۱۷	جداول
۱۸	لیست‌ها لیست نامرتب لیست مرتب لیست‌های دیگر
۱۹	بلوک‌ها
۲۰	کلاس‌ها
۲۱	شناسه
۲۲	Iframeها
۲۳	جاوا اسکریپت
۲۴	مسیرهای فایل
۲۵	سرصفحه
۲۶	چیدمان‌ها
۲۷	واکنش‌گرا
۲۸	کد کامپیوتری
۲۹	معنایی‌ها
۳۰	راهنمای استایل
۳۱	موجودیت‌ها
۳۲	نماد‌ها
۳۳	ایموجی‌ها
۳۴	مجموعه کاراکترها
۳۵	رمزگذاری URL
۳۶	HTML و XHTML
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML

مثال چیدمان HTML

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

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

عنصرهای چیدمان 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 بیشتر بیاموزید.

صفحهٔ بعد»

«صفحهٔ قبل