החל אפקטים של Spry ב-Dreamweaver

חפש
Adobe Dreamweaver מדריך למשתמש

בדף זה

חל על: Adobe Dreamweaver

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

הערה:

רכיבי Widget מסוג Spry מוחלפים ברכיבי Widget של jQuery ב-Dreamweaver CC ואילך. בעוד שניתן עדיין לשנות רכיבי Widget קיימים מסוג Spry בדף, לא תוכל להוסיף רכיבי Widget חדשים מסוג Spry‏.

סקירה של אפקטים של Spry

אפקטים של Spry הם שיפורים חזותיים שניתן להחיל כמעט על כל רכיב בדף HTML בעזרת JavaScript. לעתים קרובות משתמשים באפקטים כדי לסמן מידע, ליצור מעברים עם אנימציה, או לשנות חזותית רכיב בדף למשך זמן מסוים. ניתן להחיל אפקטים על רכיבי HTML ללא תגים מותאמים אישית נוספים.

הערה:

להחלת אפקט על רכיב, יש לבחור בו, או שעליו לכלול מזהה. לדוגמה, אם אתה מחיל סימון על תג div שלא נבחר כרגע, לתג חייב להיות מוקצה ערך מזהה חוקי. אם הרכיב אינו כולל מזהה,יהיה עליך להוסיפו לקוד 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_il.

החלת האפקט Appear/Fade

הערה:

ניתן להשתמש באפקט זה בכל אובייקט HTML פרט ל-applet‏, body,‏ iframe‎‏, object‏, tr‏, tbody או th.

  1. ‏(אופציונלי) בחר בתוכן או ברכיב שברצונך להחיל עליו את האפקט.
  2. בחלונית Behaviors ‏(Window >‏ Behaviors), לחץ על הלחצן פלוס (+) ובחר בתפריט Effects >‏ Appear/Fade.
  3. בחר במזהה הרכיב מתפריט רכיב היעד. אם כבר בחרת רכיב, בחר <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. בחר במזהה הרכיב מתפריט רכיב היעד. אם כבר בחרת רכיב, בחר <Current Selection>.
  4. בתיבה Effect Duration, הגדר את משך הזמן להפעלת האפקט באלפיות השנייה.
  5. בחר באפקט הרצוי: Blind Up או Blind Down.
  6. בתיבה Blind Up From/Blind Down From, הגדר את נקודת ההתחלה לגלילת התריס כאחוזים או כמספר קבוע. ערכים אלה מחושבים מהקצה העליון של הרכיב.
  7. בשדה Blind Up To/Blind Down To, הגדר את נקודת הסיום לגלילת התריס כאחוזים או כמספר קבוע. ערכים אלה מחושבים מהקצה העליון של הרכיב.
  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. בחר במזהה הרכיב מהתפריט הנפתח של רכיב היעד. אם כבר בחרת רכיב, בחר <Current Selection>.
  4. בשדה Effect Duration, הגדר את משך הזמן להפעלת האפקט באלפיות השנייה.
  5. בחר באפקט הרצוי: Grow או Shrink.
  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. בחר במזהה הרכיב מתפריט רכיב היעד. אם כבר בחרת רכיב, בחר <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. בחר במזהה הרכיב מתפריט רכיב היעד. אם כבר בחרת רכיב, בחר <Current Selection>.

החלת האפקט Slide

כדי שהאפקט Slide יפעל כהלכה, רכיב היעד חייב להיות מוקף בתג מכל בעל מזהה ייחודי. תג המכל המקיף את רכיב היעד חייב להיות תג blockquote, dd, form, div, או center.

תג רכיב היעד חייב להיות אחד מהתגים הבאים: blockquote‏, dd‏, div‏, form‏, center‏, table‏, span‏, input‏, textarea‏, select אוimage.

  1. ‏‏‏(אופציונלי) בחר בתג המכל של התוכן שברצונך להחיל עליו את האפקט.
  2. בחלונית Behaviors ‏(Window >‏ Behaviors), לחץ על הלחצן פלוס (+) ובחר בתפריט Effects >‏ Slide.
  3. בחר במזהה של תג המכל מתפריט רכיב היעד. אם כבר בחרת מכל, בחר <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. בחר במזהה הרכיב מתפריט רכיב היעד. אם כבר בחרת רכיב, בחר <Current Selection>.

הוספת אפקט נוסף

ניתן לקשר התנהגויות אפקט מרובות לאותו רכיב כדי לקבל תוצאות מעניינות.

  1. ‏(אופציונלי) בחר בתוכן או ברכיב שברצונך להחיל עליו את האפקט.
  2. בחלונית Behaviors ‏(Window >‏ Behaviors), לחץ על הלחצן פלוס (+) ובחר אפקט בתפריט Effects.
  3. בחר במזהה הרכיב מתפריט רכיב היעד. אם כבר בחרת רכיב, בחר <Current Selection>.

מחיקת אפקט

ניתן להסיר התנהגויות של אפקט אחד או יותר מרכיב.

  1. ‏(אופציונלי) בחר בתוכן או ברכיב שברצונך להחיל עליו את האפקט.
  2. בחלונית Behaviors ‏(Window >‏ Behaviors), לחץ על האפקט שברצונך למחוק מרשימת ההתנהגויות.
  3. בצע אחת מהפעולות הבאות:

    • לחץ על הלחצן Remove Event בשורת הכותרת של תת-החלונית (-).

    • לחץ לחיצה ימנית (Windows) או הקש Control ‏(Macintosh) תוך כדי לחיצה על ההתנהגות, ובחר Delete Behavior.