Gytyonline
مديريت كل انجمن‌ها
پست: 899
عضو شده در: 14 شهریور 1384
محل سکونت: tehran
امتياز: 8184
|
|
عنوان: ساختن منو با CSS Sprites |
  
|
|
سلام
اگر یادتان باشد قبلا در این تاپیک قسمت اول این آموزش را قرار داده بودم که در آن آموزش ما یک منوی برای وب سایت خودمان طراحی و پیاده سازی کردیم حالا در این آموزش که در ادامه آموزش قبلی و قسمت دوم آن می باشد می خواهم به شما یاد دهم که چگونه می توان به این منو افکت هایی خاص داد تا موقعی که موس را روی هر یک از قسمت های این منو قرار دادیم رنگ آن عوض شود البته توسط css این کار را انجام میدهم و در انتها مزیت های این روش را به سایر ورش ها خواهیم گفت .
خوب منویی را که قبلا طراحی کرده اید در فتوشاپ باز کنید و یک کپی از آن تهیه کنید و دقیقا زیر آن قرار دهید البته رنگ این منو را با منوی بالایی جوری تعیین کنید که متفاوت باشند در واقعا منوی زیرین رنگی را خواهد داشت که می خواهیم وقنی روی منو رفتیم منو به آن رنگ تغییر رنگ دهد . که ما شکل منوی خود را به این صورت تغییر دادیم :
توجه کنید که دقیقا دو منو به هم چسبیده باشند و در اطراف آنها فضای خالی و اضافی قرار نداشته باشد .
حالا عکس ما آماده است و فقط کار های برنامه نویس آن مانده است که آن را نیز مرحله به مرحله پیش میرویم .
ابتدا یک فایل notpad یا هر ویرایش گر دیگری را که با آن صفحات وب خود را طراحی می کنید باز نمایید و کدهای زیر را در آن بنویسید :
| کد: |
<html>
<head>
<title> CSS Sprites: Image Slicing’s Kiss of Death</title> |
تا به اینجا که کد ها ساده هستند و نیازی به توشیح نیست حال شروع به نوشتن css صفحه مان می کنیم :
| کد: |
<styl>
#menu {
width: 585px; height: 41px;
background: url(menu.gif);
margin: 10px auto; padding: 0;
position: relative;} |
توضیح این قسمت از کد : ما در اینجا برای لیستی که بعدا در صفحه html مان خواهیم ساخت یک style تعریف می کنیم که توسط id به آن ارتباط خواهیم داد و اسم این stayle را منو قرار دادیم که در اینجا در خط اول کد طول و عرض منوی خود را تنظیم خواهیم کرد که به ترتیب عبارت اند از : 585 پیکسل و 41 پیکسل و در خط بعدی عکسی را که در فتوشاپ طراحی کرده بودیم برای منویمان به عنوان پس زمینه آن قرار خواهیم داد و در بعدی خاصیت های margin و padding را به دلخواه تنظیم خواهیم کرد ( اندازه ها به دلخواه می باشند ) و در خط آخر نیز position منوی خود را روی relative قرار میدهیم تا سایر ابعاد را بر حسب آن تنظیم نماییم .
دقت کنید که حتما باید برای خصوصیت height عدد 41 را تعیین کنیم چون ارتفاع عکس ابتدایی 82 می باشد و چون ما می خواهیم فقط یکی از منو ها نشان داده شود باید عدد 41 را به این خصوصیت نسبت دهیم .
خوب این از فرمت کلی منو ، در خط های بعدی خاصیت های li لیست مان و لینک های آن را تنظیم می کنیم که داریم :
| کد: |
#menu li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
#menu a, #menu li { display:block; height:41px; } |
با کد های خط اول خاصیت های li لیستمان را تنظیم کردیم که به آن گفتیم margin و padding را برابر 0 قرار بده و با دستور بعدی تنظیم کردیم که آیتم های لیستمان به رو به روی هم قرار بگیرند به جای اینکه در زیر یکدیگر باشند دو دستور بعدی هم که واضح و روشن است .
در کد های خط بعدی خصوصیاتی را که برای لینک ها و آیتم های لیستمان یکسان بود را به صورت یکجا تنظیم کردیم که این شکل از نوشتن کد باعث می شود تا هم تعداد سطر های کد هایمان کمتر شود و هم صفحه سبکتر و سریعتر لود شود ، که تنظیم کردیم تا آیتم ها و لینک های لیستمان به صورت بلوکی و با ارتفاعی به اندازه 41 پیکسل قرار بگیرند که این 41 پیکسل نصف ارتفاع کل عکس اولیمان می باشد .
قسمت بعدی از کد های css :
| کد: |
#submenu1 { left::0px; width:94px; }
#submenu2 { left:95px; width:95px; }
#submenu3 { left:192px; width:70px; } |
در اینجا همان طوری که از اسم style ها معلوم است این style ها برای دکمه هایی که روی منویمان قرار گرفته اند تنظیم شده اند که در واقع ما در این کد ها اندازه بلوک هایی را که در قسمت قبلی تعریف کردیم برای هر قسمت تعیین می کنیم که این اندازه ها رو باید با توجه به عکستان تعیین نمایید ، اگر شما عکس این منویی را که ما طراحی کرده ایم را در فتوشاپ باز نمایید مشاهده خواهید کرد که عرض هر قسمت ( هر دکمه ) از منوی ما دارای ابعاد فوق می باشد یعنی پارامتر دوم ، و پارامتر اول نیز اندازه لبه سمت چپ هر آیتم تا قسمت چپ عکس می باشد که در واقع از جمع اندازه عرض های قبلی به دست می آید البته به صورت تقریبی ، برای تفهیم بیشتر به عکس زیر توجه نمایید :
این کد ها را برای سایر دکمه های منو نیز می نویسیم ، خوب حالا فقط مانده است که بگوییم وقتی موس بر روی هر کدام از این بلوک های مشخص شده قرار گرفته عکس پس زمینه آن با باعدد مشخص شده ای به قسمت مورد نظر ما در بنر دومی ( پایینی ) از عکس اول تغییر یابد که برای این کار داریم :
| کد: |
#submenu1 a:hover { background: url(menu.gif) 0px -43px no-repeat ;}
#submenu2 a:hover { background: url(menu.gif) -94px -43px no-repeat ;}
#submenu3 a:hover { background: url(menu.gif) -191px -43px no-repeat ;} |
که در این دستورات مشخص کردیم که وقتی هر کدام از لینک های این بلوک ها در موقیتی قرار گرفت که موس روی آن بود عکس پس زمینه عکس مورد نظر ( دوباره همان عکس اولی ) شود ولی ایندفعه با این ابعاد که ارتفاع بلوک هامون ثابت است و فقط لبه ی سمت چپ آن ها مدام تغییر می کند که اگر دقت کنید مشاهده خواهید کرد که این اعداد همان اعدادی هستند که در قسمت قبل برای اندازه هر بلوک مشخص کردیم که دلیل آن نیز واضح است ، علت منفی بودن این اعداد هم به این خاطر می باشد که گوشه ی بالا سمت چپ عکس ما مختصات (0,0) را دارا می باشد حال اگر ما بخواهیم به سمت چپ یا پایین حرکت کنیم در واقع نقات مختصاتی ما هر دو منفی هستند .
کار نهایی را می توانید در این صفحه مشاهده نمایید )و با مشاهده سورس این صفحه می توانید کد های کامل و مابقی آن را که در این آموزش تکرار نشده مشاهده نمایید ) :
صفحه ی نمونه
مثال دیگری که با استفاده این روش ساخته شده است :
مثال دوم
خوب ما توانستیم با استفاده از 1 عکس و استفاده از کد های css منویی با افکتی خاص ایجاد نماییم کاربرد این روش یعنی css sprite فقط به این کار محدود نمی شود در واقع ما می توانیم تمامی عکس هایی را که در صفحه مان استفاده میکنیم در 1 عکس قرار دهیم و با استفاده از این مختصات بندی ها در هر لحظه بگوییم که در این قسمت از صفحه فلان بخش از عکس مان نمایش داده شود ، حالا شاید بپرسید خوب این کار چه فایده ای دارد ؟ ما تک تک این عکس ها را جدا جدا نیز می توانیم در صفحه قرار دهیم !! علت استفاده از این روش چیست ؟ سوال خوبی هستش که فواید این روش را می توانیم به این صورت بیان کنیم :
اگر ما می خواستیم در این مثال تک تک دکمه ها را جدا جدا عکس قرار دهیم باید 7 عکس برای حالت مکعمولی و 7 عکس برای حالتی که موس روی منو بود در کل 14 عکس در صفحه قرار میدادیم که این یعنی ارسال 14 درخواست به سمت سرور ولی ما فقط در صفحه 1 عکس قرار دادیم و با این کار این 14 در خواست را به 1 در خواست کاهش دادیم که خود این کار باعث می شود که سرعت لود صفحه ها به صورت قابل ملاحضه ای کاهش یابد .
اگر این کار را نیز می خواستیم با جاو.ا اسکریپت انجام دهیم یا بعضی برنامه های جانبی در موقع لود شدن صفحه مسلما حجم صفحه بیشتر از این حالت می شد ، امروز سایت های حرفه ای نیز عکس های صفحه های خود را به این گونه روی سایت های خود قرار میدهند که هم باعث افزایش سرعت در لود صفحه ها و هم کاهش تعداد درخواست های ارسالی به سمت سرور می شود.
موفق باشید .
نویسنده : امین شفیعی |
|
]
