למד כיצד להשתמש בחלונית CSS Designer כדי ליצור או לצרף גיליונות סגנונות, שאילתות מדיה ובוררים, ולהגדיר מאפייני CSS.
החלונית CSS Designer (Window > CSS Designer) היא 'מפקח מאפיינים של CSS' המאפשר לך ליצור באופן "חזותי" סגנונות, קבצים ומאפייני קבוצות של CSS, וכן שאילתות מדיה.
הסעיפים הבאים זמינים בממשק של CSS Designer:
באמצעות CSS Designer, תוכל לערוך כלל בודד בגיליון סגנונות של CSS (השתמש בכרטיסייה Current ב-CSS Designer), או אם אתה מעדיף, תוכל לעבוד ישירות בגיליון הסגנונות של CSS (השתמש בכרטיסייה All ב-CSS Designer).
בחלונית Sources שכלולה בחלונית CSS Designer, לחץ על 
ולאחר מכן לחץ על אחת מהאפשרויות הבאות:
בהתאם לאפשרות שתבחר, תוצג אחת מתיבות הדו-שיח Create A New CSS File או Attach Existing CSS File.
לחץ על Browse כדי לציין את השם של קובץ ה-CSS, ואם אתה יוצר CSS, את המיקום שבו יש לשמור את הקובץ החדש.
בצע אחת מהפעולות הבאות:
(אופציונלי) לחץ על Conditional Usage וציין את שאילתת המדיה שברצונך לשייך לקובץ ה-CSS.
בחלונית CSS Designer, לחץ על CSS Source בחלונית Sources.
לחץ על 
בחלונית @Media כדי להוסיף שאילתת מדיה חדשה.
תוצג תיבת הדו-שיח Define Media Query שבה מפורטים כל תנאי שאילתת המדיה הנתמכים ב-Dreamweaver.
בחר את התנאים שיענו על דרישותיך.
הקפד לציין ערכים חוקיים עבור כל התנאים שתבחר. אחרת, יצירת שאילתות המדיה המתאימות לא תושלם בהצלחה.
רק פעולה מסוג And נתמכת עבור תנאים מרובים.
אם תוסיף תנאים לשאילתת מדיה דרך קוד, רק התנאים הנתמכים יתווספו לתיבת הדו-שיח Define Media Query. אך בתיבת הטקסט Code שכלולה בתיבת הדו-שיח יוצג הקוד במלואו (כולל תנאים שאינם נתמכים).
אם אתה לוחץ על שאילתת מדיה בתצוגה Design/Live, אזור התצוגה המלבני משתנה כדי להתאים לשאילתת המדיה שנבחרה. כדי להציג את אזור התצוגה בגודל מלא, לחץ על Global בחלונית Media@.
בחלונית CSS Designer, בחר מקור CSS בחלונית Sources או שאילתת מדיה בחלונית @Media.
בחלונית Selectors, לחץ על . על סמך הרכיב שנבחר במסמך, CSS Designer מבצע זיהוי חכם של הבורר הרלוונטי (עד שלושה כללים) ומנחה אותך בעזרתו.
בצע אחד או יותר מהצעדים הבאים:
הערה: האפשרות Duplicate Into Media Query זמינה רק כאשר המקור של הבורר שנבחר מכיל שאילתות מדיה. לא ניתן לשכפל בורר ממקור אחד לשאילתת מדיה של מקור אחר.
כעת ניתן להעתיק סגנונות מבורר אחד ולהדביק אותם בבורר אחר. ניתן להעתיק את כל הסגנונות, או להעתיק רק קטגוריה ספציפית של סגנונות כגון Layout, Text, ו-Border.
לחץ לחיצה ימנית על בורר ובחר מתוך האפשרויות הזמינות:
לחץ על הבורר הרצוי וגרור אותו למיקום החדש באמצעות החלונית Selectors.
המאפיינים מקובצים בקטגוריות הבאות ומיוצגים באמצעות סמלים שונים בחלקה העליון של החלונית Properties:
לפני עריכת המאפיינים של בורר 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 משפיעה על כל הרכיבים המשויכים לאותו בורר, לרבות רכיבים שאותם כלל לא התכוונת לשנות.
Live Highlight מסייע לך לזהות את כל הרכיבים המשויכים לבורר CSS. אם ברצונך לשנות רק רכיב אחד או רק חלק מהרכיבים, תוכל ליצור בורר CSS חדש עבור רכיבים אלה ולאחר מכן לערוך את המאפיינים.
כדי לזהות את רכיבי הדף המשויכים לבורר CSS, העבר את סמן העכבר מעל הבורר במצב Live View (כאשר האפשרות Live Code מושבתת). Dreamweaver מסמן את הרכיבים המשויכים בקווים מקווקווים.
כדי לנעול את הסימון של הרכיבים, לחץ על הבורר. כעת, הרכיבים מסומנים בגבול כחול.
כדי להסיר את הסימון הכחול המקיף את הרכיבים, לחץ שוב על הבורר.
Live Highlight מופעל כברירת מחדל. כדי להשבית את Live Highlight, לחץ על אפשרויות Live View בסרגל הכלים של המסמכים ולאחר מכן לחץ על Disable Live Highlight.
כשעורכים גיליון סגנונות CSS חיצוני, כל המסמכים המקושרים אליו מתעדכנים ומשקפים את שינויי העריכה.
ניתן לייצא סגנונות CSS קיימים במסמך כדי ליצור גיליון סגנונות CSS חדש, ולקשר את המסמך לגיליון סגנונות חיצוני כדי להחיל את הסגנונות שבו.
ניתן לצרף לדפים כל גיליון סגנונות שיצרת באתר או העתקת לאתר.
פתח את CSS Designer על ידי ביצוע אחת מהפעולות הבאות:
ב-CSS Designer, לחץ על הסימן + ליד Sources, ובחר Attach Existing CSS File.
בצע אחת מהפעולות הבאות:
לחץ על הלחצן Preview כדי לוודא שגיליון הסגנונות מחיל את הסגנונות הרצויים על הדף הנוכחי.
אם הסגנונות שהוחלו אינם הסגנונות שציפית להם, לחץ על Cancel להסרת גיליון הסגנונות. הדף יחזור למראה הקודם שלו.
לחץ על OK.
