----- الموقع قيد التطوير المستمر ، فإذا كانت هذه زيارتك الأولى فستلاحظ فى الزيارات القادمة زيادة عدد الدروس والمواضيع  ----

الأحد، 22 مايو 2011

دروس الدريم ويفر - درس رقم : 20 - كيف يتم عمل قائمة منسدلة تظهر عند مرور الماوس


بسم الله الرحمن الرحيم 

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

تحياتي للجميع 

كيف يتم عمل قائمة منسدلة تظهر عند مرور الماوس 



وراح استخدم اللير في عمل القوائم 

في البداية نقوم بعمل قائمة بالفوتوشوب 
وأي كانت القائمة 


الآن في برنامج الدريم ويفر 
نقوم بعمل ثلاث ليرات كما في الصورة التالية 








نقوم الآن بوضع رؤوس القوائم في الليرات الثلاثة 









نقوم بتسمة القوائم الثلاثة كما في الصورة التالية 

يعني كل قائمة يجب أن تأخذ اسم معين 
مثلا الأخبار راح نسميهة news1







الآن اسفل كل قائمة نقوم برسم لير 
ونضع تحت كل لير القائمة الخاصة به 








لاحظ قمنا بتسمة القوائم 
يعني كل قائمة يجب أن تأخذ نفس اسم رأس القائمة 
مثلا news1 
وتحتها news2


وهكذا مع بقية القوائم  



الآن سوف أختار رأس قائمة الأخبار (news1)
واذهب الى بهيفرز 
ونضغط على 
show hide Elements







الآن نقوم بإظهار (news2) 
ونقوم بإخفاء القوائم التي تنتهي برقم 2  
اي إننا سوف نقوم باخفاء القوائم الأخرى واظهار فقط قائمة الاخبار 







الآن نختار الحدث عند مرور الماوس 
on mouse over







نكرر ذلك على بقية القوائم الأخرى 


الآن نقوم باخفاء القوائم الثانية يعني اللي تنتهي برقم 2 

من AP Elements 






الآن قم بحفظ الصفحة واستعرضها في المتصفح 







الآن ستلاحظ عند مرور الماوس على احد القوائم سوف تظهر القائمة كاملة 
وكذلك في كل القوائم ولكن آخر قائمة سوف تظل ظاهرة ولا تختفي 


لذلك سوف نقوم بعمل لير حول القوائم كلها 








الآن نذهب الى 
show hide Elements


ونقوم بإظهار اللير اللي عملناه 
ونخفي جميع الليرات التي تنتهي برقم 2 





والحدث 
on mouse over





الى هنا انتهى الدرس 
وهاية اضافة 
اذا تحبون تسوهة يعني بكيفكم 
نعود الى القوائم التي تنتهي برقم 2 
نضيف لها حدث آخر 
وهو اخفاء القائمة بعد النقر على اي جزء من القائمة 


سوف أقوم بتحديد قائمة نيوز 2 news2
واقوم باخفاءها 





ونضع الحد 
عند النقر 





انتهى كل شيء 

واذا كنت تستخدم 
نسخة cs3
فهناك قوائم جاهزة 
وأيضا توجد فلاتر كثيرة جاهزة 
والفلاتر جميلة جدا 


:::::::::::::::


اتمنى ان أكون قد وفقت في الشرح 

واي خطوة ما فاهميهة اخبروني بها  

تحياتي للجميع




لكلمات الدلالية للموضوع:
 ادوبي -  دريم ويفر-  اودوبي دريم ويفر - دريم ويفر كامل -  برنامج تصميم المواقع والويب - منتدى دريم ويفر DreamWeaver -  dreamweaver تحميل - شرح dreamweaver - برنامج dreamweaver  - dreamweaver سلسلة تعليم الدريم ويفر بالفيديو صوت وصورة -  تعليم برنامج Dreamweaver CS4 - تعلم برنامج Dreamweaver CS3  - دروس  تعليم  -  Dreamweaver تعلم برنامج دريم ويفر فيديو وصوت وصورة - دورة تعليم برنامج Adobe Dreamweaver CS4 ادوبي دريم ويفر -  تعلم برنامج دريم ويفر شرح برنامج Dreamweaver CS4 فيديو صوت - تعليم الدريم ويفر dreamweaver mx بالعربي من pclab - تعليم دريم ويفر سي اس 4 على 4 أسطوانات -  تعليم برنامجدريم ويفر سي اس 4 بالإضافة لتطبيقات متقدمة  - تعلم Dreamweaver .. بكل بساطة من تحت الصفر حتى الاحتراف -  برنامج متخصص لإنشاء وإدارة تطبيقات ومواقع الويب - كل ما يتعلق ببرنامج الدريم ويفر وشروحاته والتصميم بيه - دروس دريم ويفر DreamWeaver, - دروس فيديو لـ Dreamweaver باللغة العربية - تصميم صفحات الويب من خلال برنامج دريم ويفر - مشاكل Dreamweaver - سلسلة دروس:تعلم DreamWeaver MX - برنامج دريم ويفر - اكبر واشهر برنامج لتصميم المواقع والبرمجه Adobe dreamweaver CS3 - تحميل برنامج DreamWeaver 8 كامل - برنامج دريم ويفر 8 كامل - Adobe Dreamweaver - dobe® Dreamweaver® CS5 - Macromedia Dreamweaver -  web development application - Free Download,Dreamweaver - dreamweaver download - dreamweaver cs3 - dreamweaver cs4- dreamweaver - dreamweaver cs5 crack - دروس دريم ويفر DreamWeaver - دروس دريم ويفر Dream Weaver بلعربى صوت وصورة بروابط مباشرة- تحميل الدروس - دروس - دروس في الدريم ويفر DreamWeaver دورة Dreamweaver-  لدروس الدريم ويفر وهذه الدروس والدورات ستكون طريق لك للاحتراف في البرنامج - ارشيف دروس جديدة واحترافية لبرنامج الدريم ويفر‏ - تعلم الدريم ويفر - ماكروميديا دريم ويفر لانشاء المواقع


Twitter Delicious Facebook Digg Stumbleupon Favorites More