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

- visibility ۱۳ mode_comment

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

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

tableless

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

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

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

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

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

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

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

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

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

info نکته :

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

info نکته :

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

info نکته :

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

comment دیدگاه کاربران
hamid

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

فراز

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

میلاد حیدری

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

امین شورکی

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

موفق باشید…

میلاد حیدری

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

مرتضی ندرلو

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

میلاد حیدری

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

مرتضی ندرلو

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

کوشا کاشانی

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

hajian1

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

لقمان آوند

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

پویابهروش

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

امبن علی

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.