دليل المستخدم إلغاء

تطبيق سلوكيات JavaScript المضمنة

  1. دليل مستخدم Dreamweaver
  2. مقدمة
    1. أساسيات تصميم الويب التفاعلي
    2. الجديد في Dreamweaver
    3. تطوير الويب باستخدام Dreamweaver - نظرة عامة
    4. Dreamweaver | الأسئلة الشائعة
    5. اختصارات لوحة المفاتيح‬‏‫
    6. متطلبات النظام لبرنامج Dreamweaver
    7. ملخص الميزات
  3. Dreamweaver وCreative Cloud
    1. مزامنة إعدادات Dreamweaver مع Creative Cloud
    2. مكتبات Creative Cloud في Dreamweaver
    3. استخدام ملفات Photoshop في Dreamweaver
    4. العمل باستخدام Adobe Animate وDreamweaver
    5. استخراج ملفات SVG المحسّنة من المكتبات
  4. مساحات عمل Dreamweaver وطرق عرضه
    1. مساحة عمل Dreamweaver
    2. تحسين مساحة عمل Dreamweaver للتطوير المرئي
    3. البحث عن الملفات استنادًا إلى اسم الملف أو المحتوى | Mac OS
  5. إعداد المواقع
    1. حول مواقع Dreamweaver
    2. إعداد إصدار محلي من موقعك
    3. الاتصال بخادم نشر
    4. إعداد خادم اختبار
    5. استيراد إعدادات موقع Dreamweaver وتصديرها
    6. إحضار مواقع ويب موجودة من خادم بعيد إلى جذر موقع الويب المحلي
    7. ميزات الوصول في Dreamweaver
    8. الإعدادات المتقدمة
    9. تعيين تفضيلات الموقع لنقل الملفات
    10. تحديد إعدادات خادم الوكيل في Dreamweaver
    11. مزامنة إعدادات Dreamweaver مع Creative Cloud
    12. استخدام Git في Dreamweaver
  6. إدارة الملفات
    1. إنشاء الملفات وفتحها
    2. إدارة الملفات والمجلدات
    3. إحضار الملفات من الخادم ووضعها فيه
    4. سحب الملفات وإيداعها
    5. مزامنة الملفات
    6. مقارنة الملفات لمعرفة الاختلافات
    7. حماية ملفات ومجلدات في موقع Dreamweaver
    8. تمكين Design Notes لمواقع Dreamweaver وتعطيلها
    9. منع الاستغلال المحتمل لـ Gatekeeper
  7. التخطيط والتصميم
    1. استخدام الأدوات المساعدة المرئية للتخطيط
    2. حول استخدام CSS لتخطيط صفحاتك
    3. تصميم مواقع ويب تفاعلية باستخدام Bootstrap
    4. إنشاء استعلامات الوسائط واستخدامها في Dreamweaver
    5. عرض المحتوى باستخدام الجداول
    6. الألوان
    7. تصميم استجابة باستخدام مخططات الشبكة المرنة
    8. ميزة Extract في Dreamweaver
  8. CSS
    1. فهم أوراق الأنماط المتتالية
    2. تخطيط الصفحات باستخدام CSS Designer
    3. استخدام معالجات CSS الأولية في Dreamweaver
    4. كيفية تعيين تفضيلات أنماط CSS في Dreamweaver
    5. نقل قواعد CSS في Dreamweaver
    6. تحويل CSS مضمنة إلى قاعدة CSS في Dreamweaver
    7. استخدام علامات div
    8. تطبيق تدرجات على الخلفية
    9. إنشاء تأثيرات CSS3 الانتقالية وتحريرها في Dreamweaver
    10. تنسيق التعليمات البرمجية
  9. محتويات الصفحة وأصولها
    1. تعيين خصائص الصفحة
    2. تعيين خصائص عناوين CSS وخصائص ارتباطات CSS
    3. استخدام النص
    4. البحث عن النص والعلامات والسمات واستبدالها
    5. لوحة DOM
    6. التحرير في Live View
    7. ترميز المستندات في Dreamweaver
    8. تحديد العناصر وعرضها في النافذة Document
    9. تعيين خصائص النص في عارض الخصائص
    10. إجراء التدقيق الإملائي لصفحة ويب
    11. استخدام القواعد الأفقية في Dreamweaver
    12. إضافة مجموعات الخطوط وتعديلها في Dreamweaver
    13. استخدام الأصول
    14. إدراج التواريخ وتحديثها في Dreamweaver
    15. إنشاء الأصول المفضلة وإدارتها في Dreamweaver
    16. إدراج الصور وتحريرها في Dreamweaver
    17. إضافة كائنات وسائط
    18. إضافة مقاطع الفيديو في Dreamweaver
    19. إدراج فيديو HTML5
    20. إدراج ملفات SWF
    21. إضافة تأثيرات صوتية
    22. إدراج صوت HTML5 في Dreamweaver
    23. العمل باستخدام عناصر المكتبة
    24. استخدام النصوص العربية والعبرية في Dreamweaver
  10. الربط والتنقل
    1. حول الربط والتنقل
    2. الربط
    3. مخططات الصور
    4. استكشاف أخطاء الارتباطات وحلها
  11. عناصر واجهة jQuery وتأثيراتها
    1. استخدام عناصر واجهة مستخدم jQuery UI والجوال في Dreamweaver
    2. استخدام تأثيرات jQuery في Dreamweaver
  12. كتابة التعليمات البرمجية لمواقع الويب
    1. حول كتابة التعليمات البرمجية في Dreamweaver
    2. بيئة كتابة التعليمات البرمجية في Dreamweaver
    3. تعيين تفضيلات التعليمات البرمجية
    4. تخصيص ألوان التعليمات البرمجية
    5. كتابة تعليمة برمجية وتحريرها
    6. تلميحات التعليمات البرمجية وإكمال التعليمات البرمجية
    7. طي التعليمات البرمجية وتوسيعها
    8. إعادة استخدام التعليمات البرمجية مع أجزاء التعليمات البرمجية
    9. فحص التعليمات البرمجية
    10. تحسين التعليمة البرمجية
    11. تحرير التعليمة البرمجية في طريقة العرض Design
    12. العمل باستخدام محتوى العنوان للصفحات
    13. إدراج تضمينات على جانب الخادم في Dreamweaver
    14. استخدام مكتبات العلامات في Dreamweaver
    15. استيراد علامات مخصصة إلى Dreamweaver
    16. استخدام سلوكيات JavaScript (إرشادات عامة)
    17. تطبيق سلوكيات JavaScript المضمنة
    18. نبذة عن لغتي XML وXSLT
    19. تنفيذ تحويلات XSL على جانب الخادم في Dreamweaver
    20. تنفيذ تحويلات XSL على جانب العميل في Dreamweaver
    21. إضافة كيانات أحرف لـ XSLT في Dreamweaver
    22. تنسيق التعليمات البرمجية
  13. عمليات سير العمل على مستوى المنتجات
    1. تثبيت الملحقات واستخدامها في Dreamweaver
    2. التحديثات من داخل التطبيق في Dreamweaver
    3. إدراج مستندات Microsoft Office في Dreamweaver ‏(Windows فقط)
    4. استخدام Fireworks وDreamweaver
    5. تحرير المحتوى في مواقع Dreamweaver باستخدام Contribute
    6. تكامل Dreamweaver مع تطبيق Business Catalyst
    7. إنشاء حملات إعلانية خاصة عبر البريد الإلكتروني
  14. القوالب
    1. حول قوالب Dreamweaver
    2. التعرف على القوالب والمستندات القائمة على القوالب
    3. إنشاء قالب Dreamweaver
    4. إنشاء مناطق قابلة للتحرير في القوالب
    5. إنشاء مناطق وجداول التكرار في Dreamweaver
    6. استخدام المناطق الاختيارية في القوالب
    7. تحديد سمات العلامات القابلة للتحرير في Dreamweaver
    8. كيفية إنشاء قوالب متداخلة في Dreamweaver
    9. تحرير القوالب وتحديثها وحذفها
    10. تصدير محتوى xml واستيراده في Dreamweaver
    11. تطبيق أو إزالة قالب من مستند موجود
    12. تحرير المحتوى في قوالب Dreamweaver
    13. قواعد بناء الجملة لعلامات القوالب في Dreamweaver
    14. تعيين تفضيلات التمييز لمناطق القالب
    15. فوائد استخدام القوالب في Dreamweaver
  15. شاشات الهاتف المحمول والشاشات المتعددة
    1. إنشاء استعلامات الوسائط
    2. تغيير اتجاه الصفحة للأجهزة الجوالة
    3. إنشاء تطبيقات الويب للأجهزة الجوالة باستخدام Dreamweaver
  16. المواقع والصفحات ونماذج الويب الديناميكية
    1. فهم تطبيقات الويب
    2. إعداد الكمبيوتر لتطوير التطبيقات
    3. استكشاف أخطاء اتصالات قاعدة البيانات وحلها
    4. إزالة برامج الاتصال النصية في Dreamweaver
    5. تصميم صفحات ديناميكية
    6. نظرة عامة على مصادر المحتوى الديناميكي
    7. تعريف مصادر المحتوى الديناميكي
    8. إضافة محتوى ديناميكي إلى الصفحات
    9. تغيير المحتوى الديناميكي في Dreamweaver
    10. عرض سجلات قاعدة البيانات
    11. توفير البيانات المباشرة واستكشاف أخطائها وحلها في Dreamweaver
    12. إضافة سلوكيات خادم مخصصة في Dreamweaver
    13. إنشاء النماذج باستخدام Dreamweaver
    14. استخدام النماذج لجمع معلومات من المستخدمين
    15. إنشاء نماذج ColdFusion وتمكينها في Dreamweaver
    16. إنشاء نماذج الويب
    17. دعم HTML5 محسّن لعناصر النماذج
    18. تطوير نموذج باستخدام Dreamweaver
  17. إنشاء التطبيقات مرئيًا
    1. إنشاء صفحات رئيسية وصفحات تفاصيل في Dreamweaver
    2. إنشاء صفحات البحث والنتائج
    3. إنشاء صفحة إدراج سجل
    4. إنشاء صفحة تحديث سجل في Dreamweaver
    5. إنشاء صفحات حذف سجل في Dreamweaver
    6. استخدام أوامر ASP لتعديل قاعدة البيانات في Dreamweaver
    7. إنشاء صفحة تسجيل
    8. إنشاء صفحة تسجيل دخول
    9. إنشاء صفحة يمكن للمستخدمين المخولين فقط الوصول إليها
    10. تأمين المجلدات في Coldfusion باستخدام Dreamweaver
    11. استخدام مكونات ColdFusion في Dreamweaver
  18. اختبار مواقع الويب ومعاينتها ونشرها
    1. معاينة الصفحات
    2. معاينة صفحات ويب Dreamweaver على أجهزة متعددة
    3. اختبار موقع Dreamweaver

 

استخدم هذا الموضوع لفهم كيفية تطبيق سلوكيات JavaScript المضمنة في Adobe Dreamweaver.

استخدام السلوكيات المضمنة

تمت كتابة السلوكيات المضمنة مع Dreamweaver للعمل في المستعرضات الحديثة. تفشل السلوكيات دون إزعاج في المستعرضات القديمة.

ملاحظة:

تمت كتابة إجراءات Dreamweaver بحرص للعمل في مستعرضات عديدة قدر الإمكان. إذا قمت بإزالة تعليمات برمجية من إجراء Dreamweaver يدويًا، أو استبدالها بالتعليمات البرمجية الخاصة بك، فقد تخسر التوافق عبر المستعرضات.

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

تطبيق السلوك Call JavaScript

ينفذ سلوك Call JavaScript وظيفة مخصصة أو سطر مخصص من تعليمات JavaScript البرمجية عندما يقع حدث ما. (يمكنك كتابة البرنامج النصي بنفسك، أو يمكنك استخدام تعليمات برمجية مزودة بمكتبات JavaScript عديدة متاحة بحرية على الويب.)

  1. حدد كائنًا واختر Call JavaScript من القائمة Add Behavior للوحة Behaviors.
  2. اكتب JavaScript الصحيح لتنفيذه، أو اكتب اسم وظيفة.

    على سبيل المثال، لإنشاء زر Back، قد تكتب if (history.length > 0){history.back()}. إذا قمت بتغليف التعليمات البرمجية الخاصة بك في وظيفة، فاكتب اسم الوظيفة فقط (على سبيل المثال، hGoBack()).

  3. انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Change Property

استخدم السلوك Change Property لتغيير قيمة أحد خصائص كائن ما (على سبيل المثال، لون خلفية div أو إجراء نموذج).

ملاحظة:

لا تستخدم هذا السلوك إلا إذا كنت متمرسًا في HTML وJavaScript.

  1. حدد كائنًا واختر Change Property من القائمة Add Behavior للوحة Behaviors.
  2. من القائمة Type Of Element، حدد نوع عنصر لعرض كل العناصر المحددة لهذا النوع.
  3. حدد عنصرًا من القائمة Element ID.
  4. حدد خاصية من القائمة Property، أو أدخل اسم الخاصية في المربع.
  5. أدخل القيمة الجديدة للخاصية الجديدة في الحقل New Value.
  6. انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Check Plugin

استخدم سلوك Check Plugin لإرسال الزوار إلى صفحات مختلفة استنادًا إلى ما إذا كان لديهم مكون إضافي محدد تم تثبيته. على سبيل المثال، قد تريد من المستخدمين أن يذهبوا إلى صفحة واحدة، إذا كان لديهم Shockwave وصفحة أخرى إذا لم يكن لديهم.

ملاحظة:

لا يمكنك الكشف عن مكونات إضافية معينة في Internet Explorer باستخدام JavaScript. ومع ذلك، سيؤدي تحديد Flash أو Director إلى إضافة تعليمات VBScript البرمجية المناسبة إلى صفحتك لاكتشاف هذه المكونات الإضافية في Internet Explorer على نظام التشغيل Windows. اكتشاف المكون الإضافي مستحيل في Internet Explorer على نظام التشغيل Mac OS.

  1. حدد كائنًا واختر Check Plugin من القائمة Add Behavior للوحة Behaviors.
  2. حدد مكونًا إضافيًا من القائمة Plugin، أو انقر فوق Enter واكتب الاسم الصحيح للمكون الإضافي في المربع المجاور.

    يجب عليك استخدام الاسم الصحيح للمكون الإضافي كما هو محدد بالخط العريض في الصفحة About Plug‑ins في Netscape Navigator. (في نظام التشغيل Windows، حدد الأمر Navigator’s Help > About Plug‑ins؛ في نظام التشغيل Mac OS، وحدد About Plug‑ins من القائمة Apple.)

  3. في المربع If Found, Go To URL، حدد عنوان URL للزوار الذين لديهم المكون الإضافي.

    إذا حددت عنوان URL بعيدًا، فيجب تضمين البادئة http:// في العنوان. إذا تركت الحقل فارغًا، فسيبقى الزوار في نفس الصفحة.

  4. في المربع، Otherwise, Go To URL، حدد عنوان URL بديلاً للزوار الذين ليس لديهم المكون الإضافي. إذا تركت الحقل فارغًا، فسيبقى الزوار في نفس الصفحة.
  5. حدد ما الذي تفعله إذا كان اكتشاف المكون الإضافي غير ممكن. افتراضيًا، إذا كان الاكتشاف غير ممكن، فسيتم إرسال الزائر إلى عنوان URL المسرود في المربع Otherwise. ولإرسال الزائر بدلاً من ذلك إلى عنوان URL الأول (If Found)، حدد الخيار Always Go To First URL If Detection Is Not Possible. عند تحديده، يعني هذا الخيار بفعالية "افتراض أن الزائر لديه المكون الإضافي، ما لم يوضح المستعرض بصراحة أن المكون الإضافي غير موجود". وعمومًا، قم بتحديد هذا الخيار، إذا كان محتوى المكون الإضافي مدمجًا في صفحتك؛ ما دون ذلك، اتركه على وضعية إلغاء التحديد.
    ملاحظة:

    ينطبق هذا الخيار فقط على Internet Explorer؛ ويستطيع Netscape Navigator دائمًا اكتشاف المكونات الإضافية.

  6. انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Drag AP Element

يتيح السلوك Drag AP Element للزائر إمكانية سحب عنصر (AP) له وضع مطلق. استخدم هذا السلوك لإنشاء أحجيات، وعناصر تحكم المنزلق، وعناصر الواجهة الأخرى القابلة للتحريك.

يمكنك تحديد في أي اتجاه يمكن أن يسحب الزائر فيه عنصر AP (أفقيًا، أو رأسيًا، أو في أي اتجاه)، وهدف يجب على الزائر سحب عنصر AP إليه، وما إذا كان سيتم انجذاب عنصر AP إلى الهدف إذا كان عنصر AP داخل عدد معين من وحدات البكسل الهدف، وما الذي عليك فعله إذا وصل عنصر AP للهدف، وأكثر.

بسبب وجوب استدعاء السلوك Drag AP Element قبل أن يستطيع الزائر سحب عنصر AP، يجب عليك إرفاق السلوك Drag AP Element بالكائن body (مع الحدث onLoad).

  1. حدد Insert > Layout Objects > AP Div أو انقر فوق الزر Draw AP Div في اللوحة Insert وارسم AP Div في طريقة العرض Design للنافذة Document.
  2. انقر فوق <body> في محدد العلامات بالزاوية السفلى اليسرى من النافذة Document.
  3. حدد Drag AP Element من القائمة Add Behavior للوحة Behaviors.

    إذا كان Drag AP Element غير متاح، فربما يكون لديك عنصر AP محدد.

  4. في القائمة المنبثقة AP Element، حدد عنصر AP.
  5. حدد إما Constrained أو Unconstrained من القائمة المنبثقة Movement.

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

  6. للحصول على حركة مقيدة، أدخل القيم (بالبكسل) في المربعات Up، وDown، وLeft، وRight.

    القيم قريبة من موضع البدء لعنصر AP. لتقيد حركة داخل منطقة مستطيلة الشكل، أدخل القيم الموجبة في كل المربعات الأربعة. للسماح بالحركة الرأسية فقط، أدخل القيم الموجبة لمربع Up وDown و0 لمربع Left وRight. للسماح بالحركة الأفقية فقط، أدخل القيم الموجبة لمربع Left وRight و0 لمربع Up وDown.

  7. أدخل القيم (بالبكسل) لهدف الإفلات في المربعين Left وTop.

    هدف الإفلات هو المكان الذي تريد من الزائر أن يسحب إليه عنصر AP. من المفترض أن يصل عنصر AP هدف الإفلات عندما تتطابق إحداثياته اليسرى والعليا مع القيم التي أدخلتها في المربعين Left وTop. القيم قريبة من الزاوية العليا اليسرى من نافذة المستعرض. انقر فوق Get Current Position لملء مربعات النص تلقائيًا بالوضع الحالي لعنصر AP.

  8. أدخل قيمة (بالبكسل) في المربع Snap If Within لتحديد مدى القرب الذي يجب على الزائر الوصول إليه لهدف الإفلات قبل انجذاب عنصر AP للهدف.

    تسهل القيم الأكبر إيجاد الزائر لهدف الإفلات.

  9. بالنسبة إلى الأحجيات البسيطة والتلاعب بالمشهد، يمكنك التوقف هنا. لتحديد مقبض السحب لعنصر AP، تتبع حركة عنصر AP أثناء سحبه، وقم بتشغيل حدث عند إفلات عنصر AP، وانقر فوق علامة التبويب Advanced.
  10. لتحديد أنه يجب على المستخدم النقر فوق منطقة معينة في عنصر AP لسحب عنصر AP، حدد Area داخل العنصر من القائمة Drag Handle؛ ثم أدخل الإحداثيات اليسرى والعليا وعرض مقبض السحب وارتفاعه.

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

  11. حدد أي خيارات من While Dragging تريد استخدامها:
    • حدد Bring Element To Front إذا كان يجب تحريك عنصر AP إلى مقدمة ترتيب التكديس أثناء سحبه. إذا قمت بتحديد هذا الخيار، استخدم القائمة المنبثقة لتحديد إما ترك عنصر AP في المقدمة أو استعادته لجعله في موضعه الأصلي في ترتيب التكديس.

    • أدخل تعليمات JavaScript البرمجية أو اسم وظيفة (على سبيل المثال، monitorAPelement()) في المربع Call JavaScript لتنفيذ التعليمات البرمجية أو الوظيفة أثناء سحب عنصر AP. على سبيل المثال، قد تكتب وظيفة تراقب إحداثيات عنصر AP وتعرض تلميحات مثل "أصبحت الآن أكثر تفاعلاً" أو "أنت الآن أقرب ما يكون إلى هدف الإفلات" في مربع نص.

  12. أدخل تعليمات JavaScript البرمجية أو اسم وظيفة (على سبيل المثال، evaluateAPelementPos()) في المربع Call JavaScript الثاني لتنفيذ التعليمات البرمجية أو الوظيفة أثناء سحب عنصر AP. حدد Only If Snapped إذا كان يجب تنفيذ JavaScript فقط في حالة وصول عنصر AP لهدف الإفلات.
  13. انقر فوق OK وتحقق من صحة الحدث الافتراضي.

جمع معلومات عن عنصر AP القابل للسحب

عندما تقوم بإرفاق سلوك عنصر Drag AP لكائن ما، يقوم Dreamweaver بإدخال الوظيفة MM_dragLayer() إلى القسم head الخاص بمستندك. (تحافظ الوظيفة على اصطلاح التسمية القديم لعناصر AP [وهو، “Layer”] بحيث تبقى الطبقات التي تم إنشاؤها في إصدارات Dreamweaver السابقة قابلة للتحرير.) بالإضافة إلى تسجيل عنصر AP كقابل للسحب، تحدد هذه الوظيفة ثلاث خصائص لكل عنصر AP قابل للسحب—MM_LEFTRIGHT، وMM_UPDOWN، وMM_SNAPPED—التي يمكنك استخدامها في وظائف JavaScript الخاصة بك لتحديد الوضع الأفقي القريب لعنصر AP، والوضع الرأسي القريب لعنصر AP، وما إذا كان عنصر AP قد وصل إلى هدف الإفلات.

ملاحظة:

تختص المعلومات المقدمة هنا ببرامج JavaScript الخبيرة.

على سبيل المثال، تعرض الوظيفة التالية قيمة الخاصية MM_UPDOWN (الوضع الرأسي الحالي لعنصر AP) في حقل نموذج يدعى curPosField. (تعتبر حقول النموذج مفيدة لعرض المعلومات المحدثة باستمرار لأنها ديناميكية—وبذلك، يمكنك تغيير محتواها بعد أن تنهي الصفحة التحميل.)

function getPos(layerId){ 
    var layerRef = document.getElementById(layerId); 
    var curVertPos = layerRef.MM_UPDOWN; 
    document.tracking.curPosField.value = curVertPos; 
}

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

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

تطبيق السلوك Go To URL

يفتح السلوك Go To URL صفحة جديدة في النافذة الحالية أو في الإطار المحدد. يعتبر هذا السلوك مفيدًا لتغيير إطارين أو أكثر بنقرة واحدة.

  1. حدد كائنًا واختر Go To URL من القائمة Add Behavior للوحة Behaviors.
  2. حدد وجهة لعنوان URL من القائمة Open In.

    تسرد القائمة Open In أسماء كل الإطارات تلقائيًا في مجموعة الإطارات الحالية والنافذة الرئيسية. إذا لم يكن هناك إطارات، تكون النافذة الرئيسية هي الخيار الوحيد.

    ملاحظة:

    قد ينتج هذا السلوك نتائج غير متوقعة إذا تم تسمية أي إطار بالأسماء top، أو blank، أو self، أو parent. أحيانًا تخطئ المستعرضات هذه الأسماء لأسماء الهدف المحفوظة.

  3. انقر فوق Browse لتحديد مستند لفتحه، أو أدخل المسار واسم الملف الخاص بالمستند الموجود في المربع URL.
  4. كرر الخطوتين 2 و3 لفتح مستندات إضافية في إطارات أخرى.
  5. انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Jump Menu

عند إنشاء قائمة انتقال باستخدام Insert > Form > Jump Menu، يقوم Dreamweaver بإنشاء كائن قائمة وإرفاق سلوك Jump Menu (أو Jump Menu Go) بها. وعادة لا تكون هناك حاجة لإرفاق السلوك Jump Menu بكائن يدويًا.

يمكنك تحرير قائمة انتقال موجودة بأي من الطريقتين التاليتين:

  • يمكنك تحديد عناصر القائمة وإعادة ترتيبها، وتغيير الملفات للانتقال السريع، وتغيير النافذة التي تفتح فيها هذه الملفات، عن طريق النقر المزدوج فوق أحد سلوكيات Jump Menu الموجودة في اللوحة Behaviors.

  • يمكنك تحرير العناصر في القائمة بالمثل كما تحرر العناصر في أي قائمة، عن طريق تحديد القائمة واستخدام الزر List Values في مفتش Property.

  1. قم بإنشاء كائن قائمة انتقال إذا لم تكن موجودة بالفعل في مستندك.
  2. حدد الكائن واختر Jump Menu من القائمة Add Behavior للوحة Behaviors.
  3. قم بإجراء تغييرات كما ترغب في مربع الحوار Jump Menu، ثم انقر فوق OK.

تطبيق السلوك Jump Menu Go

يرتبط السلوك Jump Menu Go ارتباطًا وثيقًا بالسلوك Jump Menu؛ حيث يتيح لك Jump Menu Go إمكانية ربط الزر Go بقائمة انتقال. (قبل استخدامك لهذا السلوك، يجب توفُر قائمة انتقال في المستند.) يؤدي النقر فوق الزر Go إلى فتح الارتباط المحدد في قائمة الانتقال. لا تحتاج قائمة الانتقال إلى الزر Go في العادة؛ حيث يؤدي تحديد عنصر من قائمة الانتقال عمومًا إلى تحميل عنوان URL دون الحاجة إلى إجراء إضافي من جانب المستخدم. ولكن إذا حدد الزائر نفس العنصر الذي تم اختياره بالفعل في قائمة الانتقال، فلن يحدث الانتقال السريع. وعمومًا، لا بأس من ذلك، ولكن إذا ظهرت قائمة الانتقال في إطار، وعناصر قائمة الانتقال التي تربط بالصفحات في إطارات أخرى، يكون الزر Go غالبًا مفيدًا، ليتيح للزائرين إمكانية إعادة تحديد عنصر محدد بالفعل في قائمة الانتقال.

ملاحظة:

عند استخدام الزر Go مع قائمة انتقال، يصبح الزر Go الآلية الوحيدة التي تقوم "بنقل" المستخدم إلى عنوان URL المقترن بالتحديد الموجود في القائمة. ولا يؤدي تحديد عنصر في قائمة الانتقال مجددًا إلى إعادة توجيه المستخدم تلقائيًا إلى صفحة أو إطار آخر.

  1. حدد كائنًا لاستخدامه مثل الزر Go (صورة للزر بشكل عام)، واختر Jump Menu Go من القائمة Add Behavior للوحة Behaviors.
  2. في القائمة Choose Jump Menu، حدد قائمة للزر Go لتنشيطها وانقر فوق OK.

تطبيق السلوك Open Browser Window

استخدم السلوك Open Browser Window لفتح صفحة في نافذة جديدة. يمكنك تحديد خصائص النافذة الجديدة، بما فيها حجمها، وسماتها (إما تكون قابلة لتغيير حجمها، ولها شريط قائمة، وما إلى ذلك)، واسمها. على سبيل المثال، يمكنك استخدام هذا السلوك لفتح صورة كبيرة في نافذة منفصلة عندما ينقر الزائر فوق صورة مصغرة؛ مع هذا السلوك، يمكنك جعل النافذة الجديدة لها نفس حجم الصورة.

إذا لم تحدد سمات للنافذة، تفتح بالحجم والسمات للنافذة التي فُتحت منها. بشكل تلقائي، يؤدي تحديد أي سمة للنافذة إلى إغلاق كل السمات الأخرى غير المشغلة صراحةً. على سبيل المثال، إذا لم تقم بتعيين سمات للنافذة، فقد تفتح على 1024 × 768 بكسل ويكون لها شريط تنقل (يُظهر الأزرار Back، وForward، وHome، وReload)، وشريط أدوات الموقع (يُظهر عنوان URL)، وشريط الحالة (يُظهر رسائل الحالة، في الأسفل)، وشريط القائمة (يُظهر القوائم File، وEdit، وView، وغيرها). إذا قمت بتعيين العرض على 640 والارتفاع 480 ولم تقم بتعيين سمات أخرى، فستفتح النافذة على 640 × 480 بكسل، بدون أشرطة أدوات.

  1. حدد كائنًا واختر Open Browser Window من القائمة Add Behavior للوحة Behaviors.
  2. انقر فوق الزر Browse لتحديد ملف، أو أدخل عنوان URL الذي تريد عرضه.
  3. قم بتعيين الخيارات لعرض النافذة وارتفاعها (بالبكسل) ولدمج أشرطة الأدوات المتنوعة، وأشرطة التمرير، ومقابض تغيير الحجم، وما يشبه ذلك. قم بتسمية النافذة (لا تستخدم مسافات أو رموز خاصة) إذا كنت تريدها أن تكون هي هدف الارتباطات أو كنت تريد التحكم بها عن طريق JavaScript.
  4. انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Popup Message

يعرض السلوك Popup Message تنبيه JavaScript بالرسالة التي تحددها. ولأن تنبيهات JavaScript تحتوي على زر واحد فقط (OK)، استخدم هذا السلوك لإمداد المستخدم بالمعلومات أفضل من تقديم اختيار.

يمكنك تضمن أي وظيفة من وظائف JavaScript الصالحة، الاستدعاء، أو الخاصية، أو المتغير العمومي، أو تعبير آخر في النص. لتضمين تعبير JavaScript، ضعه داخل أقواس متعرجة ({}). لعرض قوس متعرج، ضع قبله شرطة مائلة عكسية (\{).

مثال:

The URL for this page is {window.location}, and today is {new Date()}.
ملاحظة:

يتحكم المستعرض في مظهر التنبيه. إذا كنت تريد تحكمًا أكبر في المظهر، فجرب استخدام السلوك Open Browser Window.

  1. حدد كائنًا واختر Popup Message من القائمة Add Behavior للوحة Behaviors.
  2. أدخل رسالتك في المربع Message.
  3. انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Preload Images

يعمل السلوك Preload Images على تقليل وقت العرض عن طريق تخزين الصور غير المبينة مؤقتًا عندما تظهر الصفحة لأول مرة (على سبيل المثال، الصور التي سيتم مبادلتها مع السلوكيات والبرامج النصية).

ملاحظة:

ويعمل السلوك Swap Image على تحميل كل الصور المميزة تلقائيًا مسبقًا عند تحديد الخيار Preload Images في مربع الحوار Swap Image، لذا فأنت لست في حاجة إلى إضافة Preload Images يدويًا عند استخدام Swap Image.

  1. حدد كائنًا واختر Preload Images من القائمة Add Behavior للوحة Behaviors.
  2. انقر فوق Browse لتحديد ملف صورة، أو أدخل مسارًا واسم ملف لصورة في المربع Image Source File.
  3. انقر فوق زر علامة الجمع (+) الموجود في الجزء العلوي من مربع الحوار لإضافة الصورة إلى القائمة Preload Images.
  4. كرر الخطوتين 2و3 لكل الصور المتبقية التي تريد إعادة تحميلها على الصفحة الحالية.
  5. لإزالة صورة من القائمة Preload Images، حددها ثم انقر فوق زر علامة الطرح (-).
  6. انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Set Text Of Frame

يتيح لك السلوك Set Text Of Frame إمكانية تعيين نص إطار ديناميكيًا، واستبدال محتوى إطار وتنسيقه بالمحتوى الذي تحدده. يمكن أن يتضمن المحتوى أي تعليمات HTML برمجية صالحة. استخدم هذا السلوك لعرض المعلومات ديناميكيًا.

على الرغم من أن السلوك Set Text Of Frame يستبدل تنسيق الإطار، إلا أنه بإمكانك تحديد Preserve Background Color للاحتفاظ بسمات لون النص وخلفية الصفحة.

يمكنك تضمن أي وظيفة من وظائف JavaScript الصالحة، الاستدعاء، أو الخاصية، أو المتغير العمومي، أو تعبير آخر في النص. لتضمين تعبير JavaScript، ضعه داخل أقواس متعرجة ({}). لعرض قوس متعرج، ضع قبله شرطة مائلة عكسية (\{).

مثال:

The URL for this page is {window.location}, and today is {new Date()}.
  1. حدد كائنًا واختر Set Text > Set Text Of Frame من القائمة Add Behavior للوحة Behaviors.
  2. في مربع الحوار Set Text Of Frame، حدد إطار الهدف من القائمة Frame.
  3. انقر فوق الزر Get Current HTML لنسخ المحتويات الحالية الخاصة بقسم إطار الهدف body.
  4. أدخل رسالة في المربع New HTML.
  5. انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Set Text Of Container

يستبدل السلوك Set Text Of Container محتوى الحاوية الموجودة وتنسيقها (بمعنى أنه، أي عنصر يمكن أن يتضمن نصًا أو عناصر أخرى) على صفحة بالمحتوى الذي تحدده. يمكن أن يتضمن المحتوى أي تعليمة برمجية مصدر لـ HTML صالحة.

يمكنك تضمن أي وظيفة من وظائف JavaScript الصالحة، الاستدعاء، أو الخاصية، أو المتغير العمومي، أو تعبير آخر في النص. لتضمين تعبير JavaScript، ضعه داخل أقواس متعرجة ({}). لعرض قوس متعرج، ضع قبله شرطة مائلة عكسية (\{).

مثال:

The URL for this page is {window.location}, and today is {new Date()}.
  1. حدد كائنًا واختر Set Text > Set Text Of Container من القائمة Add Behavior للوحة Behaviors.
  2. في مربع الحوار Set Text Of Container، حدد القائمة Container لتحديد العنصر الهدف.
  3. أدخل نصًا جديدًا أو HTML في المربع New HTML.
  4. انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Set Text Of Status Bar

يُظهر السلوك Set Text Of Status Bar رسالة في شريط الحالة في الزاوية السفلى اليسرى من نافذة المستعرض. على سبيل المثال، يمكنك استخدام هذا السلوك لوصف وجهة ارتباط في شريط الحالة بدلاً من إظهار عنوان URL المرتبط به. غالبًا ما يتجاهل الزوار أو يغفلون عن الرسائل الموجودة في شريط الحالة (ولا توفر كل المستعرضات الدعم الكامل لإعداد نص شريط الحالة)؛ إذا كانت رسالتك مهمة، فجرب عرضها كرسالة منبثقة أو كنص عنصر AP.

ملاحظة:

إذا قمت باستخدام السلوك Set Text Of Status Bar في Dreamweaver، فلن يكون من المضمون تغيير نص شريط الحالة في المستعرض لأن بعض المستعرضات تتطلب عمليات ضبط خاصة عند تغيير نص شريط الحالة. فعلى سبيل المثال، يتطلب Firefox تغيير الخيار Advanced والذي يتيح لـJavaScript تغيير نص شريط الحالة. لمزيد من المعلومات، راجع وثائق المستعرض الخاص بك.

يمكنك تضمن أي وظيفة من وظائف JavaScript الصالحة، الاستدعاء، أو الخاصية، أو المتغير العمومي، أو تعبير آخر في النص. لتضمين تعبير JavaScript، ضعه داخل أقواس متعرجة ({}). لعرض قوس متعرج، ضع قبله شرطة مائلة عكسية (\{).

مثال:

The URL for this page is {window.location}, and today is {new Date()}.
  1. حدد كائنًا واختر Set Text > Set Text Of Status Bar من القائمة Add Behavior للوحة Behaviors.
  2. في مربع الحوار Set Text Of Status Bar، اكتب رسالتك في المربع Message.

    اجعل الرسالة مختصرة. يقتطع المستعرض الرسالة إذا كانت لا تناسب شريط الحالة.

  3. انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Set Text Of Text Field

يستبدل السلوك Set Text Of Text Field محتوى حقل نص النموذج بالمحتوى الذي تحدده.

يمكنك تضمن أي وظيفة من وظائف JavaScript الصالحة، الاستدعاء، أو الخاصية، أو المتغير العمومي، أو تعبير آخر في النص. لتضمين تعبير JavaScript، ضعه داخل أقواس متعرجة ({}). لعرض قوس متعرج، ضع قبله شرطة مائلة عكسية (\{).

مثال:

The URL for this page is {window.location}, and today is {new Date()}.

إنشاء حقل نص مسمى

  1. حدد Insert > Form > Text Field.

    إذا كان Dreamweaver يطالبك بإضافة علامة نموذج، فانقر فوق Yes.

  2. في مفتش Property، اكتب اسمًا لحقل النص. تأكد من أن الاسم فريد في الصفحة (لا تستخدم نفس الاسم لعناصر متعددة في نفس الصفحة، حتى وإن كانت تلك العناصر في نماذج مختلفة).

تطبيق Set Text Of Text Field

  1. حدد حقل نص واختر Set Text > Set Text Of Field من القائمة Add Behavior للوحة Behaviors.
  2. حدد حقل النص الهدف من القائمة Text Field وأدخل النص الجديد.
  3. انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Show-Hide Elements

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

  1. حدد كائنًا واختر Show-Hide Elements من القائمة Add Behavior للوحة Behaviors.

    إذا كان Show-Hide Elements غير متاح، فربما يكون لديك عنصر AP محدد. ونظرًا لكون عناصر AP لا تقبل الأحداث في كلا المستعرضين 4.0، فيجب عليك تحديد كائن مختلف - مثل العلامة <body> أو علامة ارتباط (<a>).

  2. من القائمة Elements، حدد العنصر الذي تريد عرضه أو إخفائه، ثم انقر فوق Show، أو Hide، أو Restore (والذي يستعيد قابلية الرؤية الافتراضية).
  3. كرر الخطوة 2 لكل العناصر المتبقية التي تريد تغيير قابلية رؤيتها. (يمكنك تغيير إمكانية الرؤية الخاصة بعناصر متعددة بسلوك واحد).
  4. انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تم تجاوز هذا السلوك اعتبارًا من الإصدار Dreamweaver CS5.

تطبيق السلوك Swap Image

يبادل السلوك Swap Image صورة واحدة بأخرى عن طريق تغيير السمة src الخاصة بالعلامة <img>. استخدم هذا السلوك لإنشاء تمريرات أزرار وتأثيرات صور أخرى (بما في ذلك مبادلة أكثر من صورة في وقت واحد). يؤدي إدراج صورة تمرير إلى إضافة سلوك Swap Image تلقائيًا صفحتك.

ملاحظة:

ونظرًا لتأثر السمة src فقط بهذا السلوك، يجب عليك مبادلة صورة لها نفس أبعاد (الارتفاع والعرض) الصورة الأصلية. وإلا ستنكمش صورة المبادلة أو تتمدد لملاءمة أبعاد الصورة الأصلية.

يوجد أيضًا السلوك Swap Image Restore والذي يستعيد آخر مجموعة من الصور المبادلَة إلى ملفاتها المصدر السابقة. تتم إضافة هذا السلوك تلقائيًا عند إرفاق السلوك Swap Image بكائن؛ وإذا تركت الخيار Restore محددًا أثناء إرفاق Swap Image، فلست بحاجة إلى تحديد السلوك Swap Image Restore يدويًا على الإطلاق.

  1. حدد Insert > Image أو انقر فوق الزر Image على اللوحة Insert لإدراج صورة.
  2. في مفتش Property، أدخل اسمًا للصورة في مربع النص الموجود أقصى اليسار.

    لا تعد تسمية الصور أمرًا إجباريًا؛ حيث تتم تسميتها تلقائيًا عند إرفاق السلوك بكائن. ومع ذلك، يسهل تمييز الصور في مربع الحوار Swap Image إذا قمت بتسمية كل الصور من قبل.

  3. كرر الخطوتين 1و2 لإدراج صور إضافية.
  4. حدد كائنًا لاستخدامه (الصورة التي ستبادلها)، واختر Swap Image من القائمة Add Behavior للوحة Behaviors.
  5. من القائمة Images، حدد الصورة التي تريد تغيير مصدرها.
  6. انقر فوق Browse لتحديد ملف الصورة الجديد، أو أدخل مسار الصورة الجديدة واسم ملفها في المربع Set Source To.
  7. كرر الخطوتين 5 و6 لأي صور إضافية تريد تغييرها. استخدم نفس إجراء Swap Image لكل الصور التي تريد تغييرها في الحال؛ وإلا لن يستعيد الإجراء Swap Image Restore المقابل جميع تلك الصور.
  8. حدد الخيار Preload Images لتخزين الصور الجديدة مؤقتًا عند تحميل الصفحة.

    وسيؤدي ذلك إلى منع حدوث حالات تأخير في التنزيل عندما يحين وقت ظهور الصور.

  9. انقر فوق OK وتحقق من صحة الحدث الافتراضي.

تطبيق السلوك Validate Form

يتحقق السلوك Validate Form من محتويات حقول نص معينة لضمان أن المستخدم قد قام بإدخال نوع البيانات الصحيح. قم بإرفاق هذا السلوك بحقول النصوص الفردية مع الحدث onBlur لتدقيق الحقول أثناء قيام المستخدم بملء النموذج، أو إرفاقه بالنموذج مع الحدث onSubmit لتقييم حقول نصوص عديدة على الفور عندما ينقر المستخدم فوق الزر Submit. يؤدي إرفاق هذا السلوك بنموذج إلى منع إرسال النماذج التي تحتوي على بيانات غير صالحة.

  1. حدد Insert > Form أو انقر فوق الزر Form على اللوحة Insert لإدراج نموذج.
  2. حدد Insert > Form > Text Field أو انقر فوق الزر Text Field في اللوحة Insert لإدراج حقل نص.

    كرر هذه الخطوة لإدراج حقول نص إضافية.

  3. اختر طريقة التدقيق:
    • لتدقيق الحقول الفردية أثناء قيام المستخدم بملء النموذج، حدد حقل نص، ثم حدد Window > Behaviors.

    • لتدقيق حقول متعددة عند قيام المستخدم بإرسال النموذج، انقر فوق العلامة <form> في محدد العلامات الموجود في الركن السفلي الأيسر من النافذة Document واختر Window > Behaviors.

  4. حدد Validate Form من القائمة Add Behavior.
  5. قم بأحد الإجراءات التالية:
    • إذا كنت تقوم بتدقيق حقول فردية، فحدد نفس الحقل الذي قمت بتحديده في النافذة Document من القائمة Fields.

    • إذا كنت تقوم بتدقيق حقول متعددة، فحدد حقل نص من القائمة Fields.

  6. حدد الخيار Required إذا كان الحقل يجب أن يحتوي على بعض البيانات.
  7. حدد أحد خيارات Accept التالية:

    Use Anything

    يتحقق أن الحقول المطلوبة تحتوي على البيانات؛ وقد تكون البيانات من أي نوع. 

    Use E‑mail address

    يتحقق أن الحقل يحتوي على الأيقونة @.

    Use Number

    يتحقق أن الحقل يحتوي على أرقام فقط.

    Use Number From

    يتحقق أن الحقل يحتوي على رقم في نطاق معين.

  8. إذا اخترت تدقيق حقول متعددة، فكرر الخطوتين 6 و7 لأي حقول إضافية تريد تدقيقها.
  9. انقر فوق OK.

    إذا كنت تقوم بتدقيق حقول متعددة عند قيام المستخدم بإرسال النموذج، فسيظهر الحدث onSubmit تلقائيًا في القائمة Events.

  10. إذا كنت تقوم بتدقيق حقول فردية، فتأكد من أن الحدث الافتراضي هو onBlur أو onChange. وإلا، فحدد واحدًا من تلك الأحداث.

    يشغِّل كلا الحدثين السلوك Validate Form عندما يتحرك المستخدم بعيدًا عن الحقل. ويتمثل الاختلاف في أن onBlur سواء كتب المستخدم في الحقل أم لا، ولا يحدث onChange إلا إذا قام المستخدم بتغيير محتويات الحقل. الحدث onBlur هو الحدث المفضل، إذا كان الحقل مطلوبًا.

شعار Adobe

تسجيل الدخول إلى حسابك