ط¨ط±ظ†ط§ظ…ط¬ ط±ط§ط¦ط¹ ظ„ط¹ظ…ظ„ ظ‚ظˆط§ط¦ظ… ظ…ظ†ط³ط¯ظ„ط© ط¨ط§ظ„ط¬ط§ظپط§ ط§ط³ظƒط±ط¨طھ ط§ظƒط«ط± ط§ظƒط«ط± ظ…ظ† ط±ط§ط¦ط¹
أقدم لكم اليوم شرح طريقة متكامل لبرنامج يمكنك من خلاله عمل قائمة منسدلة بالجافا لموقعك
دون الحاجة إلى معرفة لغة البرمجة الـ جافا سكريبت script
فهو سهل الاستخدام، فقط تقوم بإعطاء البرنامج مضمون و مظهر القائمة ليقوم بدوره إنشاء كود code الجافا
اسم البرنامج: CoffeeCup Free DHTML Menu Builder
البرنامج مجاني free من الشركة ولا يحتاج إلى تسجيل
والآن سأقوم بالشرح طريقة الكامل لكيفية إنشاء قائمة منسدلة بالجافا من خلال هذا البرنامج لظهر بهذه الطريقة
ثم قم بتنصيب setupه في جهازك بشكل عادي و طبيعي
الآن، قم بفتح البرنامج لتظهر لك النافذة التالية
الآن سأبدأ بشرح طريقة كيفية إنشاء الكود code
[color=gray]في النافذة السابقة ( Menu Designer ) يمكنك إدراج مضمون القائمة
1. Your Menu: هنا يظهر مضمون و محتويات القائمة.
2. من هنا يمكنك إدراج محتويات القائمة
- Add Root Item: يقوم بإضافة قائمة رئيسية.
- Add Sub Item: يقوم بإضافة قائمة فرعية.
- Delete Item: يقوم بحذف القائمة المحددة.
3. من هنا يمكنك تسمية القوائم.
4. هنا يمكنك وضع رابطة القائمة.
5. هنا يمكنك تحديد طول و عرض القائمة الواحدة، يمكنك الضغط على Apply to All لجعل جميع القوائم بالمساحة المحددة.
في هذه النافذة ( Menu Colors ) يمكنك تغيير ألوان القائمة و الخطوط
1. Main Menu Colors: ألوان القائمة الرئيسية.
- Background Color: لون خلفية القائمة.
- MouseOver Background Color: لون الخلفية عند مرور الماوس.
- Font Color: لون الخط.
- MouseOver Font Color: لون الخط عند مرور الماوس.
- Border Color: لون حدود القائمة.
2. Sub Menu Colors: ألوان القائمة الفرعية.
نفس الطريقة في (ألوان القائمة الرئيسية)
و إذا أردت جعل ألوان القائمة الفرعية مثل ألوان القائمة الفرعية أشغط على ( Copy Main )
[
3. Menu Color Sample: يظهر هنا عينة لألوان القائمة.
في هذه النافذة ( Options ) يمكنك من تغيير الخيارات و الخطوط
1. Menu Type: هنا نوع القائمة إذا أردتها أفقية (Horizontal) أو عمودية (Vertical)
2. خيارات مكان النص و مكان القائمة في الصفحة:
- Menu Text Alignment: تحدي مكان النص ( يسار / يمين / وسط )
- Horizontal Alignment: مكان القائمة أفقياً في الصفحة ( يسار / يمين / وسط )
- Vertical Alignment: مكان القائمة عموديا في الصفحة ( أعلى الصفحة / وسط الصفحة / أدنى الصفحة )
3. خيارات مكان القائمة بالبيكسل ( X , Y )
- Menu Top: مكان القائمة إبتداءاً من الأعلى. ضعه (صفر) لجعله في أعلى الصفحة.
- Menu Left: مكان القائمة إبتداءاً من اليسار. ضعه (صفر) لجعله في أقصى اليسار.
ملاحظة: إذا أردت أن تكون القائمة في وسط الصفحة قم بالتعديل خيار ( Horizontal Alignment ) إلى ( Center ) في رقم 2.
4. خيارات هامش القائمة (ليس مهم) فقط حددها (صفر)
- Left Padding: هامش القائمة من اليسار.
- Top Padding: هامش القائمة من الأعلى.
5. خيارات حجم الحدود. أفضل خيار هو الحجم (1 بيسكل)
6. خيارات عرض القائمة المنسدلة.
- OnMouseOver: تظهر القائمة عند مرور الماوس.
- OnClick: تظهر القائمة عند الضغط بالماوس.
7. هنا خيارات شكل الخط و حجمه و خيارات أخرى.
8. Menu Arrows: خيارات ظهور السهم و إخفاؤه
- No Arrow: إذا لم تريد ظهور السهم.
- Light Arrow: لون السهم فاتح.
- Dark Arrow: لون السهم داكن.
[center]9. خيارات عامة
- Keep Selected Path Highlighted: جعل القائمة المحددة مظللة.
- Border Between Menu Items: وضع فاصل بين القوائم.
الآن و بعد الإنتهاء من شرح طريقة كيفية ظهور القائمة و إدراج محتوياتها، نأتي للخطوة الأهم.
و هي كيفية إنشاء الكود code و وضعه في صفحة HTML ؟؟!!
بعد الإنتهاء من إدراج محتويات القائمة و تحديد شكلها، قم بالضغط على هذا الزر
لتظهر لك النافذة التالية:
وهو الكود code الذي عليك نسخه في صفحة ال
[center][b]قم بتظليل الكود code و نسخه أو أضغط على زر Copy to Clipboard.
الآن إفتح صفحة ال HTML المراد وضع القائمة بها
ثم قم بلصق الكود code في المكان المحدد في الصورة التالية: (يجب أنت تكون بعد مباشرة)
انتهينا من الشرح طريقة و باقي الأزرار السفلى التي لم اشرح طريقةها، وهي كالتالي
: لحفظ عملك.
لفتح عمل قمت بتخزينه.
لمشاهد عينة من القائمة في متصفح الإنترنت.
: لمشاهدة كود code الجافا الخاص بالقائمة
: الخروج من البرنامج
منقوووووووووووول للافادة والامانة
الموضوع الاصلى موقع مسلم
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©
رد مع اقتباس
