۱۴ شهریور ۱۳۹۰ ۱ 5461 بازدید

طرح بندی در اچ  تی ام ال (HTML Layouts)

طرح بندی صفحه وب بسیار مهم است چون باعث می شود وب سایت شما  ظاهر خوبی داشته باشد.
طرح بندی صفحه وب خود را به دقت طراحی کنید.

طرح بندی وب سایت

اکثر وب سایت ها محتوای خود را در ستون های مختلف قرار می دهند(قالب بندی شده مانند یک مجله یا روزنامه).
چند ستون را با استفاده از تگ های جدول و یا <div> میتوان ایجاد کرد.

طرح بندی اچ تی ام ال — با استفاده از جداول

ساده ترین راه برای ایجاد طرح بندی  استفاده از تگ table(جدول)  است.
مثال زیر  از یک جدول با 3 سطر و 2 ستون — سطر اول و آخر دهانه هر دو ستون با استفاده از صفت colspan استفاده می شود:

<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 valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © 2011 www.onliner.ir</td>
</tr>
</table>
</body>
</html>

کد اچ تی ام ال فوق نتیجه زیر را تولید میکند

نکته:اگرچه ممکن است طرح بندی زیبا با استفاده از جداول اچ تی ام ال ایجادکرد
اما جدول برای ارائه داده ها جدولی و نه به عنوان یک ابزار چیدمان طراحی شده است.

طرح بندی اچ تی ام ال — با استفاده از عناصرDIV

تگ div: یک بخش در یک پرونده را معرفی می کند.عنصر DIV سطح یک بلوک عنصر است که برای گروه بندی عناصر اچ تی ام ال استفاده می شود.

در مثال زیرما با استفاده از پنج عنصر DIV یک طرح بندی ستون های متعدد،را ایجاد کردیم که نتیجه همان نتیجه مثال قبلی می باشد:
پنج عنصر شامل: container,header,menu,content,footer  می باشد.

<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 © 2011 www.onliner.ir</div>
</div></body>
</html>

کد اچ تی ام ال فوق نتیجه زیر را تولید میکند

اطلاعات مفید:
نکته: بزرگترین مزیت  استفاده از CSS این است که، اگر شماکد CSS خود را در یک CSS خارجی  قرار دهید  ،سایت شما بسیار ساده تر نگهداری می شود.شما می توانید طرح بندی تمام صفحات خود را با ویرایش یک فایل  تغییر دهید.
نکته:از آنجا که طرح بندی پیشرفته، نیاز به زمان برای ایجاد دارد گزینه سریعتر  استفاده از یک قالب(استفاده از روش div) است.

نظرات کاربران (۱)




  1. خیلی عالی بود ممنون