تاریخ انتشار:۱۲:۹ ۱۳۹۸/۱۱/۲۶

عناصر 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 چطور کار میکنند.

در مورد خاصیت float در دوره ی آموزش CSS در آینده مفصل خواهید آموخت.

 }div.container  
 ;width : 100% 
 ;border : 1px solid gray 
 {
 }header, footer  
 ;padding : 1em 
 ;color : white 
 ;background-color : black 
 ;clear : left 
 ;text-align : center 
 {
 }nav  
 ;float : left 
 ;max-width : 160px 
 ;margin : 0 
 ;padding : 1em 
 {

---

استفاده از مدل flexbox در CSS

Flexbox یک مدل جدید برای طرح بندی سایت در CSS است.

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

از معایب آن این است که در اینترنت اکسپلورر 10 و نسخه های قدیمی تر کار نمی کند.

 }flex-container . 
 ;display : -webkit-flex 
 ;display : flex 
 ;webkit-flex-flow : row wrap- 
 ;flex-flow : row wrap 
 ;text-align : center 
 {
 }*<flex-container .
 ;padding : 15px 
 ;webkit-flex : 1 100%- 
 ;flex : 1 100% 
 {

 

منبع:learnsource