מדריך למשתמש ביטול

פריסת דפים באמצעות CSS Designer

  1. מדריך למשתמש של Dreamweaver
  2. מבוא
    1. מידע בסיסי על עיצוב אתרי אינטרנט מגיב
    2. מה חדש ב-Dreamweaver
    3. פיתוח אתרי אינטרנט באמצעות Dreamweaver - סקירה
    4. Dreamweaver / שאלות נפוצות
    5. קיצורי מקשים
    6. דרישות המערכת של Dreamweaver
    7. סיכום תכונות
  3. Dreamweaver ו-Creative Cloud
    1. סנכרון הגדרות של Dreamweaver עם Creative Cloud‏
    2. Creative Cloud Libraries ב-Dreamweaver
    3. שימוש בקובצי Photoshop ב-Dreamweaver
    4. עבודה עם Adobe Animate ו-Dreamweaver
    5. חילוץ קובצי SVG ממוטבים לאינטרנט מספריות
  4. התצוגות וסביבות העבודה של Dreamweaver
    1. סביבת העבודה של Dreamweaver‏
    2. מיטוב סביבת העבודה של Dreamweaver לפיתוח חזותי
    3. חיפוש קבצים בהתבסס על שם קובץ או תוכן |‏ Mac OS
  5. הגדרת אתרי אינטרנט
    1. על אתרי Dreamweaver
    2. הגדרת גרסה מקומית של האתר שלך
    3. התחברות לשרת פרסום
    4. הגדרת שרת בדיקות
    5. ייבוא וייצוא של הגדרות אתר Dreamweaver
    6. העתקת אתרי אינטרנט קיימים משרת מרוחק לבסיס האתר המקומי שלך
    7. תכונות נגישות ב-Dreamweaver
    8. הגדרות מתקדמות
    9. הגדרת העדפות להעברת קבצים
    10. ציון הגדרות שרת פרוקסי ב-Dreamweaver
    11. סנכרון הגדרות של Dreamweaver עם Creative Cloud‏
    12. שימוש ב-Git ב-Dreamweaver
  6. ניהול קבצים
    1. יצירה ופתיחה של קבצים
    2. ניהול קבצים ותיקיות
    3. הורדת קבצים מהשרת והעלאת קבצים לשרת
    4. הכנסה לאחסון והוצאה מאחסון של קבצים
    5. סנכרון קבצים
    6. השוואת קבצים למציאת הבדלים
    7. הסוואת קבצים ותיקיות באתר Dreamweaver שלך
    8. הפעלת Design Notes עבור אתרי Dreamweaver
    9. מניעת אפשרות ניצול לרעה של Gatekeeper
  7. פריסה ועיצוב
    1. שימוש בעזרים חזותיים לפריסה
    2. על השימוש ב-CSS לפריסת דף
    3. עיצוב אתרי אינטרנט מגיבים באמצעות Bootstrap
    4. יצירת שאילתות מדיה והשימוש בהן ב-Dreamweaver
    5. הצגת תוכן בטבלאות
    6. צבעים
    7. יצירת עיצוב מגיב באמצעות פריסות רשת זורמות
    8. Extract ב-Dreamweaver
  8. CSS
    1. הכרת CSS ‏(Cascading Style Sheets)
    2. פריסת עמודים בעזרת CSS Designer
    3. שימוש בכלים לעיבוד מקדים של CSS ב-Dreamweaver
    4. כיצד להגדיר העדפות סגנון CSS ב-Dreamweaver
    5. העברת כללי CSS ב-Dreamweaver
    6. המרת CSS בתוך שורה לכלל CSS ב-Dreamweaver
    7. עבודה עם תגי div
    8. החלת מעברי צבע על רקע
    9. יצירה ועריכה של אפקטי מעבר של CSS3 ב-Dreamweaver
    10. עיצוב קוד
  9. תוכן דף והנכסים הקיימים בו
    1. הגדרת מאפייני דף
    2. הגדרת מאפייני כותרת של CSS ומאפייני קישור של CSS
    3. עבודה עם טקסט
    4. מציאה והחלפה של טקסט, תגים ותכונות
    5. החלונית DOM
    6. עריכה ב-Live View
    7. קידוד מסמכים ב-Dreamweaver
    8. בחירה והצגה של רכיבים בחלון Document
    9. הגדרת מאפייני טקסט ב-Property inspector
    10. בדיקת איות בדף אינטרנט
    11. שימוש בכללים אופקיים ב-Dreamweaver
    12. הוספה ושינוי של שילובי גופנים ב-Dreamweaver
    13. עבודה עם נכסים
    14. הכנסה ועדכון של תאריכים ב-Dreamweaver
    15. יצירה וניהול של נכסים מועדפים ב-Dreamweaver
    16. הכנסה ועריכה של תמונות ב-Dreamweaver
    17. הוספת אובייקטי מדיה
    18. הוספת סרטוני וידאו ב-Dreamweaver
    19. הכנסת וידאו של HTML5
    20. הכנסת קובצי SWF
    21. הוספת אפקטי שמע
    22. הכנסת שמע של HTML5 ב-Dreamweaver
    23. עבודה עם פריטי ספרייה
    24. שימוש בטקסט ערבי ועברי ב-Dreamweaver
  10. קישור וניווט
    1. אודות קישור וניווט
    2. קישור
    3. מפות תמונה
    4. פתרון בעיות של קישורים
  11. רכיבים גרפיים ואפקטים של jQuery
    1. שימוש ברכיבים גרפיים של jQuery לממשק משתמש ולמכשירים ניידים ב-Dreamweaver
    2. שימוש באפקטים של jQuery ב-Dreamweaver
  12. כתיבת קוד של אתרי אינטרנט
    1. כתיבת קוד ב-Dreamweaver
    2. סביבה של כתיבת קוד ב-Dreamweaver
    3. הגדרת העדפות לכתיבת קוד
    4. התאמה אישית של העדפות צבעי קוד
    5. כתיבה ועריכה של קוד
    6. אפשרויות של רמזי קוד והשלמת קוד
    7. צמצום והרחבה של קוד
    8. שימוש חוזר בקוד עם גזירי קוד
    9. איתור שגיאות בקוד (Linting)
    10. מטוב הקוד
    11. עריכת קוד בתצוגת Design
    12. עבודה עם תוכן כותרת של דפים
    13. הכנסת קבצים נכללים בצד השרת ב-Dreamweaver
    14. שימוש בספריות תגים ב-Dreamweaver
    15. ייבוא תגים מותאמים אישית אל Dreamweaver
    16. שימוש בהתנהגויות של JavaScript (הוראות כלליות)
    17. החלת התנהגויות מובנות של JavaScript
    18. על XML ו-XSLT
    19. ביצוע המרות XSL בצד השרת ב-Dreamweaver
    20. ביצוע המרות XSL בצד הלקוח ב-Dreamweaver
    21. הוספת ישויות תו עבור XSLT ב-Dreamweaver
    22. עיצוב קוד
  13. תהליכי עבודה המותאמים למגוון מוצרים
    1. התקנה הרחבות אל Dreamweaver והשימוש בהן
    2. עדכונים בתוך היישום ב-Dreamweaver
    3. הכנסת מסמכי Microsoft Office ב-Dreamweaver‏ ‏(Windows בלבד)
    4. עבודה עם Fireworks ו-Dreamweaver
    5. עריכת תוכן באתרי Dreamweaver באמצעות Contribute
    6. שילוב של Dreamweaver עם Business Catalyst
    7. יצירת מסעות פרסום בדוא"ל מותאמים אישים
  14. תבניות
    1. על תבניות Dreamweaver
    2. זיהוי תבניות ומסמכים המבוססים על תבניות
    3. יצירת תבנית Dreamweaver
    4. יצירת אזורים ניתנים לעריכה בתבניות
    5. יצירת אזורים חוזרים וטבלאות חוזרות ב-Dreamweaver
    6. שימוש באזורים אופציונליים בתבניות
    7. הגדרת תכונות תג ניתנות לעריכה ב-Dreamweaver
    8. כיצד ליצור תבניות מקוננות ב-Dreamweaver
    9. עריכה, עדכון ומחיקה של תבניות
    10. ייצוא וייבוא תוכן XML ב-Dreamweaver
    11. החלה של תבנית על מסמך קיים או הסרתה ממנו
    12. עריכת תוכן בתבניות Dreamweaver
    13. כללי תחביר של תגי תבנית ב-Dreamweaver
    14. הגדרת העדפות סימון לאזורי תבנית
    15. היתרונות של שימוש בתבניות ב-Dreamweaver
  15. מכשירים ניידים ומסכים מרובים
    1. יצירת שאילתות מדיה
    2. שינוי כיוון דף עבור מכשירים ניידים
    3. יצירת יישומי אינטרנט עבור מכשירים ניידים באמצעות Dreamweaver
  16. אתרי אינטרנט, דפים וטופסי אינטרנט דינמיים
    1. הבנת יישומי אינטרנט
    2. הגדרת המחשב לפיתוח יישומים
    3. פתרון בעיות בחיבורים למסדי נתונים
    4. הסרת סקריפטים של חיבור ב-Dreamweaver
    5. עיצוב דפים דינמיים
    6. סקירת מקורות של תוכן דינמי
    7. הגדרת מקורות של תוכן דינמי
    8. הוספת תוכן דינמי לדפים
    9. שינוי תוכן דינמי ב-Dreamweaver
    10. הצגת רשומות של מסד נתונים
    11. אספקת נתונים בזמן אמת ב-Dreamweaver ופתרון בעיות בהם
    12. הוספת התנהגויות שרת מותאמות אישית ב-Dreamweaver
    13. בניית טפסים באמצעות Dreamweaver
    14. שימוש בטפסים לאיסוף מידע ממשתמשים
    15. יצירה והפעלה של טופסי ColdFusion ב-Dreamweaver
    16. יצירת טופסי אינטרנט
    17. תמיכה משופרת ב-HTML5 עבור רכיבי טופס
    18. פיתוח טופס באמצעות Dreamweaver
  17. בנייה חזותית של יישומים
    1. בניית דפי אב ופרטים ב-Dreamweaver
    2. בניית דפי חיפוש ותוצאות
    3. בניית דף להכנסת רשומות
    4. בניית דף לעדכון רשומות ב-Dreamweaver
    5. בניית דפים למחיקת רשומות ב-Dreamweaver
    6. שימוש בפקודות ASP כדי לשנות מסד נתונים ב-Dreamweaver
    7. בניית דף רישום
    8. בניית דף כניסה
    9. בניית דף המאפשר גישה למשתמשים מורשים בלבד
    10. אבטחת תיקיות ב-ColdFusion באמצעות Dreamweaver
    11. שימוש ברכיבי ColdFusion ב-Dreamweaver
  18. בדיקה, תצוגה מקדימה ופרסום של אתרי אינטרנט
    1. תצוגה מקדימה של דפים
    2. תצוגה מקדימה עבור דפי אינטרנט של Dreamweaver במכשירים מרובים
    3. בדיקת אתר Dreamweaver שלך

 

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

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

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

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

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

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

לוגו של Adobe

כניסה לחשבון