طرح بندی html
طراحی وبسایت برای این که وبسایت شما خوب به نظر بیاید خیلی مهم است
طرح بندی وبسایت خود را با دقت بسیار طراحی کنید
مثال ها - خودتان امتحان کنید
طراحی وبسایت با استفاده از عنصر <div>
چگونگی طرح بندی با عنصر <div> را نشان می دهد
طراحی وبسایت با استفاده از عنصر <div>
چگونگی طرح بندی با عنصر <table> را نشان می دهد
طراحی وب سایت
بسیاری از وبسایت ها محتوای خودشان را در ستون های چندگانه قرار می دهند (مثل
روزنامه ها و مجله ها)
ستون های چند گانه با استفاده از عناصر <div> و <table> استفاده می شوند ، از
CSS برای موقعیت دادن به عناصر ، یا ایجاد پس زمینه یا رنگارنگ به نظر رسیدن صفحه
استفاده می شود
نکته : برای ایجاد یک طراحی خوب با جدول های HTML این کار ممکن است اما
جدول های HTML برای نمایش داده جدولی طراحی شده اند نه به عنوان یک نوع طرح
بندی صفحات
استفاده از عنصر <div>
عنصر <div> یک عنصر سطح بلاکی است و برای گروه بندی عناصر HTML مورد
استفاده قرار می گیرد
مثال زیر از پنج عنصر 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 © W3Schools.com</div>
</div>
</body>
</html>
Main Title of Web Page
طراحی با استفاده از جدول
یک راه ساده برای ایجاد طراح بندی صفحه استفاده از تگ <table> است
از CSS برای موقعیت دادن به عناصر ، یا ایجاد پس زمینه یا رنگارنگ به نظر رسیدن
صفحه استفاده می شود
نکته : برای ایجاد یک طراحی خوب با جدول های HTML این کار ممکن است اما
جدول های HTML برای نمایش داده جدولی طراحی شده اند نه به عنوان یک نوع طرح
بندی صفحات
مثال زیر از یک جدول با 3 سطر و 2 ستون استفاده می کند اولین و آخرین سطر جفت
ستون ها را با استفاده از خصیصه colspan پوشش داده است
<!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;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 © W3Schools.com</td>
</tr>
</table>
</body>
</html>
Main Title of Web Page |
|
| Content goes here |
Menu
HTML CSS JavaScript |
| Copyright © W3Schools.com | |
نکته های مفید
نکته : بزرگترین مزیت استفاده از CSS این است که اگر شما کدهای خودتان را در یک
برگه سبک خارجی قرار دهید سایت شما برای نگه داری بسیار آسان می شود
شما می توانید طرح بندی تمام صفحاتتان را تنها با ویرایش یک فایل تغییر دهید
برای فراگیری بیشتر در رابطه با CSS ، آموزش CSS ما را مطالعه کنید
تگ های طرح بندی HTML
| Description | Tag |
| بخشی را در یک سند معرفی می کند | <div> |
| بخشی را در یک سند معرفی می کند | <span> |
