למד כיצד להשתמש בחלונית CSS Designer כדי ליצור או לצרף גיליונות סגנונות, שאילתות מדיה ובוררים, ולהגדיר מאפייני CSS.

החלונית CSS Designer‏ (Window‏ ‏> CSS Designer) היא 'מפקח מאפיינים של CSS' המאפשר לך ליצור באופן "חזותי" סגנונות, קבצים ומאפייני קבוצות של CSS, וכן שאילתות מדיה.

הסעיפים הבאים זמינים בממשק של CSS Designer:

  • מקורות: אוסף של קובצי CSS המשויכים לפרוייקט
  • ‎@Media: שאילתות מדיה לקביעת גודל המסך
  • Selectors: בוררים המשויכים לשאילתת המדיה שנבחרה בחלונית ‎@Media
  • Properties: מאפיינים המשויכים לבורר שנבחר, עם אפשרות להציג רק את המאפיינים שהוגדרו

באמצעות CSS Designer, תוכל לערוך כלל בודד בגיליון סגנונות של CSS (השתמש בכרטיסייה Current ב-CSS Designer), או אם אתה מעדיף, תוכל לעבוד ישירות בגיליון הסגנונות של CSS (השתמש בכרטיסייה All ב-CSS Designer).

החלונית CSS Designer‏
החלונית CSS Designer‏


יצירה וצירוף של גיליונות סגנונות

  1. בחלונית Sources שכלולה בחלונית CSS Designer, לחץ על ולאחר מכן לחץ על אחת מהאפשרויות הבאות:

    • Create a New CSS File: כדי ליצור קובץ CSS חדש ולצרף אותו למסמך
    • Attach Existing CSS File: כדי לצרף קובץ CSS קיים למסמך
    • Define in Page: כדי להגדיר CSS בתוך המסמך
    יצירה וצירוף של גיליונות סגנונות באמצעות CSS Designer
    יצירה וצירוף של גיליונות סגנונות באמצעות CSS Designer

    בהתאם לאפשרות שתבחר, תוצג אחת מתיבות הדו-שיח Create A New CSS File או Attach Existing CSS File.

  2. לחץ על Browse כדי לציין את השם של קובץ ה-CSS, ואם אתה יוצר CSS, את המיקום שבו יש לשמור את הקובץ החדש.

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

    • לחץ על Link כדי לקשר את המסמך שנוצר ב-Dreamweaver לקובץ ה-CSS
    • לחץ על Import כדי לייבא את קובץ ה-CSS לתוך המסמך.
  4. (אופציונלי) לחץ על Conditional Usage וציין את שאילתת המדיה שברצונך לשייך לקובץ ה-CSS‏.

הגדרת שאילתות מדיה

  1. בחלונית CSS Designer, לחץ על CSS Source בחלונית Sources‏.

  2. לחץ על בחלונית ‎@Media כדי להוסיף שאילתת מדיה חדשה.

    תוצג תיבת הדו-שיח Define Media Query שבה מפורטים כל תנאי שאילתת המדיה הנתמכים ב-Dreamweaver‏.

  3. בחר את התנאים שיענו על דרישותיך.

    הגדרת שאילתות מדיה
    הגדרת שאילתות מדיה

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

    הערה:

    רק פעולה מסוג And נתמכת עבור תנאים מרובים.

אם תוסיף תנאים לשאילתת מדיה דרך קוד, רק התנאים הנתמכים יתווספו לתיבת הדו-שיח Define Media Query. אך בתיבת הטקסט Code שכלולה בתיבת הדו-שיח יוצג הקוד במלואו (כולל תנאים שאינם נתמכים).

אם אתה לוחץ על שאילתת מדיה בתצוגה Design/Live, אזור התצוגה המלבני משתנה כדי להתאים לשאילתת המדיה שנבחרה. כדי להציג את אזור התצוגה בגודל מלא, לחץ על Global בחלונית ‎Media@‎.

הגדרת בוררי CSS

  1. בחלונית CSS Designer, בחר מקור CSS בחלונית Sources או שאילתת מדיה בחלונית ‎@Media.

  2. בחלונית Selectors, לחץ על . על סמך הרכיב שנבחר במסמך, CSS Designer מבצע זיהוי חכם של הבורר הרלוונטי (עד שלושה כללים) ומנחה אותך בעזרתו.

    בצע אחד או יותר מהצעדים הבאים:

    • השתמש במקשי החצים למעלה/למטה על מנת להפוך את הבורר המוצע לספציפי יותר או פחות.
    • מחק את הכלל המוצע והזן את הבורר הרצוי. הקפד להזין את שם הבורר ביחד עם הסימון של סוג הבורר. לדוגמה, אם אתה מציין מזהה, הוסף בתחילת שם הבורר את הסימן '#'.
    • כדי לחפש בורר מסוים, השתמש בתיבת החיפוש בחלקה העליון של החלונית.
    • כדי לשנות שם של בורר, לחץ על הבורר והקלד את השם הנדרש.
    • כדי לבצע סידור מחדש של הבוררים, גרור את הבוררים למיקום הנדרש.
    • כדי להעביר בורר ממקור אחד למקור אחר, גרור את הבורר למקור הנדרש בחלונית Source‏.
    • כדי לשכפל בורר במקור שנבחר, לחץ לחיצה ימנית על הבורר ולאחר מכן לחץ על Duplicate‏.
    • כדי לשכפל בורר ולהוסיף אותו לשאילתת מדיה, לחץ לחיצה ימנית על הבורר, רחף עם העכבר מעל Duplicate Into Media Query ובחר את שאילתת המדיה הרצויה.

    הערה: האפשרות Duplicate Into Media Query זמינה רק כאשר המקור של הבורר שנבחר מכיל שאילתות מדיה. לא ניתן לשכפל בורר ממקור אחד לשאילתת מדיה של מקור אחר.

סגנונות של העתקה והדבקה

כעת ניתן להעתיק סגנונות מבורר אחד ולהדביק אותם בבורר אחר. ניתן להעתיק את כל הסגנונות, או להעתיק רק קטגוריה ספציפית של סגנונות כגון Layout,‏ Text, ו-Border.

לחץ לחיצה ימנית על בורר ובחר מתוך האפשרויות הזמינות:

  • אם לבורר אין סגנונות, האפשרויות Copy ו-Copy All Styles מושבתות.
  • האפשרות Paste Styles מושבתת עבור אתרים מרוחקים שאינם ניתנים לעריכה. עם זאת, הסגנונות Copy ו-Copy All
    זמינים.
  • Pasting Styles שכבר קיים בחלקו בבורר (Overlapping) פועל כרגיל. מתבצעת
    הדבקה של איחוד כל הבוררים.
  • סגנונות של העתקה והדבקה פועלים גם עבור קישורים שונים של קובצי CSS – Import,‏ Link,‏ Inline
    Styles.
העתקה והדבקה של סגנונות
העתקה והדבקה של סגנונות


סדר בוררים מחדש

לחץ על הבורר הרצוי וגרור אותו למיקום החדש באמצעות החלונית Selectors.

הגדרת מאפייני CSS

המאפיינים מקובצים בקטגוריות הבאות ומיוצגים באמצעות סמלים שונים בחלקה העליון של החלונית Properties‏:

  • Layout
  • Text
  • Border
  • Background
  • More (רשימה של מאפייני 'טקסט בלבד' ולא מאפיינים עם פקדים חזותיים)

הערה:

לפני עריכת המאפיינים של בורר CSS, זהה את הרכיבים המשויכים לאותו בורר CSS בעזרת Reverse Inspect. זיהוי זה יסייע לך להעריך אם השינויים באמת נדרשים בכל הרכיבים שסומנו בפעולת Reverse Inspect. 

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

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

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

הגדרת שוליים, עיבוי ומיקום

באמצעות פקדי התיבה בחלונית Properties ב-CSS Designer, תוכל להגדיר במהירות מאפייני שוליים, עיבוי ומיקום. אם אתה מעדיף להשתמש בקוד, תוכל לציין קוד מקוצר של מאפיינים כמו שוליים ועיבוי בתיבות העריכה המהירה, כפי שמוצג בדוגמה זו.

מאפיין השוליים
מאפיין השוליים

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

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

הגדרת מאפייני גבול

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

מאפייני בקרת גבול
מאפייני בקרת גבול

אם אתה מעדיף להשתמש בקוד, תוכל לציין קוד מקוצר של גבולות ורדיוס גבולות בתיבת העריכה המהירה.

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

כאשר אתה משנה מאפיין בכרטיסיות של מאפייני גבולות בודדים, ערך המאפיין המתאים בכרטיסייה All Sides יהפוך ל-Undefined (הערך המוגדר כברירת מחדל). 

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

הגדרת צבע גבול בכל הצדדים
הגדרת צבע גבול בכל הצדדים

גבול בכל הצדדים
גבול בכל הצדדים


הגדרת צבע גבול בחלק העליון
הגדרת צבע גבול בחלק העליון

צבע הגבול הוגדר לאדום עבור הגבול העליון
צבע הגבול הוגדר לאדום עבור הגבול העליון


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

במהלך פעולת Inspect, מיקוד הכרטיסיות מתבסס על מתן עדיפות לכרטיסיות "קבועות". העדיפות הגבוהה ביותר ניתנת לכרטיסייה All sides ולאחריה לכרטיסיות Top‏, Right‏, Bottom ו-Left. לדוגמה, אם נקבע ערך רק עבור הגבול העליון, במצב הממוחשב המערכת תעביר את המיקוד לכרטיסייה Top ותתעלם מהכרטיסייה All sides, כיוון שלא הוגדרו ערכים בכרטיסייה זו.

השבתה או מחיקה של מאפיינים

התכונה Disable/Enable CSS Property מאפשרת לך לציין כהערה חלקים מה-CSS מהחלונית CSS Designer, מבלי שתצטרך לבצע שינויים ישירות בקוד. בעת ציון כהערה של חלקים מה-CSS, ניתן לראות מה ההשפעה של מאפיינים וערכים מסוימים על הדף.

בעת ביטול מאפיין CSS, ‏Dreamweaver מוסיף תגי הערה של CSS ואת התווית [disabled] למאפיין CSS שביטלת. לאחר מכן תוכל להפעיל מחדש בקלות את מאפיין ה-CSS המבוטל לפי העדפתך.

תוכל להשבית או למחוק כל מאפיין באמצעות CSS Designer.

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

השבתה/מחיקה של מאפיין
השבתה/מחיקה של מאפיין

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

קיצורי מקשים

ניתן להוסיף או למחוק בוררים ומאפיינים של CSS באמצעות קיצורי מקשים. ניתן גם לנווט בין קבוצות מאפיינים בחלונית Properties.  

קיצור תהליך עבודה
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 חדש, ולקשר את המסמך לגיליון סגנונות חיצוני כדי להחיל את הסגנונות שבו.

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

  1. פתח את CSS Designer על ידי ביצוע אחת מהפעולות הבאות:

    • בחר ב-Window ‏> CSS Designer.
    • הקש Shift + F11.
  2. ב-CSS Designer, לחץ על הסימן + ליד Sources, ובחר Attach Existing CSS File.

    צרף קובץ CSS קיים
    צרף קובץ CSS קיים

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

    • לחץ על Browse כדי לבחור גיליון סגנונות CSS חיצוני.
    • הקלד את הנתיב לגיליון הסגנונות בתיבה File/URL.
  4. לחץ על הלחצן Preview כדי לוודא שגיליון הסגנונות מחיל את הסגנונות הרצויים על הדף הנוכחי.

    אם הסגנונות שהוחלו אינם הסגנונות שציפית להם, לחץ על Cancel להסרת גיליון הסגנונות. הדף יחזור למראה הקודם שלו.

  5. לחץ על OK.

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

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