| دورة تصميم المواقع بإسلوب المحترفين web2.0 دورة تصميم المواقع بإسلوب المحترفين web2.0
ملقي الدورة: [vista-design] |
|
| | LinkBack | أدوات الموضوع | انواع عرض الموضوع |
|
#1
| |||||
| |||||
|
![]() ([الدرس السابع]شرح كيفية عمل القوائم المتحركة والمتعددة css menus) [الدرس السابع]شرح كيفية عمل القوائم المتحركة والمتعددة css menus نستكمل معكم أخوانى الكرام دروس دورتنا وفى هذا الدرس راح نتعلم كيفية عمل القوائم المتحركة واختصار للوقت راح نشرح لكم الخلاصة , لانه فى تصميم المواقع وبرمجتها يجب ان تعلم انه فيه أشياء كثيرة لابد ان تفرغ وقتك لك وتعطيها اهتمامها الاول وموضوع القوائم المتحركة يعتبر من الأشياء اللى ممكن تحصل عليها من اى موقع وبمجرد تعلمك كيفية التعديل , فهذا يكفى لان يؤدى طلبك حتى تعطى وقتك للبرمجة الداخلية للموقع .......... اولا: أنا راح أشرح أسهل أساليب القوائم المتحركة وهو قوائم tabs ثانيا: فى الملفات المرفقة يوجد ملف شامل لامثلة قوائم متحركة كثيرة ملاحظه: الملف تم أخذه من موقع dynamicdrive.com للاكواد وأدوات المبرمجين حفظا للحقوق راح نأخذ منها المثال الثانى example2 ونشرح طريقة التعديل عليه : اولا: قم بفتح ملف صفحة dropdowntabsdemo.htm ببرنامجنا phpdesigner انظر لكود example2 #صورة 1 ![]() راح تجد هذا الكود كود: <div id="bluemenu" class="bluetabs"> <ul> <li><a href="http://www.dynamicdrive.com">Home</a></li> <li><a href="http://www.dynamicdrive.com/style/" rel="dropmenu1_b">CSS</a></li> <li><a href="http://www.site.com" rel="dropmenu2_b">Partners</a></li> <li><a href="http://tools.dynamicdrive.com">Tools</a></li> </ul> </div> هذه هو كود القوائم الرئيسية , يمكنك تغيير الرابط الخاص بأى لنك تريده مثلما تشاء, ويمكنك اضافة عدد لا نهائى من القوائم بأضافة وسم اللست مثال: كود: <li><a href="http://tools.dynamicdrive.com">contact us</a></li> الحين عرفنا القوائم الرئيسية ... ننتنقل الحين للقوائم الفرعية المدرجة تحت قسم رئيسى كيف راح نضيفها لزر رئيسى من هذه الازارار اولا: حتى تفعل ذلك لابد ان تشير فى كود القوائم الرئيسية السابق بأننا راح نضيف له ازرار فرعية داخلية وذلك بأستخدام العبارة الأتية : كود: rel="القوائم الفرعية id" كود: <li><a href="http://www.site.com" rel="dropmenu2_b">Partners</a></li> نأتى الان للازرار الفرعية وراح يكون كودها كالاتى: كود: <div id="dropmenu2_b" class="dropmenudiv_b" style="width: 150px;"> <a href="http://www.cssdrive.com">CSS Drive</a> <a href="http://www.javascriptkit.com">JavaScript Kit</a> <a href="http://www.codingforums.com">Coding Forums</a> <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a> </div> لرؤية مثال عملى لهذه القوائم اضغط على الصورة: ![]() بهيك فى هذا الدرس تكونوا قد عرفتوا كيف القوائم الرئيسية سهلة أتمنى تكونوا استمتعتم بالدرس المطلوب من الأعضاء: عمل تعديل على هذه القائمة واضافة ازرار اضافية وفرعية لها ثم ارفاق الملفات بالكامل او وضع صورة فقط للتعديل. أخوكم vista-design توقيعي عالم مطورى الويب لتعليم برمجة وتصميم المواقع www.advphp.com آخر تعديل بواسطة vista-design ، 02-02-2010 الساعة 01:29 AM |
|
#2
| |||||
| |||||
| |
![]() |
| العلامات المرجعية |
مواضيع جديدة في قسم دورة تصميم المواقع بإسلوب المحترفين web2.0 |
| |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
|
|
المواضيع المتشابهه | ||||
| الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
| الدرس السابع والثامن والتعامل مع القوائم (الدرس الاخير) | قناص جوبا | لغات برمجة مواقع PHP, ASP, Java Script, Perl | 2 | 13-07-2011 02:50 PM |
| دورة الجيكويري، [مناقشة] الدرس السابع :شرح عمل القوائم الرئيسية لـ، دورة الجيكويري | vista-design | تصميم المواقع بتقنية الـ جي كويري jQuery | 28 | 12-05-2011 08:04 PM |
| دورة jquery شرح عمل القوائم الرئيسية والجانبيه لموقعك -[الدرس السابع] | vista-design | تصميم المواقع بتقنية الـ جي كويري jQuery | 1 | 25-08-2010 01:27 AM |
| مناقشة الدرس السابع شرح كيفية عمل القوائم المتحركة | vista-design | دورة تصميم المواقع بإسلوب المحترفين web2.0 | 15 | 11-02-2010 12:59 AM |
| الدرس الثامن : القوائم في لغة الــ html | الوليد الراشدي | دورة تعلم لغة الهتمل HTML | 0 | 12-08-2008 02:51 PM |