مطور Mtwer

قناص جوبا · #1 31-01-2010, 07:57 PM

السلام عليكم النهارده قررت انه يكون درس احترافى وكل الناس نفسها تتعلمه
الدرس هيكون مقسم لتلت طرق
كل طريقه ليها وقت معين تتعمل فيه

الطريقه الاولى :
اننا هنعمل الازرر منفصله بمعنى ان كل زر هيكون لوحده هنصممه بالفوتوشوب لوحده بلون اى كان وهو هو الزر بالظبط او غير حسب الحركه اللى احنا عاوزين نعملها
و الصورتين المصمين

هنحط فى جزء ال body

كود PHP:

  <div class="Ahmed1">
    <a class="ra1" href="http://vbegy.info/vb" title="الرئيسية"></a>
</div>

طبعا مش محتاج شرح الكود
وبعدين فى منقطه ال style

كود PHP:

  .Ahmed1  {
    background-image:url('1.png');
    background-repeat:no-repeat;
    height:107px;
    width:40px;
    position:relative;
}
a.ra1  {
    position:absolute;
    height:107px;
    width:40px;
}
.Ahmed1:hover  {
    background-image:url('1_hover.png');
    background-repeat:no-repeat;
    height:107px;
    width:40px;
    position:relative;
}

شرح الكود
اول حاجه بعمل استعداء للصوره عادى من الكلاس Ahmed1
وبنحدد كل حاجه الطول والعرض ورابط الصوره
وبعدين بعمل رابط عليها كما تعلمنا سابقا
وبعدين بناخد جزء

كود PHP:

  .Ahmed

كله كوبى وبعدين نضيف بعد اسم الكلاس

كود PHP:

  :hover

بحيث يكون شكلها النهائى

كود PHP:

  .Ahmed1:hover

ونحط فيها رابط الصوره ولو الصوره المقاسات بتاعتها اكبر هنكبرها لو نفس المقاس هنتركها كما هى
وفى المرفقات الكود كامل للطريقه

ودى تعتبر اسهل الطرق والمثال عليها
Untitled Document

الطريقه الثانيه
اننا نصمم صوره فيها زرين جنب بعض بالشكل
وبعدين هنعمل برضه نفس السابق فى ال body بس هنذود ما بين <a></a> اسم الحاجه اللى احنا عاوزنها وليكن الرئيسية
الصوره اللى احنا مصممنها

كود PHP:

  <div class="Ahmed1">
    <a class="ra1" href="http://vbegy.info/vb" title="الرئيسية">الرئيسية</a>
</div>

وفى جزء ال style
هنمشى خطوه خطوه

كود PHP:

  .Ahmed1  {
    background:url('buttons.png') no-repeat right top;
    height:25px;
    width:94px;
    text-align:center;
    padding-top:5px;
}

هنكتب اسم الكلاس علشان نستدعيه .Ahmed1
وبعدين هنختار ال backbround ونختار الصوره اللى عليها الزرين وبعدين هنختار no-repeat يعنى عدم التكرار وبعدين هنختار right اى الجزء الايمين من الصوره وبعدين top يعنى يجب الصور من فوق حسب الارتفاع اللى احنا هنحدد
وبعدين هنحدد العرض والارتفارع وهنكتب text-align:center
علشان الكلام يكون فى المنتصف وبعدين هنكتب padding-top:5px; علشان يبعد الكلام شويه والحاجات دى بتكون حسب تقديراتنا وحسب التصميم بتاعنا
وبعدين هنكتب الرابط

كود PHP:

  .Ahmed1 a  {
    color:black;
    font: bold 12pt Arial;
   text-decoration:none;
}

هنستدعيه

كود PHP:

  .Ahmed1 a

وبعدين هنحدد اللون بتاعه color:black
وهنحدد نوع الخط وحجمه وبعدين text-decoration:none; دى علشان نشيل الخط اللى تحت الرابط

وبعد كده هنعمل استدعاء لل hover

كود PHP:

  .Ahmed1:hover  {
    background:url('buttons.png') no-repeat left bottom;
    height:31px;
    width:94px;
    text-align:center;
    padding-top:5px;
}

هنحدد ال background ونختار المسار للصوره وبعدين عدم التكرار وبعدين نختار left يعنى نختار الصور من الشمال وبعدين نختار bottom
ونحدد الطول والعرض المناسب للزر ونفس السابق بالظبط
وبعدين هنعمل تحديد لون الرابط عند ال hover

كود PHP:

  .Ahmed1 a:hover  {
    color:#fff;
}

زى ما احنا شافين اننا حددنا اللون فقط وهو هياخد من الكود السابق كل الخواص مثل الحجم ونوع الخط
وفى المرفقات الكود كامل
ولمثال على الطريقه من هنا
Untitled 1

الطريقه الثالثه والاكثر احترافيه وسهوله وهى بالخاصيه

كود PHP:

  background-position:

طبعا الطريقه دى هتستخدم لو عندنا استايل فانا هشرح على هيدر استايل وهو الاستايل الجديد بتاعى بس لسه منزلش

اولا احنا هنصمم الصوره اللى هنعمل عليها الازرر
وليكن دى

وبعدين هنغير الالوان بتاعت الازرر علشان لما تتحرك ينج الشكل بتعها
والشكل بعد التغير وليكن ده

هنخش على الاكسبريشن ويب وبعدين هنظبط الشكل البدأئى بتاعنا

كود PHP:

  <div class="h">
<a class="rab1" href="index.php" title="الرئيسية"></a>
<a class="rab2" href="register.php" title="التسجيل"></a>
<a class="rab3" href="usercp.php" title="التحكم"></a>
</div>

وبعدين ما بين

كود PHP:

  <style type="text/css">

</style>

هنكتب خصائص الكلاسكات
وبعدين نعمل حفظ للصفحه بتاعتنا فى اى مكان ونفتحها بالمتفح علشان نشوف الشكل بتعنا لما الموس يجى على الزر
وهنكت خصائص الكلاس الاول

كود PHP:

  .h{
    background-image:url('file:///d:/AppServ/www/vb/sama_vbegy/images/sama_01.gif');
    height:208px;
    background-repeat:no-repeat;
    width:338px;
    float:left;
    position:relative;
}

لحد هنا مفيش اى صعوبه واحنا فى الدروس السابقه شرحنا ازاى بنوزع

كود PHP:

  a.rab1{
    position:absolute;
    height:85px;
    width:100px;
    bottom:10px;
    left:15px;
}

كما تعودنا
وبعدين هنا الاختلاف

كود PHP:

  a.rab1:hover{
    background-image:url('file:///d:/AppServ/www/vb/sama_vbegy/images/Ahmed_01.gif');
    background-position:-15px -113px;
}

هنشرح الكود

كود PHP:

  a.rab1:hover

احنا بنكتب الخصائص بالشكل ده

كود PHP:

  a.rab1

وبعدين هنعمل النقطين دول :
وبعدين هنكتب

كود PHP:

  hover

وهنفتح القوسين
هنكتب

كود PHP:

  background-image:url('file:///d:/AppServ/www/vb/sama_vbegy/images/Ahmed_01.gif');

عادى كما تعودنا
وبعدين هنكتب

كود PHP:

  background-position:

وبعدين هنكتب الاول المسافه فى المحور العمودى السينى
احنا هتكون بالناقص يعنى تتحرك ناحيه الشمال كما فى خط الاعداد فى ماده الرياضيات

كود PHP:

  ------------0+++++++++++

الصفر فى المنتصف والسالب ناحيه الشمال والموجب ناحيه اليمين
احنا هنا هنلاحظ التحديد
-15px
وطبعا احنا نقدر نظبطها حسب كل تصميم بتاعنا
وبعدين هندوس مسافه من الكيبورد علشان نظبط المحور الصادى
وبرضه اللى دارس رياضه
الموجب فقط والصفر فى المنتصف والسالب تحت
بيحث يكون الشكل النهائى

كود PHP:

  background-position:-15px -113px;

واحنا بنظبط الارقام دى حسب تصمينا ونتحكم فيها سواء بالسالب او الموجب بس طبعا الموجب من غير اى اشاره
يعنى كده
15px
ودلوقتى نشوف المثال بتاعنا علشان اول زر بعد تسجيل العمل
هنلاقيه متحرك
ونطبق نفس الحكايه على باقى الازرر الباقيه
المثال من هنا
Untitled 2
والاكواد فى المرفقات

الاكواد فى المرفقات بالترتيب 1 و 2 و3
الموضوع الاصلى
منتديات فى بى ايجى
منتديات فى بى ايجى التطويرية

الملفات المرفقة

lesson.zip‏ (1.8 كيلوبايت, المشاهدات 152)

توقيعي

لا اله الا الله .. محمد رسول الله
منتديات فى بى ايجى
مدونه فى بى ايجى
دليل مواقع فى بى ايجى
مركز رفع فى بى ايجى

مُجَاهِد · #2 31-01-2010, 11:52 PM

وعليكم السلام ورحمة الله وبركاتة ..

ما شاء الله .. تبارك الله ..

درس روعه .. ويضاف الى قائمة المواضيع المميزة ..

وفي انتظار المزيد من الدروس المميزة ..

بارك الله فيك ..

توقيعي

حصري لمطور [Product] منع أعضاء محددين من تعديل البريد // كلمة المرور

حصري لمطور [Product] منع تعديل المشاركات الا بعد عدد من المشاركات

حصري لمطور [Product] أخبار المنتدى المتحركة بالجى كويري jQuery

حصري لمطور [Product] منع إضافة الكلمات الدلالية tag الا بعد عدد من المشاركات

حصري لمطور [Product] اعلانات ادسنس أو أي اعلان في الملف الشخصي للعضو

[ Product ] منع رفع المواضيع - منع الردود المتتالية لنفس العضو - الإصدار 2 الثاني (حصري لمطور mtwer)

[ Product ] منتج شريط جريدة الرياض الإخباري ! (حصري لمطور mtwer)

حصري لمطور [ Product ] الروابط الإضافية في الفوتر Footer

بو مجاهد

ابو فاطمة · #3 01-02-2010, 10:03 PM

عليكم السلام ورحمة الله وبركاته

جزاكم الله خير

توقيعي

لاخير في كاتم علم

اخواني اعذروني على دخولي المتقطع لضروفي الخاصة وتعب خدمة الانتر نت

قناص جوبا · #4 01-02-2010, 11:25 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة مُجَاهِد

وعليكم السلام ورحمة الله وبركاتة ..

ما شاء الله .. تبارك الله ..

درس روعه .. ويضاف الى قائمة المواضيع المميزة ..

وفي انتظار المزيد من الدروس المميزة ..

بارك الله فيك ..

شرف ليا مرورك يا غالى على الموضوع
ووضعه فى قائمه المواضيع المميزه
منور يا غالى

اقتباس:

المشاركة الأصلية كتبت بواسطة ابو فاطمة

عليكم السلام ورحمة الله وبركاته

جزاكم الله خير

وعليكم السلام
ان شاء الله يكون درس بسيط وخفيف على الجميع

توقيعي

لا اله الا الله .. محمد رسول الله
منتديات فى بى ايجى
مدونه فى بى ايجى
دليل مواقع فى بى ايجى
مركز رفع فى بى ايجى

أبو شهد · #5 02-02-2010, 05:58 AM

تقدر تسويها بكل سهوله عند تصميمك بالفوتوشوب
وبعد ما تجهز الصور وتعمل لها تقطيع
تحول الملف على الايمج ريدي وتعمل over لكل زر

يعطيك العافيه

توقيعي

سيرف نت لخدمات المواقع
www.servnt.com

بريد الدعم الفني : support @ servnt.com
متحرك : 00971507118665

قناص جوبا · #6 03-02-2010, 05:12 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة أبو شهد

تقدر تسويها بكل سهوله عند تصميمك بالفوتوشوب
وبعد ما تجهز الصور وتعمل لها تقطيع
تحول الملف على الايمج ريدي وتعمل over لكل زر

يعطيك العافيه

لا يا غالى تفرق كتير جدا من حيث الجوده كمان ده نقطه
وكمان لو تقارن باول طريقه وتانى طريقه هتلاقى انك مش هتعرف تعملها بالفوتوشوب نهائى ده فى حاله استخدام اكتر من زر ويكون الاضافه دينيميكى
كما فى المدونه مثلا او فى دليل مواقع كما هنا مثلا
http://vbegy.info/dir

توقيعي

لا اله الا الله .. محمد رسول الله
منتديات فى بى ايجى
مدونه فى بى ايجى
دليل مواقع فى بى ايجى
مركز رفع فى بى ايجى

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

LinkBacks (?) LinkBack to this Thread: http://www.mtwer.com/vb/t20084.html
أرسلت بواسطة	For	Type	التاريخ
الدرس التاسع عن كفيه عمل ازرر متحركه بطريقه احترافيه بتقنيه css - منتديات فى بى ايجى التطويرية	This thread	Refback	21-02-2011 04:00 PM

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
درس عمل صفحه باكثر من لون او استايل باكثر من لون او اى سكربت باكثر من لون	قناص جوبا	لغات برمجة مواقع PHP, ASP, Java Script, Perl	11	06-01-2011 03:13 PM
ممكن شرح طريقه ارسال الرسايل عن طريقه مجموعه جوجل بصيغه هتمل	احمدكهربا	دعم فني ، و صيانة المنتديات مجاناً	2	20-08-2010 06:27 AM
الكود باكثر من مكان	rayhan	دعم فني مجانا جوجل ادسنس Google Adsense	1	20-05-2010 03:40 PM

مطور Mtwer

روابط مفيدة ننصح بزيارتها

روابط مهمة

من خدماتنا

خيارات الاعضاء والزوار