למד כיצד להשתמש ב-Property inspector של הטקסט כדי להחיל עיצוב HTML או עיצוב CSS ב-Dreamweaver.

ניתן להשתמש ב-Property inspector של טקסט כדי להחיל עיצוב HTML או עיצוב CSS ‏(Cascading Style Sheet). בהחלת עיצוב HTML, ‏Dreamweaver מוסיף מאפיינים לקוד HTML בגוף הדף שלך. בהחלה של עיצוב CSS, ‏Dreamweaver כותב מאפיינים בכותרת המסמך או בגיליון סגנונות נפרד.

הערה:

ביצירת סגנונות CSS בתוך שורה, Dreamweaver מוסיף קוד של תכונות סגנון ישירות בגוף הדף.

אודות עיצוב טקסט (CSS מול HTML)

עיצוב טקסט ב-Dreamweaver זהה לשימוש במעבד תמלילים רגיל. ניתן להגדיר את סגנונות העיצוב של ברירת המחדל (Paragraph, ‏Heading 1, ‏Heading 2 וכן הלאה) לקטע טקסט מסוים, לשנות את הגופן, הגודל, הצבע והיישור של הטקסט שנבחר או להחיל סגנונות טקסט כגון מודגש, נטוי, code ‏(monospace) וקו תחתון.

Dreamweaver כולל שני מפקחי מאפיינים, המשולבים לאחד: מפקח מאפייני CSS ומפקח מאפייני HTML. בעת השימוש ב-CSS Property Inspector‏, Dreamweaver מעצב את הטקסט באמצעות Cascading Style Sheets‏‏ (CSS). גיליונות CSS מעניקים למפתחים ולמעצבים של אתרי אינטרנט שליטה רבה יותר על העיצוב של דף אינטרנט, תוך שהם מספקים תכונות משופרות של נגישות וקבצים קטנים יותר. מפקח מאפייני CSS מאפשר לך לגשת לסגנונות קיימים וכן ליצור סגנונות חדשים.

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

ניתן לאחסן סגנונות שנוצרו ב-CSS ישירות במסמך, אך לקבלת עוצמה וגמישות רבות יותר, רצוי לאחסן סגנונות בגיליון סגנונות חיצוני. אם תצרף גיליון סגנונות חיצוני למספר דפי אינטרנט, כל הדפים ישקפו באופן אוטומטי את השינויים שתבצע בגיליון הסגנונות. כדי לגשת לכל כללי CSS של דף מסוים, השתמש בחלונית CSS Styles ‏(Window ‏> CSS Styles). כדי לגשת לכללים שחלים על קטע מסוים שבחרת, השתמש בחלונית CSS Styles (מצב Current) או בתפריט הנפתח Targeted Rule שבמפקח מאפייני CSS.

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

הערה:

ניתן לשלב עיצובים של CSS ושל HTML 3.2 באותו הדף. העיצוב חל באופן היררכי: עיצוב של HTML 3.2 עוקף עיצוב שהחיל גיליון סגנונות CSS חיצוני, ו-CSS המוטבע במסמך עוקף CSS חיצוני.

עריכת כללי CSS ב-Property inspector

  1. פתח את מפקח המאפיינים (Window > Properties) אם הוא אינו פתוח עדיין ובחר באפשרות CSS בפינה השמאלית של החלונית.

  2. בצע אחת מהפעולות הבאות:
    • הצב את נקודת ההכנסה בתוך קטע טקסט שעיצב כלל שברצונך לערוך. הכלל מופיע בתפריט הנפתח Targeted Rule.
    • בחר כלל מתוך התפריט הנפתח Targeted Rule.
    • לחץ על Edit Rule.
    בחר כלל מתוך Targeted Rule
    בחר כלל מתוך התפריט הנפתח Targeted Rule.

  3. בצע שינויים בכלל שבחרת עם האפשרויות השונות במפקח מאפייני CSS.

    Targeted Rule

    זהו הכלל שאתה עורך במפקח מאפייני CSS. כשסגנון קיים חל על טקסט כלשהו, הכלל המשפיע על עיצוב הטקסט יופיע כשתלחץ בתוך הטקסט בדף. ניתן גם להשתמש בתפריט הנפתח Targeted Rule כדי ליצור כללי CSS חדשים או סגנונות בתוך שורה חדשים, וכן להחיל מחלקות קיימות על טקסט נבחר. אם תיצור כלל חדש, יהיה עליך להשלים את תיבת הדו-שיח New CSS Rule. למידע נוסף, ראה הקישורים בסוף נושא זה.

    Edit Rule

    פותחת את תיבת הדו-שיח CSS Rule Definition לכלל היעד. אם תבחר New CSS Rule מתוך התפריט הנפתח Targeted Rule ותלחץ על הלחצן Edit Rule, ‏Dreamweaver יפתח את תיבת הדו-שיח New CSS Rule.

    CSS Designer

    פותחת את החלונית CSS Designer ומציגה מאפיינים של כלל היעד בתצוגת Current.

    Font

    מחליפה את הגופן של כלל היעד.

    Size

    מגדירה את גודל הגופן של כלל היעד.

    Text Color

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

    עריכת כלל CSS ב-Dreamweaver
    ערוך כללי CSS באמצעות האפשרות Edit Rule.

    Bold

    מוסיפה לכלל היעד מאפיין של גופן מודגש.

    Italic

    מוסיפה לכלל היעד מאפיין של גופן נטוי.

    Left Align, ‏Center Align ו-Right Align

    יישור כלל היעד לשמאל, למרכז או לימין.

    הערה:

    המאפיינים Font, ‏Size, ‏Text Color, ‏Bold, ‏Italic ו- Alignment מציגים תמיד את המאפיינים של הכלל שחל על הקטע שנבחר בחלון Document. שינוי אחד ממאפיינים אלה משפיע על כלל היעד.

עריכת צבע הטקסט באמצעות מפקח המאפיינים

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

עריכת הצבע של הטקסט
עריכת הצבע של הטקסט ב-Dreamweaver

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

עריכת הצבע של הטקסט ב-Dreamweaver
השתמש ב-Color Picker כדי לשנות את צבע הטקסט

הגדרת עיצוב HTML ב-Property inspector

  1. פתח את מפקח המאפיינים (Window ‏> Properties) אם הוא אינו פתוח עדיין, ולחץ על הלחצן HTML.
  2. בחר בטקסט שברצונך לעצב.

  3. הגדר את האפשרויות שברצונך להחיל על הטקסט הנבחר:
    הגדרת מאפייני טקסט של עיצוב HTML ב-Dreamweaver CC
    הגדרת מאפייני טקסט של עיצוב HTML

    Format

    מגדירה את סגנון הפסקה של הטקסט הנבחר. הסגנון Paragraph מחיל את עיצוב ברירת המחדל על התג <p>, הסגנון Heading 1 מוסיף תג H1 וכן הלאה.

    ID

    מקצה מזהה לטקסט הנבחר. התפריט הנפתח ID (כאשר הוא קיים) מפרט את כל המזהים המוצהרים שאינם בשימוש במסמך.

    Class

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

    השתמש בתפריט Style כדי לבצע כל אחת מהפעולות הבאות:

    • בחר בסגנון שברצונך להחיל על הקטע שנבחר.

    • בחר None כדי להסיר את הסגנון שנבחר כעת.

    • בחר Rename כדי לשנות את שם הסגנון.

    • בחר Attach Style Sheet כדי לפתוח תיבת דו-שיח שתאפשר לקשר גיליון סגנונות חיצוני לדף.

    Bold

    מחילה תג <b> או <strong> על הטקסט שנבחר, לפי העדפות הסגנון שהוגדרו בקטגוריה General בתיבת הדו-שיח Preferences.

    Italic

    מחילה תג <i> או <em> על הטקסט שנבחר, לפי העדפות הסגנון שהוגדרו בקטגוריה General בתיבת הדו-שיח Preferences.

    Unordered List

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

    Ordered List

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

    Blockquote and Remove Blockquote

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

    Link

    יוצרת קישור היפרטקסט מהטקסט שנבחר. גרור את סמל התיקייה כדי לנווט לקובץ באתר שלך; הקלד כתובת URL; גרור את הסמל Point-To-File לקובץ בחלונית Files; או גרור קובץ מתוך החלונית Files אל התיבה.

    Title

    מציג תיאור כלי מילולי לקישור היפר-טקסט.

    Target

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

    • ‎_blank‏ טוען את הקובץ המקושר בחלון חדש ללא שם של הדפדפן.

    • ‎_parent טוען את הקובץ המקושר בערכת האב של המסגרות או בחלון של המסגרת שכוללת את הקישור. אם המסגרת שכוללת את הקישור אינה מקוננת, הקובץ המקושר ייטען בחלון המלא של הדפדפן.

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

    • ‎_top טוען את הקובץ המקושר בחלון המלא של הדפדפן ומסיר את כל המסגרות.

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

Dreamweaver מציג את כל המחלקות הזמינות לדף שלך בתפריט Class של מפקח מאפייני HTML. ניתן לשנות את שמות הסגנון ברשימה זו בבחירת האפשרות Rename בתחתית הרשימה של סגנונות המחלקה.

  1. מתוך החלונית של מפקח המאפיינים, בחר את הרשימה הנפתחת Class.

  2. מתוך הרשימה שמופיעה, בחר Rename בסוף הרשימה.

  3. בחר בסגנון שברצונך לשנות את שמו מתוך התפריט הנפתח Rename Style.

    שינוי מחלקת HTML ב-Dreamweaver
    שינוי שם במחלקת HTML

  4. הזן שם חדש בשדה הטקסט New Name ולחץ על OK.

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

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