آموزش Layout در HTML

آموزش Layout در HTML

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

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

چیدمان یا Layout در HTML

HTML5 عناصر معنایی جدید ارائه داده است که قسمت های مختلف یک صفحه را تعریف میکند :

  • <header> – یک هیدر (قسمتی که در بالای سایت قرار میگیرد) را برای یک سند یا قسمت تعریف میکند.
  • <nav> – لینک های ناوبری (منو ها) سایت در این عنصر قرار میگیرند.
  • <section> – یک قسمت را در سند مشخص میکند.
  • <article> – یک مقاله مستقل در این عنصر قرار میگیرد.
  • <aside> – ستون سمت راست و یا چپ را برای سایت مشخص میکند.
  • <footer> – یک فوتر را برای یک سند و یا قسمت تعریف میکند.
  • <details> – جزئیات اضافی در این عنصر قرار میگیرد.
  • <summary> – سرتیتری برای عنصر <details> تعریف میکند.

 

تکنیک های طرح بندی صفحات در HTML

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

  • جداول HTML
  • خاصیت float در CSS
  • فریمورک های CSS
  • استفاده از مدل flexbox در CSS

 

جداول HTML

عنصر <table> به عنوان ابزاری برای طرح بندی سایت ساخته نشده است. هدف از عنصر <table> نمایش داده های جدولی است. بنابراین از جداول برای طرح بندی سایت استفاده نکنید.جداول شلوغی زیادی را در کد ما ایجاد میکند و تصور کنید که طراحی دوباره سایت بعد از چند ماه چقدر سخت خواهد بود.

نکته : از جداول برای طرح بندی سایت استفاده نکنید!

 

فریمورک های CSS

اگر بخواهید طرح بندی سایت خود را سریع انجام دهید، میتوانید از فریمورک هایی همچون Bootstrap برای این کار استفاده کنید.

 

خاصیت float در CSS

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

حتما بخوانید : فیلم آموزش Css و Css3 به زبان فارسی

امتحان کنید

 

مدل flexbox در CSS

Flexbox یک مدل جدید برای طرح بندی سایت در CSS است. استفاده از flexbox این تضمین را میدهد که عناصر رفتاری قابل پیشبینی برای زمانی که سایت در سایزهای مختلف صفحه نمایش و نمایشگر های دستگاه های مختلف قرار میگیرد، داشته باشند. از معایب آن این است که در اینترنت اکسپلورر 10 و نسخه های قدیمی تر کار نمی کند.

امتحان کنید

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML