צור, פתח, ערוך, שמור והחזר קבצים למצבם הקודם ב- Dreamweaver. צור תבניות ופתח קבצים קשורים.

Dreamweaver מציע סביבה גמישה לעבודה עם מגוון מסמכי אינטרנט. בנוסף למסמכי HTML, ניתן ליצור ולפתוח מגוון מסמכים מבוססי טקסט, כגון JavaScript,‏ PHP ו-Cascading Style Sheets‏ (CSS).

Dreamweaver מספק אפשרויות אחדות ליצירת מסמך חדש. ניתן ליצור כל אחד מהמסמכים הבאים:

  • מסמך ריק חדש או תבנית ריקה חדשה

  • מסמך המבוסס על אחת הפריסות המוגדרות מראש שמצורפות ל-Dreamweaver, הכולל יותר משלושים פריסות דף מבוססות CSS

  • מסמך המבוסס על אחת התבניות הקיימות שלך

    ניתן גם להגדיר העדפות מסמך. לדוגמה, אם אתה נוהג לעבוד עם מסמכים מאותו סוג, תוכל להגדיר אותו כסוג המסמך של ברירת המחדל לדפים החדשים שתיצור.

    ניתן להגדיר בקלות מאפייני מסמך, כגון מטא-תגים, כותרת המסמך, צבעי רקע ומאפייני דף אחרים בתצוגת Design או Code.

סוגי קבצים של Dreamweaver

Dreamweaver מאפשר לעבוד עם מגוון סוגי קבצים. סוג הקובץ העיקרי שעובדים איתו הוא קובץ HTML. קובצי HTML - או קובצי Hypertext Markup Language - כוללים שפה מבוססת תגים שאחראית להצגת דף אינטרנט בדפדפן. ניתן לשמור קובצי HTML עם סיומת ‎.html או ‎.htm. כברירת מחדל, Dreamweaver שומר קבצים עם סיומת ‎.html.

Dreamweaver מאפשר לך ליצור ולערוך דפי אינטרנט המבוססים על HTML5. פריסות ראשוניות זמינות גם לבניית דפי HTML5 מההתחלה.

הרשימה הבאה כוללת סוגי קבצים נפוצים נוספים שייתכן שתשתמש בהם ב-Dreamweaver‏:

CSS

קובצי Cascading Style Sheet כוללים סיומת ‏‎.css. הם משמשים לעיצוב תוכן HTML ולשליטה במיקום רכיבי דף שונים.

GIF

קובצי Graphics Interchange Format כוללים סיומת ‎.gif. התבנית GIF היא תבנית גרפית לאינטרנט, פופולרית לסרטים מצוירים, לסמלי לוגו, לגרפיקה עם אזורים שקופים ולהנפשה. קובצי GIF כוללים עד 256 צבעים.

JPEG

קובצי Joint Photographic Experts Group (נקראים על שם הארגון שיצר את התבנית) כוללים סיומת ‎.jpg והם משמשים בדרך כלל לתצלומים או לתמונות עם מספר רב של צבעים. התבנית JPEG מומלצת לתצלומים דיגיטליים, לתצלומים שנסרקו, לתמונות שכוללות מרקמים, לתמונות שכוללות מעברי צבע ולכל תמונה הדורשת יותר מ-256 צבעים.

XML

קובצי Extensible Markup Language כוללים סיומת ‎.xml. הם כוללים נתונים גולמיים הניתנים לעיצוב באמצעות XSL ‏(Extensible Stylesheet Language).

תיבת הדו-שיח New Document

תיבת הדו-שיח New Document מציגה את כל סוגי הקבצים הנתמכים, כולל PHP‏, XML ו- SVG.

ניתן גם לגשת לפריסות, תבניות ומסגרות מוגדרות מראש מתוך תיבת דו-שיח זו.

הערה:

כל הפריסות הראשוניות המוצגות מיועדות לתמוך באתרים מהירי תגובה והן תואמות-HTML-5.

יצירת פריסת HTML באמצעות דף ריק

ניתן ליצור דף שכולל פריסת CSS מוגדרת מראש, או ליצור דף ריק לגמרי ולאחר מכן ליצור פריסה משלך.

  1. בחר File >‏ New.

  2. בקטגוריה New Document, בחר את סוג הדף שברצונך ליצור מהעמודה Document Type. לדוגמה, בחר באפשרות HTML כדי ליצור דף HTML פשוט.

  3. בחר סוג מסמך מהתפריט הנפתח DocType. ברוב המקרים, ניתן להשתמש באפשרות ברירת המחדל, HTML5.

  4. בחר אפשרויות נוספות בהתאם לסוג הדף שברצונך ליצור.

    • None: בחר באפשרות זו אם ברצונך ליצור דף אינטרנט פשוט ללא שימוש במסגרת.
    • Bootstrap: תבניות Bootstrap הן פריסות מוגדרות מראש המשתמשות במסגרת Bootstrap. בחר באפשרות זו אם ברצונך ליצור דפי אינטרנט מהירי תגובה המשתמשים במסגרת Bootstrap.

    הערה:

    אם בכוונתך ליצור דפי אינטרנט מהירי תגובה, בחר במסגרת Bootstrap.

  5. אם אינך משתמש במסגרת:

    • Document Title: הזן את Document Title בשדה זה, ו- Dreamweaver יוסיף אותו באופן אוטומטי למקטע <head> של המסמך.
    • Doc Type: בחר סוג מסמך מהתפריט הנפתח DocType. ברוב המקרים, ניתן להשתמש באפשרות ברירת המחדל, HTML5.

    בחירה באחת מהגדרות סוג מסמך XHTML מתפריט Doc Type ‏הופכת את הדף לתואם XHTML. לדוגמה, ניתן ליצור מסמך HTML תואם XHTML על-ידי בחירה באפשרות XHTML 1.0 Transitional או באפשרות XHTML 1.0 Strict מהתפריט. XHTML ‏(Extensible Hypertext Markup Language) הוא ניסוח מחדש של מסמך HTML כיישום XML. באופן כללי, XHTML מעניק אותם יתרונות כמו XML, ומבטיח תאימות של מסמכי האינטרנט לגרסאות קודמות או עתידיות.

    הערה:

    למידע נוסף על XHTML, ראה באתר האינטרנט של World Wide Web Consortium ‏(W3C), שכולל את מפרט ‎XHTML 1.1 - Module-Based XHTML ‏(www.w3.org/TR/xhtml11/‎) ומפרטXHTML 1.0 ‎‏ (www.w3c.org/TR/xhtml1/‎), וכן אתרי אימות XHTML לקבצים מבוססי אינטרנט (http://validator.w3.org/‎) ולקבצים מקומיים (http://validator.w3.org/file-upload.html).

    • Attach CSS: צרף פריסת CSS קיימת לדף.  לשם כך, לחץ על הסמל Attach Style Sheet  לצד החלונית Attach CSS File ובחר גיליון סגנונות CSS.
    יצירת דף HTML חדש ללא שימוש במסגרת
    יצירת דף HTML חדש ללא שימוש במסגרת

    אם ברצונך ליצור דף חדש המבוסס על הקומפוזיציה שלך ב- Photoshop, בחר Use Extract כדי לבנות את הדף שלך מקומפוזיציות של Photoshop.

    בחירה באפשרות זו פותחת את החלונית Extract שבה ניתן להעלות קובץ PSD, ולהתחיל ביצירת דף HTML.

  6. אם ברצונך ליצור דף אינטרנט מהיר תגובה המשתמש במסגרת Bootstrap:

    • Bootstrap CSS: בחר ליצור Bootstrap CSS חדש, או השתמש בקובץ CSS קיים. אם אתה משתמש בקובץ CSS קיים, ספק את הנתיב לקובץ. ודא כי קובץ ה- CSS נמצא בתיקיית השורש של האתר.
    • Attach CSS: צרף פריסת CSS קיימת לדף.  לשם כך, לחץ על הסמל Attach Style Sheet  לצד החלונית Attach CSS File ובחר גיליון סגנונות CSS.
    • Include a pre-built layout: בחר באפשרות זו אם כבר יש לך פריסה. לחץ על Customize כדי לערוך את ערכי הרשת ומעברי השורה.
    יצירת דף HTML חדש המשתמש במסגרת Bootstrap
    יצירת דף HTML חדש המשתמש במסגרת Bootstrap

    אם ברצונך ליצור דף חדש המבוסס על הקומפוזיציה שלך ב- Photoshop, בחר Use Extract כדי לבנות את הדף שלך מקומפוזיציות של Photoshop.

    בחירה באפשרות זו פותחת את החלונית Extract שבה ניתן להעלות קובץ PSD, ולהתחיל ביצירת דף HTML.

  7. לחץ על הלחצן Preferences אם ברצונך להגדיר את העדפות המסמך של ברירת המחדל, כגון סוג המסמך, קידוד וסיומת קובץ.

  8. לחץ על הלחצן Create.

  9. שמור את המסמך החדש ‏(File >‏ Save).

  10. בתיבת הדו-שיח שמופיעה, נווט לתיקייה שברצונך לשמור בה את הקובץ.

    הערה:

    מומלץ לשמור את הקובץ באתר Dreamweaver.

  11. בתיבה File Name, הזן שם לקובץ.

    הימנע משימוש ברווחים ותווים מיוחדים בשמות הקובץ והתיקייה, ואל תזין שם קובץ המתחיל בספרה. במיוחד, אין להשתמש בתווים מיוחדים (כגון é,‎‏ ç או ¥) או בסימני פיסוק (כגון נקודותיים, לוכסנים, או נקודות) בשמות הקבצים המיועדים להעלאה לשרת מרוחק. שרתים רבים משנים תווים אלה בעת העלאת הקובץ והדבר עלול לגרום לניתוק קישורים לקבצים.

יצירת תבנית ריקה

תיבת הדו-שיח New Document מאפשרת ליצור תבניות של Dreamweaver. כברירת מחדל, תבניות נשמרות בתיקייה Templates של האתר.

הערה:

לא ניתן ליצור תבנית מבלי ליצור תחילה אתר. לקבלת מידע אודות אתרים ואופן יצירת אתר, ראה אודות אתרי Dreamweaver.

  1. בחר File >‏ New.

  2. בתיבת הדו-שיח New Document, בחר בקטגוריה Site Templates.

  3. בחר סוג מסמך מהתפריט הנפתח DocType. ברוב המקרים, מומלץ להשאיר את האפשרות מוגדרת על בחירת ברירת המחדל, XHTML 1.0 Transitional.

    בחירה באחת מהגדרות סוג מסמך XHTML מתפריט DocType ‏(DTD) הופכת את הדף לתואם XHTML. לדוגמה, ניתן ליצור מסמך HTML תואם XHTML על-ידי בחירה באפשרות XHTML 1.0 Transitional או באפשרות XHTML 1.0 Strict מהתפריט. XHTML ‏(Extensible Hypertext Markup Language) הוא ניסוח מחדש של מסמך HTML כיישום XML. באופן כללי, XHTML מעניק אותם יתרונות כמו XML, ומבטיח תאימות של מסמכי האינטרנט לגרסאות קודמות או עתידיות.

    הערה:

    למידע נוסף על XHTML, ראה באתר האינטרנט של World Wide Web Consortium ‏(W3C), שכולל את מפרט ‎XHTML 1.1 - Module-Based XHTML ‏(www.w3.org/TR/xhtml11/‎) ומפרטXHTML 1.0 ‎‏ (www.w3c.org/TR/xhtml1/‎), וכן אתרי אימות XHTML לקבצים מבוססי אינטרנט (http://validator.w3.org/‎) ולקבצים מקומיים (http://validator.w3.org/file-upload.html).

  4. בחר Update page כאשר תבנית משתנה אם ברצונך שהדף יתעדכן אוטומטית כאשר תערוך את התבנית.

  5. לחץ על הלחצן Create.

  6. שמור את המסמך החדש (File >‏ Save). אם טרם הוספת לתבנית אזורים הניתנים לעריכה, מופיעה תיבת דו-שיח שמציינת שאין במסמך אזורים הניתנים לעריכה. לחץ על OK כדי לסגור את תיבת הדו-שיח.

  7. בתיבת הדו-שיח Save As, בחר אתר שברצונך לשמור בו את התבנית.
  8. בתיבה File Name הזן שם לתבנית החדשה. אין צורך לצרף סיומת קובץ לשם התבנית. בעת לחיצה על הלחצן Save, סיומת ‎.dwt נוספת לתבנית החדשה, שנשמרת בתיקייה Templates של האתר.

    הימנע משימוש ברווחים ותווים מיוחדים בשמות הקובץ והתיקייה, ואל תזין שם קובץ המתחיל בספרה. במיוחד, אין להשתמש בתווים מיוחדים (כגון é,‎‏ ç או ¥) או בסימני פיסוק (כגון נקודותיים, לוכסנים, או נקודות) בשמות הקבצים המיועדים להעלאה לשרת מרוחק. שרתים רבים משנים תווים אלה בעת העלאת הקובץ והדבר עלול לגרום לניתוק קישורים לקבצים.

יצירת דף המבוסס על תבנית

ניתן לבחור, להציג בתצוגה מקדימה וליצור מסמך חדש באמצעות אחת מהתבניות הקיימות או תבניות ראשוניות של Dreamweaver. ניתן לבחור תבנית מכל אחד מהאתרים שהוגדרו ב-Dreamweaver באמצעות תיבת הדו-שיח New Document או ליצור מסמך חדש מתבנית קיימת באמצעות החלונית Assets.

יצירת מסמך המבוסס על תבנית

  1. בחר File >‏ New.

  2. בתיבת הדו-שיח New Document, בחר בקטגוריה Page From Template.

  3. בעמודה Site, בחר באתר Dreamweaver שכולל את התבנית שברצונך להשתמש בה, ולאחר מכן בחר בתבנית מהרשימה שמימין.

  4. בטל את הבחירה באפשרות Update Page When Template Changes אם אינך מעוניין לעדכן דף זה בכל פעם שאתה מבצע שינויים בתבנית שהדף מבוסס עליה.

  5. לחץ על הלחצן Preferences אם ברצונך להגדיר את העדפות המסמך של ברירת המחדל, כגון סוג המסמך, קידוד וסיומת קובץ.

  6. לחץ על הלחצן Get More Content אם ברצונך לפתוח את Dreamweaver Exchange המאפשר להוריד תוכן נוסף של עיצוב דפים.

  7. לחץ על הלחצן Create ושמור את המסמך (File >‏ Save).

יצירת מסמך מתבנית בחלונית Assets

  1. פתח את החלונית Assets‏ (Window >‏ Assets), אם היא אינה פתוחה.

  2. בחלונית Assets, לחץ על הסמל Templates‏  בצד שמאל להצגת רשימת התבניות באתר הנוכחי.

    הערה:

    אם יצרת זה עתה את התבנית שברצונך להחיל, ייתכן שיהיה עלייך ללחוץ על הלחצן Refresh כדי להציגה.

  3. לחץ לחיצה ימנית (Windows) או הקש Control ‏(Macintosh) תוך כדי לחיצה על התבנית שברצונך להחיל ולאחר מכן בחר באפשרות New From Template.

    המסמך נפתח בחלון Document.

  4. שמור את המסמך.

יצירת דף המבוסס על תבנית ראשונית של Dreamweaver

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

בעת יצירת מסמך המבוסס על תבנית ראשונית, Dreamweaver יוצר עותק של הקובץ, כך שלא תחליף את הקבצים הראשוניים.

ניתן להציג קובץ דוגמה בתצוגה מקדימה ולקרוא תיאור קצר של רכיבי העיצוב של מסמך בתיבת הדו-שיח New Document.

  1. בחר File >‏ New.

  2. בתיבת הדו-שיח New Document, בחר את הקטגוריה Starter Templates.

    תבניות ראשוניות ב- Dreamweaver
    תבניות ראשוניות ב- Dreamweaver

    ניתן לראות פרטי דף לדוגמה ואת ההצגה החזותית מצד ימין של החלונית בעת הבחירה באפשרויות שונות.

  3. לחץ על הלחצן Create.

    המסמך החדש וכל הקבצים הקשורים אליו נפתחים בחלון Document.

  4. שמור את המסמך (File >‏ Save).

יצירת קובצי קוד חדשים עבור שפות קידוד שונות

ניתן ליצור קובצי קוד עבור מספר שפות קידוד ב- Dreamweaver.

לקבלת מידע נוסף על תמיכה בכתיבת קוד ב- Dreamweaver, ראה אודות כתיבת קוד ב- Dreamweaver.

כדי ליצור קובץ קוד חדש ב- Dreamweaver, השתמש בהנחיות הבאות:

  1. בחר File ‏>‏ New Document.

  2. דרך Document Type, בחר את קובץ הקוד שברצונך ליצור.

  3. בחר בסוג המסמך שברצונך ליצור מהעמודה Document Type (כגון קובץ PHP).

    יצירת דף PHP חדש
    יצירת דף PHP חדש

  4. בהתבסס על סוג הקובץ שאתה בוחר, אפשרויות נוספות זמינות בעת יצירת מסמך.

    לדוגמה, אם אתה יוצר קובץ PHP, ניתן לבחור אפשרויות DocType ואפשרויות CSS מסוימות.

  5. לחץ על הלחצן Create. לאחר מכן שמור את המסמך (File >‏ Save).

שמירת מסמכים והחזרתם למצב הקודם

ניתן לשמור מסמך בשם ובמיקום הנוכחיים שלו, או לשמור עותק של מסמך בשם ובמיקום שונים.

הערה:

בעת מתן שמות לקבצים, יש להימנע משימוש ברווחים או בתווים מיוחדים בשמות הקובץ והתיקייה. במיוחד, אין להשתמש בתווים מיוחדים (כגון é,‎‏ ç או ¥) או בסימני פיסוק (כגון נקודותיים, לוכסנים, או נקודות) בשמות הקבצים המיועדים להעלאה לשרת מרוחק. שרתים רבים משנים תווים אלה בעת העלאת הקובץ והדבר עלול לגרום לניתוק קישורים לקבצים. כמו כן, אין להזין שם קובץ המתחיל בספרה.

שמירת מסמך

  1. בצע אחת מהפעולות הבאות:
    • לדריסת הגרסה הנוכחית השמורה בדיסק ולשמירת כל השינויים שביצעת, בחר File >‏ Save.
    • לשמירת הקובץ בתיקייה אחרת או בשם אחר, בחר File >‏ Save As.
  2. בתיבת הדו-שיח Save As שמופיעה, נווט לתיקייה שברצונך לשמור בה את הקובץ.
  3. בתיבת הטקסט File Name, הזן שם לקובץ.

  4. לחץ על Save לשמירת הקובץ.

שמירת כל המסמכים הפתוחים

  1. בחר בפקודה File >‏ Save All.

  2. אם יש מסמכים פתוחים שלא נשמרו, תיבת הדו-שיח Save As מוצגת עבור כל מסמך שלא נשמר.

    בתיבת הדו-שיח שמופיעה, נווט לתיקייה שברצונך לשמור בה את הקובץ.

  3. בתיבה File Name, הזן שם לקובץ ולחץ על Save.

חזרה לגרסה האחרונה שנשמרה של מסמך

  1. בחר בפקודה File >‏ Revert.

    תיבת דו-שיח מופיעה ומאפשרת לך לבחור אם ברצונך לבטל את השינויים ולחזור לגרסה הקודמת שנשמרה.

  2. לחץ על הלחצן Yes לחזרה לגרסה הקודמת, או לחץ על No לשמירה על השינויים.

    הערה:

    אם אתה שומר מסמך ולאחר מכן יוצא מ-Dreamweaver, לא ניתן לחזור לגרסה הקודמת שנשמרה של המסמך בעת הפעלת Dreamweaver מחדש.

הגדרת סוג מסמך וקידוד מסמך של ברירת מחדל העדפות

אם רוב הדפים באתר הם מסוג מסוים (כגון HTML,‏ PHP או JavaScript), ניתן להגדיר העדפות מסמך אשר יוצרות באופן אוטומטי מסמכים חדשים מסוג הקובץ שצוין.

  1. בחר Edit >‏ Preferences‏ (Windows) או Dreamweaver >‏ Preferences ‏(Macintosh).

    הערה:

    ניתן גם להגדיר העדפות מסמך חדש על-ידי לחיצה על הלחצן Preferences בתיבת הדו-שיח New Document בעת יצירת מסמך חדש.

  2. לחץ על New Document ברשימת הקטגוריות מצד שמאל.

  3. הגדר או שנה העדפות בהתאם לצורך ולחץ על OK כדי לשמור אותן.

    Default Document

    בחירת סוג מסמך שישמש לדפים שתיצור.

    Default Extension

    ציון סיומת הקובץ המועדפת (‎.htm או ‎.html) לדףי HTML חדשים שתיצור.

    הערה: אפשרות זו מבוטלת לסוגי קובץ אחרים.

    Default Document Type ‏(DDT)

    בחר אחת מההגדרות של סוג המסמך XHTML ‏(DTD) להפיכת דפים חדשים לתואמי XHTML. לדוגמה, ניתן ליצור מסמך HTML תואם XHTML על-ידי בחירה באפשרות XHTML 1.0 Transitional או באפשרות XHTML 1.0 Strict מהתפריט.

    Default Encoding

    ציון הקידוד שיעשה בו שימוש בעת יצירת דף חדש ובעת פתיחת מסמך שאינו מציין קידוד כלשהו.

    אם תבחר ב-Unicode‏ (UTF‑8) כקידוד המסמך, קידוד ישויות אינו נחוץ, מכיוון ש-UTF‑8 יכול לייצג היטב את כל התווים. בעת בחירה בקידוד מסמך אחר, ייתכן שיהיה צורך בקידוד ישות לייצוג תווים מסוימים. למידע נוסף על ישויות תווים, ראה www.w3.org/TR/REC-html40/sgml/entities.html.

    בעת בחירה בקידוד Unicode‏ (UTF‑8) כקידוד ברירת המחדל, ניתן לכלול ‎Byte Order Mark (BOM)‎ במסמך על-ידי בחירה באפשרות ‏Include Unicode Signature‏ (BOM)‏.

    BOM הוא 2-4 בתים בתחילת קובץ טקסט שמזהים קובץ זה כ-Unicode, וכן מזהים את סדר הבתים של הבתים הבאים. מפני ש-UTF‑8 אינו כולל סדר בתים, הוספת UTF‑8 BOM היא אופציונלית. בקידוד UTF-16 ו-UTF-32, סמן סדר בתים הוא הכרחי.

    Unicode Normalization Form

    בחר אחת מהאפשרויות הבאות בעת בחירה ב-Unicode‏ (UTF-8) כקידוד ברירת המחדל.

    ישנם ארבעה Unicode Normalization Forms. החשוב מביניהם הוא Normalization Form C, מפני שהוא התקן הנפוץ ביותר במודל התווים של World Wide Web‏.‏ ‏Adobe מספקת גם את שלושת תקני Unicode Normalization Forms האחרים.

    Show New Document Dialog Box on Control+N

    בטל את הבחירה באפשרות זו (“on Command+N" למשתמשי Macintosh) ליצירה אוטומטית של מסמך מסוג ברירת המחדל בעת שימוש בפקודת המקש.

    Unicode כולל תווים שנראים דומים אך ניתנים לאחסון במסמך בדרכים שונות. לדוגמה, ניתן לייצג את האות “ë”‏ כתו בודד (“e‑umlaut") או כשני תווים, “regular Latin e” + “combining umlaut”. תו משלב של Unicode הוא תו הנמצא בשימוש בשילוב עם התו הקודם, כך ששתי הנקודות מופיעות מעל התו “Latin e”. שתי הצורות יוצרות טיפוגרפיה חזותית זהה, אך כל אחת מהן שומרת תוכן שונה בקובץ.

    Normalization הוא תהליך המבטיח שכל התווים הניתנים לשמירה בצורות שונות נשמרים באותה צורה. כלומר, כל תווי “ë"‏ במסמך יישמרו כ-“e‑umlaut” או כ-“e” + “combining umlaut”,‏ במקום ששתי הצורות יישמרו במסמך אחד.

    למידע נוסף על Unicode Normalization והצורות בהן ניתן להשתמש בו, עיין באתר האינטרנט של Unicode בכתובת www.unicode.org/reports/tr15.

פתיחה ועריכה של מסמכים קיימים

ניתן לפתוח דף אינטרנט או מסמך מבוסס טקסט קיימים, בין אם הוא נוצר ב-Dreamweaver ובין אם לא, ולערוך אותו בתצוגת Design או Code.

אם המסמך שאתה פותח הוא קובץ Microsoft Word שנשמר כמסמך HTML, ניתן להשתמש בפקודה Tools‏ > Clean up Word HTML להסרת תגי סימון חיצוניים ש- Word מוסיף לקובצי HTML.

לניקוי HTML או XHTML שלא נוצר ב- Microsoft Word, השתמש בפקודה Tools‏ > Clean up HTML. לקבלת מידע נוסף, ראה ניקוי קובצי HTML של Microsoft Word.

ניתן גם לפתוח קובצי טקסט שאינם HTML, כגון קובצי JavaScript, קובצי XML, גיליונות סגנונות CSS, או קובצי טקסט שנשמרו במעבדי תמלילים או בעורכי טקסט.

  1. בחר File >‏ Open.

    הערה:

    ניתן גם לפתוח את הקבצים בחלונית Files.

  2. נווט לקובץ שברצונך לפתוח ובחר בו.

    הערה:

    אם טרם עשית זאת, מומלץ לסדר קבצים שבכוונתך לפתוח ולערוך באתר Dreamweaver, במקום לפתוח אותם ממיקום אחר. לקבלת מידע נוסף אודות אתרי Dreamweaver, ראה אודות אתרי Dreamweaver.

  3. לחץ על הלחצן Open.

    המסמך נפתח בחלון Document. כברירת מחדל, JavaScript‏, טקסט ו-CSS Style Sheets נפתחים בתצוגת Code. ניתן לעדכן את המסמך במהלך עבודה ב-Dreamweaver ולשמור את השינויים בקובץ.

Dreamweaver מאפשר להציג קבצים הקשורים למסמך הראשי, מבלי להעביר את ההתמקדות מהמסמך הראשי. לדוגמה, אם קובצי CSS ו-JavaScript קשורים למסמך ראשי, Dreamweaver מאפשר להציג ולערוך קבצים קשורים אלה בחלון Document ולהשאיר את החלון הראשי גלוי.

לקבלת מידע על קבצים קשורים דינמיים, ראה Open Dynamically Related Files.

הערה:

בעת עבודה עם קובצי HTML, אם ברצונך לבצע שינויים מהירים בקובצי CSS‏, JavaScript או PHP קשורים ללא צורך בניווט אל קובץ זה, ניתן להשתמש ב- Quick Edit. לקבלת מידע נוסף, ראה עריכה מהירה.

כברירת מחדל, Dreamweaver מציג את שמות כל הקבצים הקשורים למסמך ראשי בסרגל הכלים Related Files שמתחת לכותרת המסמך הראשי. סדר הלחצנים בסרגל הכלים נקבע בהתאם לסדר קישורי הקבצים הקשורים שקיימים במסמך הראשי.

הערה:

גם אם קובץ קשור חסר, Dreamweaver מציג את הלחצן המתאים בסרגל הכלים Related Files. עם זאת, Dreamweaver אינו מציג דבר בעת לחיצה על הלחצן.

Dreamweaver תומך בסוגים הבאים של קבצים קשורים:

  • קובצי סקריפט מצד הלקוח
  • קבצים נכללים בצד השרת
  • גיליונות סגנונות CSS חיצוניים (כולל גיליונות סגנונות מקוננים)

בצע אחת מהפעולות הבאות:

  • בסרגל הכלים Related Files שבראש המסמך, לחץ על שם הקובץ הקשור שברצונך לפתוח.

  • בסרגל הכלים Related Files, לחץ לחיצה ימנית על שם הקובץ הקשור שברצונך לפתוח ובחר בפקודה Open as Separate File מהתפריט תלוי-ההקשר. בעת פתיחת קובץ בשיטה זו, המסמך הראשי אינו נשאר גלוי בו-זמנית.

  1. מקם את נקודת ההכנסה בשורה או באזור שמושפע על-ידי קובץ קשור.

  2. המתן להופעת מציין Code Navigator ולחץ עליו כדי לפתוח את Code Navigator.

  3. הצבע על הפריטים ב-Code Navigator להצגת מידע נוסף עליהם. לדוגמה, אם ברצונך לשנות מאפיין צבע מסוים של CSS, אך אינך יודע באיזה כלל הוא שמור, תוכל למצוא את המאפיין בהצבעה על הכללים הזמינים ב-Code Navigator.

  4. לחץ על הפריט הרצוי לפתיחת הקובץ הקשור המתאים.

חזרה לקוד המקור של המסמך הראשי

  1. לחץ על הלחצן Source Code בסרגל הכלים Related Files.

בעת פתיחת קובץ קשור מתצוגת Design או Code ותצוגות Design (תצוגת Split), הקובץ הקשור מוצג בתצוגת Split.

ניתן לבחור View‏ > Split ולבחור מבין אפשרויות תצוגת Split השונות אם ברצונך להתאים אישית את תצוגת Split.

אם ברצונך להציג את הקבצים הקשורים בתצוגת Code בלבד, בחר Code בחלק העליון של סרגל הכלים.

הערה:

תצוגת Standard Code אינה מאפשרת להציג מסמכים קשורים ולהציג את קוד המקור של המסמך הראשי בו-זמנית.

הערה:

התצוגה Code באפשרות התצוגה מתייחסת לקוד המקור של המסמך הראשי. לדוגמה, בעת בחירה באפשרות View > ‏Code View on Top,‏ Dreamweaver מציג את קוד המקור של המסמך הראשי במחצית העליונה של חלון המסמך. בעת בחירה באפשרות View > ‏Code View on Left, ‏Dreamweaver מציג את קוד המקור של המסמך הראשי בצד השמאלי של חלון Document.

כברירת מחדל, בעת פתיחת קובץ HTML‏, Dreamweaver מציג את הקבצים הקשורים בכרטיסיות נפרדות. אם ברצונך לבטל פונקציונליות זו, באפשרותך לבטל אותה באמצעות החלונית Preferences.

  1. בחר Edit >‏ Preferences‏ (Windows) או Dreamweaver >‏ Preferences ‏(Macintosh).

  2. בקטגוריה General, בטל את הבחירה באפשרות Enable Related Files.

התכונה Dynamically-Related Files (קבצים הקשורים באופן דינמי‬) מרחיבה באופן דינמי את הפונקציונליות של התכונה Related Files (קבצים קשורים) בכך שהיא מאפשרת לך לראות את הקבצים הקשורים של דפים דינמיים בסרגל הכלים Related Files. בפרט, התכונה Dynamically-Related Files מאפשרת לך לראות את הקבצים הנכללים הדינמיים הרבים אשר דרושים להפקת קוד זמן הריצה עבור מסגרות נפוצות של קוד פתוח מסוג PHP Content Management System ‏(CMS), כגון WordPress, ‏Drupal ו-Joomla!‎.

כדי להשתמש בתכונה Dynamically-Related Files, דרושה לך גישה לשרת יישומים מקומי או מרוחק של PHP שבו פועל WordPress, ‏Drupal או Joomla!‎. שיטה נפוצה אחת לבדיקת דפים היא הגדרת שרת יישומים מקומי מארח מסוג PHP ובדיקת הדפים באופן מקומי.

לפני בדיקת הדפים, יש לבצע את השלבים הבאים:

  • הגדר אתר של Dreamweaver והקפד למלא את תיבת הטקסט Web URL בתיבת הדו-שיח Site Setup.

  • הגדר שרת יישומים מסוג PHP.

    הערה: השרת חייב לפעול לפני שתנסה לעבוד עם תכונת הקבצים הקשורים באופן דינמי ב-Dreamweaver.

  • התקן את WordPress, ‏Drupal או Joomla!‎ בשרת היישומים. למידע נוסף, ראו:

  • ב-Dreamweaver, הגדר תיקייה מקומית שבה תוריד ותערוך את קובצי CMS.

  • הגדר את המיקום של קובצי WordPress,‏ Drupal או Joomla שהותקנו כתיקיית הבדיקות המרוחקת שלך.

  • הורד (השג) את קובצי CMS מהתיקייה המרוחקת.

בעת פתיחת דף המשויך לקבצים הקשורים באופן דינמי, Dreamweaver יכול לגלות את הקבצים באופן אוטומטי או לאפשר לך לגלות אותם באופן ידני (על-ידי לחיצה על קישור בסרגל Info מעל העמוד). הגדרת ברירת המחדל היא גילוי ידני.

  1. בחר Edit >‏ Preferences‏ (Windows) או Dreamweaver >‏ Preferences ‏(Macintosh OS).

  2. בקטגוריה General, ודא שהאפשרות Enable Related Files נבחרה.

  3. בחר Manually או Automatically מהתפריט הנפתח Dynamically-Related Files. ניתן גם להשבית את הגילוי לגמרי על-ידי בחירה באפשרות Disabled.

  1. פתח דף שמשויכים לו קבצים הקשורים באופן דינמי—לדוגמה, דף שורש האתר index.php של אתר WordPress, ‏Drupal או Joomla!‎.

  2. אם הגילוי של קבצים הקשורים באופן דינמי מוגדר לידני (ברירת המחדל), לחץ על הקישור Discover בסרגל Info המופיע מעל הדף בחלון Document.

    אם הגילוי של קבצים הקשורים באופן דינמי מופעל באופן אוטומטי, רשימה של קבצים קשורים באופן דינמי מופיעה בסרגל הכלים Related Files.

הסדר של קבצים קשורים וקבצים קשורים באופן דינמי בסרגל הכלים Related Files הוא:

  • קבצים קשורים סטטיים (קבצים קשורים שאינם דורשים עיבוד דינמי כלשהו)
  • קבצים קשורים חיצוניים (קובצי ‎.css ו- ‎.js) המצורפים לקבצים נכללים של שרת נתיבים דינמיים
  • קבצים נכללים של שרת נתיבים דינמיים (קובצי ‎.php, ‏‎.inc ו -‎.module)

לעתים קרובות יש מספר רב של קבצים קשורים וקבצים קשורים באופן דינמי, ולכן Dreamweaver מאפשר לך לסנן קבצים קשורים כדי שתוכל לאתר במדויק את הקבצים שברצונך לעבוד איתם.

  1. פתח דף שמשויכים לו קבצים קשורים.

  2. בצע גילוי של קבצים הקשורים באופן דינמי אם יש צורך.

  3. לחץ על הסמל Filter Related Files בצד הימני של סרגל הכלים Related Files.

  4. בחר את סוגי הקבצים שברצונך לראות בסרגל הכלים Related Files. כברירת מחדל, Dreamweaver בוחר את כל הקבצים הקשורים.

  5. כדי ליצור מסנן מותאם אישית, לחץ על הסמל Filter Related Files ובחר Custom Filter.

    תיבת הדו-שיח Custom Filter מאפשרת לסנן רק שמות קבצים מדויקים (style.css), סיומות קובץ (‎.php), וביטויים של תווים כלליים המשתמשים בכוכביות (*menu*). ניתן לסנן לפי ביטויים רבים של תווים כלליים על-ידי הפרדת כל ביטוי באמצעות נקודה-פסיק (לדוגמה, style.css;*.js;*tpl.php).

הערה:

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

ניקוי קובצי HTML של Microsoft Word

ניתן לפתוח מסמכים שנשמרו ב- Microsoft Word‏ (Microsoft Word 97 ואילך) כקובצי HTML, ולאחר מכן להסיר קוד HTML חיצוני שנוצר על-ידי Word באמצעות הפקודה Tools‏ > Clean Up Word HTML.

הקוד ש- Dreamweaver מסיר משמש את Word בעיקר לעיצוב ולהצגה של מסמכים ב- Word ואינו נחוץ להצגת קובץ HTML.

שמור עותק גיבוי של מסמך Word ‏(‎.doc) המקורי, מפני שייתכן שלא תוכל לפתוח מחדש את מסמך HTML ב- Word לאחר שניקית את קובץ ה- HTML.

הערה:

לניקוי HTML או XHTML שלא נוצר ב- Microsoft Word, השתמש בפקודה Tools‏ > Clean up HTML.

  1. שמור את מסמך Microsoft Word כקובץ HTML.

    הערה:

    ב-Windows, סגור את הקובץ ב-Word למניעת הפרת שיתוף.

  2. פתח את קובץ HTML ב-Dreamweaver.

    להצגת קוד HTML שנוצר ב-Word, עבור לתצוגת Code‏ (View >‏ Code).

  3. בחר Tools ‏>‏ Clean Up Word HTML.

    הערה:

    אם Dreamweaver אינו יכול לקבוע איזו גרסת Word שימשה לשמירת הקובץ, בחר בגרסה הנכונה מהתפריט הנפתח.

  4. בחר (או בטל את הבחירה) באפשרויות לניקוי. ההעדפות שתזין נשמרות כהגדרות ניקוי של ברירת המחדל.

    Dreamweaver מחיל את הגדרות הניקוי על מסמך HTML ומציג יומן של השינויים (אלא אם כן ביטלת אפשרות זו בתיבת הדו-שיח).

    אפשרויות ניקוי HTML של Microsoft Word
    אפשרויות ניקוי HTML של Microsoft Word

    Remove All Word Specific Markup

    הסרת HTML ייחודי ל-Microsoft Word, כולל XML מתגיHTML, מטא-נתונים מותאמים אישית ותגי קישורים של Word בראש המסמך, סימון Word XML, תגי תנאי ותוכנם, פסקאות ריקות ושוליים של סגנונות. ניתן לבחור כל אחת מהאפשרויות בנפרד בכרטיסייה Detailed.

    Clean Up CSS

    הסרת CSS ייחודי ל-Word, כולל סגנונות CSS בתוך שורה כשהדבר אפשרי (כשסגנון האב כולל מאפייני סגנון זהים), תכונות סגנון שמתחילות ב-“mso”, הצהרות סגנון שאינן CSS, תכונות סגנון CSS מטבלאות וכל הגדרות הסגנון שאינן נמצאות בשימוש מראש המסמך. ניתן להמשיך להתאים אישית אפשרות זו בכרטיסייה Detailed.

    Clean Up <font> Tags

    הסרת תגי HTML, המרת טקסט הגוף של ברירת המחדל לטקסט HTML בגודל 2.

    Fix Invalidly Nested Tags

    הסרת תגי סימון הגופן שנוספים על-ידי Word מחוץ לתגי הפסקה והכותרת (ברמת הגוש).

    Apply Source Formatting

    החלת אפשרויות תבנית המקור שצוינו למסמך בהעדפות HTML Format ובקובץ SourceFormat.txt.

    Show Log On Completion

    הצגת תיבת התראה עם פרטים על השינויים שבוצעו במסמך מייד לאחר הניקוי.

  5. לחץ על OK, או לחץ על הכרטיסייה Detailed אם ברצונך להמשיך להתאים אישית את האפשרויות Remove All Word Specific Markup ו-Clean Up CSS, ולאחר מכן לחץ על OK.

עבודה זו בוצעה ברישיון של Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  הודעות המתפרסמות ב- Twitter™‎ ו- Facebook אינן מכוסות בתנאי Creative Commons.

הצהרות משפטיות   |   מדיניות פרטיות מקוונת