يوفر Dreamweaver (المشار إليه فيما بعد بـ DW) آلية تسمى "السلوك" لمساعدتك في إنشاء سلوكيات تفاعلية في الصفحة. السلوك عبارة عن سلسلة من الإجراءات التي يتم تنفيذها على صفحة الويب، والتي من خلالها يتفاعل المستخدم مع الصفحة. باستخدام سلوك DW، يمكنك تحقيق تأثيرات صفحة ديناميكية غنية وتحقيق تفاعل صفحة المستخدم دون كتابة سطر واحد من التعليمات البرمجية.
يتكون السلوك من أحداث وأفعال. الحدث هو نتيجة إجراء تم تشغيله، والإجراء عبارة عن كود JavaScript مكتوب مسبقًا يستخدم لإكمال مهمة محددة، مثل فتح نافذة متصفح، أو تشغيل صوت، وما إلى ذلك.
عند استخدام السلوكيات على عنصر الصفحة، يمكنك تحديد الإجراءات والأحداث التي سيتم تشغيلها. قدمت DW بعض الإجراءات المحددة التي يمكنك تطبيقها على عناصر الصفحة.
1. بعض السلوكيات الأساسية المضمنة
1. استدعاء JavaScript (استدعاء JavaScript)
يتيح لك هذا السلوك إعداد برنامج JavaScript النصي المقابل ليتم استدعاؤه عند تشغيل أحداث معينة لتنفيذ الإجراء المقابل. عند تعيين هذا السلوك، يمكنك إدخال البرامج النصية أو وظائف JavaScript مباشرةً.
2. تغيير الخاصية (تغيير الخاصية)
يتيح لك هذا السلوك تغيير خصائص الكائن ديناميكيًا، مثل حجم الصورة، ولون خلفية الطبقة، وما إلى ذلك. لاحظ أن تحديد هذا السلوك يعتمد على دعم المتصفح.
3. التحقق من المتصفح
هناك بعض الاختلافات في إمكانيات الدعم للمتصفحات المختلفة. باستخدام هذا السلوك، يمكننا التحقق من إصدار المتصفح للانتقال إلى صفحات مختلفة.
4. التحقق من المكون الإضافي
في بعض الأحيان تتطلب الصفحات التي نقوم بإنشائها دعم مكونات إضافية معينة، مثل صفحات الويب التي تم إنشاؤها باستخدام Flash، لذلك من الضروري التحقق من المكون الإضافي لمتصفح المستخدم لمعرفة ما إذا كان يحتوي على المكون الإضافي المحدد مثبتة. هذا السلوك يفعل ذلك بالضبط.
5. التحكم في Shockwave أو Flash (التحكم في Shockwave أو Flash)
Shockwave وFlash عبارة عن كائنات يتم إدراجها غالبًا في إنتاج صفحة الويب الحالية. يتم استخدام هذا السلوك للتحكم في هذه الكائنات. يمكنك استخدامه للتحكم في تشغيل الرسوم المتحركة وإيقافها وإعادتها، ويمكنك أيضًا التحكم في الإطار للانتقال إليه مباشرة.
6. تحريك الطبقة (طبقة السحب)
يمكن لسلوك "تحريك الطبقة" تحقيق حركة الطبقات على الصفحة، وحتى حركة محتوى الطبقات.
7. الانتقال إلى URL (الانتقال إلى URL)
يمكنك تحديد نافذة المتصفح الحالية أو نافذة الإطار المحددة لتحميل الصفحة المحددة.
8. قائمة الانتقال السريع
يتم استخدام سلوك "قائمة الانتقال السريع" بشكل أساسي لتحرير نماذج الانتقال السريع.
9. مربع حوار الرسالة المنبثقة (Popup message)
إذا كنت تريد عرض مربع حوار معلومات على الصفحة، أو إعطاء المستخدم رسالة سريعة، فيمكنك استخدام هذا السلوك.
2. مثال بسيط
أدناه سنلتقط صورًا ديناميكية كمثال للتعريف باستخدام السلوكيات. تحتاج أولاً إلى إنشاء صورتين 1 و 2 بنفس الحجم. فيما يلي الخطوات المحددة.
1. افتح DW لإنشاء صفحة وأدخل الشكل 1 في هذه الصفحة.
2. حدد الشكل 1 في نافذة تحرير DW.
3. حدد "السلوكيات" في قائمة "النوافذ" أو اضغط على F8 لفتح لوحة السلوك. لاحظ أنه في القائمة المنبثقة "الأحداث الخاصة"، يجب تحديد "3.0 والمتصفحات الأحدث".
4. اضغط على الزر "+" لإضافة سلوك جديد - "تبديل الصورة"، وسينبثق مربع الحوار "تبديل الصورة". في قائمة الصور، سترى قائمة بجميع الصور الموجودة على الصفحة. حدد الصورة 1 التي تريد تحويلها. هذه هي الصورة الأصلية. عندما يتحرك مؤشر الماوس فوقها، سيتم استبدالها بصورة مميزة 2. بديل.
5. انقر فوق الزر Browse وحدد الصورة التي تريد استبدالها من خلال حدث "onMouseOver"، تحل الصورة المحددة 2 محل الصورة الأصلية 1.
6. حدد الإعدادات الافتراضية للاتصال المسبق بالصور وتخزينها.
ويعني خيار "التحميل المسبق للصور" أنه عند تنزيل الصفحة بأكملها، يتم وضع الصور المحولة في ذاكرة التخزين المؤقت للمتصفح. عندما يحرك المشاهد مؤشر الماوس فوق صورة قصتنا لأول مرة، فإنه بالكاد يشعر بالصورة المميزة. ليس هناك تأخير في ظهور . يعني خيار "استعادة الصور onMouseOut" أنه عند حدوث حدث "onMouseOut" (إخراج الماوس)، ستتم استعادة الصورة تلقائيًا إلى حالتها الأصلية.
7. بعد اكتمال الإعدادات، انقر فوق الزر "موافق" لإغلاق مربع الحوار "تبديل الصورة" وتطبيق الإعدادات السابقة.
في هذا الوقت، تحتوي لوحة السلوك على الأحداث والإجراءات التي قمت بتعيينها للتو للصورة. توجد علامة الإجراء "Swap Image" بجوار الحدث "OnMouseOver"، وفوقها يوجد الحدث "onMouseOut" والإجراء المقابل "Swap Image Restore" (هذا السلوك يكون عند قبول الإعداد الافتراضي في مربع حوار Swap Image تم تحديد خيارات المربع).
8. أغلق لوحة السلوك. اضغط على F12 لمعاينة الصفحة. عند تحريك مؤشر الفأرة إلى الصورة رقم 1 ستجد أنه تم استبدالها بالصورة رقم 2.
المثال أعلاه هو مجرد مثال تطبيقي بسيط لسلوك DW. هناك العديد من الاستخدامات الأخرى، لذلك لن أشرحها واحدة تلو الأخرى هنا. بالإضافة إلى ذلك، يتيح DW أيضًا للمستخدمين استخدام السلوكيات الموسعة، والتي يمكن تنزيلها من صفحة Macromedia الرئيسية.