تطبيق تأثيرات Spry في Dreamweaver

بحث
Adobe Dreamweaver دليل المستخدم

في هذه الصفحة

يسري على: Adobe Dreamweaver

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

ملاحظة:

تم استبدال عناصر واجهة Spry بعناصر واجهة jQuery في Dreamweaver CC والإصدارات اللاحقة. يمكنك تعديل عناصر واجهة Spry الموجودة في الصفحة، إلا أنه لا يمكنك إضافة عناصر واجهة Spry جديدة.

نظرة عامة على تأثيرات Spry

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

ملاحظة:

لتطبيق تأثير على عنصر، يجب أن يكون محددًا حاليًا أو أن يكون له ID. على سبيل المثال، إذا كنت تقوم بتطبيق تمييز على علامة div غير محددة حاليًا، فيجب أن يكون div له قيمة ID صالحة. إذا كان العنصر ليس له ID صالح، فستحتاج إلى إضافة ID إلى تعليمة HTML البرمجية.

يمكن أن تغيِّر التأثيرات عتامة العنصر، ونطاقه، ووضعه، وخصائص أنماطه، مثل لون الخلفية. يمكنك إدراج تأثيرات مرئية عن طريق دمج خاصيتين أو أكثر.

ونظرًا لكون هذه التأثيرات مستندة إلى Spry، فإنه عندما ينقر المستخدم فوق عنصر له تأثير، فسيتم تحديث ذلك العنصر وحده ديناميكيًا، دون تحديث صفحة HTML بالكامل.

يشتمل Spry على هذه التأثيرات:

Appear/Fade

جعل العنصر يظهر أو يختفي بعيدًا.

Highlight

تغيير لون خلفية عنصر.

Blind

محاكاة نافذة حجب تتحرك لأعلى ولأسفل لكشف العنصر أو إخفائه.

Slide

تحريك العنصر لأعلى ولأسفل.

Grow/Shrink

زيادة حجم العنصر أو تقليله.

Shake

محاكاة اهتزاز العنصر من اليسار إلى اليمين.

Squish

جعل العنصر يختفي إلى الركن العلوي الأيسر من الصفحة.

ملاحظة:

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

للاطلاع على نظرة عامة شاملة على تأثيرات Spry المتوفرة في إطار عمل Spry، تفضل بزيارة www.adobe.com/go/learn_dw_spryeffects_ae.

تطبيق تأثير Appear/Fade

ملاحظة:

يمكنك استخدام هذا التأثير مع أي عناصر HTML ما عدا applet، أو body، أو iframe، أو object، أو tr، أو tbody، أو th.

  1. (اختياري) حدد عنصر التخطيط أو المحتوى الذي تريد تطبيق التأثير عليه.
  2. من اللوحة Behaviors ‏(Window > Behaviors)، انقر فوق زر علامة الجمع (+) وحدد Effects > Appear/Fade من القائمة.
  3. حدد ID الخاص بالعنصر من قائمة العناصر الهدف. إذا كنت قد حددت عنصرًا بالفعل، فاختر <Current Selection>.
  4. في المربع Effect Duration، حدد الوقت الذي يستغرقه التأثير للحدوث، بالمللي ثانية.
  5. حدد التأثير الذي تريد تطبيقه: Fade أو Appear.
  6. في المربع Fade From، حدد النسبة المئوية للعتامة التي تريدها للتأثير عند ظهوره.
  7. في المربع Fade To، حدد النسبة المئوية للعتامة التي تريده أن يختفي بها.
  8. حدد Toggle Effect، إذا كنت تريد أن يكون التأثير قابلاً للعكس، بحيث يتحول من الاختفاء إلى الظهور وهكذا بنقرات متتابعة.

تطبيق تأثير Blind

ملاحظة:

يمكنك استخدام هذا التأثير مع عناصر HTML التالية فقط: address، أو dd، أو div، أو dl، أو dt، أو form، أو h1، أو h2، أو h3، أو h4، أو h5، أو h6، أو p، أو ol، أو ul، أو li، أو applet، أو center، أو dir، أو menu، أو pre.

  1. (اختياري) حدد عنصر التخطيط أو المحتوى الذي تريد تطبيق التأثير عليه.
  2. من اللوحة Behaviors ‏(Window > Behaviors)، انقر فوق زر علامة الجمع (+) وحدد Effects > Blind من القائمة.
  3. حدد ID الخاص بالعنصر من قائمة العناصر الهدف. إذا كنت قد حددت عنصرًا بالفعل، فاختر <Current Selection>.
  4. في المربع Effect Duration، حدد الوقت الذي يستغرقه التأثير للحدوث، بالمللي ثانية.
  5. حدد التأثير الذي تريد تطبيقه: Blind Up أو Blind Down.
  6. في المربع Blind Up From/Blind Down From، حدد نقطة بدء تمرير الحجب كنسبة مئوية أو كرقم بكسل. يتم احتساب هذه القيم من أعلى العنصر.
  7. في الحقل Blind Up From/Blind Down From، حدد نقطة نهاية تمرير الحجب كنسبة مئوية أو كرقم بكسل. يتم احتساب هذه القيم من أعلى العنصر.
  8. حدد Toggle Effect، إذا كنت تريد أن يكون التأثير قابلاً للعكس، بحيث يتم التمرير لأعلى ولأسفل بنقرات متتابعة.

إضافة تأثير Grow/Shrink

ملاحظة:

‏‫يمكنك استخدام هذا التأثير مع عناصر HTML التالية: address أو dd، أو div، أو dl، أو dt، أو form، أو p، أو ol، أو ul، أو applet، أو center، أو dir، أو menu، أو pre.

  1. (اختياري) حدد عنصر التخطيط أو المحتوى الذي تريد تطبيق التأثير عليه.
  2. من اللوحة Behaviors ‏(Window > Behaviors)، انقر فوق زر علامة الجمع (+) وحدد Effects > Grow/Shrink من القائمة المنبثقة.
  3. حدد ID الخاص بالعنصر من قائمة العناصر الهدف المنبثقة. إذا كنت قد حددت عنصرًا بالفعل، فاختر <Current Selection>.
  4. في الحقل Effect Duration، حدد الوقت الذي يستغرقه التأثير للحدوث، بالمللي ثانية.
  5. حدد التأثير الذي تريد تطبيقه: Shrink أو Grow.
  6. في المربع Grow/Shrink From، حدد حجم العنصر عند بدء التأثير. وهو عبارة عن نسبة مئوية للحجم أو قيمة بالبكسل.
  7. في المربع Grow/Shrink To، حدد حجم العنصر عند نهاية التأثير. وهو عبارة عن نسبة مئوية للحجم أو قيمة بالبكسل.
  8. إذا اخترت وحدات البكسل لمربعي Grow/Shrink From أو To، يصبح حقل العرض/الارتفاع مرئيًا. وحسب الخيار الذي تحدده، يتم تصغير العنصر أو تكبيره بالتناسب.
  9. حدد ما إذا كنت تريد تكبير العنصر أو تصغيره إلى الركن العلوي الأيسر من الصفحة أو إلى منتصف الصفحة.
  10. حدد Toggle Effect، إذا كنت تريد أن يكون التأثير قابلاً للعكس، بحيث يتم التكبير والتصغير بنقرات متتابعة.

تطبيق تأثير Highlight

ملاحظة:

يمكنك استخدام هذا التأثير مع أي عناصر HTML ما عدا applet، أو body، أو frame، أو frameset، أو noframes.

  1. (اختياري) حدد عنصر التخطيط أو المحتوى الذي تريد تطبيق التأثير عليه.
  2. من اللوحة Behaviors ‏(Window > Behaviors)، انقر فوق زر علامة الجمع (+) وحدد Effects > Highlight من القائمة.
  3. حدد ID الخاص بالعنصر من قائمة العناصر الهدف. إذا كنت قد حددت عنصرًا بالفعل، فاختر <Current Selection>.
  4. في المربع Effect Duration، حدد الوقت الذي تريد أن يستمر فيه التأثير، بالمللي ثانية.
  5. حدد اللون الذي تريد التمييز من خلاله للبدء به.
  6. حدد اللون الذي تريد التمييز من خلاله للإنهاء به. يدوم هذا اللون طيلة الفترة التي تحددها في Effect Duration.
  7. حدد لون العنصر بعد انتهاء التمييز.
  8. حدد Toggle Effect، إذا كنت تريد أن يكون التأثير قابلاً للعكس، بحيث يتم الانتقال بين مراحل ألوان التمييز بنقرات متتابعة.

تطبيق تأثير Shake

ملاحظة:

‏‫‏‫يمكنك استخدام هذا التأثير مع عناصر HTML التالية: address، أو blockquote، أو dd، أو div، أو dl، أو dt، أو fieldset، أو form، أو h1، أو h2، أو h3، أو h4، أو h5، أو h6، أو iframe، أو img، أو object، أو p، أو ol، أو ul، أو li، أو applet، أو dir، أو hr، أو menu، أو pre، أو table.

  1. (اختياري) حدد عنصر التخطيط أو المحتوى الذي تريد تطبيق التأثير عليه.
  2. من اللوحة Behaviors ‏(Window > Behaviors)، انقر فوق زر علامة الجمع (+) وحدد Effects > Shake من القائمة.
  3. حدد ID الخاص بالعنصر من قائمة العناصر الهدف. إذا كنت قد حددت عنصرًا بالفعل، فاختر <Current Selection>.

تطبيق تأثير Slide

ليعمل التأثير Slide بشكل صحيح، يجب أن يكون العنصر الهدف ملتفًا في علامة الحاوية التي لها ID فريد. يجب أن تكون علامة الحاوية التي تلف بها العنصر الهدف علامة blockquote، أو dd، أو form، أو div، أو center.

يجب أن تكون علامة العنصر الهدف واحدة مما يلي: blockquote، أو dd، أو div، أو form، أو center، أو table، أو span، أو input، أو textarea، أو select، أو image.

  1. (اختياري) حدد علامة الحاوية الخاصة بالمحتوى الذي تريد تطبيق التأثير عليه.
  2. من اللوحة Behaviors ‏(Window > Behaviors)، انقر فوق زر علامة الجمع (+) وحدد Effects > Slide من القائمة.
  3. حدد ID الخاص بعلامة الحاوية من قائمة العناصر الهدف المنبثقة. إذا كنت قد حددت الحاوية بالفعل، فاختر <Current Selection>.
  4. في الحقل Effect Duration، حدد الوقت الذي يستغرقه التأثير للحدوث، بالمللي ثانية.
  5. حدد التأثير الذي تريد تطبيقه: Slide Up أو Slide Down.
  6. في المربع Slide Up From، حدد نقطة بدء التمرير كنسبة مئوية أو كرقم بكسل.
  7. في المربع Slide Up To، حدد نقطة نهاية التمرير كنسبة مئوية أو كرقم بكسل موجب.
  8. حدد Toggle Effect، إذا كنت تريد أن يكون التأثير قابلاً للعكس، بحيث يتم التمرير لأعلى ولأسفل بنقرات متتابعة.

تطبيق تأثير Squish

ملاحظة:

‏‫يمكنك فقط استخدام هذا التأثير مع عناصر HTML التالية: address، أو dd، أو div، أو dl، أو dt، أو form، أو img، أو p، أو ol، أو ul، أو applet، أو center، أو dir، أو menu، أو pre.

  1. (اختياري) حدد عنصر التخطيط أو المحتوى الذي تريد تطبيق التأثير عليه.
  2. من اللوحة Behaviors ‏(Window > Behaviors)، انقر فوق زر علامة الجمع (+) وحدد Effects > Squish من القائمة.
  3. حدد ID الخاص بالعنصر من قائمة العناصر الهدف. إذا كنت قد حددت عنصرًا بالفعل، فاختر <Current Selection>.

إضافة تأثير إضافي

يمكنك ربط سلوكيات تأثير متعددة بنفس العنصر للحصول على نتائج مثيرة للاهتمام.

  1. (اختياري) حدد عنصر التخطيط أو المحتوى الذي تريد تطبيق التأثير عليه.
  2. من اللوحة Behaviors ‏(Window > Behaviors)، انقر فوق زر علامة الجمع (+) وحدد تأثيرًا من القائمة Effects.
  3. حدد ID الخاص بالعنصر من قائمة العناصر الهدف. إذا كنت قد حددت عنصرًا بالفعل، فاختر <Current Selection>.

حذف تأثير

يمكنك حذف سلوك واحد أو أكثر من سلوكيات التأثير من عنصر.

  1. (اختياري) حدد عنصر التخطيط أو المحتوى الذي تريد تطبيق التأثير عليه.
  2. من اللوحة Behaviors ‏(Window > Behaviors)، انقر فوق التأثير الذي تريد حذفه من قائمة السلوكيات.
  3. قم بأحد الإجراءات التالية:

    • انقر فوق الزر Remove Event في شريط عناوين اللوحة الفرعية (-).

    • انقر بزر الماوس الأيمن (في نظام التشغيل Windows) أو انقر مع الضغط على زر التحكم Control (في نظام التشغيل Macintosh) فوق السلوك، ثم حدد Delete Behavior.