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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!
4 7317 ۱۲ اسفند ۹۲ وحید صالحی

سلام به تمام دوستان امروز می خواهم ابزار بسیار مفید و آنلانی رو بهتون معرفی کنم که با صرف زمان بسیار کوتاه تصاویر وبتون رو بصورت sprite در آورید.

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

بعد از ورود به سایت این ابزار از منوی بالا رو گزینه sprite map کلیک کنید و گزینه new spritemap رو انتخاب کنید, توسط منوی size map هم میتونید اندازه سند ایجاد شده رو تغییر بدهید.

نکته : عرض سند ایجاد شده بهتر است برابر با عرض بزرگترین تصویر استفاده شده در سایت شما باشد

حالا نوبت به قرار دادن عکس ها در سند ایجاد شده می باشد.یکی از خصوصیات جالب این ابزار امکان Drag and Drop بودن آن است یعنی شما نیازی ندارید تا تصاویرتون رو در آن لود کنید تنها کافیه عکس مورد نظر رو بکشید و در سند رها کنید تا ازش استفاده کنید.

به محض قرار دادن تصویر در سند در ستون سمت راست کدها ی sprite تصویر مورد نظر ایجاد میشه که شامل  نام تصویر ,موقعیت(position) تصویر در سند ایجاد شده و طول و عرض تصویر می باشد .

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

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

 

مثال:

فرض کنید در سایت شما و در پوشه تصاویر ,2 تصویر با نام  های 7learn.png و 7learn-logo.png دارید و اون رو در سایتتون به حالت زیر قرار دادید.

کدهای مرحله اول:

 

حالا اگر این تصاویر رو توسط ابزار که معرفی کردم به حالت sprite در بیارید کد های زیر رو براتون ایجاد می کنه ,که کد مربوط به position بر میگرده به مکانی که  تصویری که شما  در سند sprite ایجاد شده در ابزار فوق قرار داده اید مال من بصورت زیر هست:

کدهای مرحله دوم که توسط ابزار ایجاد شد:

 

 

sprite3

 

حالا تنها کافیه که کدهای مرحله اول رو به صورت زیر تغییر بدید:

 

 

نکته :

اگر دقت کرده باشید ما به کدهای ایجاد شده توسط ابزار آدرس تصویر sprite.png رو که ایجاد کردیم و در پوشه تصاویر سایتمون قرار داده بودیم رو اضافه کردیم و باز هم تاکید میکنم که خاصیت background-position تصاویر شما قطعا با تصاویر من فرق خواهد داشت.

حتما در سند ابزار فاصله میان تصویر رو رعایت کنید و تصاویر رو روی هم قرار ندهید ...

نکته : اگر در سایت مذکور عضو شوید امکان ذخیره فایل هایی رو که ایجاد کرده اید رو خواهید داشت

 

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

اهداف و مزایای استفاده از این ابزار :

  • ایجاد راحت تر فایل css sprite
  • افزایش سرعت طراحی و کدنویسی
  • افزایش سرعت لود شدن سایت و سئوی بهتر

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

  • ‏‏

    من خیلی وقته از این سایت استفاده میکنم ، واقعا فوق العاده هست .

    تنها مشکلی که باهاش داشتم این بود که بعضی تصاویر رو در خروجی به صورت تار و بهم ریخته نشون میده (موقعی که دانلود میشه) .

    کافیه اون عکس رو با یک فرمت یا حجم دیگه استفاده کنید . شاید این مشکل براتون پیش بیاد که این راه حلش هست ….

  • ‏‏
    محمد اسفندیاری(۲۵ اسفند ۱۳۹۲)

    مرسی از آموزشهای خوبتون.

  • ‏‏

    با عرض سلام، ممنون از آموزش خوبتون بنده کلیه ی محتوای این نوشته را متوجه شدم به جز اینکه ما بعد از دانلود فایل تصاویر و css این دو فایل را دقیقا کجای وب سایت خود قرار بدهیم؟ در کدام پوشه ی هاست ؟؟ ممنون میشم کمکم کنید و جوابم رو بدید.
    😥

    • ‏‏
      وحید صالحی(۱۷ آذر ۱۳۹۴)

      سلام فایل تصویر رو باید در پوشه تصاویر قالبتون قرار بدید و کدهای درون فایل استایل رو هم باید خواصیت های position رو که مربوط به هر تصویر هست رو برای اون عنصری که تصویر مربوط بهش هست رو در فایل استایل قالبتون کپی کنید

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram