- מדריך למשתמש של 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
- בדיקה, תצוגה מקדימה ופרסום של אתרי אינטרנט
- פתרון בעיות
למד כיצד להשתמש בתבניות Dreamweaver לעיצוב פריסה "קבועה" של דף, וליצור מסמכים המבוססים על התבנית, המקבלים בירושה את פריסת הדף של התבנית.
תבנית היא סוג מיוחד של מסמך, שניתן להשתמש בו לעיצוב פריסה "קבועה" של דף. לאחר מכן ניתן ליצור מסמכים המבוססים על התבנית, המקבלים בירושה את פריסת הדף של התבנית. בעת עיצוב תבנית, ניתן לציין איזה תוכן יוכלו המשתמשים לערוך במסמך המבוסס על תבנית זו. תבניות מאפשרות למחברי תבניות לשלוט ברכיבים בדף שהמשתמשים בתבנית – כגון מחברי תבניות, גרפיקאים או מפתחים אחרים לאינטרנט – יוכלו לערוך. יש מספר סוגים של אזורי תבנית שמחבר התבנית יכול לכלול במסמך.
תבניות מאפשרות לשלוט באזור נתונים גדול ולהשתמש שימוש חוזר בפריסות שלמות. אם ברצונך לחזור ולהשתמש ברכיבים מעוצבים בודדים, כגון נתוני זכויות יוצרים באתר או סמל לוגו, צור פריטי ספרייה.
שימוש בתבניות מאפשר לעדכן דפים מרובים בבת אחת. מסמך שנוצר מתבנית נשאר מקושר לתבנית זו (אלא אם כן תנתק את הקישור של המסמך במועד מאוחר יותר). ניתן לשנות תבנית ולעדכן מיד את העיצוב בכל המסמכים המבוססים על התבנית.
התבניות ב- Dreamweaver שונות מהתבניות בחלק מהתוכנות האחרות של Adobe Creative Suite בכך שמקטעי דפים בתבניות של Dreamweaver הם קבועים (או לא ניתנים לעריכה) כברירת מחדל.
סוגי אזורים בתבנית
כששומרים מסמך כתבנית, רוב אזורי המסמך נעולים. כמחבר תבנית, ניתן לציירן אילו אזורים במסמך המבוסס על תבנית יהיו ניתנים לעריכה בעזרת הוספת אזורים ניתנים לעריכה או פרמטרים ניתנים לעריכה לתבנית.
כשאתה יוצר תבנית, תוכל להכניס שינויים גם באזורים ניתנים לעריכה וגם באזורים נעולים. אך במסמך המבוסס על התבנית, המשתמש בתבנית יכול להכניס שינויים רק באזורים הניתנים לעריכה. לא ניתן לשנות את האזורים הנעולים.
ישנם ארבעה סוגי אזורים בתבנית:
אזור ניתן לעריכה: אזור לא נעול במסמך המבוסס על תבנית - מקטע שהמשתמש בתבנית יכול לערוך. מחבר התבנית יכול לציין כל אזור בתבנית כאזור ניתן לעריכה. כדי שהתבנית תהיה יעילה, עליה לכלול אזור ניתן לעריכה אחד לפחות. אחרת, לא ניתן יהיה לערוך דפים המבוססים על התבנית. לקבלת מידע מפורט על אזורים ניתנים לעריכה, ראה יצירת אזורים ניתנים לעריכה בתבניות.
אזור חוזר: מקטע בפריסה של המסמך המוגדר כך שהמשתמש יוכל להוסיף או למחוק עותקים של האזור החוזר במסמך המבוסס על התבנית, בהתאם לצורך. לדוגמה, ניתן להגדיר שורת טבלה כשורה חוזרת. אזורים חוזרים ניתנים לעריכה, כך שהמשתמש בתבנית יכול לערוך את התוכן ברכיב החוזר, ואילו העיצוב עצמו נמצא תחת שליטת מחבר התבנית.
יש שני סוגי אזורים חוזרים שניתן להוסיף לתבנית: אזור חוזר וטבלה חוזרת. כדי לקבל מידע אודות אופן העבודה עם אזורים חוזרים, ראה יצירת אזורים חוזרים וטבלאות חוזרות ב-Dreamweaver.
אזור אופציונלי: מקטע של תבנית הכולל תוכן - כגון טקסט או תמונה - היכול להופיע או שלא להופיע במסמך. בדף המבוסס על תבנית, המשתמש בתבנית הוא הקובע בדרך כלל אם התוכן יוצג. עיין בסעיף אזור אופציונלי לקבלת מידע נוסף.
תכונת תג ניתנת לעריכה: מאפשרת לך לבטל נעילה של תכונת תג בתבנית, כך שניתן יהיה לערוך את התכונה בדף המבוסס על תבנית. לדוגמה, ניתן לנעול את התמונות שיופיעו במסמך, אך להניח למשתמש בתבנית להגדיר את היישור שמאלה, ימינה או למרכז. ראה הגדרת תכונות תג ניתנות לעריכה ב-Dreamweaver לקבלת מידע נוסף.
קישורים בתבניות
כשיוצרים קובץ תבנית על-ידי שמירת דף קיים כתבנית, התבנית החדשה בתיקייה Templates וכל הקישורים בקובץ מתעדכנים, כך שהנתיבים שלהם יחסית למסמך יהיו נכונים. לאחר מכן, כשיוצרים מסמך המבוסס על תבנית זו ושומרים אותו, כל הקישורים יחסית למסמך מתעדכנים שוב כדי שימשיכו להפנות לקבצים הנכונים.
כשמוסיפים קישור יחסית למסמך לקובץ תבנית, קל להזין שם נתיב שגוי אם מקלידים את הנתיב בתיבת הטקסט של מפקח המאפיינים. הנתיב הנכון בקובץ התבנית הוא הנתיב מהתיקייה Templates למסמך המקושר, לא הנתיב מתיקיית המסמך המבוסס על התבנית למסמך המקושר. ודא שהנתיבים הנכונים הוזנו בעזרת שימוש בסמל התיקייה או בסמל Point-to-file ב-Property inspector בעת יצירת קישורים בתבניות.
סקריפטים לשרת בתבניות ובמסמכים המבוססים על תבניות
יש סקריפטים לשרת הנוספים בתחילת ובסוף המסמך (לפני התג <html> או אחרי התג </html>). סקריפטים אלה דורשים טיפול מיוחד בתבניות ובמסמכים המבוססים על תבניות. בדרך כלל, הם מכניסים שינויים בקוד של סקריפט לפני התג <html> או אחרי התג </html> בתבנית. השינויים אינם מועתקים למסמכים המבוססים על התבנית. הדבר עלול לגרום לשגיאות אם סקריפטים אחרים של השרת, בגוף התבנית, תלויים בסקריפטים שאינם מועתקים. אזהרה מוצגת אם תשנה את הסקריפטים לפני התג <html> או אחרי התג </html> בתבנית.
כדי להימנע מבעיה זו, ניתן להוסיף את הקוד הבא באזור הכותרת של התבנית:
<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->
כשקוד זה נמצא בתבנית, שינויים בסקריפטים לפני התג <html> או אחרי התג </html> יועתקו למסמכים המבוססים על תבנית זו. עם זאת, לא תוכל יותר לערוך סקריפטים אלה במסמכים המבוססים על התבנית. לפיכך, ניתן לבחור לערוך את הסקריפטים בתבנית, או במסמכים המבוססים על התבנית, אך לא בשניהם.
פרמטרים של תבנית
פרמטרים של תבנית מציינים ערכים לשליטה בתוכן במסמכים המבוססים על התבנית. השתמש בפרמטרים של תבנית לאזורים אופציונליים או לתכונות תג ניתנות לעריכה, או כדי לקבוע ערכים שברצונך להעביר למסמך מקושר. לכל פרמטר יש לבחור שם, סוג נתון וערך ברירת מחדל. לכל פרמטר חייב להיות שם ייחודי, הרגיש לאותיות גדולות וקטנות. הפרמטר חייב להיות אחד מחמישה סוגי נתונים מותרים: טקסט, בוליאני, צבע, URL או מספר.
פרמטרים של תבנית מועברים למסמך כמופעי פרמטרים. ברוב המקרים, משתמש בתבנית יכול לערוך את ערך ברירת המחדל של הפרמטר כדי להתאים אישית מה שמוצג במסמך המבוסס על התבנית. במקרים אחרים, מחבר התבנית יכול להחליט מה יוצג במסמך, בהתאם לערך של ביטוי תבנית.
ביטויי תבנית
ביטויי תבנית הן הצהרות המחשבות או בודקות ערך.
ניתן להשתמש בביטוי כדי לאחסן ערך ולהציגו במסמך. לדוגמה, ביטוי יכול להיות פשוט ערך של פרמטר, כגון @@(Param)@@, או ביטוי מורכב המחשב ערכים ליצירת צבע רקע מתחלף בשורות בטבלה, כגון @@((_index & 1) ? red : blue)@@.
ניתן גם להגדיר ביטויים לתנאי if ו-multiple-if. כשביטוי מופיע בהצהרת תנאי, Dreamweaver בודק אם הוא מחזיר ערך אמת או false. אם התנאי מחזיר ערך אמת, האזור האופציונלי מופיע במסמך המבוסס על התבנית. אם הוא מחזיר ערך שקר, הוא אינו מופיע.
ניתן להגדיר ביטויים בתצוגת Code או בתיבת הדו-שיח Optional Region כשמוסיפים אזור אופציונלי.
בתצוגת Code, יש שתי דרכים להגדרת ביטויי תבנית: שימוש בהערה <!-- TemplateExpr expr="your expresson"--> או ב-@@(your expression)@@. כשמוסיפים את הביטוי בקוד של התבנית, סמן ביטוי מופיע בתצוגת Design. בעת החלת התבנית, Dreamweaver מחשב את הביטוי ומציג את הערך במסמך המבוסס על התבנית.
שפת ביטויי תבנית
שפת ביטויי התבנית היא תת-ערכה של JavaScript, המשתמשת בתחביר ובכללי הקדימות של JavaScript. השתמש באופרטורים של JavaScript לכתיבת ביטויים כגון:
@@(firstName+lastName)@@
יש תמיכה בתכונות ובאופרטורים הבאים:
קבוע מספרי, קבוע מחרוזת (תחביר של מרכאות כפולות בלבד), קבוע בוליאני (אמת או שקר)
הפניית משתנה (ראה רשימת המשתנים המוגדרים בהמשך סעיף זה)
הפניית שדה (האופרטור “dot”)
אופרטורים אונריים: +, -, ~, !
אופרטורים בינאריים: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>
אופרטור תנאי: ?:
סוגריים: ()
נעשה שימוש בסוגי הנתונים הבאים: בוליאני, נקודה צפה מסוג IEEE 64-bpc, מחרוזת ואובייקט. תבניות Dreamweaver אינן תומכות בשימוש בסוגי הנתונים null או undefined של JavaScript. הן גם אינן מתירות המרה מובלעת של סוגי נתונים סקלריים לאובייקט. למשל, הביטוי "abc".length יחזיר שגיאה במקום את הערך 3.
האובייקטים הזמינים היחידים הם אלה שהוגדרו על-ידי מודל האובייקט של הביטוי. המשתנים הבאים מוגדרים:
_document
כולל נתוני תבנית ברמת המסמך, עם שדה לכל פרמטר בתבנית.
_repeat
מוגדר רק לביטויים המופיעים בתוך אזור חוזר. מספק מידע מובנה לגבי האזור.
_index
אינדקס מספרי (מ-0) של הפריט הנוכחי
_numRows
סה"כ מספר הפריטים באזור החוזר
_isFirst
מחזיר ערך אמת אם הפריט הנוכחי הוא הפריט הראשון באזור החוזר
_isLast
מחזיר ערך אמת אם הפריט הנוכחי הוא הפריט האחרון באזור החוזר
_prevRecord
אובייקט _repeat לפריט הקודם. זוהי טעות לגשת למאפיין זה לפריט הראשון באזור.
_nextRecord
אובייקט _repeat לפריט הבא. זוהי טעות לגשת למאפיין זה לפריט האחרון באזור.
_parent
באזור חוזר מקונן, מוחזר אובייקט _repeat לאזור החוזר המקיף אותו (החיצוני). זוהי טעות לגשת למאפיין זה מחוץ לאזור חוזר מקונן.
במהלך בדיקת ביטוי, כל השדות של אובייקט _document ואובייקט _repeat זמינים במובלע. לדוגמה, ניתן להזין title במקום _document.title כדי לגשת לפרמטר של כותרת המסמך.
במקרים של התנגשות שדות, שדות עם האובייקט _repeat מקבלים עדיפות לעומת שדות עם האובייקט _document. לפיכך, אין צורך לבצע הפניה מפורשת ל-_document או ל-_repeat, פרט לכך שייתכן שיהיה צורך ב-_document בתוך אזור חוזר לצורך הפניה לפרמטרים של המסמך המוסתרים על-ידי פרמטרים של אזור חוזר.
כשמשתמשים באזורים חוזרים מקוננים, רק שדות של האזורים החוזרים הפנימיים ביותר זמינים במובלע. יש לבצע הפניה מפורשת לאזורים חיצוניים בעזרת _parent.
תנאי Multiple If בקוד תבנית
ניתן גם להגדיר ביטויי תבנית לתנאי if ו-multiple-if. דוגמה זו מדגימה הגדרה של פרמטר בשם "Dept", קביעת ערך ראשוני, והגדרת תנאי multiple-if הקובע איזה סמל לוגו להציג.
להלן דוגמה של קוד שניתן להזין באזור הכותרת של התבנית:
<!-- TemplateParam name="Dept" type="number" value="1" -->
הצהרת התנאי הבאה בודקת את הערך שהוקצה לפרמטר Dept. כשהתנאי מחזיר ערך אמת או ערך זהה, התמונה המתאימה תוצג.
<!-- TemplateBeginMultipleIf --> <!-- checks value of Dept and shows appropriate image--> <!-- TemplateBeginIfClause cond="Dept == 1" --> <img src=".../sales.gif"> <!-- TemplateEndIfClause --> <!-- TemplateBeginIfClause cond="Dept == 2" --> <img src=".../support.gif"> <!-- TemplateEndIfClause--> <!-- TemplateBeginIfClause cond="Dept == 3" --> <img src=".../hr.gif"> <!-- TemplateEndIfClause --> <!-- TemplateBeginIfClause cond="Dept != 3" --> <img src=".../spacer.gif"> <!-- TemplateEndIfClause --> <!-- TemplateEndMultipleIf -->
כשיוצרים מסמך המבוסס על תבנית, הפרמטרים של התבנית מועברים למסמך אוטומטית. המשתמש בתבנית קובע איזו תמונה להציג.