الأصدقاء الذين استخدموا QQ للدردشة يحبون جميعًا وظيفة إخفاء النوافذ التلقائية، والتي يمكن أن تجعل النافذة تبدو جديدة ونظيفة وديناميكية. يرغب العديد من أصدقائي في إضافة أشياء مماثلة إلى صفحات الويب الخاصة بهم، وبعد الاستكشاف المشترك، اكتشفوا ذلك يمكن تحقيق التأثير باستخدام Dreamweaer، فلنلقي نظرة على إنتاج شريط القائمة النشط.
الخطوة 1: جعل مظهر القائمة
الشكل 1
قم بإنشاء ملف جديد في Dreamweaer، وارسم طبقة، وأدخل جدولًا في الطبقة (الشكل 1)، وقم بتعديل الجدول، ثم قم بإضافة عناصر القائمة وإنشاء ارتباطات تشعبية لكل عنصر، لإزالة السطر السفلي للارتباط التشعبي، يمكنه تحرير نمط CSS للارتباط التشعبي. في لوحة أنماط CSS، اضبط "زخرفة" "الرابط" و"التمرير" على "لا شيء" من خلال محدد CSS، واضبط "اللون" لـ "التحويم". )" إلى اللون الأحمر، وأخيرًا يتم تطبيق النمط المحدد على كل شريط قائمة (يمكنك الضغط على المفتاح "F12" لمعاينة التأثير).
الخطوة 2: تصميم التأثير الديناميكي للقائمة
1. حدد الطبقة، واضغط باستمرار على الزر الأيسر عندما يتحول الماوس إلى شكل "تقاطع"، واسحب الطبقة إلى الزاوية اليمنى العليا من الصفحة (بحيث تظهر القائمة بأكملها إذا كان الشريط مكشوفًا بالكامل ولكن الحافة العلوية قريبة تمامًا من حدود الصفحة)، فافتح لوحة المخطط الزمني في قائمة النافذة، وحدد الطبقة واسحبها إلى المخطط الزمني، وسيقوم Dreamweaer تلقائيًا بإنشاء كائن رسوم متحركة بطول 15 إطارًا. اسحب الإطار الرئيسي الأخير لكائن الرسوم المتحركة إلى الإطارات الثلاثين، واضبط طوله على 30 إطارًا. ثم انقر بزر الماوس الأيمن على الإطار 15، وحدد خيار "إضافة إطار رئيسي" في القائمة المختصرة المنبثقة لإدراج إطار رئيسي، واسحب الطبقة إلى الموضع المناسب (الشكل 2). انقر بزر الماوس الأيمن مرة أخرى على الإطار 15 في نافذة المخطط الزمني وحدد "Add Action" من القائمة المختصرة المنبثقة لإضافة سلوك تفاعلي إلى الإطار. وسيفتح Dreamweaer لوحة السلوك تلقائيًا. انقر فوق الزر "+" في لوحة السلوك، وحدد "المخطط الزمني/إيقاف الجدول الزمني" من القائمة المنبثقة، وافتح مربع الحوار "إيقاف الجدول الزمني"، وحدد "المخطط الزمني 1" وانقر فوق الزر "موافق" لإغلاق مربع الحوار . حدث السلوك التفاعلي هو "onFrame15" والإجراء هو "Stop Timeline"، بحيث عندما يصل المخطط الزمني إلى الإطار الخامس عشر، ستتوقف الرسوم المتحركة عن التشغيل، وبالتالي تحقيق وظيفة ارتداد شريط القائمة.
الشكل 2
2. استخدم نفس الطريقة لإضافة السلوك التفاعلي "إيقاف الجدول الزمني" في الإطار الثلاثين للخط الزمني، وبالتالي تحقيق وظيفة القائمة المنبثقة. بعد إضافة هذين السلوكين التفاعليين، يظهر مربع أزرق على الإطار المقابل في نافذة المخطط الزمني، وهو ما يمثل سلوكًا تفاعليًا. حدد خانة الاختيار "التشغيل التلقائي والتكرار" لتمكين الرسوم المتحركة من التكرار تلقائيًا (الشكل 3).
الشكل 3
3. نحتاج الآن إلى إعداد سلوك يسمح للخط الزمني بمواصلة اللعب بعد توقفه. فكرتي هي كما يلي: في الحالة الطبيعية، ينبثق شريط القائمة ولكنه يحتفظ فقط بالكلمات "Campus Grand View" أدناه، ويتم التحكم في النافذة المنبثقة والارتداد لشريط القائمة من خلال ما إذا كان الماوس يمر فوق "Campus Grand View" عرض" في شريط القائمة. . يمكنك الاستمرار على هذا النحو: حدد كلمة "Campus Grand View" في شريط القائمة (تأكد من أن عنوان الارتباط التشعبي لهذه الكلمة هو "#"، أي رابط فارغ)، وانقر فوق الزر "+" في لوحة السلوك ، وفي النافذة المنبثقة حدد "المخطط الزمني/تشغيل الجدول الزمني" من القائمة، وحدد "المخطط الزمني 1" في مربع الحوار المنبثق وانقر فوق الزر "موافق" في هذا الوقت، ستتم إضافة سلوك إلى لوحة السلوك، و حدد الحدث "onMouseOver" في القائمة المنسدلة "الأحداث"، مما يشير إلى أنه سيتم تشغيل الرسوم المتحركة عندما يكون الماوس فوق الكلمة (الشكل 4).
الشكل 4
عند هذه النقطة، يكتمل شريط القائمة النشط. يمكنك الضغط على مفتاح "F12" لمعاينة تأثيره.
لكن شريط القائمة هذا به عيب واحد: يجب أن يختفي عندما يمر الماوس عبر منطقة معينة أسفل شريط القائمة (في هذه الحالة، الكلمات "Campus Grand View" إذا كنت تريد جعل شريط القائمة منبثقًا، فما عليك سوى النقر قم بتحريك الماوس بعيدًا عن شريط القائمة حتى تختفي القائمة، وقد تحتاج إلى استخدام Fireworks أو Flash إذا كانت لديك أية طرق جيدة، فيرجى مراسلتنا لمناقشتها.