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