چیدمان‌ها

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


مثال چیدمان HTML

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


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


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

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


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


CSS Flexbox

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

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

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

مثال Flexbox

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


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


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

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

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

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


منابع آموزشی