تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 8 از 8

موضوع: آموزش جامع استفاده از Sprite در کدنویسی+تصویر (اختصاصی وی بی ایران)

  1. Top | #1
    مدیر بازنشته

    تاریخ عضویت
    Jun 2012
    ورژن ویبولتین
    N/O :|
    نوشته ها
    899
    مورد پسند
    1,260 بار
    اطلاعات
    Windows 8 Chrome 30.0.1599.69
    میزان امتیاز
    119

    پیش فرض آموزش جامع استفاده از Sprite در کدنویسی+تصویر (اختصاصی وی بی ایران)

    با سلام خدمت کاربران عزیز و مهربون وی بی ایران
    قصد آموزش اسپرایت "Sprite" که در کدنویسی قالب و استایل در CSS استفاده میشه رو برای شما عزیزان دارم!
    حتما که نه ولی امکان این زیاد هست که شما قبلا اسم Sprite به گوشتون خورده باشه!
    و این که توجه داشته باشید برای متوجه شدن این آموزش باید قبلش css رو یاد گرفته باشید که میتونید از W3Schools Online Web Tutorials و یا css3 از آموزش کامل CSS3 استفاده کنید!
    آموزش تا جای ممکن ساده توضیح داده شده پس فکر نکنم که کسی بعد از خوندن این آموزش CSS Sprite بلد نباشه!
    قبل از هرچیز میگم که این آموزش توسط خودم درست شده و استفاده غیر مجاز از اون خلاف هست!


    خب ! بزن بریم!

    سوال اول که برای همه ممکن هست پیش بیاید این هست که اصلا سی اس اس اسپرایت چیست ؟!!
    در جواب باید خدمتتون عرض کنم که این عنوان یکی از قابلیت های بسیار جالب و پرکاربرد CSS هست! شما معمولا وقتی میخواید که یک صفحه ی وب رو کدنویسی کنید حتما تعدادی عکس در اون به کار می برید !
    حالا تعداد این عکس ها ممکن هست که حتی 15 تا 30 تا هم بشه!!! ما با استفاده از Sprite میتونیم به جای این که 30 تا عکس بزاریم توی صفحه ی وب از 1 عکس استفاده کنیم! به بیان بهتر ما میام تمام عکس هایی رو که باید ازشون استفاده بشه رو در یک عکس قرار میدیم!!!

    خب چرا از Sprite استفاده کنیم؟؟
    سوالی که ممکن هست برای خیلی ها پیش بیاد این هست که اصلا ما برای چی از یک عکس جامع و بزرگ به جای 20 تا عکس کوچیک استفاده کنیم!
    جواب سوال این هست که...
    اولا که بدونید برای اینکه هر عکسی در صفحه ی وب شما نمایش داده بشه یک Request ارسال میکنه به سرور و اونوقت عکس دریافت میشه ! جالب این هست که زمان ارسال و دریافت حدود 400 میلی ثانیه هست!
    حالا بیاین حساب کنیم ! فرض کنید 20 تا عکس تو صفحه وب هست! 20 تا 400 میلی ثانیه میشه 8000 میلی ثانیه ! یا 8 ثانیه! حالا فرض کنید که با 1 عکس ما میتونیم زمان رو 7 ثانیه کم تر کنیم!
    فکر کنم دیگه همه توجیه شدن که Sprite برای چی هست!!
    برای مثال تصویر زیر Sprite وی بی ایران هست که علی جان برای قالب نسخه 7 استفاده کردند!

    آموزش استفاده از Sprite!
    خب بریم سراغ آموزش !!
    خب به عکس زیر دقت کنید!
    در این اسپرایت ما قصد داریم که 2 تا Class بنویسیم برای 2 تا آیتم به نام صفحه اصلی و صفحه انجمن! و 2 تا هم هست برای حالت Hover
    یه نکته که باید دقت داشته باشید این هست که تصویرتون باید Transparent باشه ! شما فرض کنید قسمت سفید بک گراند خلع هست و اصلا چیزی نیست!
    اگر بخوایم 2 تا آیتم رو بدون اسپرایت و معمولی کد کنیم به صورت زیر باید باشه!

    HTML:
    کد HTML:
    <a href="#" class="home"></a>
    <a href="#" class="forum"></a>
    CSS:
    کد HTML:
    a.home,a.forum{display:block;}a.home{background:url(home.png) no-repeat;margin-bottom:10px; height:48px; width: 164px;}a.home:hover{background:url(home-hover.png) no-repeat; height:48px; width: 164px;}a.forum{background:url(forum.png) no-repeat; height:48px; width: 164px;}a.forum:hover{background:url(forum-hover.png) no-repeat; height:48px; width: 164px;}
    عکس ها رو با قرمز مشخص کردم!
    حالا مشاهده میکنید که فقط برای این 2 تا، 4 تا عکس استفاده کردیم!

    خب حالا بیاید این 4 تا عکس رو در یک عکس کنار هم قرار بدیم!
    به صورت عکس زیر!:

    اگر در عکس بالا دقت کنید ما 2 تا خط آبی رو تنطیم کردیم! این خط ها با استفاده از خط کش فتوشاپ هستند! کافیه از منوی بالای فتوشاپ View رو کلیک کرده و روی Rulers کلیک کنید!
    حالا روی درجه های خط کش موس رو کشیده و خط رو Drog و Drop کنید و در جای مشخص تنظیم کنید! و عکساتون رو در یک راستا قرار بدید!
    خب به همین راحتی عکس Sprite مون ساخته شد ! کافیه اون رو به صورت png ذخیره کنیم! برای مثال ما اسمشو sprite.png میزاریم!

    خب حالا ما چطور کد سی اس اسش رو تنظیم کنیم؟؟ به کد زیر توجه کنید تا اون رو توضیح بدم!
    کد HTML:
    a.home,a.forum{display:block; background: url(sprite.png) no-repeat;}a.home{background-position:-19px -23px; height:48px; width: 164px;}a.home:hover{background-position:-204px -23px; height:48px; width: 164px;}a.forum{background-position:-19px -93px; height:48px; width: 164px;}a.forum:hover{background-position:-204px -93px; height:48px; width: 164px;}
    کد html رو که قبلا گفتم میمونه Css جدیده!
    در خط اول برای تگ های لینک a تعیین کردیم که به صورت بلوک باشن و اینکه تصویر زمینش Sprite.png باشه یعنی فقط 1 عکس به جای 4 تا!
    در خط دوم هم که خاصیت های کلس های مورد نظر رو تعیین کردیم!
    عکس زمینه که برای همشون Sprite.png هست ! فقط کافیه با استفاده از background-position تعین کنیم که موقعیت "صفحه اصلی" کجا هست!
    برای اینکه بهتر بفهمید
    background-position چی هست باید از محور مختصات که تو ابتدایی خوندید کمک بگیرید!
    در مبحث sprite نقطه شروع برای مکان تصاویر گوشه بالا و سمت چپ تصویر اصلی و تک تک عناصر موجود در تصویر اصلی هست! (عکس زیر)
    نگرفتید ؟
    پس بزار بهتر این رو براتون توضیح بدم!
    نقطه ی سیاه رنگ عکس رو نگاه کنید! در این نقطه مختصات 0 هست (x=0 , y=0)! مثلا میخوایم عکس صفحه ی اصلی رو به مروگر اعلام کنیم کد زیر رو باید بزنم!
    کد:
    a.home{background-position:-19px -23px; height:48px; width: 164px;}

    پس نتیجه میگیریم نقطه ی شروع باید با مختصاتی که ما بهش میدیم جا به جا بشه ! مثلا در کد بالا 19 تا رفتیم سمت x و 23 تا سمت y تا به نقطه ی شروع برای "صفحه اصلی " برسیم!
    ادامه ی کد هم طول و عرض عکس رو وارد میکنیم که به همون اندازه عکس برش داده میشه و به مروگر تحویل داده میشه تا نشونش بده!
    پس کلاس a.home یک مستطیل به عرض ۲۴۹ پیکسل و ارتفاع ۷۴ پیکسل را از نقطه ی مختصات تعیین شده در نظر خواهد گرفت! امیدوارم متوجه شده باشین!!

    شاید فکر کنید در اوردن مختصات سخت هست ولی اگه فتوشاپ داشته باشین به راحتی میتونید درستش کنید!
    کافیه که از منوی Windows گزینه info رو انتخاب کنین! به این ترتیب یک پنجره باز میشه که هر جا موس رو گذاشتید مختصات رو نشون میده! (w=width h:height)
    در واقع شما ابتدا یک نقطه شروع تعیین میکنید و مختصات آن را وارد میکنید و سپس با استفاده از طول و عرض تصویر آن فضا را پوشش میدید.

    همین ! به همین راحتی!
    حالا یه نگاهی به تفاوت استفاده و عدم استفاده از sprite بندازیم!

    با توجه به تصویر بالا مشاهده میکنید که علاوه بر اینکه حجم نهایی عکس ها 8 کیلوبایت کمتر شده تعداد درخواست ها برای سرور هم کم تر شده!
    حالا فرض کنید ماهی 50000 بازدید داشته باشید با استفاده از این تکنیک ماهی 150000 درخواست کم تر داده میشه و ماهانه حدود 300 مگابایت صرفه جویی میشه در پهنای باند!
    مهم تر از همه چیز سرعتتون بسیار بیشتر میشه!

    این هم از آموزش Sprite!
    تشکر میکنم از محمد @MHAbedinpour که دمو رو در وب سایتشون آپلود کردن!
    بزرگ ترین آموزشی بود که تا حالا نوشته بودم!
    امیدوارم که کپی نشه و به نام خودتون بزنید!
    آموزش رو تا حد توان ساده گفتم!
    نظرتون رو بگید که اگه دوست داشتید مقالات دیگری مثل این براتون بزنم!
    موفق باشید!

    منبع : وی بی ایران

    m.Ymjj ...

    Sweet Back To VBIran




  2. گیفت کارت آیتونز

  3. Top | #2
    مدیر بازنشته

    تاریخ عضویت
    May 2012
    ورژن ویبولتین
    4
    نوشته ها
    2,571
    مورد پسند
    2,125 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 18.0
    میزان امتیاز
    304

    پیش فرض

    بسیار هم عالی
    دوستان برای حرکت کردن پس زمینه در هنگام HOVER یا دادن افکت میتونن از
    کد:
    Transition
    هم استفاده کنن


  4. Top | #3
    کاربر سایت

    تاریخ عضویت
    Aug 2013
    ورژن ویبولتین
    4.2
    نوشته ها
    591
    مورد پسند
    777 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 30.0.1599.69
    میزان امتیاز
    78

    پیش فرض

    درود.
    خیلی هم خوب ! خوب نوشته شده
    من یه نکته ای رو هم بگم ، به جای :
    کد:
    background-position:-19px -93px;
    می تونید در همون خاصیت بگراند که عکس دادید مثلا این :
    کد:
    background: url(img/1.png);
    می تونید در همین خاصیت هم اون تصویر اسپرایت رو حرکت بدید تا قسمت مورد نظرو در بیارید اینطوری :
    کد:
    background: url(img/1.png) -19px -93px;
    چون من خودم همیشه اینطوری می نویسم گفتم اضافه بکنم به توضیحات ، چون یه جور خلاصه نویسی هم میشه !
    مرسی

    4 تشکر توسط:

    ایران وب هاسـت . تجربه ی یک میزبان متـفاوت
    استفاده از سخت افزار و نرم افزار قدرتمند.سرور 12 هسته ای
    پشتیبانی فنی 24 ساعته
    مناسب برای میزبانی تمامی وبسایت ها
    آدرس صفحه ی اصلی : client.irwebhost.org


  5. Top | #4
    مدیر بازنشته

    تاریخ عضویت
    Jun 2012
    ورژن ویبولتین
    N/O :|
    نوشته ها
    899
    مورد پسند
    1,260 بار
    اطلاعات
    Windows 8 Chrome 30.0.1599.69
    میزان امتیاز
    119

    پیش فرض

    نقل قول نوشته اصلی توسط Designer نمایش پست ها
    درود.
    خیلی هم خوب ! خوب نوشته شده
    من یه نکته ای رو هم بگم ، به جای :
    کد:
    background-position:-19px -93px;
    می تونید در همون خاصیت بگراند که عکس دادید مثلا این :
    کد:
    background: url(img/1.png);
    می تونید در همین خاصیت هم اون تصویر اسپرایت رو حرکت بدید تا قسمت مورد نظرو در بیارید اینطوری :
    کد:
    background: url(img/1.png) -19px -93px;
    چون من خودم همیشه اینطوری می نویسم گفتم اضافه بکنم به توضیحات ، چون یه جور خلاصه نویسی هم میشه !
    مرسی
    مرسی محمد جان! این نکته رو خواستم بگم آخرش یادم رفت!
    خواستم از پایه یاد بگیرن!

    3 تشکر توسط:


    m.Ymjj ...

    Sweet Back To VBIran

  6. Top | #5
    کاربر اخراجی

    تاریخ عضویت
    Aug 2011
    ورژن ویبولتین
    4.2.2
    نوشته ها
    3,348
    مورد پسند
    2,697 بار
    نوشته های وبلاگ
    48
    اطلاعات
    Windows 8 Chrome 30.0.1599.69
    میزان امتیاز
    0

    پیش فرض

    یه پیشنهاد : توی پاورپوینت بسازین و ارائه بدین هم متفاوت باشه و هم ....

    خیلی از Sprite من خوشم میاد ...

  7. Top | #6
    مدیر بازنشته

    تاریخ عضویت
    Jun 2012
    ورژن ویبولتین
    N/O :|
    نوشته ها
    899
    مورد پسند
    1,260 بار
    اطلاعات
    Windows 8 Chrome 30.0.1599.69
    میزان امتیاز
    119

    پیش فرض

    نقل قول نوشته اصلی توسط VBserver نمایش پست ها
    یه پیشنهاد : توی پاورپوینت بسازین و ارائه بدین هم متفاوت باشه و هم ....

    خیلی از Sprite من خوشم میاد ...
    منظورتون این هست که توی پاورپوینت آموزش بزارم ؟

    m.Ymjj ...

    Sweet Back To VBIran

  8. Top | #7
    کاربر اخراجی

    تاریخ عضویت
    Aug 2011
    ورژن ویبولتین
    4.2.2
    نوشته ها
    3,348
    مورد پسند
    2,697 بار
    نوشته های وبلاگ
    48
    اطلاعات
    Windows 8 Chrome 30.0.1599.69
    میزان امتیاز
    0

    پیش فرض

    نقل قول نوشته اصلی توسط Mr.AliAsghar نمایش پست ها
    منظورتون این هست که توی پاورپوینت آموزش بزارم ؟
    بله یا هم با فیلم ....

  9. Top | #8
    مدیر ارشد

    تاریخ عضویت
    Oct 2010
    ورژن ویبولتین
    v4.1.3 PL8
    نوشته ها
    6,756
    مورد پسند
    11,358 بار
    نوشته های وبلاگ
    63
    اطلاعات
    Windows 8 Chrome 31.0.1650.63
    میزان امتیاز
    923

    2 تشکر توسط:


اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. آموزش تصویری ریستور بکاپ به صورت دستی(اختصاصی وی بی ایران)
    توسط SelenaTor در انجمن اموزشهای تصویری ویبولتین
    پاسخ: 31
    آخرين نوشته: 2014/06/01, 08:51 AM
  2. آموزش خلاصه نویسی css (تمام خاصیت های کاربری) + (اختصاصی وی بی ایران)
    توسط Designer در انجمن آموزش CSS بصورت ساده و حرفه ای
    پاسخ: 7
    آخرين نوشته: 2014/01/22, 12:58 PM
  3. پاسخ: 7
    آخرين نوشته: 2013/10/07, 01:43 PM
  4. پاسخ: 3
    آخرين نوشته: 2013/05/20, 03:54 PM
  5. پاسخ: 8
    آخرين نوشته: 2013/05/03, 01:35 PM

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •