• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

14434 ۳ شهریور ۹۱
1 2

امروز میخواهیم درباره طراحی 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 آن را در صفحه خود قرار دهید.

نکته :

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

1 2
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 13 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏

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

  • ‏‏

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

    • ‏‏
      میلاد حیدری(۳ شهریور ۱۳۹۱)

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

  • ‏‏
    امین شورکی(۴ شهریور ۱۳۹۱)

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

    موفق باشید…

    • ‏‏
      میلاد حیدری(۴ شهریور ۱۳۹۱)

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

  • ‏‏
    مرتضی ندرلو(۴ شهریور ۱۳۹۱)

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

    • ‏‏
      میلاد حیدری(۴ شهریور ۱۳۹۱)

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

  • ‏‏
    کوشا کاشانی(۵ شهریور ۱۳۹۱)

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

  • ‏‏

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

    • ‏‏
      لقمان آوند(۱۱ شهریور ۱۳۹۱)

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

  • ‏‏
    پویابهروش(۲۶ آبان ۱۳۹۱)

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

  • ‏‏
    امبن علی(۴ اسفند ۱۳۹۱)

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

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram