چیدمان‌ها

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


مثال چیدمان HTML[ویرایش | ویرایش]

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


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


عنصرهای چیدمان 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[ویرایش | ویرایش]

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


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


CSS Flexbox[ویرایش | ویرایش]

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

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

معایب: در IE10 و قدیمی‌تر اجرا نمی‌شود.
در مورد flexbox در بخش CSS Flexbox بیشتر بیاموزید.

مثال Flexbox[ویرایش | ویرایش]

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


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


دیدن شبکه (به انگلیسی: grid view) در CSS[ویرایش | ویرایش]

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

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

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


منابع آموزشی[ویرایش | ویرایش]