בחר Edit > Preferences (Windows) או Dreamweaver > Preferences (Macintosh).
עודכן לאחרונה בתאריך
25 באפריל 2024
למד כיצד ניתן להתאים אישית את הצבעים של רכיבי הקוד (צבעי קוד), כמו הערות לקוד, ב-Dreamweaver.
ב-Dreamweaver, באפשרותך לשנות את העדפות צבעי הממשק דרך Edit > Preferences > Interface.
ניתן לבחור מבין ארבע ערכות נושא שונות של צבעים ולבחור ערכת נושא בהירה או כהה.
לאחר שתגדיר את ערכת הנושא של הקוד והצבעים, תוכל להתאים אישית מאפיינים נוספים של צבעי הקוד ב-Dreamweaver על-ידי עריכת הבוררים המתאימים בקובץ main.less המובנה.
הגדרת ערכות נושא של צבעים וערכות נושא של קוד
ניתן לבחור ערכת נושא של צבעים בהתאם להעדפותיך בעת הפעלת Dreamweaver. תוכל גם לשנות העדפה זו בכל עת.
בחר Interface מהרשימה Category בצד שמאל.
בחר ערכת נושא מתוך הרשימה Color Themes.
לאחר הגדרת ערכת הנושא של הממשק, הגדר את ערכת הנושא של הקוד.
ניתן לבחור בין ערכת נושא בהירה או כהה של קוד. לאחר מכן תוכל לשמור את ערכת הנושא בשם חדש ולהתאים אישית מאפיינים נוספים שלה.
לחץ על Apply כדי לשמור את השינויים.
התאמה אישית של ערכות נושא של קוד
לאחר בחירת ערכת נושא של קוד, תוכל להתאים את צבעי הקוד על-ידי שמירת ערכת הנושא של הקוד בשם חדש ועריכתה.
בחר Edit > Preferences (Windows) או Dreamweaver > Preferences (Macintosh).
בחר ערכת נושא בהירה או כהה של קוד ולאחר מכן לחץ על סמל הפלוס (+) ושמור את ערכת הנושא בשם חדש.
פתק
לא ניתן לערוך שינויים בערכת הנושא הבהירה והכהה של הקוד, כך שיהיה עליך לבצע שינויים בעותק של ערכת נושא זו. תוכל תמיד לערוך ערכות נושא חדשות שאתה יוצר.
שמור בשם חדש את ערכת הנושא של הקוד המוגדרת כברירת מחדל.
בחר את ערכת הנושא החדשה שנוצרה של הקוד ולחץ על הסמל Edit.
הקובץ main.less ייפתח ב-Dreamweaver ותוכל לערוך את הבוררים בערכת הנושא כדי להתאים אישית את צבעי הקוד.
בעת שמירת קובץ main.less, תצוגת Code מתרעננת כדי שיופיעו בה הצבעים החדשים.
עריכת בוררים בקובץ main.less
לפני שתתחיל לערוך את הבוררים בקובץ main.less, הקדש כמה דקות לקריאת ההערות וההוראות בקובץ ערכת הנושא. אם עדיין אינך בטוח איזה בורר לערוך, עיין במשאבים הבאים:
- הכרת הבוררים - טבלאות עזר המספקות מידע על רכיבי הקוד המושפעים מבורר מסוים
- שימוש ב-Token Inspector - השתמש ב-Token Inspector כדי "לבדוק" קובץ מסוים ולסמן את רכיבי הקוד המושפעים מבורר מסוים.
- אם ברצונך לערוך את צבעי הקוד עבור הערות, או להתאים את צבע הסימון של תגים זוגיים, עיין בגזירי הקוד לדוגמה המופיעים בדוגמאות התאמה אישית של קוד.
כעת משידוע לך אילו בוררים עליך לערוך, בצע את השינויים בקובץ main.less.
עבור לסוף הקובץ עד שתראה את ההערה הבאה:
/* צבעי קוד מותאמים אישית או דריסות צריכים להתחיל אחרי השורה הזו */
הקלד את הבוררים של רכיבי הקוד שברצונך לערוך את הצבעים שלהם. השתמש בתחביר דומה לדוגמה הבאה:
.cm-tag {color: #00D0D0; }
פתק
אם יש לכם מספר שפות קוד בתוך קובץ יחיד, ואתם רוצים להיות מסוגלים
להבחין בין כל שפה עם צבעי קוד משלה, ראו התאמה אישית של צבעי קוד לקבצי קוד מעורבים.
קבץ בוררים מרובים יחד אם ברצונך להקצות צבע זהה לרכיבים מרובים. בדוגמה הבאה, מוקצה צבע בודד לבוררים מרובים המופרדים באמצעות פסיקים.
.cm-atom, .cm-string, .cm-string-2, .cm-hr {color: #cf681d;}
כדי ליצור התאמות אישיות של צביעת קוד המוגדרות לסוג קובץ ספציפי, תחום את הבוררים של רכיבי הקוד בתוך הבורר של סוג הקובץ כמתואר בדוגמה הבאה:
.HTML{
.cm-tag{ color: #00D0D0;}
}
לאחר ביצוע השינויים, שמור את הקובץ.
Dreamweaver מרענן את תצוגת Code בכל המסמכים הפתוחים ומוסיף את הצבעים החדשים.
פתק
אם השינויים מכילים שגיאות תחביר או משתנים לא מוגדרים, Dreamweaver לא יטען את השינויים שערכת בקוד המותאם אישית, אלא יגדיר מחדש את ערכת הנושא הכהה של הקוד המוגדרת כברירת מחדל.
התאמה אישית של צבעי קוד עבור קובצי קוד מעורב
אם אתה עובד עם מספר קבצים במצבים שונים (קובץ אחד המכיל שפות קידוד שונות) כגון HTML/CSS, או HTML/PHP או HTML/JavaScript, תוכל להתאים אישית את צבעי הקוד באופן הבא:
יצירת ערכת נושא מותאמת אישית של קוד בהתאם להוראות ב- התאמה אישית של ערכות נושא לקוד. בחר את ערכת הנושא החדשה והחל אותה.
צא מ-Dreamweaver.
פתח את package.json בעורך טקסט.
ב-Windows: %appdata%\Adobe\Dreamweaver CC 2017\he_IL\Configuration\Brackets\extensions\user\\
ב-Mac: ~/Library/Application Support/Adobe/Dreamweaver CC 2017/he_IL/Configuration/Brackets/extensions/user//
הוסף את השורה הבאה בערכת הנושא{}:
"addModeClass": true
פתח את Dreamweaver, בחר באפשרות Edit > Preferences > Interface, בחר את ערכת הנושא החדשה ולחץ על סמל העריכה.
הוסף סגנונות ספציפיים למצבים שונים בסוף הקובץ main.less.
השתמש בבוררים המפורטים בטבלה הבאה כדי לערוך צבעי קוד עבור סוג הקובץ המתאים.
|
בורר, Selector |
סוג קובץ קוד |
|---|---|
|
.cm-m-clike |
PHP |
|
.cm m css |
CSS, Less |
|
.cm-m-javascript |
JavaScript |
|
.cm-m-xml |
HTML, XML |
לדוגמה, כדי להתאים אישית את צבעי הקוד של שמות תגים בתגי CSS ובתגי סגנון בתוך HTML או PHP, השתמש בתחביר הבא:
.cm-tag {color: #BD46BD;}
.cm-m-css.cm-tag {color: #38D08B;}
שמור את הקובץ main.less.
השינויים בצבעי הקוד באים כעת לידי ביטוי בקובצי הקוד.
דוגמאות התאמה אישית של קוד
בחן את הדוגמאות הבאות כדי להבין כיצד תוכל להתאים אישית את צבעי הקוד בתרחישים שונים.
התאם את הצבע של סימון התגים הזוגיים
בקובץ main.less, חפש את גזיר הקוד הבא והתאם את הצבע.
.CodeMirror-matchingbracket, .CodeMirror-matchingtag {
/* הבטחת נראות על רקע אפור של עורך קוד מוטמע */
background-color: #B53A3A;
color: #fff!important;
פתק
גזיר קוד זה תלוי בערכת הנושא. ייתכן שלא בכל ערכות הנושא הוא יופיע.
התאם את הצבע של הערות הקוד
בקובץ main.less, חפש את גזיר הקוד הבא והתאם את הצבע.
.cm-comment {color: #717171; font-style: italic;}
הכרת הבוררים
כדי לשנות את הצבעים של רכיבי הקוד, ערוך את מאפייני הבוררים בקובץ main.less.
אך לפני שתיחפז לשנות את הבוררים בקובץ main.less חשוב להבין מה משמעותם ועל אילו רכיבי קוד הם משפיעים. בדוק את הטבלה שלהלן כדי להבין את רכיבי הקוד בקובצי HTML, CSS, JavaScript ו-PHP המושפעים מבוררים אלה.
ניתן גם להשתמש ב-Token Inspector כדי להבין אילו רכיבי קוד מושפעים מבורר מסוים.
| בוררים | HTML | CSS | JavaScript | PHP |
|---|---|---|---|---|
| .cm-atom | שמות ישויות כגון | צבע בתבנית הקסדצימלית, RGB או HSL, ערכי מאפיינים מוגדרים מראש כגון strong, none, auto, inherit וכן הלאה. | true, false, null, undefined, NaN, Infinity | True, False, Null וערכים קבועים מסוג magic כגון __LINE__, __DIR__ וכן הלאה |
| .cm-attribute | שם תכונה | סוגי מדיה כגון all, braille, print, screen וכן הלאה | ||
| .cm-bracket | סוגרי תגים כגון <, >, /> ו-</ | |||
| .cm-builtin | בורר המזהים | פונקציות מובנות כגון htmlspecialchars, trim, substr וכן הלאה | ||
| .cm-comment | Comment | Comment | Comment | Comments |
| .cm-def | המשתנה "@ rule" | , הגדרה של פונקציה ופרמטר של פונקציה | שם הפונקציה בהגדרת הפונקציה | |
| .cm-error | תגי סגירה ללא תג פתיחה חסרות מירכאות לערך מאפיין |
שגיאה בגלל סוגריים חסרים מסוג { או } או בגלל גרשיים חסרים של ערך מאפיין או מאפיין לא מזוהה | ||
| .cm-keyword | שמות של צבעים, !important, מילות מפתח ב-@media כגון and, only וכדומה. | מילות מפתח של מבנה בקרה (if, else, …), in, of, from, default, public, private וכן הלאה | מילות מפתח כגון function, if, else, new, echo, isset וכן הלאה | |
| .cm-meta | הצהרת <!DOCTYPE> | תחיליות ספציפיות לדפדפן כגון -webkit-, -o- וכן הלאה | שלוש נקודות בתחביר של פריסה. לדוגמה: myFunction(...iterableObj); | הצהרת <!DOCTYPE> ותגים פותחים וסוגרים של PHP: <?php, ?> |
| .cm-number | מספר כלשהו עם או בלי יחידה | כל מספר כגון 12, 2.1, 123e-5, 0x11, 0b11, 0o11 וכן הלאה | כל מספר כגון 12, 2.1, 0x11, 0b11, 0123, 5.0E+19 וכן הלאה | |
| .cm-operator | אופרטורים: +, -, *, +=, !==, &&, >>>, וכן הלאה | אופרטורים כגון ===, &&, !, =>, +, -, וכן הלאה | ||
| .cm-property | שם מאפיין | שיטה או מאפיין של האובייקט | ||
| .cm-qualifier | בורר מחלקה | |||
| .cm-string | ערך מאפיין | מחרוזת רגילה, כגון מחרוזת המועברת לקריאת url(), שם גופן בתוך מרכאות וכן הלאה. | מחרוזת מילולית | מחרוזת מילולית |
| .cm-string-2 | מאפיינים לא סטנדרטיים כגון scrollbar-arrow-color, scrollbar-base-color וכן הלאה. | ביטויים רגולריים | ||
| .cm-tag | שם תג | בורר תגים | ||
| .cm-variable | שמות גופנים ללא מרכאות | משתנים/פונקציות גלובליים, הפניות של מחלקות | שמות של פונקציות בהגדרת המשתמש, הפניות לממשק/למחלקות, מאפייני מחלקות, הטלות, | |
| .cm-variable-2 | מאפיינים מותאמים אישית כגון main-bg-color | הפניות למשתנים/לפונקציות לפי היקף | משתנים, פרמטרים או תכונות שמוגדרים מראש ושמוגדרים על-ידי המשתמש | |
| .cm-variable-3 | מחלקות מדומות כגון :hover ו- :focus ורכיבים מדומים כגון ::first-letter, ::selection וכן הלאה |
הטבלה הבאה מציינת את התבניות והספריות של Dreamweaver המושפעות מהבוררים בקובץ main.less.
|
בורר |
תבניות (DWT) |
ספרייה (LBI) |
|---|---|---|
|
.cm-templateComment |
הערות תבנית |
|
|
.cm-templateAttrVal |
ערכי תכונה בהערות תבנית |
|
|
.cm-instanceParam |
תכונה והערה של InstanceParam |
|
|
.cm-instanceParamAttrVal |
ערכי התכונה InstanceParam |
|
|
.cm-libraryItem |
|
ספריות שנוספו למסמך. לדוגמה: .cm-libraryItem { color: #3A3A3A; background-color: #A4A4A4; } |
הטבלה הבאה מציינת את הבוררים שיהיו בשימוש בעת התאמה אישית של צבעי קוד עבור תרחישים שבהם שפות מרובות קיימות בקובץ יחיד.
|
בורר, Selector |
סוג קובץ קוד |
|---|---|
|
.cm-m-clike |
PHP |
|
.cm m css |
CSS, Less |
|
.cm-m-javascript |
JavaScript |
|
.cm-m-xml |
HTML, XML |
שימוש ב-Token Inspector
כדי ללמוד כיצד הבוררים בקובץ ערכת הנושא main.less משפיעים על רכיבי הקוד בקובצי קוד (שאינם HTML, CSS, JavaScript ו-PHP), השתמש ב-Token Inspector.
פתח את Token Inspector בעזרת Google Chrome.
כלי השירות TokenInspector מכיל את המקטעים הבאים:
- עורך קודים,
- אפשרות לשינוי מצבים וכן
- רשימת בוררים בצד ימין.
A. Code Editor B. האפשרות Change Mode C. רשימת הבוררים
העתק והדבק את התוכן של קובץ לתוך Code Editor.
שנה את מצב הקובץ על-ידי הקלדת סיומת שם הקובץ ולחיצה על Change mode.
לדוגמה, אם זהו קובץ HTML, שנה את סיומת שם הקובץ ל-html. העמוד מתעדכן כדי לשקף את השינוי במצב ומפרט את המצב הנוכחי בחלק העליון של העמוד.
בחר את רכיב הקוד שברצונך לשנות את המראה שלו.
Token Inspector ידגיש את הבורר.
(אופציונלי) ניתן גם לבחור בורר בודד כדי לראות אילו רכיבי קודים בקובץ הקודים מושפעים מבורר זה.
רשום לפניך את הבוררים שברצונך לערוך ולעדכן וסגור את Token Inspector.
פריטים דומים נוספים
בניית אתרי אינטרנט יפהפיים ב-Dreamweaver
עיצוב כתיבת קוד וניהול אתרי אינטרנט דינמיים בכלי רב עוצמה כולל.
