طراحی Layout قالب به صورت TableLess

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۰۳ شهریور ۱۳۹۱

امروز میخواهیم درباره طراحی TableLess یا همان طراحی قالب بدون استفاده از جداول با یکدیگر گفتگو نمائیم .

همانطور که می‌دانید طراحی ظاهری یک صفحه وب بسیار مهم و حائز اهمیت می‌باشد ، این طراحی بستگی به سلیقه شما دارد ، البته در کنار طراحی باید به حجم گرافیکی سایت نیز توجه نمائید ، اگر در هنگام طراحی تمام توجه شما نسبت به زیبائی باشد ، قطعا سایت شما ، حجم بسیار زیادی را می‌طلبد ، بر اساس همین امر مهم ، طراحی TableLess بسیار فراگیر شد و امروز فکر نمکینم طراحان وبی باشند که بخواهند Layout یک سایت را با استفاده از جداول طراحی نمایند ، امروز شما را با این مبحث یعنی طراحی TableLess آشنا خواهیم ساخت.

tableless

ویژگی‌های استفاده از TableLess :

الف) اتعطاف پذیری بیشتر

ب) سرعت بارگذاری (Load) بیشتر قالب شما

ج) ایندکس شدن سریعتر در موتورهای جستجو

د) استفاده بسیار آسانتر در برابر استفاده از جداول ، دیگر نیاز به تکرار تگ‌های td و tr نخواهیم داشت.

ه) یکی دیگر از مهم‌ترین مزیت‌های طراحی بدون جدول ، نمایش سریع آنها در بعضی از مرورگرها از جمله Internet Explorer می‌باشد ، همانطور که می‌دانید IE ، برای خواندن یک جدول ، باید کل کد جدول را تا انتها بخواند سپس آن را نمایش دهد ، ولی در طراحی TableLess اینگونه نیست.

و) استاندارد کنونی کنسرسیوم جهانی وب (W3C) طراحی TableLess است.

ر) اگر در Layout قالب خود از Tableless استفاده نمائید ، تمامی مرورگرها به راحتی  و به بهترین شکل ، سایت شما را به نمایش خواهند درآورد.

در طراحی یک قالب به صورت "بدون جدول" ، CSS نقش پر رنگی را بازی میکند ، پس حتما شما باید با CSS آشنا باشید .

نکته :

در بین دستورهای CSS ، برای انجام کار TableLess باید با دستورهای Margin و Padding آشنایی کامل داشته باشید .

نکته :

برای اجرا شدن طراحی که قالبی که به صورت TableLess ایجاد شده است در تمامی مرورگرها حتما باید نوع Doctype صفحه خود را مشخص نمائید به عنوان مثال اگر قالب شما با زبان HTML5 ایجاد شده است ، حتما Doctype آن را در صفحه خود قرار دهید.

<!DOCTYPE HTML>

نکته :

مفهوم عملی TableLess ، در تگ Div خلاصه شده است .اگر می‌خواهید یک نمونه سایت طراحی شده به صورت کاملا TableLess  را مشاهده نمائید ، کلیک کنید!

مثال عملی :

هم اکنون قصد داریم شکل زیر  را با استفاده از قابلیت Div و Table به شما نمایش دهیم :

طراحی به صورت tableless

در ابتدا Style مورد نظر خود را برای طراحی به صورت Table ایجاد می‌نمائیم :

<style type="text/css">
#header {
background-color:#99002f;
text-align:center;
color:white;
}

#sidebar {
background-color:#6f3098;
width:100px;
text-align:top;
color:white;
}

#content {
background-color:#2e3699;
height:200px;
width:400px;
text-align:center;
color:white;
font-size:50px;
}

#footer {
background-color:#464646;
text-align:center;
color:white;
}

</style>

طراحی Layout فوق با استفاده از Table :

<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" id="header">
<h1>Header</h1>
</td>
</tr>

<tr valign="top">
<td  id="sidebar">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td id="content">
<br><b>Content</b></td>
</tr>

<tr>
<td colspan="2" id="footer">
Copyright © <b>7Learn.com</b></td>
</tr>
</table>

</body>
</html>

طراحی Style مورد نظر خود را برای طراحی به صورت TableLess :

<style type="text/css">
#container {
width:500px;
}

#header {
background-color:#99002f;
text-align:center;
color:white;
}

h1 {
margin-bottom:0;
}

#sidebar {
background-color:#6f3098;
color:white;
height:200px;
width:100px;
float:left;
}

#content {
background-color:#2e3699;
height:200px;
width:400px;
float:left;
text-align:center;
color:white;
font-size:50px;
}

#footer {
background-color:#464646;
clear:both;
text-align:center;
color:white;
}

</style>

طراحی Layout فوق با استفاده از Div و TableLess

 

<!DOCTYPE html>
<html>
<body>

<div id="container">

<div id="header">
<h1>Header</h1></div>

<div id="sidebar">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>

<div id="content">
<br>Content</div>

<div id="footer">
Copyright © <b>7Learn.com</b></div>

</div>

</body>
</html>
چه امتیازی به این مقاله می دید؟
نویسنده میلاد حیدری
19 ساله، ساکن تهران و دانشجوی مهندسی کامپیوتر ؛طراح وب سایت ، سئو کار با سابقه کاری ، مطالعه بسیار زیاد در امر سئو و برندینگ اینترنتی و آشنایی با زبان های همچون PHP,JavaScript,html5,CSS3, Jquery ، با زبان انگلیسی آشنایی کامل دارم و شدیدا طرفدار استقلال و فرهاد مجیدی هستم.
ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 

نظرات کاربران

امبن علی

درود. خسته نباشی.
من تونستم با div یک صفحه رو layout کنم بصورتی که این صفحه دارای
header, left-menu, content, footer هست. حالا چطور می توانم منوی راست هم قرار بدم؟ اینو نتونستم! 😎
در کل می خوام بدونم چطور میشه جاهای مختلف رو صفحه بندی کرد. مثلاً 2 تا بلوک زیر هدر و بالای کانتنت باشه؟
اگه یه آموزش کلی و جامع در این زمینه بذاری به من و امثال من خیلی کمک کردی.
سپاس فراوان

پویابهروش

چه جالب! قالبی رو هم که من برای وبم طراحی کردم بدون اینکه اطلاعی داشته باشم کاملا TableLess هستش.
میدونستم div استاندارده اما نمیدونستم چرا!

hajian1

سلام
خیلی جالب بودولی قالب که تکمیل شده دروسط مرورگرقرارنمیگیره به سمت چپ مروگرقرارگرفته است
کدها رانیز دزیرارسال می کنم لطفاًحل مشگل کنید
باتشکرفراوان

لقمان آوند

سلام
در div بیرونی (که شامل همه ی div های دیگه هست) از ویژگی margin:0 aute سی اس اس استفاده کنید .

کوشا کاشانی

عالی بود اگه ادامه بدی و آموزشت رو کامل کنی خیلی خوب میشه

مرتضی ندرلو

سلام
خسته نباشید . مطلب خوبی بود . اما شاید بهتر باشه که کدهای css در css خارجی ذخیره بشه و بعد به صفحه الحاق بشه تا کدهای تمیز تر و استاندارد تری داشته باشیم .
منظورم از تمیز تر استفاده از فاصله و تو رفتگیه تا خوانایی بیشتر بشه .

میلاد حیدری

سلام ، با توجه به درخواست شما ، فایل css به صورت outline تعریف شد

مرتضی ندرلو

خیلی بهتر و خوانا تر شد

امین شورکی

درود
مطلب خوبی بود، واقعا نیاز بود که طراحان وب این رو یاد بگیرند؛ اگر بتونید آموزش ساخت یه صفحه ساده با تگ Div رو هم بگزارید عالی میشه

موفق باشید…

میلاد حیدری

سلام دوست عزیز ، ممنون ، این مثالی که زدیم ، خود یک صفحه بود ولی با این حال بر روی چشم ، ان شاالله آموزش ساخت همان سایتی را می دهیم که به شما معرفی کردیم

فراز

سلام
یه سوال در مورد جاوا اسکریپت داشتم
من چند خط کد html به صورت زیر دارم
 
 
من وقتی کد بالا را در فایل js ذخیره میکنم دیگه در مرورگر کار نمیکنه
من میخوام مثلا کل کد بالا را در یک آرایه قرار بدم و مثلا وقتی شرط برقرار بود اون آرایه که حاویه کد html است اجرا بشه و اون عکس در مرورگر نمایش داده بشه و اگه برقرار نبود یه آرایه دیگه که اونم حاوی چند تا کد html هست اجرا بشه.من مشکل اصلیم در وارد کردن html در جاوا اسکریپت هست
میشه یه راهنمایی کنید باید چیکار کنم؟

میلاد حیدری

سلام دوست عزیز ، اینجا کدی وجود ندارد؟؟؟

hamid

سلام داداش عالیه
ادامه بدهید ممنون