صفحه بندی در صفحات وب بسیار حائز اهمیت هستند و متناسب با نوع وب سایتی که طراحی می نماییم صفحه چینی باید به نحوی باشد که علاوه بر زیبایی بتواند کارایی و دسترسی سریع را به کاربران بدهد.
از تگ های div و table در قدیم برای صفحه بندی استفاده می شد که امروزه html5 تگ های زیر را برای صفحه بندی عرضه نموده:
به طور کلی ۴ تکنیک برای صفحه چینی به کار می رود:
استفاده از جداول، CSS float property ، CSS framework ، CSS flexbox
استفاده از جداول <table>
استفاده از جداول امروزه برای صفحه بندی منسوخ شده چرا که کار برد جدول های html برای ساخت و ایجاد جدول ها می باشد نه برای صفحه چینی وب.
CSS framework
استفاده از CSS framework ها امروزه بسیار شایع شده و محبوب ترین انها بوتستراپ میباشد.
CSS Floats
یاد گیری این متد آسان بوده و به کمک آن می توان صفحه بندی مناسبی را ایجاد نمود به قطعه کد زیر که به صفحه بندی با این متد می پردازد توجه فرمایید:
<!DOCTYPE html> <html> <head> <style> 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; } nav ul { list-style-type: none; padding: 0; } nav ul a { text-decoration: none; } article { margin-left: 170px; border-left: 1px solid gray; padding: 1em; overflow: hidden; } </style> </head> <body> <div class="container"> <header> <h1>City Gallery</h1> </header> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav> <article> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </article> <footer>Copyright © tehrancode.com</footer> </div> </body> </html>
CSS Flexbox
این نتد یکی از متد های جدید css3 بوده و به کمک آن می توان لایه هایی متفاوت متناسب با عرض نمایشگر ایجاد نمود.
<!DOCTYPE html> <html> <head> <style> .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%; } .article { text-align: left; } header {background: black;color:white;} footer {background: #aaa;color:white;} .nav {background:#eee;} .nav ul { list-style-type: none; padding: 0; } .nav ul a { text-decoration: none; } @media all and (min-width: 768px) { .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;} .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;} footer {-webkit-order:3;order:3;} } </style> </head> <body> <div class="flex-container"> <header> <h1>City Gallery</h1> </header> <nav class="nav"> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav> <article class="article"> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> <p><strong>Resize this page to see that what happens!</strong></p> </article> <footer>Copyright © tehrancode.com</footer> </div> </body> </html>