با سلام و خسته نباشید خدمت شما علاقه مندان به آموزش طراحی وب. علیرضا حاتمی نیا هستم و با ادامه مباحث آموزش html و css در خدمت شما هستم.
در جلسه قبل با تغییر رنگ و تصویر پس زمینه در CSS آشنا شدیم. در این جلسه به آموزش بلاک بندی در یا تگ <div> در HTML می پردازیم. حال بهتر است از اینجا به بعد کمی آموزش این دوره را به صورت پروژه محور پیش ببریم که ضمن آشنایی با مباحث جدید بتوانیم یک وبسایت ساده را نیز طراحی کنیم.
ساختار کلی یک وبسایت ساده
ساختار 90% وبسایت ها از ابتدا تا کنون به این صورت بوده است.
توضیح مختصر قسمت های بالا به شرح زیر است:
- header: در قسمت header معمولا شامل نام، لوگو و تصویر سایت و توضیح مختصری از فعالیتهای سایت می باشد.
- nav: در قسمت nav یا همان منوی سایت جهت هدایت به قسمت های اصلی سایت استفاده می شود.
- aside: قسمت aside مجموعه ای از لینک های خارجی یا داخلی سایت
- article: قسمت article محتوای اصلی صفحه
- footer: قسمت footer هم معمولا آخرین بخشی است که کاربر در سایت می بیند و حاوی اطلاعاتی مانند درباره ما ، تماس با ما یا فرم های نظرسنجی می باشد.
ساختار قبلی وبسایتها
در نسخه های قبلی HTML طراحان برای طراحی و ساختار بندی وبسایت از تگ <table> و خصوصیات آن استفاده می کردند. به این صورت که کل وبسایت را یک <table> در نظر می گرفتند و قسمتهای مختلف آن مانند Header و footer ، منوها و … را به صورت سطرها و ستون های تودر تو مشخص می کردند.
مهمترین اشکال این نوع طراحی پیچیدگی کار، کندی سرعت پردازش مرورگرها و توسعه دشوار آن بود. تا اینکه در نسخه جدید HTML تگی با نام <div> معرفی شد که وظیفه بلاک بندی و تعیین ساختار سایت را به عهده گرفت.
برچسب <div>
هر تگ باز و بسته <div></div> یک بخش یا یک بلاک در طراحی وب را مشخص می کند. یک تگ <div> می تواند شامل یک یا چند تگ تو در تو <div> باشد. برای تعیین ظاهر و چیدمان تگ های <div> از ویژگی های CSS استفاده می شود.
عملکرد برچسب <div>
به صورت پیش فرض هر <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>
در جلسه آینده تلاش می کنیم و ساختار وبسایت مورد نظر را پیاده سازی می کنیم.
