- מדריך למשתמש של 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, להשתמש ב-Design Notes ועוד.
בנוסף לקובצי SWF ו-FLV, ניתן להוסיף אובייקטים אחרים של שמע ווידאו למסמך Dreamweaver. אם תוסיף לאובייקט מדיה תכונות נגישות, תוכל להגדיר את תכונות הנגישות ולערוך ערכים אלה בקוד HTML.
-
הצב את נקודת ההכנסה בחלון Document, במקום שבו תרצה להוסיף את האובייקט.
-
הוסף את האובייקט באחת מהדרכים הבאות:
בקטגוריה HTML של החלונית Insert, בחר בסמל של סוג האובייקט שברצונך להוסיף.
בחר באובייקט המתאים מתוך תפריט המשנה Insert > HTML.
תופיע תיבת דו-שיח שמאפשרת לבחור בקובץ מקור ולציין פרמטרים מסוימים עבור אובייקט המדיה.
הערה:כדי למנוע את הופעתן של תיבות דו-שיח אלה, בחר Edit > Preferences > General (Windows) או Dreamweaver > Preferences > General (Macintosh) ובטל את הבחירה באפשרות Show Dialog When Inserting Objects. כדי לעקוף את ההעדפות שהוגדרו להצגת תיבות דו-שיח, הקש ממושכות על מקש Control (Windows) או Option (Macintosh) תוך כדי הוספת האובייקט.
-
השלם את תיבת הדו-שיח Select File ולחץ על OK.הערה:
אם ציינת בתיבת הדו-שיח Edit > Preferences שיש להציג תכונות בעת הוספת מדיה, תופיע תיבת הדו-שיח Accessibility Attributes.
-
הגדר את תכונות הנגישות.הערה:
ניתן גם לערוך תכונות של אובייקטי מדיה בבחירת האובייקט ועריכת קוד HTML שלו בתצוגת Code, או בלחיצה ימנית (Windows) או לחיצה תוך כדי הקשת Control (Macintosh) ובחירת Edit Tag Code.
Title
הזן כותרת לאובייקט המדיה.
Access Key
הזן קיצור מקש (אות אחת) בתיבת הטקסט, כדי לבחור באובייקט הטופס בדפדפן. הדבר מאפשר למבקר באתר להשתמש במקש Control (Windows) עם המקש של האות שנבחרה באפשרות Access Key על מנת לגשת לאובייקט. לדוגמה, אם תזין B באפשרות זו, השתמש במקשים Control+B על מנת לבחור באובייקט בדפדפן.
Tab Index
הזן מספר לסדר הטאבים של אובייקט הטופס. הגדרת סדר הטאבים מועילה כשיש בדף קישורים ואובייקטי טופס אחרים, ועל המשתמש לדלג ביניהם במקש הטאב, לפי סדר מסוים. אם תגדיר סדר טאבים לאובייקט אחד, הקפד להגדיר את סדר הטאבים לכל האובייקטים.
-
לחץ על OK כדי להוסיף את אובייקט המדיה.הערה:
אם תלחץ על Cancel, מציין מיקום של אובייקט מדיה יופיע במסמך, אך Dreamweaver לא ישייך אליו תגי נגישות או תכונות נגישות כלשהן.
כדי לציין קובץ מקור או כדי להגדיר מידות, תכונות ופרמטרים אחרים, השתמש ב-Property inspector לכל אובייקט. ניתן לערוך את תכונות הנגישות של אובייקט.
הפעלת עורך חיצוני לקובצי מדיה
ניתן להפעיל עורך חיצוני מתוך Dreamweaver כדי לערוך את רוב קובצי המדיה. ניתן גם לציין את העורך שברצונך ש-Dreamweaver יפעיל לעריכת הקובץ.
-
ודא שסוג קובץ המדיה משויך לעורך כלשהו במערכת שלך.
כדי לבדוק איזה עורך משויך לסוג הקובץ, בחר Edit > Preferences ב-Dreamweaver ובחר File Types/Editors מהרשימה Category. לחץ על סיומת הקובץ בעמודה Extensions כדי להציג את העורכים המשויכים בעמודה Editors. ניתן לשנות את העורך המשויך לסוג קובץ כלשהו.
-
לחץ פעמיים על קובץ המדיה בחלונית Files כדי לפתוח אותו בעורך החיצוני.
העורך המופעל בלחיצה פעמיים על הקובץ בחלונית Files, נקרא העורך העיקרי. לדוגמה, אם תלחץ לחיצה כפולה על קובץ תמונה, Dreamweaver יפתח את הקובץ בעורך התמונות החיצוני העיקרי, למשל Adobe Fireworks.
-
אם אינך רוצה להשתמש בעורך החיצוני העיקרי לעריכת הקובץ, תוכל להשתמש בעורך אחר המותקן במערכת שלך, באחת מהדרכים הבאות:
בחלונית Files, לחץ לחיצה ימנית (Windows) או הקש Control תוך כדי לחיצה (Macintosh) על שם הקובץ, ובחר Open With מתוך התפריט תלוי-ההקשר.
בתצוגת Design, לחץ לחיצה ימנית (Windows) או הקש Control תוך כדי לחיצה (Macintosh) על רכיב המדיה בדף הנוכחי, ובחר Edit With מתוך התפריט תלוי-ההקשר.
ציון העורך להפעלה מתוך Dreamweaver
ניתן לציין את העורך שברצונך ש-Dreamweaver ישתמש בו לעריכה של סוג קובץ כלשהו, ולהוסיף או למחוק סוגי קבצים ש-Dreamweaver מזהה.
ציון במפורש מתי יש להפעיל עורכים חיצוניים לסוג קובץ מסוים
-
בחר Edit > Preferences ובחר File Types/Editors מתוך הרשימה Category.
סיומות של שמות קובץ, כגון .gif, .wav ו-.mpg, מפורטות משמאל, תחת Extensions. העורכים המשויכים לסיומת שנבחרה מפורטים מימין, תחת Editors.
-
בחר בסיומת של סוג הקובץ ברשימה Extensions ובצע אחת מהפעולות הבאות:
כדי לשייך עורך חדש לסוג הקובץ, לחץ על לחצן הפלוס (+) שמעל לרשימה Editors והשלם את תיבת הדו-שיח שמופיעה.
לדוגמה, בחר בסמל היישום של Acrobat כדי לשייך אותו לסוג הקובץ.
כדי להפוך עורך מסוים לעורך העיקרי של סוג קובץ מסוים (דהיינו, כדי לפתוח עורך זה כשלוחצים פעמיים על סוג הקובץ בחלונית Files), בחר בעורך מהרשימה Editors ולחץ על Make Primary.
כדי לבטל את השיוך של סוג קובץ לעורך, בחר בעורך ברשימה Editors ולחץ על לחצן המינוס (-) שמעל לרשימה Editors.
הוספה של סוג קובץ חדש ועורך משויך
-
לחץ על לחצן הפלוס (+) שמעל לרשימה Extensions והזן סיומת של סוג קובץ (כולל הנקודה שבתחילת הסיומת) או מספר סיומות הקשורות זו לזו, כשהן מופרדות ברווחים.
לדוגמה, הזן .xml .xsl אם תרצה לשייך סיומות אלה לעורך XML המותקן במערכת שלך.
-
בחר בעורך לסוג הקובץ בלחיצה על לחצן הפלוס (+) שמעל לרשימה Editors והשלם את תיבת הדו-שיח שמופיעה.
הסרה של סוג קובץ
-
בחר בסוג הקובץ ברשימה Extensions ולחץ על לחצן המינוס (-) שמעל לרשימה Extensions.הערה:
לא ניתן לבטל את ההסרה של סוג הקובץ, לכן היה בטוח שאכן ברצונך להסיר אותו.
שימוש ב-Design Notes עם אובייקטי מדיה
בדומה לאובייקטים אחרים ב-Dreamweaver, ניתן להוסיף Design Notes לאובייקט מדיה. Design Notes הן הערות שמשויכות לקובץ מסוים, ומאוחסנות בקובץ נפרד. ניתן להשתמש ב-Design Notes כדי לנהל מידע נוסף על קבצים המשויכים למסמך שלך, כגון שמות קובץ של תמונות המקור והערות על מצב הקובץ.
-
לחץ לחיצה ימנית (Windows) או הקש Control תוך כדי לחיצה (Macintosh) על האובייקט בחלון Document.הערה:
עליך להגדיר את האתר שלך לפני שתוכל להוסיף Design Notes לאובייקט כלשהו.
-
בחר Design Notes for Page מהתפריט תלוי-ההקשר.
-
הזן את המידע הרצוי ב-Design Note.הערה:
ניתן גם להוסיף Design Note לאובייקט מדיה מתוך החלונית Files, בבחירת הקובץ, חשיפת התפריט תלוי-ההקשר ובחירת Design Notes מהתפריט תלוי-ההקשר.
הוספת וידאו (שאינו FLV)
ניתן להוסיף וידאו לדפי אינטרנט בדרכים שונות ובתבניות שונות. ניתן להוריד וידאו אל המשתמש או להזרימו כדי שיוצג תוך כדי ההורדה.
-
הצב את הסרטון בתיקיית האתר שלך.
סרטונים אלה הם בדרך כלל בתבנית AVI או MPEG.
-
צור קישור אל הסרטון או הטבע אותו בדף שלך.
כדי לקיצור קישור לסרטון, הזן טקסט לקישור, למשל "הורד סרטון", בחר בטקסט ולחץ על סמל התיקייה ב-Property inspector. נווט לקובץ הווידאו ובחר בו.
הערה:על המשתמש להוריד יישום מסייע (תוסף), על מנת שיוכל להציג תבניות נפוצות של וידאו זורם, כגון Real Media, QuickTime ו-Windows Media.
הוספת תוכן תוסף
ניתן ליצור תוכן כגון סרטון QuickTime לתוסף דפדפן, ולאחר מכן להשתמש ב-Dreamweaver כדי להוסיף את התוכן למסמך HTML. בין התוספים הנפוצים ניתן לציין את RealPlayer ו-QuickTime, בעוד קובצי התוכן כוללים קובצי mp3 וסרטוני QuickTime.
ניתן להציג תצוגה מקדימה של סרטונים והנפשה, המסתמכים על תוספי דפדפן, ישירות בתצוגת Design של חלון Document. ניתן להפעיל את כל רכיבי התוסף בו זמנית כדי לראות כיצד הדף ייראה בעיני המשתמש, או לחלופין להפעיל כל רכיב בנפרד, כדי לוודא שהטבעת את רכיב המדיה הנכון.
לא ניתן להציג תצוגה מקדימה של סרטים או הנפשה המסתמכים על פקדי ActiveX.
לאחר הוספת תוכן לתוסף, השתמש ב-Property inspector כדי להגדיר את הפרמטרים של תוכן זה. כדי להציג את המאפיינים הבאים ב-Property inspector, בחר אובייקט של תוסף.
מפקח המאפיינים מציג בתחילה את המאפיינים הנפוצים ביותר. כדי להציג את כל המאפיינים, לחץ על חץ ההרחבה בפינה הימנית התחתונה.
הוספת תוכן של תוסף והגדרת מאפייניו
-
בתצוגת Design של חלון Document, הצב את נקודת ההכנסה בנקודה שבה ברצונך להוסיף את התוכן ולאחר מכן בצע אחת מהפעולות הבאות:
בקטגוריה Common בחלונית Insert, לחץ על הלחצן Media ובחר בסמל Plugin מהתפריט.
בחר Insert > Media > Plugin.
-
בתיבת הדו-שיח שמופיעה, בחר קובץ תוכן לתוסף ולחץ על OK.
-
הגדר את אפשרויות התוסף ב-Property inspector.
Name
מציינת שם לזיהוי התוסף בעבודה עם סקריפטים. הזן שם בתיבת הטקסט נטולת התווית, שבקצה השמאלי של מפקח המאפיינים.
W ו-H
מציינת, בפיקסלים, את הרוחב והגובה שהוקצו לאובייקט בדף.
Src
מציינת את קובץ הנתונים המקורי. לחץ על סמל התיקייה כדי לנווט אל הקובץ, או הזן שם קובץ.
Plg Url
מציינת כתובת URL של התכונה pluginspace. הזן את כתובת URL המלאה של האתר ממנו המשתמשים יכולים להוריד את התוסף. אם למשתמש המבקר באתר אין תוסף מתאים, הדפדפן ינסה להוריד את התוסף מכתובת URL זו.
Align
קובעת את יישור האובייקט בדף.
V Space ו-H Space
מציינות את מספר הפיקסלים של רווח לבן מעל לתוסף, תחתיו ומשני צדדיו.
Border
מציינת את רוחב המסגרת סביב התוסף.
Parameters
פותחת תיבת דו-שיח להזנת פרמטרים נוספים שיעברו לתוסף. תוספים רבים מגיבים לפרמטרים מיוחדים.
ניתן גם להציג את התכונות שהוקצו לתוסף שנבחר, על-ידי על הלחצן Attribute. בתיבת דו-שיח זו ניתן לערוך, להוסיף ולמחוק תכונות כגון רוחב וגובה.
הצגת תוכן התוסף בחלון Document
-
הוסף רכיב מדיה אחד או יותר באחת מהשיטות שתוארו בסעיף הקודם.
-
בצע אחת מהפעולות הבאות:
בחר באחד מרכיבי המדיה שהוספת ובחר View > Plugins > Play או לחץ על הלחצן Play ב-Property inspector.
בחר View > Plugins > Play All כדי להפעיל את כל רכיבי המדיה המסתמכים על תוספים בדף שנבחר.
הערה:הפקודה Play All חלה רק על המסמך הנוכחי; היא לא חלה, למשל, על מסמכים אחרים באותה ערכת מסגרות.
עצירת ההצגה של תוכן התוסף
-
בחר ברכיב מדיה ובחר View > Plugins > Stop, או לחץ על הלחצן Stop ב-Property inspector.
ניתן גם לבחור View > Plugins > Stop All כדי לעצור את הפעלת התוכן של כל התוספים.
פתרון בעיות של תוספים
אם בצעת את השלבים להפעלת תוכן של תוספים בחלון Document, אולם חלק מהתוספים לא פועלים, נסה את הפעולות הבאות:
ודא שהתוסף המשויך מותקן במחשב שלך ושהתוכן תואם לגרסת התוסף שברשותך.
פתח את הקובץ Configuration/Plugins/UnsupportedPlugins.txt בעורך טקסט ובדוק האם התוסף הבעייתי מופיע ברשימה. קובץ זה עוקב אחר התוספים שעשויים לגרום לבעיות ב-Dreamweaver ולכן אין בהם תמיכה. (אם תיתקל בבעיות בתוסף מסוים, שקול להוסיפו לקובץ זה).
בדוק שיש לך די זיכרון. ישנם תוספים שהפעלתם דורשת 2 MB עד 5 MB נוספים של זיכרון.
שימוש בהתנהגויות לשליטה במדיה
ניתן להוסיף לדף התנהגויות כדי להפעיל ולעצור אובייקטי מדיה שונים.
Control Shockwave Or Flash
הפעלה, עצירה, החזרה לאחור או מעבר למסגרת בסרטון Shockwave או בקובץ SWF.
Play Sound
מאפשרת להשמיע צליל; לדוגמה, ניתן להשמיע אפקט צלילי בכל פעם שהמשתמש מעביר את מצביע העכבר מעל קישור.
Check Plugin
מאפשרת לך לבדוק אם התוסף המתאים מותקן אצל המשתמשים באתר ולאחר מכן לנתב אותם לכתובות URL שונות, לפי תוצאת הבדיקה. אפשרות זו חלה רק על תוספים מכיוון שההתנהגות Check Plugin לא בודקת פקדי ActiveX.
שימוש בפרמטרים לשליטה על אובייקטי מדיה
הגדרת פרמטרים מיוחדים לשליטה על קובצי SWF ותוספים. הפרמטרים משמשים עם התגים object, embed ו-applet. פרמטרים מגדירים תכונות ייחודיות לסוגים שונים של אובייקטים. לדוגמה, קובץ SWF עשוי להשתמש בפרמטר איכות <param name="quality" value="best"> עבור תג האובייקט. תיבת הדו-שיח Parameter זמינה מתוך מפקח המאפיינים. עיין בתיעוד האובייקט שבו תשתמש, לקבלת מידע על הפרמטרים הדרושים לו.
אין תקן מוסכם לזיהוי קובצי נתונים לפקדי ActiveX. עיין בתיעוד של פקד ActiveX שבו תשתמש, על מנת ללמוד באילו פרמטרים יש להשתמש.
הזנת שם וערך לפרמטר
-
בחר אובייקט שיכול לכלול פרמטרים בחלון Document.
-
פתח את מפקח המאפיינים אם הוא אינו פתוח עדיין ולחץ על הלחצן Parameters שבחצי התחתון של מפקח המאפיינים (ודא שמפקח המאפיינים מורחב).
-
לחץ על לחצן הפלוס (+) והזן את השם והערך של הפרמטר בעמודות המתאימות.
הסרת פרמטר
-
בחר בפרמטר ולחץ על לחצן המינוס (–).
שינוי הסדר של פרמטרים
-
בחר בפרמטר והשתמש בלחצני החצים למעלה ולמטה.