ما يجب معرفته
- انتقل إلى Insert> Form> Form. انقر على الخط الأحمر المنقط في النموذج وانتقل إلى Insert> Form> List / Menu. اختر خيارات الوصول
- انقر فوق القائمة وحدد خصائصها ، ثم حدد قائمة القيم لإضافة عناصر قائمة جديدة. انقر فوق علامة الجمعلإضافة المزيد من العناصر.
- أضف قيم العناصر واختر عنصرًا افتراضيًا. لإضافة إجراءات ، انتقل إلى Insert> Form> قائمة الانتقال. إضافة عناصر إلى قائمة الانتقال السريع وحفظها.
يجعل Dreamweaver من السهل إنشاء قوائم منسدلة لموقعك على الويب. ولكن مثل جميع أشكال HTML ، يمكن أن تكون صعبة بعض الشيء. سيرشدك هذا البرنامج التعليمي خلال خطوات إنشاء قائمة منسدلة في Dreamweaver.
قوائم Dreamweaver Jump
يوفر Dreamweaver 8 أيضًا معالجًا لإنشاء قائمة انتقال للتنقل في موقع الويب الخاص بك. على عكس القوائم المنسدلة الأساسية ، ستعمل هذه القائمة شيئًا عند الانتهاء. لن تضطر إلى كتابة أي JavaScript أو CGIs حتى يعمل النموذج المنسدل. يوضح هذا البرنامج التعليمي أيضًا كيفية استخدام معالج Dreamweaver 8 لإنشاء قائمة انتقال.
أولاً ، قم بإنشاء النموذج
باستثناء المعالجات الخاصة مثل قائمة الانتقال ، لا يساعدك Dreamweaver في جعل نماذج HTML "تعمل". لهذا ، أنت بحاجة إلى CGI أو JavaScript.
عندما تضيف قائمة منسدلة إلى موقع الويب الخاص بك ، فإن أول شيء تحتاجه هو نموذج يحيط به. في Dreamweaver ، انتقل إلى قائمة "إدراج" وانقر فوق "نموذج" ، ثم اختر "نموذج".
عرض النموذج في طريقة عرض التصميم
يعرض Dreamweaver موقع النموذج الخاص بك بشكل مرئي في عرض التصميم ، حتى تعرف مكان وضع عناصر النموذج لأن علامات القائمة المنسدلة غير صالحة (ولن تعمل) خارج عنصر النموذج. كما ترى في الصورة ، النموذج هو الخط الأحمر المنقط في عرض التصميم.
اختر القائمة / القائمة
القوائم المنسدلة تسمى عناصر "القائمة" أو "القائمة" في Dreamweaver. لذلك لإضافة واحد إلى النموذج الخاص بك ، تحتاج إلى الذهاب إلى قائمة "نموذج" في قائمة "إدراج" واختيار "قائمة / قائمة". تأكد من أن المؤشر الخاص بك كان داخل الخط المنقط الأحمر لمربع النموذج الخاص بك.
نافذة الخيارات الخاصة
في Dreamweaver Options ، توجد شاشة في إمكانية الوصول. سيكون الوصول إلى القوائم المنسدلة على الفور أكثر سهولة من مواقع الويب الأخرى إذا قمت بملء هذه الخيارات الخمسة.
إمكانية الوصول إلى النموذج
خيارات الوصول هي:
تسمية
يظهر حقل التسمية كنص بجانب عنصر النموذج الخاص بك. اكتب اسمًا لقائمتك المنسدلة. يمكن أن يكون سؤالًا أو عبارة قصيرة ستجيب عليها القائمة المنسدلة.
النمط
يتضمن HTML علامة تسمية لتحديد تسميات النموذج الخاصة بك في متصفح الويب. اختياراتك هي التفاف القائمة المنسدلة ونص التسمية بالعلامة ، لاستخدام السمة "for" في علامة التصنيف لتحديد علامة النموذج التي تشير إليها ، أو عدم استخدام علامة التصنيف على الإطلاق.
المنصب
يمكنك وضع التسمية الخاصة بك قبل أو بعد القائمة المنسدلة.
مفتاح الوصول
يمكن للزوار استخدام مفتاح وصول مع"صورة" أو مفتاح الخيار للوصول مباشرة إلى حقل النموذج هذا. يجعل اختصار لوحة المفاتيح هذا من السهل جدًا استخدام النماذج الخاصة بك بدون ماوس. alt="
فهرس علامات التبويب
فهرس علامات التبويب هو كيفية وصول المستخدمين إلى حقول النموذج عند استخدام لوحة المفاتيح للتنقل عبر صفحة الويب.
عندما تقوم بتحديث خيارات الوصول الخاصة بك ، انقر فوق "موافق".
حدد القائمة
بمجرد عرض القائمة المنسدلة في طريقة عرض تصميم Dreamweaver ، ستحتاج إلى إضافة العناصر المختلفة. أولاً ، حدد القائمة المنسدلة بالنقر فوقها. سيضع Dreamweaver خطًا منقطًا آخر حول القائمة المنسدلة فقط لإظهار أنك اخترته.
خصائص القائمة
ستتغير قائمة الخصائص إلى خصائص القائمة / القائمة لتلك القائمة المنسدلة. هناك يمكنك إعطاء قائمتك معرفًا (حيث تقول "تحديد") ، وتحديد ما إذا كنت تريد أن تكون قائمة أو قائمة ، ومنحها فئة نمط من ورقة الأنماط الخاصة بك ، وقم بتعيين القيم إلى القائمة المنسدلة.
ما الفرق بين القائمة والقائمة؟
يستدعي Dreamweaver القائمة المنسدلة أي قائمة منسدلة تسمح بتحديد واحد فقط. تسمح "القائمة" بخيارات متعددة في القائمة المنسدلة ويمكن أن تكون أعلى من عنصر واحد.
إذا كنت تريد أن تكون القائمة المنسدلة متعددة الأسطر ، فقم بتغييرها إلى نوع "قائمة" واترك مربع "التحديدات" بدون تحديد.
إضافة عناصر قائمة جديدة
لإضافة عناصر جديدة إلى قائمتك ، انقر على زر "قائمة القيم …" ، الذي يفتح النافذة أعلاه. ثم اكتب تسمية العنصر الخاص بك في المربع الأول. سيظهر على الصفحة
إضافة المزيد وإعادة ترتيب
انقر على أيقونة الجمع لإضافة المزيد من العناصر. إذا كنت ترغب في إعادة ترتيبها في مربع القائمة ، فاستخدم السهمين لأعلى ولأسفل على اليمين.
أعط كل قيم العناصر
إذا تركت القيمة فارغة ، فستنتقل التسمية إلى النموذج. ولكن يمكنك إعطاء جميع قيم العناصر الخاصة بك - لإرسال معلومات بديلة إلى النموذج الخاص بك. ستستخدم هذا كثيرًا لأشياء مثل قوائم الانتقال والارتباط التشعبي.
اختر الافتراضي
صفحات الويب الافتراضية لعرض أي عنصر قائمة منسدلة يتم إدراجه أولاً كعنصر افتراضي. ولكن إذا كنت تريد تحديدًا مختلفًا ، فقم بتمييزه في مربع "تم تحديده مبدئيًا" في قائمة الخصائص.
انظر قائمتك في Design View
بمجرد الانتهاء من تحرير الخصائص ، سيعرض Dreamweaver القائمة المنسدلة بالقيمة الافتراضية المحددة.
انظر قائمتك في عرض الكود
إذا قمت بالتبديل إلى عرض التعليمات البرمجية ، يمكنك أن ترى أن Dreamweaver يضيف القائمة المنسدلة الخاصة بك برمز نظيف. السمات الإضافية الوحيدة هي خيارات الوصول. جميع الكود بها مسافة بادئة ويسهل قراءتها وفهمها.
حفظ وعرض في المتصفح
إذا قمت بحفظ المستند وعرضه في متصفح الويب ، فيمكنك أن ترى أن القائمة المنسدلة تبدو تمامًا كما تتوقعها.
لكنها لا تفعل أي شيء …
القائمة التي أنشأناها أعلاه تبدو جيدة ، لكنها لا تفعل أي شيء. لجعله يفعل شيئًا ما ، تحتاج إلى إعداد إجراء نموذج على النموذج نفسه.
لحسن الحظ ، يحتوي Dreamweaver على نموذج قائمة منسدلة مضمن يمكنك استخدامه على الفور على موقعك دون الحاجة إلى التعرف على النماذج أو CGI أو البرمجة النصية. إنها تسمى قائمة القفز.
تقوم قائمة Dreamweaver Jump بإعداد قائمة منسدلة بأسماء وعناوين URL. ثم يمكنك اختيار عنصر في القائمة ، وستنتقل صفحة الويب إلى هذا الموقع ، تمامًا كما لو كنت قد نقرت على رابط.
اذهب إلى قائمة "إدراج" واختر "نموذج" ثم "قائمة الانتقال".
نافذة قائمة الانتقال السريع
بخلاف القائمة المنسدلة القياسية ، تفتح قائمة الانتقال نافذة جديدة لك لتسمية عناصر القائمة الخاصة بك وإضافة تفاصيل حول كيفية عمل النموذج.
بالنسبة للعنصر الأول ، قم بتغيير النص "un titled1" إلى ما تريد قراءته وإضافة عنوان URL.
إضافة عناصر إلى قائمة الانتقال الخاصة بك
انقر فوق إضافة عنصر لإضافة عنصر جديد إلى قائمة القفز الخاصة بك. أضف العديد من العناصر كما يحلو لك.
خيارات قائمة الانتقال
بمجرد إضافة جميع الروابط التي تريدها ، يجب عليك اختيار خياراتك:
فتح عناوين URL في
إذا كان لديك مجموعة إطارات ، فيمكنك فتح الروابط في إطار مختلف. أو يمكنك تغيير خيار Main Window إلى هدف خاص بحيث يفتح عنوان URL في نافذة جديدة أو في مكان آخر.
اسم القائمة
امنح قائمتك معرفًا فريدًا للصفحة. إنه مطلوب حتى يعمل البرنامج النصي بشكل صحيح. كما يسمح لك بالحصول على قوائم قفزة متعددة في شكل واحد - أعطهم جميعًا أسماء مختلفة.
إدراج زر Go بعد القائمة
أحب تحديد هذا لأنه في بعض الأحيان لا يعمل البرنامج النصي عندما تتغير القائمة. كما أنه يسهل الوصول إليه.
حدد العنصر الأول بعد تغيير عنوان URL
حدد هذا إذا كان لديك مطالبة مثل "حدد واحدًا" كعنصر القائمة الأول. سيضمن هذا بقاء هذا العنصر افتراضيًا على الصفحة.
عرض تصميم قائمة الانتقال السريع
تمامًا كما هو الحال مع القائمة الأولى ، يقوم Dreamweaver بإعداد قائمة الانتقال الخاصة بك في عرض التصميم مع عرض العنصر الافتراضي. يمكنك بعد ذلك تعديل القائمة المنسدلة كما تفعل مع أي قائمة أخرى.
إذا قمت بتحريره ، فتأكد من عدم تغيير أي معرفات على العناصر ؛ خلاف ذلك ، قد لا يعمل البرنامج النصي.
قائمة الانتقال السريع في المتصفح
حفظ الملف والضغط على F12 سيعرض الصفحة في متصفحك المفضل. هناك يمكنك تحديد خيار ، انقر فوق "انتقال" ، وتعمل قائمة الانتقال.
