🎁 تخفیف استثنائی تمامی پکیج های آموزشی 🎁

آموزش طراحی سایت - Layout در HTML

در این بخش از آموزش طراحی سایت به آموزش Layout (چیدمان اجزای وب سایت) در HTML می پردازیم.

آموزش طراحی سایت - Layout در HTML

در طراحی سایت، طرح و نوع تقسیم بندی و چیدمان عناصر در صفحات سایت یکی از مهم ترین مراحل طراحی سایت می باشد. برای اینکه کاربران به نوع چیدمان و طراحی صفحات وب سایت شما جذب شوند، نیاز دارید تا وقت قابل توجهی را صرف طراحی Layout وب سایت خود کنید. صفحات وب سایت ها معمولا محتوا را در ستون ها و سطرهای مختلفی نشان می دهند (مانند مجله ها و یا روزنامه ها).

آموزش طراحی سایت

تصویر بالا شامل کدهای HTML است که ساختار صفحه را مشخص می کند. این ساختار در حقیقت همان layout صفحه را مشخص می کنند.

آموزش Layout در HTML

تصویر بالا شامل کدهای CSS صفحه است که استایل های خاصی را به هریک از عناصر صفحه اختصاص می دهند. که در زیر نتیجه ترکیب کدهای HTML و CSS مشخص شده است:

آموزش Layout در HTML

و سپس حالت دوم در حالت صفحه با عرض بزرگتر از 600px را در زیر مشاهده می کنیم که نحوه چینش صفحه تغییر می کند:

آموزش HTML

عناصر Layout در HTML

HTML دارای چندین عنصر معنا دار می باشد که بخش های مختلف یک وب سایت را توصیف می کنند. استفاده از این عناصر هم برای شناسایی بهتر ساختار سایت برای دیگر توسعه دهندگان و هم برای موتورهای جستجو پیشنهاد می شود. در زیر ساختار استاندارد یک صفحه به همراه عناصر معنی دار در HTML را مشاهده می کنید:

آموزش طراحی سایت
  • < header > - یک عنوان را برای یک سند یا یک بخشی از صفحه تعریف می کند.
  • < nav > - لیستی از لینک های هدایت کننده به بخش های مختلف سایت را تعریف می کند (می تواند همان منوی سایت باشد).
  • < section > - یک قسمت در صفحه را تعریف می کند.
  • < aside > - قسمتی جدا از محتوا را تعریف می کند. مانند یک منوی کناری (sidebar).
  • < footer > - یک فوتر (پایین ترین بخش صفحه) را برای یک صفحه یا بخشی از صفحه تعریف می کند.
  • < details > - توضیحات اضافی را که کاربر به خواست خودش بتواند آن را باز کند یا ببندد تعریف می کند.
  • < summary > - یک سر تیتر برای عنصر < details > تعیین می کند.

تکنیک های Layout (لایه بندی) در HTML

چهار تکنیک برای ایجاد کردن layout ها و طرح های چند ستونه وجود دارد. هر کدام از این تکنیک ها مزایا و معایب خود را دارند:

  • CSS framework
  • CSS float property
  • CSS flexbox
  • CSS grid

فریمورک CSS

اگر نیاز دارید تا طرح سایت خود را سریع ایجاد کنید، می توانید از یک CSS framework مانند W3.CSS یا Bootstrap استفاده کنید، . این فریمورک ها در حقیقت یک سری کلاس های آماده css و توابع آماده javascript را در اختیار قرار می دهند و دیگر نیازی به بازنویسی این کلاس ها نیست.


 Float Layout در CSS

استفاده از مشخصه float برای لایه بندی و طراحی تمام صفحات وب بسیار متداول است. یادگیری Float آسان است و برای اینکار فقط نیاز دارید تا نوع کارکرد مشخصه های float و clear را یاد بگیرید.

معایب : شناور کردن عناصر با استفاده از مشخصه Float به شناور شدن صفحه وابسته است که این ویژگی ممکن است به انعطاف پذیری صفحه آسیب بزند.

آموزش طراحی سایت

در این مثال ساختار اصلی صفحه با استفاده از کدهای HTML تعریف شده است.

آموزش HTML

سپس با استفاده از ویژگی float عناصر صفحه جانمایی شده اند که در زیر مشخص است:

آموزش Layout در HTML

و سپس حالت دوم در صفحه با عرض بزرگتر از 600px :

آموزش طراحی سایت

Flexbox Layout در CSS

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

آموزش چیدمان عناصر وب سایت

در این مثال ساختار اصلی صفحه با استفاده از کدهای HTML تعریف شده است.

آموزش HTML

اما در کدهای css جانمایی عناصر با استفاده از flexbox انجام شده است که در زیر نتیجه آن را مشاهده می کنید:

آموزش Layout در HTML

و سپس حالت دوم در حالت صفحه با عرض بزرگتر از 600px:

آموزش طراحی سایت

Grid در CSS

برای آشنایی با Grid در CSS به مقالات آموزش CSS مراجعه کنید.

آموزش طراحی سایت آموزش چیدمان عناصر وب سایت آموزش Layout در HTML آموزش HTML آموزش لایه بندی در HTML