كنترل پنل             جستجو               پرسشهای متداول            .:: آخرین پست‌های انجمن ::.            لیست اعضا            مدیران سایت             درجات        ورود
فهرست انجمن‌ها -> طراحي سايت‌هاي اينترنتي -> اصول طراحي صفحات وب
پاسخ دادن به این موضوع
ساختن منو با CSS Sprites
پست تاریخ: دوشنبه 29 شهریور 1389 - 16:02    
Gytyonline
مديريت كل انجمن‌ها
مديريت كل انجمن‌ها


پست: 899
عضو شده در: 14 شهریور 1384
محل سکونت: tehran
iran.gif


امتياز: 8184

عنوان: ساختن منو با CSS Sprites خواندن مشخصات فردی ارسال پیام شخصی ارسال email

سلام
اگر یادتان باشد قبلا در این تاپیک قسمت اول این آموزش را قرار داده بودم که در آن آموزش ما یک منوی برای وب سایت خودمان طراحی و پیاده سازی کردیم حالا در این آموزش که در ادامه آموزش قبلی و قسمت دوم آن می باشد می خواهم به شما یاد دهم که چگونه می توان به این منو افکت هایی خاص داد تا موقعی که موس را روی هر یک از قسمت های این منو قرار دادیم رنگ آن عوض شود البته توسط 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 در خواست کاهش دادیم که خود این کار باعث می شود که سرعت لود صفحه ها به صورت قابل ملاحضه ای کاهش یابد .
اگر این کار را نیز می خواستیم با جاو.ا اسکریپت انجام دهیم یا بعضی برنامه های جانبی در موقع لود شدن صفحه مسلما حجم صفحه بیشتر از این حالت می شد ، امروز سایت های حرفه ای نیز عکس های صفحه های خود را به این گونه روی سایت های خود قرار میدهند که هم باعث افزایش سرعت در لود صفحه ها و هم کاهش تعداد درخواست های ارسالی به سمت سرور می شود.
موفق باشید .
نویسنده : امین شفیعی

[ وضعيت كاربر: ]

تشکر کردن از پست  پاسخگویی به این موضوع بهمراه نقل قول 
تشکرها از این پست: sistemprof (سه‌شنبه 30 شهریور 1389 - 09:26) epooli (چهار‌شنبه 7 اردیبهشت 1390 - 19:11)

پست تاریخ: چهار‌شنبه 7 اردیبهشت 1390 - 19:08    
epooli
تازه به جمع ما پيوسته
تازه به جمع ما پيوسته


پست: 1
عضو شده در: 7 اردیبهشت 1390



امتياز: 9

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

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

نمونه فایل رو میزارم اگه از دوستان کسی میتونه کمک کنه لطف بزرگی کرده

http://up.iranblog.com/images/s020f75mb7ccp6iqv1ap.zip

[ وضعيت كاربر: ]

تشکر کردن از پست  پاسخگویی به این موضوع بهمراه نقل قول 
تشکرها از این پست:

پست تاریخ: چهار‌شنبه 7 اردیبهشت 1390 - 19:53    
Gytyonline
مديريت كل انجمن‌ها
مديريت كل انجمن‌ها


پست: 899
عضو شده در: 14 شهریور 1384
محل سکونت: tehran
iran.gif


امتياز: 8184

عنوان: پاسخ به «ساختن منو با CSS Sprites» خواندن مشخصات فردی ارسال پیام شخصی ارسال email

سلام
در این قسمت از کد‌های فایل css ای که نوشتید اشتباه کردید:

کد:
#submenu1  {  left:0px;        width:100px;    }
#submenu2  {  left:101px;      width:100px;    }
#submenu3  {  left:201px;      width:100px;    }
#submenu4  {  left:301px;      width:100px;    }
#submenu5  {  left:401px;      width:100px;    }
#submenu6  {  left:501px;      width:100px;    }
#submenu7  {  left:601px;      width:99px;     }


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

[ وضعيت كاربر: ]

تشکر کردن از پست  پاسخگویی به این موضوع بهمراه نقل قول 
تشکرها از این پست:


نمایش پستها:                 مشاهده موضوع قبلی :: مشاهده موضوع بعدی  
پاسخ دادن به این موضوع
 

صفحه 1 از 1

تمام زمانها بر حسب GMT + 3.5 Hours می‌باشند
 Related Topics 


 information 

 

پرش به:  
شما نمی توانید در این بخش موضوع جدید پست کنید
شما نمی توانید در این بخش به موضوعها پاسخ دهید
شما نمی توانید موضوع های خودتان را در این بخش ویرایش کنید
شما نمی توانید موضوع های خودتان را در این بخش حذف کنید
شما نمی توانید در این بخش رای دهید


Copyright 2004-2024. All rights reserved.
© by Aftabgardan Cultural Center : Aftab.cc