آشنایی با بلاک بندی یا Div در HTML

1395/9/24 علیرضا حاتمی نیا 2893

با سلام و خسته نباشید خدمت شما علاقه مندان به آموزش طراحی وب
من علیرضا حاتمی نیا با ادامه مباحث آموزش html و css در خدمت شما هستم.
خب تا به اینجای کار با تگ های پایه ای HTML و همچنین با نحوه استایل نویسی در CSS آشنا شدیم.
پس بهتر است از اینجا به بعد کمی آموزش این دوره را به صورت پروژه محور پیش ببریم که ضمن آشنایی با مباحث جدید بتوانیم یک وبسایت ساده را نیز طراحی کنیم.

ساختار نود در صد وبسایت ها از ابتدا تا کنون به این صورت بوده است.

ساختار وبسایت

توضیح مختصر قسمت های بالا به شرح زیر است:
دقسمت header معمولا  شامل نام، لوگو و تصویر سایت و توضیح مختصری از فعالیتهای سایت می باشد.
در قسمت nav یا همان منوی سایت جهت هدایت به قسمت های اصلی سایت استفاده می شود.
قسمت Aside مجموعه ای از لینک های خارجی یا داخلی سایت
قسمت article محتوای اصلی صفحه
قسمت footer هم معمولا آخرین بخشی ست که کاربر در سایت می بیند و حاوی اطلاعاتی مانند درباره ما ، تماس با ما یا فرم های نظرسنجی می باشد.

در نسخه های قبلی HTML طراحان برای طراحی و ساختار بندی وبسایت از تگ <table> و خصوصیات آن استفاده می کردند. به این صورت که کل وبسایت را یک <table> در نظر می گرفتند و قسمتهای مختلف آن مانند Header و footer  ، منوها و ... را به صورت سطرها و ستون ها تودر تو مشخص می کردند.
مهمترین اشکال این نوع طراحی پیچیدگی کار، کندی سرعت پردازش مرورگرها و توسعه دشوار آن بود. تا اینکه در نسخه جدید HTML تگی با نام <div> معرفی شد که وظیفه بلاک بندی و تعیین ساختار سایت را به عهده گرفت.

تگ <div> :
هر تگ باز و بسته <div></div> یک بخش یا یک بلاک در طراحی وب را مشخص می کند.
یک تگ <div> می تواند شامل یک یا چند تگ تو در تو <div>  باشد.
برای تعیین ظاهر و چیدمان تگ های <div> از ویژگی های CSS استفاده می شود.
به صورت پیش فرض هر <div> یک بلاک در محدوده خود به صورت یک سطر ایجاد م کند و <div> بعدی در سطر بعدی ایجاد می شود مگر اینکه با استفاده از CSS تغییرات لازم را ایجاد نمایید.

در مثال زیر از چند تگ تو در تو div برای تعیین ساختار سایت استفاده می کنیم و با استفاده از css در آینده شکل ظاهری آن ها را تعیین میکنیم
 

<div id="main">  
 <div id="header">
  <h2 class="title"> This is Header </h2>
 </div>
 <div id="nav"> </div>
 <div id="content">
  <h1 class="title"> this is title </h1>
 </div>
 <div id="footer"></div>
</div>

در جلسه آینده تلاش می کنیم و ساختار وبسایت رو مورد نظر رو پیاده سازی می کنیم
طبق روال همیشه یک فیلم آموزشی برای این قسمت تهیه شده که لینک دانلود و مشاهده آن را برای شما قرار می دهیم
با تشکر

دانلود PDF قسمت پانزدهم آموزش طراحی وب

دانلود ویدیو

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت