PDA

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



Mr.AliAsghar
2013/10/12, 03:22 PM
با سلام خدمت کاربران عزیز و مهربون وی بی ایران :دی

http://up.vbiran.ir/uploads/Amoozesh_37493138157789517663.png
قصد آموزش اسپرایت "Sprite" که در کدنویسی قالب و استایل در CSS استفاده میشه رو برای شما عزیزان دارم! :)
حتما که نه ولی امکان این زیاد هست که شما قبلا اسم Sprite به گوشتون خورده باشه! (:
و این که توجه داشته باشید برای متوجه شدن این آموزش باید قبلش css رو یاد گرفته باشید که میتونید از W3Schools Online Web Tutorials (www.w3schools.com) و یا css3 از آموزش کامل CSS3 (www.css.vbiran.ir) استفاده کنید!
آموزش تا جای ممکن ساده توضیح داده شده پس فکر نکنم که کسی بعد از خوندن این آموزش CSS Sprite بلد نباشه!
قبل از هرچیز میگم که این آموزش توسط خودم درست شده و استفاده غیر مجاز از اون خلاف هست!

خب ! بزن بریم! :دی

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

خب چرا از Sprite استفاده کنیم؟؟ :)
سوالی که ممکن هست برای خیلی ها پیش بیاد این هست که اصلا ما برای چی از یک عکس جامع و بزرگ به جای 20 تا عکس کوچیک استفاده کنیم!
جواب سوال این هست که...
اولا که بدونید برای اینکه هر عکسی در صفحه ی وب شما نمایش داده بشه یک Request ارسال میکنه به سرور و اونوقت عکس دریافت میشه ! جالب این هست که زمان ارسال و دریافت حدود 400 میلی ثانیه هست!
حالا بیاین حساب کنیم ! فرض کنید 20 تا عکس تو صفحه وب هست! 20 تا 400 میلی ثانیه میشه 8000 میلی ثانیه ! یا 8 ثانیه! حالا فرض کنید که با 1 عکس ما میتونیم زمان رو 7 ثانیه کم تر کنیم!
فکر کنم دیگه همه توجیه شدن که Sprite برای چی هست!!
برای مثال تصویر زیر Sprite وی بی ایران هست که علی جان برای قالب نسخه 7 استفاده کردند! :دی
http://up.vbiran.ir/uploads/1_17876138157304311940.png

آموزش استفاده از Sprite!
خب بریم سراغ آموزش !!
خب به عکس زیر دقت کنید!
http://up.vbiran.ir/uploads/2_2304138157304318435.png
در این اسپرایت ما قصد داریم که 2 تا Class بنویسیم برای 2 تا آیتم به نام صفحه اصلی و صفحه انجمن! و 2 تا هم هست برای حالت Hover
یه نکته که باید دقت داشته باشید این هست که تصویرتون باید Transparent باشه ! شما فرض کنید قسمت سفید بک گراند خلع هست و اصلا چیزی نیست!
اگر بخوایم 2 تا آیتم رو بدون اسپرایت و معمولی کد کنیم به صورت زیر باید باشه! :)

نمونه ی زنده : کلیک کنید! (http://hamyar.org/demo/spritecss/nosprite.html)

HTML:

<a href="#" class="home"></a>
<a href="#" class="forum"></a>
CSS:

a.home,a.forum{display:block;}a.home{background:ur l(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 تا عکس رو در یک عکس کنار هم قرار بدیم!
به صورت عکس زیر!:
http://up.vbiran.ir/uploads/3_3602613815731221021.png

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

خب حالا ما چطور کد سی اس اسش رو تنظیم کنیم؟؟ به کد زیر توجه کنید تا اون رو توضیح بدم!

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 نقطه شروع برای مکان تصاویر گوشه بالا و سمت چپ تصویر اصلی و تک تک عناصر موجود در تصویر اصلی هست! (عکس زیر)
http://up.vbiran.ir/uploads/4_20860138157538842449.png
نگرفتید ؟ :(
پس بزار بهتر این رو براتون توضیح بدم!
نقطه ی سیاه رنگ عکس رو نگاه کنید! در این نقطه مختصات 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)
در واقع شما ابتدا یک نقطه شروع تعیین میکنید و مختصات آن را وارد میکنید و سپس با استفاده از طول و عرض تصویر آن فضا را پوشش میدید.

همین ! به همین راحتی! :x
مشاهده نمونه ی آنلاین - با استفاده از Sprite (http://hamyar.org/demo/spritecss/nosprite.html)


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


http://up.vbiran.ir/uploads/5_1324138157640111153.png
با توجه به تصویر بالا مشاهده میکنید که علاوه بر اینکه حجم نهایی عکس ها 8 کیلوبایت کمتر شده تعداد درخواست ها برای سرور هم کم تر شده!
حالا فرض کنید ماهی 50000 بازدید داشته باشید با استفاده از این تکنیک ماهی 150000 درخواست کم تر داده میشه و ماهانه حدود 300 مگابایت صرفه جویی میشه در پهنای باند!
مهم تر از همه چیز سرعتتون بسیار بیشتر میشه!

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

Roach
2013/10/12, 04:57 PM
بسیار هم عالی
دوستان برای حرکت کردن پس زمینه در هنگام HOVER یا دادن افکت میتونن از

Transition
هم استفاده کنن

Designer
2013/10/12, 05:16 PM
درود.
خیلی هم خوب ! خوب نوشته شده :4:
من یه نکته ای رو هم بگم ، به جای :

background-position:-19px -93px;
می تونید در همون خاصیت بگراند که عکس دادید مثلا این :

background: url(img/1.png);
می تونید در همین خاصیت هم اون تصویر اسپرایت رو حرکت بدید تا قسمت مورد نظرو در بیارید اینطوری :

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

Mr.AliAsghar
2013/10/12, 05:27 PM
درود.
خیلی هم خوب ! خوب نوشته شده :4:
من یه نکته ای رو هم بگم ، به جای :

background-position:-19px -93px;
می تونید در همون خاصیت بگراند که عکس دادید مثلا این :

background: url(img/1.png);
می تونید در همین خاصیت هم اون تصویر اسپرایت رو حرکت بدید تا قسمت مورد نظرو در بیارید اینطوری :

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

Ostad
2013/10/13, 09:07 PM
یه پیشنهاد : توی پاورپوینت بسازین و ارائه بدین هم متفاوت باشه و هم ....

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

Mr.AliAsghar
2013/10/13, 09:09 PM
یه پیشنهاد : توی پاورپوینت بسازین و ارائه بدین هم متفاوت باشه و هم ....

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

Ostad
2013/10/13, 10:06 PM
منظورتون این هست که توی پاورپوینت آموزش بزارم ؟ :دی
:x
بله یا هم با فیلم ....

H0sseiN
2013/12/10, 08:59 AM
CSS Sprites Generator (http://css.spritegen.com/)