בחלונית Sources שכלולה בחלונית CSS Designer, לחץ על 
ולאחר מכן לחץ על אחת מהאפשרויות הבאות:
- יצירת קובץ CSS חדש: ליצירה וצירוף של קובץ CSS חדש למסמך
- צירוף קובץ CSS קיים: לצירוף קובץ CSS קיים למסמך
- הגדרה בדף: להגדרת CSS בתוך המסמך
עודכן לאחרונה בתאריך
25 באפריל 2024
למד כיצד להשתמש בחלונית CSS Designer כדי ליצור או לצרף גיליונות סגנונות, שאילתות מדיה ובוררים, ולהגדיר מאפייני CSS.
לוח CSS Designer (Window > CSS Designer) הוא מפקח מאפייני CSS המאפשר ליצור "באופן ויזואלי" סגנונות CSS, קבצים ולהגדיר מאפיינים, יחד עם שאילתות מדיה.
החלקים הבאים זמינים בממשק CSS Designer:
- מקורות: אוסף של קבצי CSS המשויכים לפרויקט
- @Media: שאילתות מדיה לשליטה בגודל המסך
- בוררים: בוררים המשויכים לשאילתת המדיה הנבחרת בלוח @Media
- מאפיינים: מאפיינים המשויכים לבורר הנבחר, עם אפשרות להציג רק את המאפיינים שהוגדרו
באמצעות CSS Designer, תוכלו לערוך כלל יחיד בגליון סגנונות CSS (השתמשו בכרטיסייה Current ב-CSS Designer), או אם אתם מעדיפים, תוכלו לעבוד ישירות בגליון הסגנונות CSS (השתמשו בכרטיסייה All ב-CSS Designer).
יצירה וצירוף של גיליונות סגנונות
בהתאם לאפשרות שתבחר, תוצג אחת מתיבות הדו-שיח Create A New CSS File או Attach Existing CSS File.
לחץ על Browse כדי לציין את השם של קובץ ה- CSS, ואם אתה יוצר CSS, את המיקום שבו יש לשמור את הקובץ החדש.
בצע אחת מהפעולות הבאות:
- לחץ על Link כדי לקשר את המסמך שנוצר ב- Dreamweaver לקובץ ה- CSS
- לחץ על Import כדי לייבא את קובץ ה- CSS לתוך המסמך.
(אופציונלי) לחץ על Conditional Usage וציין את שאילתת המדיה שברצונך לשייך לקובץ ה- CSS.
הגדרת שאילתות מדיה
בחלונית CSS Designer, לחץ על CSS Source בחלונית Sources.
לחץ על 
בחלונית @Media כדי להוסיף שאילתת מדיה חדשה.
תוצג תיבת הדו-שיח Define Media Query שבה מפורטים כל תנאי שאילתת המדיה הנתמכים ב- Dreamweaver.
בחר תנאים שיענו על דרישותיך.
הקפד לציין ערכים חוקיים עבור כל התנאים שתבחר. אחרת, יצירת שאילתות המדיה המתאימות לא תושלם בהצלחה.
פתק
רק פעולת 'And' נתמכת עבור תנאים מרובים.
אם תוסיף תנאים לשאילתת מדיה דרך קוד, רק התנאים הנתמכים יתווספו לתיבת הדו-שיח Define Media Query. אך בתיבת הטקסט Code שכלולה בתיבת הדו-שיח יוצג הקוד במלואו (כולל תנאים שאינם נתמכים).
אם אתה לוחץ על שאילתת מדיה בתצוגה Design/Live, אזור התצוגה המלבני משתנה כדי להתאים לשאילתת המדיה שנבחרה. כדי להציג את אזור התצוגה בגודל מלא, לחץ על Global בחלונית Media@.
הגדרת בוררי CSS
בלוח CSS Designer, בחרו מקור CSS בחלונית מקורות או שאילתת מדיה בחלונית @Media.
בחלונית Selectors, לחץ על . בהתבסס על האלמנט הנבחר במסמך, CSS Designer מזהה בחוכמה ומציע לכם את הבורר הרלוונטי (עד שלושה כללים).
בצע אחד או יותר מהצעדים הבאים:
- השתמשו במקשי החץ למעלה או למטה כדי להפוך את הבורר המוצע לספציפי יותר או פחות ספציפי.
- מחק את הכלל המוצע והזן את הבורר הרצוי. הקפד להזין את שם הבורר ביחד עם הסימון של סוג הבורר. לדוגמה, אם אתה מציין מזהה, הוסף בתחילת שם הבורר את הסימן '#'.
- כדי לחפש בורר מסוים, השתמש בתיבת החיפוש בחלקה העליון של החלונית.
- כדי לשנות שם של בורר, לחץ על הבורר והקלד את השם הנדרש.
- כדי לבצע סידור מחדש של הבוררים, גרור את הבוררים למיקום הנדרש.
- כדי להעביר בורר ממקור אחד למקור אחר, גרור את הבורר למקור הנדרש בחלונית Source.
- כדי לשכפל בורר במקור שנבחר, לחץ לחיצה ימנית על הבורר ולאחר מכן לחץ על Duplicate.
- כדי לשכפל בורר ולהוסיף אותו לשאילתת מדיה, לחץ לחיצה ימנית על הבורר, רחף עם העכבר מעל Duplicate Into Media Query ובחר את שאילתת המדיה הרצויה.
הערה: האפשרות Duplicate Into Media Query זמינה רק כאשר המקור של הבורר שנבחר מכיל שאילתות מדיה. לא ניתן לשכפל בורר ממקור אחד לשאילתת מדיה של מקור אחר.
סגנונות של העתקה והדבקה
כעת ניתן להעתיק סגנונות מבורר אחד ולהדביק אותם בבורר אחר. ניתן להעתיק את כל הסגנונות, או להעתיק רק קטגוריה ספציפית של סגנונות כגון Layout, Text ו- Border.
לחצו בלחיצה ימנית על בורר ובחרו מהאפשרויות הזמינות:
- אם לבורר אין סגנונות, האפשרויות Copy ו-Copy All Styles מושבתות.
- האפשרות Paste Styles מושבתת עבור אתרים מרוחקים שאינם ניתנים לעריכה. אבל העתקה והעתקת הכל
סגנונות זמינים. - Pasting Styles שכבר קיים בחלקו בבורר (Overlapping) פועל כרגיל. איחוד
של כל הבוררים מודבק. - העתקה-הדבקה של סגנונות עובדת גם עבור קישורים שונים של קבצי CSS – Import, Link, Inline
Styles.
סידור מחדש של בוררים
לחצו על הבורר הנדרש וגררו אותו למיקום החדש עם חלונית הבוררים.
הגדרת מאפייני CSS
המאפיינים מקובצים בקטגוריות הבאות ומיוצגים באמצעות סמלים שונים בחלקה העליון של החלונית Properties:
- Layout
- Text
- Border
- Background
- עוד (רשימה של מאפייני "טקסט בלבד" ולא מאפיינים עם פקדים ויזואליים)
פתק
לפני עריכת המאפיינים של בורר CSS, זהה את הרכיבים המשויכים לאותו בורר CSS בעזרת Reverse Inspect. זיהוי זה יסייע לך להעריך אם השינויים באמת נדרשים בכל הרכיבים שסומנו בפעולת Reverse Inspect.
סמן את תיבת הסימון Show Set כדי להציג רק את המאפיינים שהוגדרו. כדי להציג את כל המאפיינים שניתן לציין עבור בורר, בטל את הסימון בתיבת הסימון Show Set.
כדי להגדיר מאפיין, כגון רוחב או צמצום גבול, לחץ על האפשרות הנדרשת שמוצגת סמוך למאפיין בחלונית Properties.
מאפיינים שנדרסו מצויינים בעזרת תבנית של קו חוצה.
הגדרת שוליים, עיבוי ומיקום
באמצעות פקדי התיבה בחלונית Properties ב-CSS Designer, תוכל להגדיר במהירות מאפייני שוליים, עיבוי ומיקום. אם אתם מעדיפים קוד, תוכלו לציין קוד מקוצר עבור שוליים וריווח בתיבות העריכה המהירה, כפי שמוצג בדוגמה זו.
לחץ על הערכים והקלד את הערך הנדרש. אם אתם רוצים שכל ארבעת הערכים יהיו זהים וישתנו בו־זמנית, לחצו על סמל הקישור במרכז.
בכל נקודת זמן, תוכלו להשבית או למחוק ערכים ספציפיים, למשל, ערך השוליים השמאליים תוך שמירה על הערכים הימניים, העליונים והתחתונים.
הגדרת מאפייני גבול
מאפייני בקרת גבול מאורגנים בכרטיסיות לוגיות כדי לעזור לכם לצפות או לשנות במהירות את המאפיינים.
אם אתם מעדיפים קוד, תוכלו לציין קוד מקוצר עבור גבולות ורדיוס גבול בתיבת הטקסט לעריכה מהירה.
כדי להגדיר מאפייני בקרת גבול, ראשית עליך להגדיר את המאפיינים בכרטיסייה All Sides. הכרטיסיות האחרות מופעלות אז והמאפיינים שהוגדרו בכרטיסייה 'כל הצדדים' משתקפים עבור גבולות בודדים.
כשאתם משנים מאפיין בכרטיסיות גבול בודדות, הערך של המאפיין המתאים בכרטיסייה 'כל הצדדים' משתנה ל־'undefined' (ערך ברירת מחדל).
בדוגמה למטה, צבע הגבול הוגדר לשחור ואז שונה לאדום עבור הגבול העליון.
הקוד שמוכנס מבוסס על הגדרת ההעדפה עבור קוד מקוצר או מורחב.
במהלך פעולת Inspect, מיקוד הכרטיסיות מתבסס על מתן עדיפות לכרטיסיות "קבועות". העדיפות הגבוהה ביותר ניתנת לכרטיסייה All sides ולאחריה לכרטיסיות Top, Right, Bottom ו-Left. למשל, אם רק הערך העליון של גבול מוגדר, המצב המחושב לוקח את המיקוד לכרטיסייה "עליון" ומתעלם מהכרטיסייה "כל הצדדים" מכיוון שהכרטיסייה "כל הצדדים" אינה מוגדרת.
השבתה או מחיקה של מאפיינים
התכונה Disable/Enable CSS Property מאפשרת לך לציין כהערה חלקים מה-CSS מהחלונית CSS Designer, מבלי שתצטרך לבצע שינויים ישירות בקוד. בעת ציון כהערה של חלקים מה-CSS, ניתן לראות מה ההשפעה של מאפיינים וערכים מסוימים על הדף.
בעת ביטול מאפיין CSS, Dreamweaver מוסיף תגי הערה של CSS ואת התווית [disabled] למאפיין CSS שביטלת. לאחר מכן תוכל להפעיל מחדש בקלות את מאפיין ה-CSS המבוטל לפי העדפתך.
תוכלו להשבית או למחוק כל מאפיין באמצעות ה־CSS Designer.
צילומי המסך הבאים מציגים את סמלי ההשבתה והמחיקה עבור המאפיין גובה. תוכל לראות סמלים אלה כאשר תרחף עם העכבר מעל מאפיין.
תוכלו גם להשתמש בפקדי המחיקה וההשבתה ברמת קבוצת בקרת הגבול כדי להחיל פעולות אלה על כל המאפיינים.
קיצורי מקשים
ניתן להוסיף או למחוק בוררים ומאפיינים של CSS באמצעות קיצורי מקשים. תוכלו גם לנווט בין קבוצות המאפיינים בחלונית המאפיינים.
|
קיצור דרך |
תהליך עבודה |
|
CTRL + Alt + [Shift =] |
הוספת בורר (אם הפקד נמצא במקטע הבורר) |
|
CTRL + Alt + S |
הוספת בורר (אם הפקד נמצא במקום כלשהו ביישום) |
|
CTRL + Alt + [Shift =] |
הוספת מאפיין (אם הפקד נמצא במקטע המאפיין) |
|
CTRL + Alt + P |
הוספת מאפיין (אם הפקד נמצא במקום כלשהו ביישום) |
|
בחירה + Delete |
מחיקת הבורר, אם נבחר בורר |
|
CTRL + Alt + (PgUp/PgDn) |
דילוג בין קטעים מתוך חלונית המשנה של המאפיינים |
זיהוי רכיבי דף המשויכים לבורר CSS
לרוב, בורר CSS יחיד משויך לרכיבים רבים בדף. לדוגמה, ייתכן שהטקסט באזור התוכן המרכזי של הדף והטקסט בכותרת העליונה ובכותרת התחתונה יהיו כולם משויכים לאותו בורר CSS. עריכת מאפיינים של בורר CSS משפיעה על כל הרכיבים המשויכים לאותו בורר, לרבות רכיבים שאותם כלל לא התכוונת לשנות.
Live Highlight מסייע לך לזהות את כל הרכיבים המשויכים לבורר CSS. אם ברצונך לשנות רק רכיב אחד או רק חלק מהרכיבים, תוכל ליצור בורר CSS חדש עבור רכיבים אלה ולאחר מכן לערוך את המאפיינים.
כדי לזהות את רכיבי הדף המשויכים לבורר CSS, העבר את סמן העכבר מעל הבורר במצב Live View (כאשר האפשרות Live Code מושבתת). Dreamweaver מסמן את הרכיבים המשויכים בקווים מקווקווים.
כדי לנעול את הסימון של הרכיבים, לחץ על הבורר. כעת, הרכיבים מסומנים בגבול כחול.
כדי להסיר את הסימון הכחול המקיף את הרכיבים, לחץ שוב על הבורר.
Live Highlight מופעל כברירת מחדל. כדי להשבית את Live Highlight, לחץ על אפשרויות Live View בסרגל הכלים של המסמכים ולאחר מכן לחץ על Disable Live Highlight.
קישור לגיליון סגנונות חיצוני של CSS
כשעורכים גיליון סגנונות CSS חיצוני, כל המסמכים המקושרים אליו מתעדכנים ומשקפים את שינויי העריכה.
ניתן לייצא סגנונות CSS קיימים במסמך כדי ליצור גיליון סגנונות CSS חדש, ולקשר את המסמך לגיליון סגנונות חיצוני כדי להחיל את הסגנונות שבו.
ניתן לקשר לדפים כל גיליון סגנונות שיצרת באתר או העתקת לאתר.
פתח את CSS Designer על ידי ביצוע אחת מהפעולות הבאות:
- בחר ב-Window > CSS Designer.
- הקישו על Shift + F11.
ב-CSS Designer, לחץ על הסימן + ליד Sources, ובחר Attach Existing CSS File.
בצע אחת מהפעולות הבאות:
- לחץ על Browse כדי לבחור גיליון סגנונות CSS חיצוני.
- הקלידו את הנתיב לגיליון הסגנונות בתיבה File/URL.
לחץ על הלחצן Preview כדי לוודא שגיליון הסגנונות מחיל את הסגנונות הרצויים על הדף הנוכחי.
אם הסגנונות שהוחלו אינם הסגנונות שציפית להם, לחץ על Cancel להסרת גיליון הסגנונות. הדף יחזור למראה הקודם שלו.
לחץ על OK.
פריטים דומים נוספים
בניית אתרי אינטרנט יפהפיים ב-Dreamweaver
עיצוב כתיבת קוד וניהול אתרי אינטרנט דינמיים בכלי רב עוצמה כולל.
