פתחו את מפקח המאפיינים (חלון > מאפיינים), אם הוא לא פתוח כבר ובחרו באפשרות CSS בפינה השמאלית של הלוח.
למד כיצד להשתמש ב-Property inspector של הטקסט כדי להחיל עיצוב HTML או עיצוב CSS ב-Dreamweaver.
אתם יכולים להשתמש במפקח המאפיינים של הטקסט כדי להחיל עיצוב HTML או עיצוב גיליון סגנון מדורג (CSS). כאשר אתם מחילים עיצוב HTML, Dreamweaver מוסיף מאפיינים לקוד ה-HTML בגוף העמוד שלכם. כאשר אתם מחילים עיצוב CSS, Dreamweaver כותב מאפיינים לראש המסמך או לגיליון סגנון נפרד.
ביצירת סגנונות CSS בתוך שורה, Dreamweaver מוסיף קוד של תכונות סגנון ישירות בגוף העמוד.
על עיצוב טקסט (CSS לעומת HTML)
עיצוב טקסט ב-Dreamweaver דומה לשימוש במעבד תמלילים רגיל. אתם יכולים להגדיר סגנונות עיצוב ברירת מחדל (פסקה, כותרת 1, כותרת 2, וכדומה) לבלוק טקסט, לשנות את הגופן, הגודל, הצבע והיישור של טקסט נבחר, או להחיל סגנונות טקסט כגון מודגש, נטוי, קוד (monospace) ולסמן בקו תחתון.
ל-Dreamweaver יש שני מפקחי מאפיינים, המשולבים לאחד: מפקח המאפיינים של CSS ומפקח המאפיינים של HTML. כאשר אתם משתמשים במפקח המאפיינים של CSS, Dreamweaver מעצב טקסט באמצעות גיליונות סגנון מדורגים (CSS). CSS נותן למעצבי אתרים ולמפתחים שליטה רבה יותר על עיצוב דפי האינטרנט, תוך מתן תכונות משופרות לנגישות והקטנת גודל הקובץ. מפקח המאפיינים של CSS מאפשר לכם לגשת לסגנונות קיימים, כמו גם ליצור חדשים.
שימוש ב-CSS הוא דרך לשלוט בסגנון של דף אינטרנט מבלי לפגוע במבנה שלו. על ידי הפרדת אלמנטי עיצוב חזותי (גופנים, צבעים, שוליים וכדומה) מההיגיון המבני של דף אינטרנט, CSS נותן למעצבי אתרים שליטה חזותית וטיפוגרפית מבלי לפגוע בשלמות התוכן. בנוסף, הגדרת עיצוב טיפוגרפי ופריסת עמוד מתוך בלוק קוד יחיד ומובחן —מבלי להזדקק למפות תמונה, תגי גופן, טבלאות ו-GIF מרווחים—מאפשרת הורדות מהירות יותר, תחזוקת אתר מיועלת ונקודה מרכזית לשליטה במאפייני עיצוב בכמה דפי אינטרנט.
אתם יכולים לאחסן סגנונות שנוצרו עם CSS ישירות במסמך, או לכוח ולגמישות יותר, אתם יכולים לאחסן סגנונות בגיליון סגנון חיצוני. אם אתם מצרפים גיליון סגנון חיצוני לכמה דפי אינטרנט, כל העמודים משקפים אוטומטית כל שינוי שאתם עושים בגיליון הסגנון. כדי לגשת לכל כללי ה-CSS של עמוד, השתמשו בלוח סגנונות CSS (חלון > סגנונות CSS). כדי לגשת לכללים החלים על בחירה נוכחית, השתמשו בלוח סגנונות CSS (מצב נוכחי) או בתפריט הקופץ של "כלל ממוקד" במפקח המאפיינים של CSS.
אם אתם מעדיפים, אתם יכולים להשתמש בתגי סימון HTML כדי לעצב טקסט בדפי האינטרנט שלכם. כדי להשתמש בתגי HTML במקום CSS, עצבו את הטקסט שלכם באמצעות מפקח המאפיינים של HTML.
ניתן לשלב עיצובים של CSS ושל HTML 3.2 באותו הדף. העיצוב חל באופן היררכי: עיצוב של HTML 3.2 עוקף עיצוב שהחיל גיליון סגנונות CSS חיצוני, ו-CSS המוטבע במסמך עוקף CSS חיצוני.
לערוך כללי CSS במפקח המאפיינים
- מקמו את נקודת ההכנסה בתוך בלוק טקסט שעוצב על ידי כלל שאתם רוצים לערוך. הכלל מופיע בתפריט הקופץ "כלל ממוקד".
- בחר כלל מתוך התפריט הנפתח Targeted Rule.
- לחצו על עריכת כלל.
Targeted Rule
זהו הכלל שאתה עורך במפקח מאפייני CSS. כאשר יש לכם עיצוב קיים המוחל על טקסט, הכלל המשפיע על עיצוב הטקסט מופיע כשאתם לוחצים בתוך הטקסט בעמוד.אתם יכולים גם להשתמש בתפריט הקופץ כלל ממוקד כדי ליצור כללי CSS חדשים, עיצובים מוטמעים חדשים, או להחיל מחלקות קיימות על טקסט נבחר.אם אתם יוצרים כלל חדש, תצטרכו להשלים את תיבת הדו-שיח כלל CSS חדש.למידע נוסף, ראו את הקישורים בסוף הנושא הזה.
Edit Rule
פותח את תיבת הדו-שיח הגדרת כלל CSS עבור הכלל הממוקד.אם אתם בוחרים כלל CSS חדש מהתפריט הקופץ כלל ממוקד ולוחצים על כפתור ערוך כלל, Dreamweaver פותח את תיבת הדו-שיח הגדרת כלל CSS חדש במקום זאת.
CSS Designer
פותח את לוח ה‑CSS Designer ומציג מאפיינים עבור הכלל הממוקד בתצוגה הנוכחית.
Font
מחליפה את הגופן של כלל היעד.
Size
מגדירה את גודל הגופן של כלל היעד.
Text Color
מגדירה את הצבע שנבחר כצבע הגופן בכלל היעד. בחרו צבע בטוח לאינטרנט על ידי לחיצה על תיבת הצבע, או הזינו ערך הקסדצימלי (לדוגמה, #BB5153) בשדה הטקסט הסמוך.
הדגשה
מוסיפה לכלל היעד מאפיין של גופן מודגש.
כתב נטוי
מוסיפה לכלל היעד מאפיין של גופן נטוי.
Left Align, Center Align ו-Right Align
מיישר את הכלל הממוקד לשמאל, למרכז או לימין.
המאפיינים Font, Size, Text Color, Bold, Italic ו- Alignment מציגים תמיד את המאפיינים של הכלל שחל על הקטע שנבחר בחלון Document. שינוי אחד ממאפיינים אלה משפיע על כלל היעד.
עריכת צבע הטקסט באמצעות מפקח המאפיינים
אם לא החלת כלל מסוים על הטקסט, ניתן לערוך את הצבע של הטקסט ישירות מתוך מפקח המאפיינים. בדוגמה הבאה, שים לב לצבע של הטקסט לפני העריכה. השדה הסמוך ל-Color Picker (בורר הצבעים) מציג לבן, המציין את צבע הטקסט במקום שבו הנחתם את הסמן.
כדי לערוך את הצבע של הטקסט, בחר את הטקסט שברצונך לערוך. לחץ על Color Picker ובחר צבע כלשהו שתבחר. ראו את התמונה הבאה שבה בודק המאפיינים מציג את הצבע החדש.
הגדרת עיצוב HTML בבודק המאפיינים
בחרו את הטקסט שאתם רוצים לעצב.
Format
מגדירה את סגנון הפסקה של הטקסט הנבחר. פסקה מחיל את העיצוב המוגדר כברירת מחדל עבור תג <p>, כותרת 1 מוסיף תג H1, וכן הלאה.
ID
מקצה מזהה לטקסט הנבחר. התפריט הקופץ של ה‑ID (אם רלוונטי) מציג את כל המזהים שאינם בשימוש שהוכרזו במסמך.
מחלקה
מציג את סגנון המחלקה שחל כעת על הטקסט הנבחר. אם לא הוחלו סגנונות על הבחירה, התפריט הקופץ מציג No CSS Style. אם הוחלו סגנונות מרובים על הבחירה, התפריט נותר ריק.
השתמשו בתפריט Style כדי לבצע את הפעולות הבאות:
בחרו את הסגנון שברצונכם להחיל על הבחירה.
בחר None כדי להסיר את הסגנון שנבחר כעת.
בחר Rename כדי לשנות את שם הסגנון.
בחרו באפשרות Attach Style Sheet כדי לפתוח תיבת דו-שיח שמאפשרת לכם לצרף גיליון סגנון חיצוני לעמוד.
הדגשה
מחיל <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 בסוף רשימת סגנונות המחלקות.
מלוח מפקח המאפיינים, בחרו ברשימה הנפתחת Class.
מהרשימה שנפתחת, בחרו בשינוי שם בסוף הרשימה.
בחרו את הסגנון שברצונכם לשנות את שמו בתפריט הקופץ 'שינוי שם סגנון'.
פריטים דומים נוספים
בניית אתרי אינטרנט יפהפיים ב-Dreamweaver
עיצוב כתיבת קוד וניהול אתרי אינטרנט דינמיים בכלי רב עוצמה כולל.