يعلمك هذا المقال كيفية استخدام Adobe Dreamweaver لإنشاء مربع منسدل لصفحة ويب. المربعات المنسدلة هي قوائم "منسدلة" عند النقر فوق عنصر في صفحة الويب الخاصة بك ، مما يعرض المزيد من الخيارات في العملية.
خطوات
الخطوة 1. افتح مشروع Dreamweaver
انقر نقرًا مزدوجًا فوق ملف المشروع للقيام بذلك. إذا كنت تريد إنشاء مشروع Dreamweaver جديد ، فستفتح Dreamweaver بدلاً من ذلك ، وانقر فوق ملف ، انقر جديد ، واتبع أي مطالبات تظهر على الشاشة.
الخطوة 2. إنشاء قائمة مرتبة
لإنشاء قائمة منسدلة ، يجب أن يكون لديك عنصر نقطي واحد على الأقل. يمكنك إنشاء نقطة عن طريق إيقاف تشغيل CSS (انقر فوق ملف رأي عنصر القائمة ، حدد تجسيد النمط ، وانقر أنماط العرض إذا تم تحديده) ، والنقر فوق الموقع حيث تريد إضافة النقطة ، والنقر فوق رمز النقطة في أسفل النافذة ، وكتابة اسم النقطة. يجب عليك بعد ذلك إعادة تشغيل CSS قبل المتابعة.
- سيكون اسم النقطة هنا بمثابة المنشط لقائمتك المنسدلة (على سبيل المثال ، الزر الذي يمر فوقه أحدهم أو ينقر عليه لفتح القائمة المنسدلة).
- تجاوز هذه الخطوة إذا كان لديك بالفعل عنصر قائمة تريد تحويله إلى قائمة منسدلة.
الخطوة 3. تحديد اسم القائمة الخاصة بك
انقر على الشفرة وتأكد من أنك على مصدر الرمز الإعداد ، ثم قم بالتمرير لأسفل إلى رمز القائمة المطلوبة (سيكون بين"
"علامة و"
"tag) وابحث عن علامة" "أعلى الجزء العلوي"
العلامة. الكلمة في الاقتباسات هي اسم قائمتك.
-
إذا كنت لا ترى اسمًا ، فقم بإدراج العلامة (حيث يشير الاسم إلى اسمك المفضل في القائمة) مباشرةً أعلى ملف
بطاقة شعار.
الخطوة 4. إزالة نقطة (نقاط) الرصاصة
تأكد من أنك في المكان الصحيح من خلال النقر فوق تصميم علامة التبويب ثم النقر فوق مصمم CSS علامة التبويب في الزاوية العلوية اليمنى من النافذة ، ثم قم بما يلي:
- انقر + على يمين عنوان "المحددات".
- اكتب #name ul حيث "الاسم" هو اسم قائمتك.
- اضغط على ↵ Enter مرتين.
- قم بالتمرير لأسفل وانقر فوق قائمة على غرار نوع في الجزء السفلي من مصمم CSS التبويب.
- انقر لا أحد في القائمة المنبثقة الناتجة.
الخطوة 5. قم بتغيير القائمة المرتبة لعرضها أفقيًا
لنفعل ذلك:
- انقر + على يمين عنوان "المحددات".
- اكتب #name li حيث "الاسم" هو اسم قائمتك.
- ابحث عن عنوان "تعويم" في الجزء السفلي من مصمم CSS التبويب.
- انقر على اليسار الزر مباشرة على يمين العنوان "تعويم".
الخطوة 6. أضف علامة نشطة لقائمتك
انقر على + على يمين "المحددات" ، ثم اكتب #name a (حيث "الاسم" هو اسم قائمتك) واضغط على ↵ Enter مرتين.
الخطوة 7. أضف لون الخلفية
حدد ملف #name أ العنصر إذا لزم الأمر ، ثم انقر فوق علامة التبويب "لون الخلفية" على شكل مربع أعلى ملف مصمم CSS الجزء ، حدد ملف لون الخلفية الخيار ، وحدد لون الخلفية لاستخدامه.
هذا هو اللون الذي ستستخدمه عناصر القائمة المنسدلة
الخطوة 8. اجعل عناصر قائمتك تستخدم تنسيق "block"
يضمن هذا التنسيق أنه عندما ينتقل شخص ما للنقر أو النقر فوق عنصر في القائمة ، يمكنه فتحه عن طريق تحديد أعلى أو أسفل قليلاً بدلاً من الاضطرار إلى تحديد النص بدقة:
- تأكد الخاص بك #name أ العنصر المحدد في مصمم CSS التبويب.
- قم بالتمرير لأسفل إلى عنوان "العرض" في الجزء.
- انقر فوق أقصى الجانب الأيمن من عنوان "العرض" ، ثم انقر فوق منع في القائمة الناتجة.
الخطوة 9. أضف الحشو إذا لزم الأمر
إذا لاحظت أن عناصر القائمة الخاصة بك محشورة ببعضها البعض ، فيمكنك وضع بعض المسافة بينها عن طريق القيام بما يلي:
- تأكد الخاص بك #name أ العنصر المحدد في مصمم CSS التبويب.
- قم بالتمرير لأسفل إلى عنوان "المساحة المتروكة" في الجزء.
- غيّر حقلي النص "بيكسل" العلوي والسفلي لقراءة 5 على الأقل.
- غيّر حقلي النص "بيكسل" الأيمن والأيسر لقراءة 10 على الأقل.
الخطوة 10. إنشاء لون تحوم
هذا هو اللون الذي سيظهر عند تحريك مؤشر الماوس فوق عنصر في القائمة المنسدلة:
- انقر + على يمين عنوان "المحددات".
- اكتب #nave a: hover (حيث يكون "name" هو اسم قائمتك) واضغط على ↵ Enter مرتين.
- انقر فوق علامة التبويب "لون الخلفية".
- يختار لون الخلفية ثم حدد لونًا أفتح مما استخدمته للون الخلفية.
الخطوة 11. قم بإيقاف تشغيل CSS
انقر على رأي عنصر القائمة ، حدد تجسيد النمط ، وانقر فوق أنماط العرض الخيار في النافذة المنبثقة.
إذا كان أنماط العرض باللون الرمادي ، انقر في أي مكان في مستند Dreamweaver وحاول مرة أخرى.
الخطوة 12. إنشاء محتويات القائمة المنسدلة
يمكنك القيام بذلك عن طريق إضافة نقاط فرعية أسفل النقطة النقطية التي تريد استخدامها كزر القائمة المنسدلة:
- انقر على يمين عنصر القائمة الذي تريد تحويله إلى قائمة منسدلة ، ثم اضغط على زر الإدخال Enter.
- اضغط على Tab ↹.
- اكتب اسم أول عنصر في القائمة المنسدلة ، ثم اضغط على ↵ Enter.
- اكتب اسم القائمة المنسدلة التالية ، ثم اضغط على ↵ Enter وكرر الأمر حسب الحاجة.
الخطوة 13. اربط محتويات القائمة المنسدلة بعنصر تعداد نقطي
لنفعل ذلك:
- انقر + بجانب "المحددات" ، ثم اكتب #name ul واضغط على ↵ Enter مرتين.
- قم بالتمرير لأسفل وانقر فوق عرض ، ثم اضغط لا أحد في القائمة المنبثقة.
- البحث والنقر موقع ، ثم اضغط مطلق في القائمة المنبثقة.
الخطوة 14. قم بإنشاء القائمة المنسدلة نفسها
سيتعين عليك إضافة محدد آخر للقيام بذلك:
- انقر + بجانب "المحددات" ، ثم اكتب #name ul li: hover> ul واضغط على ↵ Enter مرتين.
- البحث والنقر عرض ، ثم اضغط منع في القائمة المنبثقة الناتجة.
الخطوة 15. اجعل محتويات القائمة المنسدلة تُعرض عموديًا
بشكل افتراضي ، سيتم عرض محتويات القائمة المنسدلة في شريط أفقي ، ولكن يمكنك إجبارها على وضعها في عمود رأسي عن طريق القيام بما يلي:
- انقر + بجانب "المحددات" ، ثم اكتب #name ul li واضغط ↵ Enter مرتين.
- ابحث عن عنوان "عائم".
- انقر فوق "بلا" () الخيار على يمين العنوان "تعويم".
الخطوة 16. احفظ مشروعك
اضغط على Ctrl + S (Windows) أو ⌘ Command + S (Mac) للقيام بذلك.
