آموزش HTML - جلسه دوازدهم
سلام خدمت دوستان خوبم. با جلسه 12 از آموزش برنامه‌نویسی تحت وب در خدمتتون هستم. در این جلسه به بررسی روش صحیح لایه بندی صفحات وب می‌پردازیم. این جلسه از جلسات مهم و پایه‌ای در آموزش هست. پس در طی آموزش به تک‌تک مفاهیم بیان شده دقت کنید. با ما همراه باشید.
مقدمه:
طرح‌بندی صفحات وب در HTML بسیار مهم‌است. زیرا خوانندگان وب شما بیش از هر چیز با لایه بندی وب شما در ارتباطند. به همین دلیل یک لایه بندی اصولی و صحیح می‌تواند نقش بسزایی در برقراری ارتباط بین وب شما و خوانندگانتان ایفا کند.
یکی از روش‌های لایه‌بندی صفحات وب، ستون بندی آن (مشابه روزنامه‌ها و مجلات) است. برای اینکار دو روش را می‌توان به کار گرفت. یکی از روش‌های لایه بندی با استفاده از عنصر <div> و دیگری استفاده از عنصر <table> است.
تذکر بسیارمهم: اگرچه می‌توان از عنصر <table> برای لایه‌بندی سند HTML بهره جست، اما از جداول باید برای داده‌های جدولی استفاده کرد و نه برای لایه‌بندی یک سند HTML.
استفاده از عنصر <div> برای لایه بندی صفحات وب:
همانطور که در جلسه‌ی قبل گفته‌شد، عنصر <div> یک عنصر سطح بلوک است که از آن به عنوان ظرفی برای گروه‌بندی سایر عناصر استفاده می‌شود. در مثال زیر یک لایه بندی با استفاده از 5 عنصر <div> صورت گرفته است:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © YourWebPage.com</div>
</div>
</body>
</html>
نتیجه‌ی کد بالا:
استفاده از عنصر <table> برای لایه بندی صفحات وب:
یکی از راه‌های ساده برای لایه‌بندی یک سند HTML استفاده از عنصر <table> است. البته بهره‌جستن از این عنصر برای لایه‌بندی یک سند HTML روش صحیحی نبوده و بایستی از آن تنها در نمایش داده‌های جدولی در صفحات وب استفاده کرد. در مثال زیر دقیقا لایه‌بندی بالا را با استفاده از عنصر <table> انجام داده‌ایم.
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © YourWebPage.com</td>
</tr>
</table>
</body>
</html>
نتیجه کد بالا:
همانطور که مشاهده می‌کنید نتیجه بدست آمده مشابه آن چیزی است که با استفاده از عنصر <div> طراحی کرده بودیم. در هرحال توصیه ما به شما استفاده از روش اول در لایه‌بندی صفحات وب است.
لازم است یادآوری کنم که بر اساس تکلیف دانشجویان باید قالبی در وبلاگ خود قرار دهند که از قالب های اصلی بلاگفا که حدود 20 عدد هستند, نباشد و ایشان آزاد هستند از کلیه قالب های موجود در وب مانند وبلاگ من که مرتبط با موضوع آنهاست استفاده کنند.
از توجه شما متشکرم