يعمل Dreamweaver على تسهيل إنشاء القوائم المنسدلة لموقع الويب الخاص بك. ولكن مثل جميع أشكال HTML يمكن أن تكون صعبة بعض الشيء. سيرشدك هذا البرنامج التعليمي خلال خطوات إنشاء قائمة منسدلة في Dreamweaver.
Dreamweaver Jump القوائم
كما يوفر Dreamweaver 8 معالجًا لإنشاء قائمة انتقال للتنقل في موقع الويب الخاص بك. بخلاف القوائم المنسدلة الأساسية ، ستقوم هذه القائمة بالفعل بعمل شيء عند الانتهاء. لن تضطر إلى كتابة أي JavaScript أو CGI للحصول على نموذج المنسدلة للعمل. يوضح هذا البرنامج التعليمي أيضًا كيفية استخدام معالج Dreamweaver 8 لإنشاء قائمة انتقال.
01 من 20
أولا إنشاء النموذج
ملاحظة مهمة حول نماذج HTML و Dreamweaver:
باستثناء معالجات خاصة مثل قائمة الانتقال ، لا يساعد Dreamweaver في جعل أشكال HTML "عمل". لهذا تحتاج إلى CGI أو JavaScript. يرجى الاطلاع على برنامجي التعليمي إنشاء نماذج HTML العمل لمزيد من المعلومات.
عندما تقوم بإضافة قائمة منسدلة إلى موقع الويب الخاص بك ، فإن أول شيء تحتاج إليه هو نموذج لإحاطة به. في Dreamweaver ، انتقل إلى القائمة إدراج وانقر فوق نموذج ، ثم اختر "نموذج".
02 من 20
عرض النماذج في Design View
يعرض Dreamweaver موقع النموذج الخاص بك بشكل مرئي في طريقة عرض التصميم ، بحيث تعرف مكان وضع عناصر النموذج الخاصة بك. هذا أمر مهم ، لأن علامات القائمة المنسدلة غير صالحة (ولن تعمل) خارج عنصر النموذج. كما ترى في الصورة ، فإن النموذج هو الخط المنقط باللون الأحمر في عرض التصميم.
03 من 20
اختر القائمة / القائمة
تسمى القوائم المنسدلة بعناصر "قائمة" أو "قائمة" في Dreamweaver. لذلك لإضافة واحدة إلى النموذج الخاص بك ، تحتاج إلى الانتقال إلى القائمة "نموذج" في القائمة "إدراج" واختيار "قائمة / قائمة". تأكد من أن المؤشر كان داخل الخط الأحمر المنقط في مربع النموذج.
04 من 20
نافذة خيارات خاصة
في خيارات Dreamweaver ، توجد شاشة في Accessibility. اخترت أن تظهر لي Dreamweaver جميع سمات إمكانية الوصول. وهذه الشاشة هي نتيجة لذلك. النماذج هي المكان الذي تقع فيه العديد من مواقع الويب في إمكانية الوصول ، ومن خلال ملء هذه الخيارات الخمسة ، ستكون القوائم المنسدلة متاحة لك على الفور.
05 من 20
استمارة الوصول
خيارات إمكانية الوصول هي:
ضع الكلمة المناسبة
هذا هو اسم الحقل. سيظهر كنص بجوار عنصر النموذج الخاص بك.
اكتب ما تريد الاتصال به من القائمة المنسدلة. يمكن أن يكون هذا السؤال أو العبارة القصيرة التي ستجيبها القائمة المنسدلة.
قلم المدقة
يتضمن HTML علامة تسمية لتحديد تصنيفات النماذج الخاصة بك إلى المستعرض. تتمثل اختياراتك في التفاف القائمة المنسدلة ونص التسمية مع العلامة ، لاستخدام السمة "for" على علامة التسمية لتحديد علامة النموذج التي تشير إليها ، أو عدم استخدام علامة التسمية على الإطلاق.
أفضّل استخدام السمة ، حيث إذا كنت بحاجة إلى نقل التسمية لسبب ما ، فستظل مرتبطة بحقل النموذج الصحيح.
موضع
يمكنك وضع العلامة الخاصة بك قبل أو بعد القائمة المنسدلة.
مفتاح الوصول
هذا هو المفتاح الذي يمكن استخدامه مع مفاتيح Alt أو Option للوصول مباشرةً إلى حقل النموذج هذا. هذا يجعل من السهل استخدام النماذج الخاصة بك دون الحاجة إلى الماوس. كيفية إعداد مفتاح الوصول في HTML
مؤشر علامة التبويب
هذا هو الترتيب الذي يجب الوصول إليه في حقل النموذج عند استخدام لوحة المفاتيح للجدولة عبر صفحة الويب. فهم Tabindex
عندما تقوم بتحديث خيارات إمكانية الوصول ، انقر فوق "موافق".
06 من 20
اختر القائمة
بمجرد عرض القائمة المنسدلة في عرض التصميم ، يجب إضافة العناصر المختلفة إليها. حدد أولاً القائمة المنسدلة بالنقر فوقها. سيقوم Dreamweaver بوضع خط منقط آخر حول القائمة المنسدلة فقط ، لإظهار أنك قمت بتحديده.
07 من 20
خصائص القائمة
ستتغير قائمة الخصائص إلى خصائص القائمة / القائمة لتلك القائمة المنسدلة. هناك يمكنك إعطاء القائمة الخاصة بك معرف (حيث تقول "حدد") ، وتقرر ما إذا كنت تريد أن تكون لليس أو قائمة ، وإعطائها فئة نمط من ورقة الأنماط الخاصة بك ، وتعيين القيم إلى القائمة المنسدلة.
ما هو الفرق بين القائمة والقائمة؟
يستدعي Dreamweaver قائمة منسدلة بالقائمة أي قائمة منسدلة تسمح بتحديد واحد فقط. تسمح "القائمة" بخيارات متعددة في القائمة المنسدلة ويمكن أن تكون أكثر من عنصر واحد مرتفع.
إذا كنت تريد أن تكون القائمة المنسدلة عبارة عن عدة أسطر عالية ، فعليك تغييرها إلى نوع "قائمة" وترك مربع "التحديدات" بدون تحديد.
08 من 20
إضافة عناصر قائمة جديدة
لإضافة عناصر جديدة إلى القائمة ، انقر فوق الزر "قائمة القيم ...". هذا سيفتح النافذة المذكورة أعلاه. اكتب تسمية البند الخاص بك في المربع الأول. هذا هو ما سيتم عرضه على الصفحة. إذا تركت القيمة فارغة ، فهذا هو أيضًا ما سيتم إرساله في النموذج.
09 من 20
إضافة المزيد وإعادة الترتيب
انقر فوق رمز زائد لإضافة المزيد من العناصر. إذا كنت ترغب في إعادة ترتيبها في مربع القائمة ، فاستخدم السهمين لأعلى ولأسفل على اليمين.
10 من 20
إعطاء جميع العناصر القيم
كما ذكرت في الخطوة 8 ، إذا تركت القيمة فارغة ، فسيتم إرسال التسمية إلى النموذج. ولكن يمكنك إعطاء كل قيم العناصر الخاصة بك - لإرسال معلومات بديلة إلى النموذج الخاص بك. سوف تستخدم هذا الكثير لأشياء مثل القوائم قفزة.
11 من 20
اختر الافتراضي
يتم عرض صفحات الويب الافتراضية لعرض العنصر المنسدل لأيهما أولاً كبند افتراضي. ولكن إذا كنت تريد تحديد عنصرًا مختلفًا ، فقم بتمييزه في المربع "تم تحديده مبدئيًا" في القائمة "خصائص".
12 من 20
انظر قائمتك في Design View
بمجرد الانتهاء من تحرير الخصائص ، سيعرض Dreamweaver قائمة منسدلة مع تحديد القيمة الافتراضية.
13 من 20
انظر قائمتك في عرض الكود
إذا قمت بالتبديل إلى طريقة عرض التعليمات البرمجية ، يمكنك مشاهدة أن Dreamweaver يضيف قائمة منسدلة بكود نظيف للغاية. السمات الإضافية الوحيدة هي تلك التي أضفناها مع خيارات إمكانية الوصول. الشفرة كلها مزخرفة وسهلة القراءة والفهم. بل إنه يضع السمة المحددة = "المحددة" لأنني أخبرت Dreamweaver بأنني افتقد كتابة XHTML.
14 من 20
حفظ وعرض في المتصفح
إذا قمت بحفظ المستند وعرضه في مستعرض ويب ، يمكنك أن ترى أن القائمة المنسدلة تبدو كما لو كنت تتوقعها.
15 من 20
لكنها لا تفعل أي شيء
القائمة التي أنشأناها أعلاه تبدو جيدة ، لكنها لا تفعل أي شيء. لكي تتمكن من القيام بشيء ما ، تحتاج إلى إعداد إجراء نموذج في النموذج نفسه ، وهو برنامج تعليمي آخر تمامًا.
لحسن الحظ ، لدى Dreamweaver نموذج قائمة منسدلة مضمن يمكنك استخدامه على الفور على موقعك دون الحاجة إلى معرفة المزيد عن النماذج أو CGIs أو البرمجة النصية. إنها تسمى قائمة الانتقال السريع.
تقوم قائمة Jumpweaver Jump بإعداد قائمة منسدلة تتضمن أسماء وعناوين URL. ثم يمكنك اختيار عنصر في القائمة وسيتم نقل صفحة الويب إلى ذلك الموقع ، تمامًا كما لو كنت قد نقرت على رابط.
انتقل إلى قائمة "إدراج" واختر "نموذج" ثم "قائمة الانتقال السريع".
16 من 20
نافذة القائمة قفزة
على عكس القائمة المنسدلة القياسية ، تفتح قائمة الانتقال إطارًا جديدًا لتسمية عناصر القائمة وإضافة تفاصيل حول كيفية عمل النموذج.
بالنسبة إلى العنصر الأول ، غيِّر النص "بدون عنوان 1" إلى ما تريد أن تقرأه وأضف عنوان URL الذي يجب أن ينتقل إليه الرابط.
17 من 20
إضافة عناصر إلى قائمة الانتقال الخاصة بك
انقر على عنصر الإضافة لإضافة عنصر جديد إلى قائمة الانتقال. أضف أكبر عدد تريده من العناصر.
18 من 20
خيارات القائمة الانتقال
بمجرد إضافة جميع الروابط التي تريدها ، يجب عليك اختيار الخيارات المتاحة أمامك:
فتح عناوين URL في
إذا كان لديك مجموعة إطارات ، فيمكنك فتح الارتباطات في إطار مختلف. أو يمكنك تغيير خيار النافذة الرئيسية إلى هدف خاص بحيث يتم فتح عنوان URL في نافذة جديدة أو في مكان آخر.
اسم القائمة
امنح قائمتك معرفًا فريدًا للصفحة. هذا مطلوب حتى يعمل البرنامج النصي بشكل صحيح. كما يتيح لك الحصول على قوائم قفزات متعددة في شكل واحد - فقط اعطهم أسماء مختلفة.
إدراج زر الانتقال بعد القائمة
أرغب في تحديد هذا لأن البرنامج النصي لا يعمل في بعض الأحيان عندما تتغير القائمة. كما أنها أكثر سهولة.
حدد العنصر الأول بعد تغيير عنوان URL
حدد هذا إذا كان لديك مطالبة مثل "Select one" كأول عنصر قائمة. سيضمن هذا أن هذا العنصر يبقى افتراضيًا على الصفحة.
19 من 20
الانتقال عرض تصميم القائمة
تمامًا كما في القائمة الأولى ، يقوم Dreamweaver بإعداد قائمة الانتقال الخاصة بك في طريقة عرض التصميم مع العنصر الافتراضي المرئي. يمكنك بعد ذلك تعديل القائمة المنسدلة كما تفعل مع أي قائمة أخرى.
إذا قمت بتحريره ، تأكد من عدم تغيير أي معرفات على العناصر ، وإلا قد لا يعمل البرنامج النصي.
20 من 20
الانتقال إلى القائمة في المتصفح
سيؤدي حفظ الملف وضرب F12 إلى عرض الصفحة في المتصفح المفضل لديك. هناك يمكنك تحديد خيار ، انقر فوق "الذهاب" وتعمل قائمة القفزة!