שימוש בעזרים חזותיים לפריסה

עודכן לאחרונה בתאריך 27 באפריל 2021

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

הגדרת סרגלים

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

  • כדי ‏‫להפעיל ולבטל סרגלים, בחר View‏ > Design View Options‏ > Rules‏ > Show/Hide.
  • כדי לשנות את המקור, גרור את סמל מקור הסרגל (בפינה השמאלית העליונה של תצוגת Design בחלון המסמך) לכל מקום רצוי בעמוד.
  • לאיפוס המקור למיקום ברירת המחדל שלו, בחר View‏ > Design View Options‏ > Rulers‏ > Reset Origin.
  • לשינוי יחידת המידה, בחר View > Rulers, ובחר Pixels‏, Inches או Centimeters.

הגדרת קווי עזר בפריסה

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

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

צרו מדריך אופקי או אנכי

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

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

הצגה או הסתרה של קווי עזר

בחרו View > Guides > Show Guides.

הצמדת רכיבים לקווי עזר

  • להצמדת רכיבים לקווי עזר, בחר View‏ > Design View Options‏ > Guides‏ > Snap to Guides.
  • להצמדת קווי עזר לרכיבים, בחר View‏ > Design View Options‏ > Guides‏ > Guides Snap to Elements.
פתק

כשמשנים גודל של רכיבים, כגון רכיבים עם מיקום מוחלט (רכיבי AP), טבלאות ותמונות, הרכיבים שגודלם השתנה מוצמדים לקווי העזר.

נעילה או שחרור של כל קווי העזר

בחר View ‏> Design View Options‏ > Guides‏ > Lock Guides.

הצגה והזזת קו עזר למיקום מסוים

החזיקו את מצביע העכבר מעל המדריך כדי להציג את המיקום שלו.
לחץ פעמיים על קו העזר.
הזינו את המיקום החדש בתיבת הדו-שיח Move Guide ולחצו OK.

תצוגת המרחק בין קווי עזר

לחצו Control (Windows) או Command (Macintosh) והחזיקו את מצביע העכבר בכל מקום בין שני ה-Guides.
פתק

יחידת המידה זהה ליחידת המידה המשמשת עבור הסרגלים.

חיקוי הקיפול (האזור הנראה) של דפדפן אינטרנט

בחר View‏ > Design View Options‏ > Guides ולאחר מכן בחר גודל דפדפן מוגדר מראש מהתפריט.

הסרת קו עזר

גרור את קו העזר אל מחוץ למסמך.

שינוי הגדרות של קווי עזר

בחר View‏ > Design View Options‏ > Guides‏ > Edit Guides, הגדר את האפשרויות הבאות ולחץ על OK.

Guide color

מציין את צבע קווי העזר. לחצו על דוגמית הצבע ובחרו צבע מ-Color Picker (בורר הצבעים), או הקלידו מספר הקסדצימלי בתיבת הטקסט.

Distance Color

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

Show Guides

גורם לקווי העזר להופיע בתצוגה Design.

Snap to Guides

גורם לרכיבי עמוד להצטמד למדריכים כאשר אתם מזיזים רכיבים ברחבי העמוד.

Lock Guides

נועל קווי עזר במקומם.

Guides Snap to Elements

מצמיד קווי עזר לרכיבים בדף בעת גרירת קווי העזר.

Clear All

מנקה את כל קווי העזר מהדף.

שימוש בקווי עזר עם תבניות

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

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

שימוש ברשת הפריסה

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

הצגה או הסתרה של הרשת

בחר View‏ > Design View Options ‏> Grid ‏> Show Grid.

הפעלה או ביטול הצמדה

בחר View‏ > Design View Options‏ > Grid ‏> Snap to Grid.

שינוי הגדרות רשת

בחר View‏ > Design View Options‏ > Grid‏ > Grid Settings.

הגדר את האפשרויות הרצויות ולחץ על OK להחלת השינויים.

Color

מציין את צבע קווי הרשת. לחצו על דוגמית הצבע ובחרו צבע מה-Color Picker (בורר הצבעים), או הזינו מספר הקסדצימלי בתיבת הטקסט.

Show Grid

גורם לרשת להופיע בתצוגה Design.

Snap to Grid

גורם לרכיבי עמוד להיצמד לקווי הרשת.

Spacing

שולט במרחק שבין קווי הרשת. הזינו מספר ובחרו פיקסלים, אינצ'ים או סנטימטרים מהתפריט.

Display

מציין אם קווי הרשת יופיעו כקווים או כנקודות.

פתק

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

שימוש בתמונת עקיבה

ניתן להשתמש בתמונת מעקב כמדריך ליצירה מחדש של עיצוב עמוד שנוצר ביישום גרפיקה כמו Adobe Freehand או Fireworks.

תמונת מעקב היא תמונת JPEG,‏ GIF או PNG שממוקמת ברקע של חלון המסמך. ניתן להסתיר את התמונה, לקבוע את האטימות שלה ולשנות את המיקום שלה.

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

הצבתתמונת מעקב בחלון המסמך

בצע אחת מהפעולות הבאות:
  • בחר View‏ > Design View Options‏ > Tracing Image‏ > Load.

  • בחר File‏ > Page Properties, לאחר מכן בקטגוריה Tracing Image, לחץ על Browse (ליד תיבת הטקסט Tracing Image).

נווט לקובץ התמונה שלך ולחץ על OK.

בתיבת הדו-שיח 'מאפייני עמוד', הגדירו את השקיפות של התמונה על ידי גרירת המחוון 'שקיפות תמונה', ואז לחצו על OK.

כדי לעבור לתמונת עקיבה אחרת או כדי לשנות את מידת השקיפות של תמונת העקיבה הנוכחית בכל עת, בחר File‏ > Page Properties.

הצגה או הסתרה של תמונת העקיבה

בחר View‏ > Design View Options‏ >Tracing Image‏ > Show.

שינוי מיקום תמונת מעקב

בחר View‏ > Design View Options‏ > Tracing Image‏ > Adjust Position.

  • כדי להגדיר במדויק את המיקום של תמונת המעקב, הזינו ערכי קואורדינטות בתיבות הטקסט X ו-Y.

  • כדי להזיז את התמונה פיקסל אחד בכל פעם, השתמשו במקשי החצים.

  • כדי להזיז את התמונה 5 px בכל פעם, לחצו על Shift ועל מקש חץ.

איפוס מיקום תמונת המעקב

בחר View‏ > Design View Options‏ > Tracing Image‏ > Reset Position.

תמונת המעקב חוזרת לפינה השמאלית העליונה של חלון המסמך (0,0).

יישור תמונת המעקב לרכיב שנבחר

בחרו רכיב בחלון המסמך.

בחר View‏ > Design View Options‏ > Tracing Image‏ > Align with Selection.

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

הגדרת מאפייני תמונת קווים

הגדירו מאפיינים עבור תמונת קווים (שהיא קובץ תמונה לשימוש כמדריך בעיצוב הדף שלכם).

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

  • לחץ על File‏ > Page Properties
  • לחץ על Window‏ > Properties ולחץ על Page Properties במפקח המאפיינים של הטקסט.

מתוך תיבת הדו-שיח Page Properties, בחר Tracing Image. בחלונית זו ניתן להגדיר את האפשרויות הבאות:

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