- מדריך למשתמש של Dreamweaver
- מבוא
- Dreamweaver ו-Creative Cloud
- התצוגות וסביבות העבודה של Dreamweaver
- הגדרת אתרי אינטרנט
- על אתרי Dreamweaver
- הגדרת גרסה מקומית של האתר שלך
- התחברות לשרת פרסום
- הגדרת שרת בדיקות
- ייבוא וייצוא של הגדרות אתר Dreamweaver
- העתקת אתרי אינטרנט קיימים משרת מרוחק לבסיס האתר המקומי שלך
- תכונות נגישות ב-Dreamweaver
- הגדרות מתקדמות
- הגדרת העדפות להעברת קבצים
- ציון הגדרות שרת פרוקסי ב-Dreamweaver
- סנכרון הגדרות של Dreamweaver עם Creative Cloud
- שימוש ב-Git ב-Dreamweaver
- ניהול קבצים
- פריסה ועיצוב
- CSS
- הכרת CSS (Cascading Style Sheets)
- פריסת עמודים בעזרת CSS Designer
- שימוש בכלים לעיבוד מקדים של CSS ב-Dreamweaver
- כיצד להגדיר העדפות סגנון CSS ב-Dreamweaver
- העברת כללי CSS ב-Dreamweaver
- המרת CSS בתוך שורה לכלל CSS ב-Dreamweaver
- עבודה עם תגי div
- החלת מעברי צבע על רקע
- יצירה ועריכה של אפקטי מעבר של CSS3 ב-Dreamweaver
- עיצוב קוד
- תוכן דף והנכסים הקיימים בו
- הגדרת מאפייני דף
- הגדרת מאפייני כותרת של CSS ומאפייני קישור של CSS
- עבודה עם טקסט
- מציאה והחלפה של טקסט, תגים ותכונות
- החלונית DOM
- עריכה ב-Live View
- קידוד מסמכים ב-Dreamweaver
- בחירה והצגה של רכיבים בחלון Document
- הגדרת מאפייני טקסט ב-Property inspector
- בדיקת איות בדף אינטרנט
- שימוש בכללים אופקיים ב-Dreamweaver
- הוספה ושינוי של שילובי גופנים ב-Dreamweaver
- עבודה עם נכסים
- הכנסה ועדכון של תאריכים ב-Dreamweaver
- יצירה וניהול של נכסים מועדפים ב-Dreamweaver
- הכנסה ועריכה של תמונות ב-Dreamweaver
- הוספת אובייקטי מדיה
- הוספת סרטוני וידאו ב-Dreamweaver
- הכנסת וידאו של HTML5
- הכנסת קובצי SWF
- הוספת אפקטי שמע
- הכנסת שמע של HTML5 ב-Dreamweaver
- עבודה עם פריטי ספרייה
- שימוש בטקסט ערבי ועברי ב-Dreamweaver
- קישור וניווט
- רכיבים גרפיים ואפקטים של jQuery
- כתיבת קוד של אתרי אינטרנט
- כתיבת קוד ב-Dreamweaver
- סביבה של כתיבת קוד ב-Dreamweaver
- הגדרת העדפות לכתיבת קוד
- התאמה אישית של העדפות צבעי קוד
- כתיבה ועריכה של קוד
- אפשרויות של רמזי קוד והשלמת קוד
- צמצום והרחבה של קוד
- שימוש חוזר בקוד עם גזירי קוד
- איתור שגיאות בקוד (Linting)
- מטוב הקוד
- עריכת קוד בתצוגת Design
- עבודה עם תוכן כותרת של דפים
- הכנסת קבצים נכללים בצד השרת ב-Dreamweaver
- שימוש בספריות תגים ב-Dreamweaver
- ייבוא תגים מותאמים אישית אל Dreamweaver
- שימוש בהתנהגויות של JavaScript (הוראות כלליות)
- החלת התנהגויות מובנות של JavaScript
- על XML ו-XSLT
- ביצוע המרות XSL בצד השרת ב-Dreamweaver
- ביצוע המרות XSL בצד הלקוח ב-Dreamweaver
- הוספת ישויות תו עבור XSLT ב-Dreamweaver
- עיצוב קוד
- תהליכי עבודה המותאמים למגוון מוצרים
- תבניות
- על תבניות Dreamweaver
- זיהוי תבניות ומסמכים המבוססים על תבניות
- יצירת תבנית Dreamweaver
- יצירת אזורים ניתנים לעריכה בתבניות
- יצירת אזורים חוזרים וטבלאות חוזרות ב-Dreamweaver
- שימוש באזורים אופציונליים בתבניות
- הגדרת תכונות תג ניתנות לעריכה ב-Dreamweaver
- כיצד ליצור תבניות מקוננות ב-Dreamweaver
- עריכה, עדכון ומחיקה של תבניות
- ייצוא וייבוא תוכן XML ב-Dreamweaver
- החלה של תבנית על מסמך קיים או הסרתה ממנו
- עריכת תוכן בתבניות Dreamweaver
- כללי תחביר של תגי תבנית ב-Dreamweaver
- הגדרת העדפות סימון לאזורי תבנית
- היתרונות של שימוש בתבניות ב-Dreamweaver
- מכשירים ניידים ומסכים מרובים
- אתרי אינטרנט, דפים וטופסי אינטרנט דינמיים
- הבנת יישומי אינטרנט
- הגדרת המחשב לפיתוח יישומים
- פתרון בעיות בחיבורים למסדי נתונים
- הסרת סקריפטים של חיבור ב-Dreamweaver
- עיצוב דפים דינמיים
- סקירת מקורות של תוכן דינמי
- הגדרת מקורות של תוכן דינמי
- הוספת תוכן דינמי לדפים
- שינוי תוכן דינמי ב-Dreamweaver
- הצגת רשומות של מסד נתונים
- אספקת נתונים בזמן אמת ב-Dreamweaver ופתרון בעיות בהם
- הוספת התנהגויות שרת מותאמות אישית ב-Dreamweaver
- בניית טפסים באמצעות Dreamweaver
- שימוש בטפסים לאיסוף מידע ממשתמשים
- יצירה והפעלה של טופסי ColdFusion ב-Dreamweaver
- יצירת טופסי אינטרנט
- תמיכה משופרת ב-HTML5 עבור רכיבי טופס
- פיתוח טופס באמצעות Dreamweaver
- בנייה חזותית של יישומים
- בניית דפי אב ופרטים ב-Dreamweaver
- בניית דפי חיפוש ותוצאות
- בניית דף להכנסת רשומות
- בניית דף לעדכון רשומות ב-Dreamweaver
- בניית דפים למחיקת רשומות ב-Dreamweaver
- שימוש בפקודות ASP כדי לשנות מסד נתונים ב-Dreamweaver
- בניית דף רישום
- בניית דף כניסה
- בניית דף המאפשר גישה למשתמשים מורשים בלבד
- אבטחת תיקיות ב-ColdFusion באמצעות Dreamweaver
- שימוש ברכיבי ColdFusion ב-Dreamweaver
- בדיקה, תצוגה מקדימה ופרסום של אתרי אינטרנט
- פתרון בעיות
השתמש בנושא זה כדי להבין כיצד להחיל התנהגויות מובנות של JavaScript ב-Adobe Dreamweaver.
שימוש בהתנהגויות מובנות
ההתנהגויות שכלולות ב-Dreamweaver מיועדות לפעול בדפדפנים מודרניים. בדפדפנים ישנים יותר, ההתנהגויות נכשלות באופן בלתי מורגש.
הפעולות של Dreamweaver נכתבו באופן המאפשר להן לפעול בדפדפנים רבים ככל האפשר. הסרה ידנית של קוד מפעולת Dreamweaver או החלפתו בקוד משלך עלולה לגרום לאובדן התאימות לדפדפנים שונים.
אף על פי שפעולות של Dreamweaver נכתבו במטרה להתאים לדפדפנים רבים ככל האפשר, דפדפנים מסוימים אינם תומכים כלל ב-JavaScript וגולשים רבים מבטלים את הפעלת JavaScript בדפדפנים שלהם. לתוצאות הטובות ביותר בפלטפורמות רבות, ספק ממשקים חלופיים המצורפים לתגי <noscript> כדי לאפשר שימוש באתר האינטרנט ללא JavaScript.
החלת ההתנהגות Call JavaScript
ההתנהגות Call JavaScript מפעילה פונקציה מותאמת אישית או שורה של קוד JavaScript בשעת התרחשות אירוע. (תוכל לכתוב את הסקריפט בעצמך או להשתמש בקוד שמסופק במגוון ספריות JavaScript הזמינות באינטרנט).
-
בחר אובייקט ובחר בפקודה Call JavaScript מתפריט Add Behavior בחלונית Behaviors.
-
הקלד את קוד JavaScript המדויק שברצונך להפעיל או הקלד את שם הפונקציה.
לדוגמה, ליצירת לחצן Back, תוכל להקליד if (history.length > 0){history.back()}. אם כמסת את הקוד בפונקציה, הקלד את שם הפונקציה בלבד (לדוגמה, hGoBack()).
-
לחץ על OK וודא שאירוע ברירת המחדל נכון.
החלת ההתנהגות Change Property
השתמש בהתנהגות Change Property לשינוי הערך של אחד המאפיינים של אובייקט (לדוגמה, צבע הרקע של div או פעולה של טופס).
השתמש בהתנהגות זו רק אם אתה מיומן בכתיבת HTML ו-JavaScript.
-
בחר אובייקט ובחר בפקודה Change Property מתפריט Add Behavior בחלונית Behaviors.
-
בתפריט Type Of Element, בחר סוג רכיב להצגת כל הרכיבים המזוהים מסוג זה.
-
בחר רכיב מתפריט Element ID.
-
בחר מאפיין מתפריט Property, או הזן את שם המאפיין בתיבה.
-
הזן את הערך החדש למאפיין החדש בשדה New Value.
-
לחץ על OK וודא שאירוע ברירת המחדל נכון.
החלת ההתנהגות Check Plugin
השתמש בהתנהגות Check Plugin כדי לשלוח מבקרים לדף מסוים אם תוסף מסוים מותקן במחשב, ולשלוח אותם לדף אחר אם התוסף אינו מותקן במחשב. לדוגמה, ייתכן שתרצה שמבקרים באתר יעברו לדף אחד אם Shockwave מותקן במחשב שלהם, ולדף אחר אם הוא אינו מותקן.
לא ניתן לזהות תוספים מסוימים ב-Internet Explorer באמצעות JavaScript. עם זאת, בחירה באפשרויות Flash או Director תוסיף קוד VBScript מתאים לדף שיזהה תוספים אלה בדפדפן Internet Explorer המופעל ב-Windows. לא ניתן לזהות תוספים בדפדפן Internet Explorer המופעל ב-Mac OS.
-
בחר אובייקט ובחר בפקודה Check Plugin מתפריט Add Behavior בחלונית Behaviors.
-
בחר תוסף מתפריט Plugin, או לחץ על Enter והזן את שם התוסף המדויק בתיבה הסמוכה.
יש להשתמש בשם התוסף בדיוק כפי שהוא מצוין בגופן מודגש בדף About Plug-ins בדפדפן Netscape Navigator. (ב-Windows, בחר בפקודה Navigator’s Help > About Plug-ins. ב-Mac OS, בחר בפקודה About Plug-ins מתפריט Apple).
-
בתיבה If Found, Go To URL, ציין כתובת URL למבקרים שהתוסף מותקן אצלם.
בשעת ציון כתובת URL מרוחקת, יש לכלול בכתובת את הקידומת http://. אם תשאיר את השדה ריק, המבקרים יישארו באותו דף.
-
בתיבה Otherwise, Go To URL, ציין כתובת URL חלופית למבקרים שהתוסף אינו מותקן אצלם. אם תשאיר את השדה ריק, המבקרים יישארו באותו דף.
-
ציין כיצד יש לפעול אם זיהוי התוסף אינו אפשרי. כברירת מחדל, כשהזיהוי אינו אפשרי, המשתמש נשלח לכתובת URL שרשומה בתיבה Otherwise. כדי לשלוח את המבקרים לכתובת (If Found) URL הראשונה, בחר באפשרות Always Go To First URL If Detection Is Not Possible. פירושה של בחירה באפשרות זו הוא "הנח שהתוסף מותקן, אלא אם כן הדפדפן מציין במפורש שהתוסף חסר". בדרך כלל, בחר באפשרות זו אם תוכן התוסף חיוני לדף. אחרת, אל תסמן את האפשרות.הערה:
אפשרות זו חלה על דפדפן Internet Explorer בלבד. דפדפן Netscape Navigator מסוגל לזהות תוספים תמיד.
-
לחץ על OK וודא שאירוע ברירת המחדל נכון.
החלת ההתנהגות Drag AP Element
ההתנהגות Drag AP Element מאפשרת למבקר באתר לגרור רכיב בעל מיקום מוחלט (AP). השתמש בהתנהגות זו ליצירת פאזלים, בקרי מחוונים ורכיבי ממשק אחרים הניתנים להזזה.
ניתן להגדיר את כיווני הגרירה האפשריים של רכיב AP (גרירה אנכית, אופקית או בכל כיוון), יעד שעל המשתמש לגרור אליו רכיב AP, אם רכיב AP יוצמד ליעד כשהוא נמצא במרחק של מספר פיקסלים מסוים מהיעד, כיצד יש לטפל ברכיב AP שמגיע ליעד ועוד.
משום שיש לקרוא להתנהגות Drag AP Element לפני שהמשתמש יוכל לגרור רכיב AP, יש לשייך התנהגות Drag AP Element לאובייקט body (באמצעות האירוע onLoad).
-
בחר בפקודה Insert > Layout Objects > AP Div או לחץ על הלחצן Draw AP Div בחלונית Insert וצייר AP Div בתצוגת Design בחלון המסמך.
-
לחץ על <body> בבורר התגים בפינה השמאלית התחתונה בחלון המסמך.
-
בחר באפשרות Drag AP Element מתפריט Add Behavior בחלונית Behaviors.
אם ההתנהגות Drag AP Element אינה זמינה, כנראה שבחרת ברכיב AP.
-
בתפריט הנפתח AP Element, בחר ברכיב AP.
-
בחר באפשרות Constrained או Unconstrained בתפריט הנפתח Movement.
תנועה בלתי מוגבלת מתאימה לפאזלים ולמשחקי גרירה ושחרור אחרים. לבקרי מחוונים ולרכיבי רקע נעים כגון מגירות קבצים, וילונות ותריסים, בחר בתנועה מוגבלת.
-
לתנועה מוגבלת, הזן ערכים (בפיקסלים) בתיבות Up, Down, Left ו-Right.
הערכים יחסיים למיקום ההתחלתי של רכיב AP. להגבלת התנועה לאזור מלבני, הזן ערכים חיוביים בכל ארבע התיבות. כדי לאפשר תנועה אנכית בלבד, הזן ערכים חיוביים בתיבות Up ו-Down ואת הערך 0 בתיבות Left ו-Right. כדי לאפשר תנועה אופקית בלבד, הזן ערכים חיוביים בתיבות Left ו-Right ואת הערך 0 בתיבות Up ו-Down
-
הזן ערכים (בפיקסלים) ליעד השחרור בתיבות Left ו-Top.
יעד השחרור הוא הנקודה שברצונך שהמבקר באתר יגרור אליה את רכיב AP. רכיב AP מגיע ליעד השחרור כשהקואורדינטות העליונה והשמאלית שלו תואמות לערכים שציינת בתיבות Left ו-Top. הערכים יחסיים לפינה השמאלית העליונה של חלון הדפדפן. למילוי אוטומטי של תיבות הטקסט במיקום הנוכחי של רכיב AP, לחץ על Get Current Position.
-
הזן ערך (בפיסלים) בתיבה Snap If Within כדי לקבוע את מידת הקירבה הדרושה ליעד השחרור כדי שרכיב AP ייצמד ליעד.
ערכים גדולים מסייעים למשתמש למצוא את יעד השחרור.
-
לפאזלים פשוטים ולטיפול ברכיבי רקע, תוכל לעצור בצעד זה. להגדרת נקודת הגרירה של רכיב AP, למעקב אחר התנועה של רכיב AP במהלך גרירתו ולהניע פעולה בשעת שחרור רכיב AP, לחץ על הכרטיסייה Advanced.
-
כדי לציין שמשתמשים חייבים ללחוץ באזור מסוים של רכיב AP כדי לגרור את רכיב AP, בחר Area within element מתפריט Drag Handle. לאחר מכן, הזן את הקואורדינטות השמאלית והעליונה וכן את הרוחב והגובה של נקודת הגרירה.
אפשרות זו שימושית כשהתמונה שברכיב AP כוללת רכיב מתאים לגרירה, כגון שורת כותרת או ידית מגירה. אם ברצונך שהמשתמש יוכל ללחוץ בכל מקום ברכיב AP כדי לגרור אותו, אל תגדיר אפשרות זו.
-
בחר באפשרויות While Dragging שברצונך להשתמש בהן:
בחר באפשרות Bring Element To Front אם ברצונך שרכיב AP יעבור לחזית סדר הערימה בשעת גרירתו. אם בחרת באפשרות זו, היעזר בתפריט הנפתח כדי לקבוע אם להשאיר את רכיב AP בחזית או להחזירו למקומו המקורי בסדר הערימה.
הזן קוד JavaScript או שם פונקציה (לדוגמה, monitorAPelement()) בתיבה Call JavaScript כדי להפעיל את הקוד או את הפונקציה שוב ושוב במהלך גרירת רכיב AP. לדוגמה, ניתן לכתוב פונקציה שעוקבת אחר הקואורדינטות של רכיב AP ומציגה רמזים כגון "מתחמם" או "אינך קרוב כלל ליעד השחרור" בתיבת טקסט.
-
הזן קוד JavaScript או שם פונקציה (לדוגמה, evaluateAPelementPos()) בתיבה השניה של Call JavaScript כדי להפעיל את הקוד או את הפונקציה בשעת שחרור רכיב AP. בחר באפשרות Only If Snapped אם ברצונך להפעיל את קוד JavaScript רק אם רכיב AP הגיע ליעד השחרור.
-
לחץ על 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 פותחת דף חדש בחלון הנוכחי או במסגרת שצוינה. התנהגות זו שימושית לשינוי תוכן של שתי מסגרות או יותר בלחיצה אחת.
-
בחר אובייקט ובחר בפקודה Go To URL מתפריט Add Behavior בחלונית Behaviors.
-
בחר יעד לכתובת URL ברשימה Open In.
הרשימה Open In רושמת אוטומטית את שמות כל המסגרות בערכת המסגרות הנוכחית וכן בחלון הראשי. אם אין מסגרות, האפשרות היחידה היא החלון הראשי.
הערה:אם אחת מהמסגרות נקראת top, blank, self או parent, התנהגות זו עלולה לגרום לתוצאות בלתי צפויות. דפדפנים עלולים להתייחס לשמות אלה כאל שמות יעד שמורים.
-
לחץ על Browse לבחירת המסמך שברצונך לפתוח, או הזן את הנתיב ושם הקובץ של המסמך בתיבה URL.
-
לפתיחת מסמכים נוספים במסגרות אחרות, חזור על צעדים 2 ו-3.
-
לחץ על OK וודא שאירוע ברירת המחדל נכון.
החלת ההתנהגות Jump Menu
בעת יצירת תפריט קפיצה באמצעות הפקודה Insert > Form > Jump Menu, Dreamweaver יוצר אובייקט תפריט ומקשר אליו את ההתנהגות Jump Menu (או Jump Menu Go). בדרך כלל, אין צורך לקשר את ההתנהגות Jump Menu לאובייקט באופן ידני.
ניתן לערוך תפריט קפיצה קיים באחת משתי הדרכים הבאות:
לחיצה כפולה על התנהגות Jump Menu קיימת בחלונית Behaviors מאפשרת לערוך ולסדר מחדש פריטי תפריט, לשנות את הקבצים שברצונך לקפוץ אליהם ולשנות את החלון שקבצים אלה נפתחים בו.
בחירה בתפריט ושימוש בלחצן List Values שב-Property inspector מאפשרים לערוך את הפריטים בתפריט בדיוק כמו שעורכים פריטים בכל תפריט אחר.
-
אם המסמך אינו כולל אובייקט של תפריט קפיצה, צור אובייקט מתאים.
-
בחר באובייקט ובחר בפקודה Jump Menu מתפריט Add Behavior בחלונית Behaviors.
-
בצע את השינויים הרצויים בתיבת הדו-שיח Jump Menu ולחץ על OK.
החלת ההתנהגות Jump Menu Go
ההתנהגות Jump Menu Go קשורה קשר הדוק להתנהגות Jump Menu. ההתנהגות Jump Menu Go מאפשרת לשייך לחצן Go לתפריט קפיצה. (לפני השימוש בהתנהגות זו, המסמך חייב לכלול תפריט קפיצה). לחיצה על הלחצן Go פותחת את הקישור שנבחר בתפריט הקפיצה. בדרך כלל, תפריט קפיצה אינו זקוק ללחצן Go. בחירת פריט מתפריט קפיצה גורמת בדרך כלל לטעינת כתובת URL ללא צורך בפעולה נוספת של המשתמש . עם זאת, אם המבקר באתר בוחר בפריט שכבר נבחר בתפריט הקפיצה, הקפיצה אינה מתבצעת. בדרך כלל אין לכך חשיבות, אך אם תפריט הקפיצה מופיע במסגרת ופריטי תפריט הקפיצה מקשרים לדפים במסגרות אחרות, לחצן Go עשוי להיות שימושי כדי לאפשר למבקרים לבחור מחדש פריט שכבר נבחר בתפריט הקפיצה.
בשעת שימוש בלחצן Go בתפריט קפיצה, לחצן Go הופך למנגנון היחיד ש"מקפיץ" את המשתמש לכתובת URL שמשויכת לבחירה בתפריט. במקרה כזה, בחירת פריט בתפריט הקפיצה אינה מנתבת מחדש את המשתמש לדף אחר או למסגרת אחרת באופן אוטומטי.
-
בחר באובייקט שברצונך להשתמש בו כלחצן Go (בדרך כלל, לחצן תמונה) ובחר בפקודה Jump Menu Go מתפריט Add Behavior בחלונית Behaviors.
-
בתפריט Choose Jump Menu, בחר בתפריט שברצונך שלחצן Go יפעיל ולחץ על OK.
החלת ההתנהגות Open Browser Window
השתמש בהתנהגות Open Browser Window לפתיחת דף בחלון חדש. ניתן לציין את מאפייני החלון החדש, כולל גודלו, תכונותיו (אם גודלו ניתן לשינוי, אם יש לו שורת תפריטים וכדומה) ושמו. לדוגמה, ניתן להשתמש בהתנהגות זו לפתיחת תמונה גדולה יותר בחלון נפרד כשהמשתמש לוחץ על תמונה ממוזערת. התנהגות זו מאפשרת ליצור את החלון החדש בגודל זהה לגודל התמונה.
אם לא צוינו תכונות לחלון, הוא נפתח בגודל זהה ועם תכונות זהות לאלה של החלון שממנו הוא נפתח. ציון תכונה כלשהי לחלון מבטל אוטומטית את כל התכונות האחרות שלא הופעלו במפורש. לדוגמה, אם לא מציינים תכונות לחלון, ייתכן שהוא ייפתח בגודל 1024 x 768 פיקסלים ויכלול סרגל ניווט (המציג את הלחצנים Back, Forward, Home ו-Reload), סרגל כלי מיקום ( המציג את כתובת URL), שורת מצב (המציגה הודעות מצב, בתחתית) ושורת תפריטים (המציגה את התפריטים File, Edit, View ותפריטים אחרים). בשעת הגדרה מפורשת של הרוחב לערך 640 ושל הגובה לערך 480 מבלי לקבוע תכונות נוספות, החלון נפתח בגודל 640 x 480 פיקסלים ללא סרגלי כלים.
-
בחר אובייקט ולאחר מכן בחר באפשרות Open Browser Window מתפריט Add Behavior בחלונית Behaviors.
-
לחץ על Browse כדי לבחור קובץ, או הזן את כתובת URL שברצונך להציג.
-
הגדר אפשרויות לרוחב ולגובה של החלון (בפיקסלים) ולכלילת סרגלי כלים, סרגלי גלילה, נקודות שינוי גודל וכדומה. תן שם לחלון (אין להשתמש ברווחים או בתווים מיוחדים) אם ברצונך שהוא ישמש כיעד לקישורים או אם ברצונך לשלוט בו באמצעות JavaScript.
-
לחץ על 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.
-
בחר אובייקט ובחר בפקודה Popup Message מתפריט Add Behavior בחלונית Behaviors.
-
הזן את ההודעה בתיבה Message.
-
לחץ על OK וודא שאירוע ברירת המחדל נכון.
החלת ההתנהגות Preload Images
ההתנהגות Preload Images מקצרת את זמני ההצגה באמצעות אחסון תמונות שאינן מוצגות בשעת הצגת הדף לראשונה בזיכרון המטמון (לדוגמה, תמונות שיוחלפו באמצעות התנהגויות או סקריפטים).
בשעת בחירה באפשרות Preload Images בתיבת הדו-שיח Swap Image, ההתנהגות Swap Image טוענת מראש באופן אוטומטי את כל התמונות העיקריות, כך שאין צורך בהוספה ידנית של ההתנהגות Preload Images בשעת שימוש בהתנהגות Swap Image.
-
בחר אובייקט ובחר בפקודה Preload Images מתפריט Add Behavior בחלונית Behaviors.
-
לחץ על הלחצן Browse לבחירת קובץ תמונה, או הזן נתיב ושם קובץ של תמונה בתיבה Image Source File.
-
להוספת התמונה לרשימה Preload Images, לחץ על לחצן הפלוס (+) שבראש תיבת הדו-שיח.
-
חזור על הצעדים 2 ו-3 לכל שאר התמונות שברצונך לטעון מראש בדף הנוכחי.
-
להסרת תמונה מהרשימה Preload Images, בחר בה ולחץ על לחצן המינוס (–).
-
לחץ על 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()}.
-
בחר אובייקט ולאחר מכן בחר Set Text > Set Text Of Frame מתפריט Add Behavior בחלונית Behaviors.
-
בתיבת הדו-שיח Set Text Of Frame, בחר במסגרת היעד מתפריט Frame.
-
לחץ על הלחצן Get Current HTML כדי להעתיק את התוכן הנוכחי מאזור body של מסגרת היעד.
-
הזן הודעה בתיבה New HTML.
-
לחץ על 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()}.
-
בחר אובייקט ולאחר מכן בחר בפקודה Set Text > Set Text Of Container מתפריט Add Behavior בחלונית Behaviors.
-
בתיבת הדו-שיח Set Text Of Container, השתמש בתפריט Container לבחירת רכיב היעד.
-
הזן טקסט או HTML חדשים בתיבה New HTML.
-
לחץ על OK וודא שאירוע ברירת המחדל נכון.
החלת ההתנהגות Set Text Of Status Bar
ההתנהגות Set Text Of Status Bar מציגה הודעה בשורת המצב בפינה השמאלית התחתונה של חלון הדפדפן. לדוגמה, ניתן להשתמש בהתנהגות זו להצגת תיאור של יעד קישור בשורת המצב, במקום להציג את כתובת URL שמשויכת אליו. לעתים קרובות, משתמשים אינם שמים לב להודעות בשורת המצב (ולא כל הדפדפנים מספקים תמיכה מלאה בהגדרת טקסט בשורת המצב). אם ההודעה חשובה, שקול להציגה כהודעה נפתחת או כטקסט של רכיב AP.
בשעת שימוש בהתנהגות Set Text Of Status Bar ב-Dreamweaver, הטקסט בשורת המצב של הדפדפן עלול שלא להשתנות מכיוון שדפדפנים מסוימים דורשים התאמות מיוחדות בשעת שינוי הטקסט בשורת המצב. לדוגמה, Firefox דורש לשנות אפשרות מתקדמת המאפשרת ל-JavaScript לשנות את הטקסט בשורת המצב. למידע נוסף, עיין בתיעוד של הדפדפן.
ניתן להטביע בטקסט כל קריאה לפונקציה, מאפיין, משתנה גלובלי או ביטוי חוקי אחר של JavaScript. להטבעת ביטוי JavaScript, מקם אותו בסוגריים מסולסלים ({}). להצגת סוגר מסולסל, הוסף לפניו לוכסן ימני (\{).
דוגמה:
The URL for this page is {window.location}, and today is {new Date()}.
-
בחר אובייקט ולאחר מכן בחר בפקודה Set Text > Set Text Of Status Bar מתפריט Add Behavior בחלונית Behaviors.
-
בתיבת הדו-שיח Set Text Of Status Bar, הזן את ההודעה בתיבה Message.
הקלד הודעה קצרה ותמציתית. אם ההודעה אינה מתאימה לגודל שורת המצב, הדפדפן מקצץ אותה.
-
לחץ על 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()}.
יצירת שדה טקסט עם שם
-
בחר בפקודה Insert > Form > Text Field.
אם Dreamweaver מבקש ממך להוסיף תג טופס, לחץ על Yes.
-
ב-Property inspector, הזן שם לשדה הטקסט. ודא שהשם ייחודי בדף (אל תשתמש באותו שם לרכיבים מרובים בדף, גם אם הם נמצאים בטפסים שונים).
החלת ההתנהגות Set Text Of Text Field
-
בחר שדה טקסט ולאחר מכן בחר בפקודה Set Text > Set Text Of Field מתפריט Add Behavior בחלונית Behaviors.
-
בחר בשדה הטקסט שישמש כיעד מתפריט Text Field והזן טקסט חדש.
-
לחץ על OK וודא שאירוע ברירת המחדל נכון.
החלת ההתנהגות Show-Hide Elements
ההתנהגות Show-Hide Elements מציגה, מסתירה, או משחזרת את התצוגה של רכיב דף אחד או יותר. התנהגות זו שימושית להצגת מידע כשהמשתמש מבצע פעולות בדף. לדוגמה, כשהמשתמש מזיז את המצביע מעל תמונה של צמח, ניתן להציג רכיב דף המספק פרטים על העונה ועל בית הגידול של הצמח, לכמה אור שמש הוא זקוק, לאיזה גודל הוא יכול לצמוח וכדומה. ההתנהגות רק מציגה או מסתירה את הרכיב המתאים - היא אינה מסירה את הרכיב מזרימת הדף כשהוא מוסתר.
-
בחר אובייקט ובחר בפקודה Show-Hide Elements מתפריט Add Behavior בחלונית Behaviors.
אם ההתנהגות ElementShow-Hide Elements אינה זמינה, כנראה שבחרת ברכיב AP. מכיוון שרכיבי AP אינם מקבלים אירועים בשני הדפדפנים מגרסה 4.0, יש לבחור באובייקט אחר, כגון תג <body> או תג קישור (<a>) של .
-
ברשימה Elements, בחר ברכיב שברצונך להציג או להסתיר ולחץ על הלחצנים Show, Hide, או Restore (המשחזר את תצוגת ברירת המחדל).
-
חזור על צעד 2 לכל שאר הרכיבים שברצונך לשנות את התצוגה שלהם. (ניתן לשנות תצוגה לרכיבים מרובים באמצעות התנהגות בודדת).
-
לחץ על OK וודא שאירוע ברירת המחדל נכון.
התנהגות זו הושמטה החל מגרסה Dreamweaver CS5.
החלת ההתנהגות Swap Image
ההתנהגות Swap Image מחליפה תמונה בתמונה אחרת באמצעות שינוי התכונה src של התג <img>. השתמש בהתנהגות זו ליצירת לחצנים אינטראקטיביים ואפקטי תמונה אחרים (כולל החלפה של תמונות אחדות בכל פעם). הוספת תמונה אינטראקטיבית מוסיפה אוטומטית התנהגות Swap Image לדף.
משום שהתנהגות זו משפיעה רק על התכונה src, יש להחליף את התמונה המקורית בתמונה בעלת מידות זהות (גובה ורוחב) למידות התמונה המקורית. אחרת, התמונה החדשה תתכווץ או תימתח כדי להתאים למידות התמונה המקורית.
ניתן להשתמש גם בהתנהגות Swap Image Restore, המשחזרת את הערכה האחרונה של התמונות שהוחלפו לקובצי המקור הקודמים. התנהגות זו נוספת אוטומטית בשעת שיוך התנהגות Swap Image לאובייקט. אם האפשרות Restore מסומנת בשעת שיוך ההתנהגות Swap Image, אין צורך לבחור ידנית בהתנהגות Swap Image Restore.
-
להוספת תמונה, בחר באפשרות Insert > Image או לחץ על הלחצן Image בחלונית Insert.
-
ב-Property inspector, הזן שם לתמונה בתיבת הטקסט השמאלית ביותר.
אינך חייב לתת שם לתמונה. התמונות מקבלות שם אוטומטית בשעת קישור ההתנהגות לאובייקט. עם זאת, הגדרת שם לתמונות מסייעת לזהות את התמונות בתיבת הדו-שיח Swap Image בקלות.
-
להוספת תמונות נוספות, חזור על הצעדים 1 ו-2.
-
בחר באובייקט (בדרך כלל, התמונה שברצונך להחליף) ובחר באפשרות Swap Image מתפריט Add Behavior בחלונית Behaviors.
-
ברשימה Images, בחר בתמונה שברצונך לשנות את מקורה.
-
לחץ על הלחצן Browse לבחירת קובץ התמונה החדש, או הזן את הנתיב ושם הקובץ של התמונה החדש בתיבה Set Source To.
-
חזור על צעדים 5 ו-6 לכל תמונה נוספת שברצונך להחליף. השתמש בפעולת Swap Image אחת לכל התמונות שברצונך להחליף בו-זמנית. אחרת, פעולת Swap Image Restore המתאימה לא תשחזר את כולן.
-
בחר באפשרות Preload Images כדי לשמור את התמונות החדשות בזיכרון המטמון לאחר טעינת הדף.
הדבר מונע עיכובים בהצגת התמונות.
-
לחץ על OK וודא שאירוע ברירת המחדל נכון.
החלת ההתנהגות Validate Form
ההתנהגות Validate Form בודקת את התוכן של שדות טקסט שצוינו כדי לוודא שהמשתמש הזין את סוג הנתונים הנכון. לאימות השדות במהלך מילוי הטופס על ידי המשתמש, שייך התנהגות זו לשדות טקסט בודדים באמצעות האירוע onBlur. להערכת שדות טקסט אחדים בבת אחת כשהמשתמש לוחץ על הלחצן Submit, שייך את ההתנהגות לטופס באמצעות האירוע onSubmit . שיוך התנהגות זו לטופס מונע מסירת טפסים עם נתונים לא חוקיים.
-
להוספת טופס, בחר באפשרות Insert > Form או לחץ על הלחצן Form בחלונית Insert.
-
להוספת שדה טקסט, בחר באפשרות Insert > Form > Text Field או לחץ על הלחצן Text Field בחלונית Insert.
חזור על הפעולה להוספת שדות טקסט נוספים.
-
בחר שיטת אימות:
לאימות שדות בודדים במהלך מילוי הטופס, בחר שדה טקסט ובחר באפשרות Window > Behaviors.
לאימות שדות מרובים בשעת מסירת הטופס, לחץ על התג <form> בבורר התגים שבפינה השמאלית התחתונה של חלון המסמך ובחר באפשרות Window > Behaviors.
-
בתפריט Add Behavior, בחר באפשרות Validate Form.
-
בצע אחת מהפעולות הבאות:
לאימות שדות טקסט בודדים, בחר בשדה שבחרת בחלון המסמך מהרשימה Fields.
לאימות שדות מרובים, בחר שדה טקסט ברשימה Fields.
-
אם השדה חייב להכיל נתונים, בחר באפשרות Required.
-
בחר באחת מאפשרויות Accept הבאות:
Use Anything
בודק ששדה חובה מכיל נתונים. הנתונים יכולים להיות מכל סוג.
Use E‑mail address
בודק שהשדה מכיל סמל @.
Use Number
בודק שהשדה כולל ספרות בלבד.
Use Number From
בודק שהשדה כולל מספר בטווח מסוים.
-
אם בחרת באימות של שדות מרובים, חזור על הצעדים 6 ו-7 לכל שדה נוסף שברצונך לאמת.
-
לחץ על OK.
אם בחרת באימות שדות מרובים בשעת מסירת הטופס, האירוע onSubmit מופיע אוטומטית בתפריט Events.
-
אם בחרת באימות שדות בודדים, ודא שאירוע ברירת המחדל הוא onBlur או onChange. אחרת, בחר אחד מאירועים אלה.
שני האירועים מניעים את ההתנהגות Validate Form כשהמשתמש יוצא מהשדה. ההבדל ביניהם הוא שהאירוע onBlur מתרחש גם אם המשתמש מקליד בשדה וגם אם אינו מקליד בשדה, והאירוע onChange מתרחש רק אם המשתמש שינה את תוכן השדה. לשדה חובה, מומלץ להשתמש באירוע onBlur.