گروه کامپیوتر دانشگاه آزاد

اساتید و دانشجویان دانشگاه آزاد اسلامی

گروه کامپیوتر دانشگاه آزاد

اساتید و دانشجویان دانشگاه آزاد اسلامی

بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِیمِ
زکات علم، نشر آن است. گروه کامپیوتر دانشگاه آزاد با هدف خدمت به دانش آموزان ، دانشجویان و آنهایی که علاقه به برنامه نویسی و طراحی و کلیه امور تخصصی کامپیوتر دارند با هدف نشر علم خدمت رسانی کند امید است کاربران در جهت تحقق این اهداف والا یار و همدم ما باشند . . .

آخرین نظرات

آموزش استفاده از لایو آیکن

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

قدم اول دانلود فایل ها

قدم دوم طبق نوشته ها عمل کنید.

قدم اول ) روش اول

دانلود 4 فایل زیر برای دانلود کافیست روی لینک کلیک کنید تا باز بشن سپس راست کلیک کنید و صفحات و ذخیره کنین سپس هر 4 فایل را در مسیر خود در هاست یا فضا وبلاگتان آپلود فرمائید :

فایل شماره 1)

http://datasystemco.com/Tarah/js/Livicons/Upload/developer/jquery-1.9.1.js

فایل شماره 2)

http://datasystemco.com/Tarah/js/Livicons/Upload/developer/json2.js

فایل شماره 3)

http://datasystemco.com/Tarah/js/Livicons/Upload/developer/livicons-1.3.js

فایل شماره 4)

http://datasystemco.com/Tarah/js/Livicons/Upload/developer/raphael.js

نکته اول : میتونید بجای نسخه ی ۹ جی کوئری از نسخه ی آخر هم استفاده کنید .

نکته دوم : livicons-1-2.min همون بسته ی کامل فونت آیکون ها هست که شما باید کد آیکون هایی که انتخاب کردید رو در این فایل قرار بدید که در ادامه نحوه ی انجام این کار رو خدمتتون آموزش میدم .

نکته سوم : از json2.min زمانی استفاده می کنید که بخواین آیکون ها در IE6 و IE7 هم قابل نمایش باشند . پس این فایل با شرط در html فراخوانی میشه که نحوه ی فراخوانیشو خدمتتون میگم .

قدم اول ) روش دوم

به جای روش اول می توانید فایل ها رو دانلود و هاست خود نریزید و کد زیر رو درون تگ باز و بسته <head> </head>

کد ها ی زیر رو جایگذاری کنید 

<script src="http://datasystemco.com/Tarah/js/Livicons/Upload/developer/jquery-1.9.1.js"></script>
<script src="http://datasystemco.com/Tarah/js/Livicons/Upload/developer/json2.js"></script>
<script src="http://datasystemco.com/Tarah/js/Livicons/Upload/developer/livicons-1.3.js"></script>
<script src="http://datasystemco.com/Tarah/js/Livicons/Upload/developer/raphael.js"></script>

حال بعد از انجام قدم اول با هر یک از روشهایی که ذکر شد می تونین قدم دوم رو آغاز کنید قدم دوم هم مثل قدم اول خیلی راحته با کمک خدا و وسیله اش ما :)

قدم دوم )

برای مثال کد زیر رو هم داخل Body قالب خود بنویسید و تغییرات را مشاهده کنید  تا ادامه توضیحات را بعد از صرف یک چای خدمتتون ارائه بدم :

<i class="livicon" data-n="user-add" data-c="#000" data-hc="#ccc" ></i>

کتابخانه ی LivIcon شامل چند صد تا آیکن هست بر فرض در اینجا مثالمان با آیکن User-Add هستش برای مشاهده کل LivIcon های موجود در این کتابخانه لینک مرجع کتابخانه LivIcon را کلیک کنید تا متوجه شوید لیو آیکن چیست و چه کاربردی در زیبایی یک صفحه وب سایت دارد . . . 

مرجع کتابخانه LivIcon

حالا خاصیت هایی که در این فونت آیکون به کار رفته رو براتون توضیح میدم :

class=”livicon” : این خصوصیت و مقدار همیشه ثابت هست .

data-n : نام آیکونی هست که مد نظر شماست . این نام رو از همون صفحه customizer کپی کنید .

data-c : این خاصیت رنگ آیکون رو مشخص می کنه .

data-hc : این خاصیت رنگ آیکون رو در زمان hover مشخص میکنه . یعنی زمانی که موس روی آیکون قرار میگیره رنگ آیکون به رنگ انتخابی شما تغییر می کنه .

 

بطور کل خاصیت هایی که میتونید در آیکون ها استفاده کنید رو براتون با مقدارهاشون لیست می کنم.

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

data-name=”tag” : با این خاصیت میتونید نام آیکون رو تعیین کنید .

data-size=”32″ : با این خاصیت میتونید سایز آیکون رو تعیین کنید .

data-color=”original” : با این خاصیت میتونید رنگ آیکون رو مشخص کنید .

data-hovercolor=”#000″ : با این خاصیت میتونید رنگ آیکون هنگام hover رو مشخص کنید .

data-animate=”true” : با این خاصیت میتونید تعیین کنید که انیمیشن در آیکون اتفاق بیوفته یا خیر .

data-loop=”false” : با این خاصیت میتونید تعیین کنید که انیمیشن آیکون تکرارشدنی باشه یا خیر ؟ (مثال در بالا زده شد)

data-iteration=”3″ : با این خاصیت می تونید تعداد دفعات تکرار انیمیشن رو تعیین کنید .

data-duration=”0″ : با این خاصیت می تونید بازه ی زمانی رو مشخص کنید که انیمیشن طی اون بازه ی زمانی اتفاق بیوفته . که بر حسب میلی ثانیه محاسبه میشه .

data-eventtype=”hover” : با این خاصیت تعیین می کنید که انیمیشن هنگام hover اتفاق بیوفته یا click .

data-onparent=”false” : با این خاصیت تعیین می کنید که انیمیشن با hover یا کلیک روی عنصر والد انجام بشه یا تنها با hover یا کلیک روی عنصر آیکون انجام بشه ؟

 



نظرات (۲)

با سلام خدمت مدیر گروه کامپیوتر دانشگاه ازاد سردرود
بنده مدیر وب پروژه سرا هستم بنده مایلم فعالیتمو در سایت شما ادامه بدم...از کجا میتونیم شروع کنیم؟؟؟بد نیست یه سری به وب من هم بزنید یک پروژه تکمیل شده رو اپ کردم...اگر مایل بودید میتونم نسخه اجرایی نرم افزار رو در اختیارتون قرار بدم برای محک توانایی بنده...خلاصه اماده همکاری هستم با راهنمایی های شما....از کجا باید شروع کرد؟
پاسخ:
با سلام خدمت شما دوست و همکار عزیز خوشحالیم شما در کنار ما باشید ...
تاج سرید اطلاعات زیر را برای شروع همکاری به ایمیل ما ارسال فرمائید UnitAzad.Ir
1-عکس خودتان
2-شماره تماس ثابت و همراه
3-آدرس محل سکونت و کد پستی
4-سطح تحصیلات و رشته و دانشگاه محل تحصیل با تشکر منتظر جواب شما هستیم یا علی موفق و موید باشید مدیر گروه کامپیوتر دانشگاه آزاد
  • اشکان عاشوری
  • سلام مرسی خوبم.سپاس از تو دوست عزیز.
    پاسخ:
    ممنون اشکان عزیز
    ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
    تجدید کد امنیتی