الدليل الكامل للقوائم المنسدلة في Dreamweaver

تعد القائمة المنسدلة واحدة من أكثر التأثيرات شيوعًا على الإنترنت. ما عليك سوى النقر أو تحريك الماوس فوقها، وستظهر قائمة أكثر تفصيلاً، فهي لا توفر مساحة على تخطيط صفحة الويب فحسب، بل تجعل تخطيط صفحة الويب موجزًا ​​ومفيدًا منظمة، ولكنها أيضًا رواية. تضيف القائمة المنسدلة الجميلة الكثير من الألوان إلى صفحة الويب الخاصة بك.
هناك العديد من الطرق لإنشاء القوائم المنسدلة. سيقدم لك هذا العمود أربع طرق شائعة الاستخدام، مما يسمح لك بإنشاء القائمة المنسدلة الخاصة بك كما تريد.

■ استخدم Dreamweaver لإنشاء قوائم منسدلة

??Dreamweaver هي الأداة الأكثر استخدامًا لإنشاء القوائم المنسدلة، فهي تتمتع بطريقة بسيطة وتحكم مجاني، ويمكنها إنشاء أنماط القائمة إلى أقصى حد، وهي دورة تدريبية مطلوبة لإنشاء القوائم المنسدلة.
مبدأ استخدام Dreamweaver لإنشاء قائمة منسدلة بسيط للغاية، فهو يستخدم طريقة Show-Hide Layers المضمنة في لوحة Behaviors، ويستخدم onMouseOver (يتحرك الماوس إلى) وonMouseOut (يتحرك الماوس بعيدًا) لإنشاء قائمة منسدلة. قم بتشغيل إخفاء الطبقة وإظهارها، وستكون القائمة التي ستظهر موجودة في الطبقة.
لذلك يمكننا إنشاء قائمة منسدلة في أربع خطوات. أولاً، نحتاج إلى شريط التنقل، والذي يستخدم لوضع القائمة الرئيسية التي تظهر أولاً أمام العارض، ثم نقوم بإنشاء القائمة المنسدلة التي سوف تظهر بعد أن تكون مخفية، ثم الخطوة الأكثر أهمية هي إضافة تأثير إخفاء وإظهار الطبقات إلى القائمة الرئيسية والقائمة المنسدلة، وأخيرا، نقوم بتجميل القائمة. التأثير النهائي الذي تراه هو كما هو موضح في الشكل، ويمكنك أيضًا زيارة العنوان التالي: Menu.htm

؟؟أعتقد أنه لا يمكنك الانتظار لفترة أطول، لذلك دعونا نبدأ على الفور!

1. إنتاج شريط التنقل

أولاً، قم ببعض الأعمال التمهيدية الضرورية، اضغط على CTRL+J لفتح نافذة خصائص الصفحة. إعدادات المعلمة كما هو موضح في الشكل 2. سيكون لهذا الإعداد تأثير على موضع القائمة، لذا يرجى ضبطها كما هو موضح في الصورة. صورة.

اضغط على CTRL + F2 لفتح لوحة الكائنات وانقر فوق زر الطبقة أخيرًا، اضغط باستمرار على الماوس واسحب طبقة على الصفحة، ثم قم بتعيين المعلمات في لوحة الخصائص الخاصة بالطبقة. املأ مربع معرف الطبقة بالعنوان، واملأ المربعات L وT وW وH مع 8، 15، و 15 على التوالي 480، 15، املأ لون الخلفية بالرقم #006699، كما هو موضح في الصورة.

حرك المؤشر داخل الطبقة وانقر فوق زر الجدول في لوحة الكائنات ، قم بإدراج جدول مكون من صف واحد وأربعة أعمدة، وقم بإعداده كما هو موضح في الشكل.

اضغط باستمرار على مفتاح CTRL وانقر على الخلايا الأربع في الجدول، ثم اضبط عرضها على 120، وأدخل النص في الخليتين الأوليين، وهو اسم القائمة الرئيسية الخاصة بك، ويمكنك إدخال الاسم الذي تريده "المنتدى الكلاسيكي" و"Tianji.com" كأمثلة وروابط مضافة.

2. إنشاء القائمة المنسدلة

ابدأ الآن في إنشاء القائمة التي ستظهر كقائمة منسدلة، باستخدام الطبقات أيضًا.
أدخل طبقة من لوحة Objects مرة أخرى أسفل شريط التنقل الذي أنشأناه سابقًا. املأ المعلمات على النحو التالي: املأ مربع معرف الطبقة بالقائمة 1، واملأ المربعات L وT وW وH بـ 8 و34 و120. و 80 على التوالي. املأ لون الخلفية بالرقم #999966. المعلمتان L وT هما لتعيين المسافة بين هذه الطبقة والحدود اليسرى والعليا للنافذة، ويجب ألا يتم ملؤها بشكل غير صحيح، وإلا فإن القائمة تكون في غير محلها وستتأثر سهولة الاستخدام بعد الانتهاء.

في هذا الوقت، يمكننا إدخال محتوى القائمة الذي نريده في طبقة Menu1. لتسهيل التخطيط، ما زلت أستخدم الجداول لإنشاء القوائم هنا. ستظهر هذه الطبقة كقائمة منسدلة لـ "المنتدى الكلاسيكي"، املأ روابط القائمة التي تحتاجها. بنفس الطريقة، أنشئ قائمة منسدلة (قائمة الطبقة 2) لـ "Tianji.com".

ما يجب ملاحظته في هذه الخطوة هو أن موضع الطبقة (القائمة 1، القائمة 2) حيث توجد القائمة المنسدلة مهم جدًا (يتم تحديده بواسطة المعلمتين L وT). ويجب أن تكون الحافة العلوية قريبة من الحافة السفلية لشريط التنقل، وذلك لضمان إمكانية استخدام القائمة بشكل طبيعي بعد إكمال الخطوة الثالثة. لأنه إذا ابتعدت عن شريط التنقل، فستختفي القائمة بمجرد مغادرة الماوس لشريط التنقل.
اضغط على F2 لفتح لوحة LAYER، التي تسرد الطبقات الثلاث في صفحة الويب. انقر فوق المساحة الموجودة أمام القائمة 1 والقائمة 2، وستظهر أيقونة العين المغلقة، وسيتم إخفاء هاتين الطبقتين. تتم هذه الخطوة لأن الحالة الأولية للقائمة المنسدلة غير مرئية.

3. إضافة تأثيرات إظهار وإخفاء

هذه الخطوة هي خطوة حاسمة في تحويل الانحلال إلى سحر، من فضلك اتبعني بعناية.
تنقسم هذه الخطوة إلى قسمين: أولاً، إضافة أمر للتحكم في عرض وإخفاء القائمة الرئيسية في شريط التنقل. ثانيًا، إضافة أمر للتحكم في عرض وإخفاء القائمة المنسدلة نفسها.

1. في قسم شريط التنقل، اضغط أولاً مع الاستمرار على مفتاح CTRL وانقر على الخلية الأولى في شريط التنقل. الآن اضغط على Shift+F3 لفتح نافذة السلوكيات وانقر زر وحدد "إظهار إخفاء الطبقات" في خيار القائمة المنسدلة (كما هو موضح في الصورة). إذا لم يكن هناك عنصر من هذا القبيل في الخيارات، فحدد IE 5.0 ضمن إظهار الأحداث لـ، وانقر فوق الزر مرة أخرى، وسيظهر "إظهار إخفاء الطبقات".

ستظهر نافذة كما هو موضح أدناه. في مربع الطبقات المسماة، سيتم إدراج جميع طبقات صفحة الويب الحالية. حدد "طبقة "menu1"" لأننا نريد أن تستجيب طبقة القائمة 1 إلى "المنتدى الكلاسيكي". ثم انقر فوق الزر "إظهار" أدناه ثم موافق.

في هذا الوقت، ستعود إلى نافذة السلوكيات، وستظهر الكلمات كما هو موضح أدناه في النافذة. انقر فوق النص "onClick" ضمن الأحداث، وسيظهر سهم صغير لأسفل انقر فوقه وحدد onMouseOver في القائمة المنسدلة. خيار أسفل. الغرض من هذه الخطوة هو تغيير حالة القائمة المنسدلة 1 إلى إظهار عندما يتحرك الماوس إلى الخلية الأولى.

والخطوة التالية هي إخفاء القائمة المنسدلة 2 عند انتقال الماوس إلى الخلية الثانية.
اطلب مرة أخرى زر، حدد "إظهار إخفاء الطبقات" في خيار القائمة المنسدلة، وحدد "طبقة "menu1" " في النافذة المنبثقة، لأننا نريد أن تستجيب طبقة القائمة 1 لـ "المنتدى الكلاسيكي". ثم انقر فوق الزر "إخفاء" أدناه ثم موافق.

ارجع إلى نافذة السلوكيات، وانقر فوق السهم الصغير المتجه للأسفل، ثم حدد onMouseOut في خيار القائمة المنسدلة.

2. في جزء القائمة المنسدلة، حدد أولاً قائمة الطبقة 1 بالنقر فوق حافة الطبقة أو النقر فوق القائمة 1 في لوحة الطبقة. استخدم نفس الطريقة مثل جزء شريط التنقل لإضافة أوامر لإظهار وإخفاء نفسها في نافذة السلوك . تأثير ذلك هو أنه عندما يتحرك الماوس خارج قائمة الطبقة 1، يتم إخفاء قائمة الطبقة 1 تلقائيًا. حالة قائمة الطبقة الأخيرة 1 كما هو موضح في الشكل.

3. كرر الجزأين أعلاه وأضف أوامر إظهار وإخفاء الطبقة للقائمة الرئيسية الثانية "Tianji.com" وقائمة الطبقة 2 لشريط التنقل.

4. تجميل وتعديل القوائم المنسدلة

في هذه المرحلة، تم تنفيذ التأثير الوظيفي للقائمة المنسدلة، ويمكنك رؤيته الآن بالضغط على F12. ومع ذلك، يجب أن تجد أيضًا أن القائمة قبيحة بعض الشيء، والخطوط ليست جيدة بما فيه الكفاية، ولون الرابط الافتراضي لخيارات القائمة ليس جميلًا، والقائمة ليس لها حدود، لذلك دعونا نضفي عليها القليل من الجمال .
1. حدد نمط خط القائمة. اضغط على Shift+F11 لفتح لوحة CSS Style وانقر أسفل اللوحة. زر

حدد علامة td في مربع العلامة في نافذة "نمط جديد" المنبثقة، وحدد العنصر الثاني إعادة تعريف علامة HTML للنوع، وحدد هذا المستند فقط للتعريف، كما هو موضح في الشكل.

في هذا الوقت، تنبثق نافذة الإعداد بغض النظر عن الأشياء الأخرى، ما عليك سوى تحديد 12 في مربع الحجم الموجود على اليمين، وتكون الوحدة بالبكسل.

2. حدد نمط رابط القائمة في لوحة النمط، انقر فوق الزر الموجود أسفل اللوحة. في النافذة المنبثقة، حدد العنصر الثالث Use CSS Selector for Type، وحدد علامة a:hover في مربع Tag، وحدد This Document. فقط للتعريف، كما هو موضح في الشكل.

بعد النقر فوق OK (موافق)، في النافذة المنبثقة، قم بملء #ff9933 للون، وحدد لا شيء للزخرفة، وانقر فوق OK (موافق).

ارجع إلى لوحة النمط وانقر أسفل اللوحة في النافذة المنبثقة، حدد العنصر الثالث Use CSS Selector for Type، وحدد علامة a:link في مربع Tag، ثم حدد This Document Only for Define.
بعد النقر فوق OK (موافق)، في النافذة المنبثقة، قم بملء #ffffff للون، وحدد لا شيء للزخرفة، وانقر فوق OK (موافق).

ارجع إلى لوحة النمط وانقر أسفل اللوحة في النافذة المنبثقة، حدد العنصر الثالث Use CSS Selector for Type، وحدد العلامة a:visited في مربع Tag، ثم حدد This Document Only for Define.
بعد النقر فوق OK (موافق)، في النافذة المنبثقة، قم بملء #ffffff للون، وحدد لا شيء للزخرفة، وانقر فوق OK (موافق).

3. حدد نمط حدود القائمة في لوحة النمط، وانقر فوق الزر الموجود أسفل اللوحة، وفي النافذة المنبثقة، حدد علامة td في مربع العلامة، وحدد العنصر الثاني إعادة تعريف علامة HTML للنوع، وحدد هذا المستند فقط للتعريف ، كما هو موضح في الشكل.

تنبثق نافذة الإعدادات، حدد Border في القائمة الموجودة على اليسار، وأدخل عرض الجوانب الأربعة على اليمين كـ 1، واضبط اللون على الأسود #000000، وحدد صلب كالنمط.

عند هذه النقطة، نجحنا. استخدامه على صفحة الويب الخاصة بك الآن.