TopStyle Lite - Review No. 21 (Hebrew), Site Builders Corner

בוני האתרים:

סקירה
21
12.2.2001

20.9.2001

מערכות
הפעלה:

Windows:
95 / 98 / ME
NT 4.0
2000

רשיונות:

Freeware

Pro - Buy
Online:
$ 49.95

קישורים:

חיפוש:

רשימת תפוצה:

TopHost CSS

TopStyle Lite
Version 2.5 [1.38 MB]

עורך גליונות סגנונות (CSS)

כבוני אתרים, בוודאי נתקלתם לא פעם במושג CSS בהקשר לבניית אתרים. לא כולם יודעים במה בדיוק מדובר. הרי לכם מבוא קצר.

"גליונות סגנונות מדורגים" הוא תרגום חופשי למושג: Cascading Style Sheets. המושג מתאר שימוש בהגדרות הנכתבות בכעין שפה על מנת להגדיר סגנונות תצוגה שונים בדפי HTML. מהו סגנון? התשובה פשוטה, למשל הגדרה עבור כיתוב מסויים בדף. הקטע הסגול הוא בסגנון שקראתי לו "Pur" והכולל הגדרת גופן אריאל בגודל 10 נקודות, אות מובלטת (Bold) ובצבע סגול.

מה ההבדל בין הגדרת <FONT> הכוללת פרמטרים אלו לבין השימוש בסגנון? ובכן, שני הבדלים עיקריים: הראשון הוא שלאחר הגדרת סגנון ניתן להחיל אותו בקלות בכל מקום בדף. השני הוא שהתג <FONT> איננו מוגדר יותר כבר-שימוש בהגדרות של HTML 4.0 ואילך. הדפדפנים עדיין תומכים בו אך דור עתידי עשוי להפסיק לתמוך בתג זה המוחלף ע'י CSS.

ב- CSS מגדירים בדרך כלל שני סוגי אובייקטים ראשיים: אלמנטים וקלאסים:

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

קלאסים הם הגדרות עיצוב שאינן קשורות לתג מסוים ושניתן להפעילם על ידי השימוש בפרמטר ‎CLASS=‎ במירב התגים כדי לשנות את העיצוב.

בשני המקרים, ניתן להגיע לרמת עיצוב מתקדמת ביותר כקביעת מיקום מוחלט על המסך, קביעת טבלאות בגודל מוכתב מראש ועוד המון אפשרויות. לא כל הדפדפנים תומכים ב- CSS באותה צורה (שוב ושוב אי תאימויות לסטנדרט) ואלו שלפני הדור הרביעי כמעט שאינם תומכים בה כלל. התמיכה המקובלת היא ב- CSS Level 1 שהיא הדור הראשון ואילו התמיכה ב- CSS Level 2 עדיין מועטה. בדף בו הוגדר סגנון יש עדיפות להגדרות הללו על פני ההגדרות הבסיסיות של HTML, למשל, צבע הרקע המוגדר בסגנון של ‎BODY {...}‎ עדיף על הצבע המוגדר בתג <BODY>.

איך מיישמים סגנונות? ובכן, יש שלוש שיטות:

Inline Style: הגדרת סגנון כפרמטר של תג כלשהו ע'י ‎STYLE=‎. זו הגדרה מקומית ופעילה רק בתחומי התג בו הוגדרה ואינה ניתנת לשימוש חוזר.
השימוש בתגי <STYLE> </STYLE> במקטע הראש של הדף ליצירת הגדרת סגנונות לשימוש נרחב וחוזר ברחבי הדף.
השימוש בקובץ סגנונות חיצוני הנטען אל כל הדפים הרצויים לשימוש נרחב וחוזר באותם דפים. היתרון הגדול שבשיטה זו הוא ששינוי הגדרת סגנון כלשהו בקובץ ההגדרות תתתבטא מיידית בכל הדפים המשתמשים באותו קובץ סגנונות.

אינני מתיימר ללמד כאן את השימוש ב- CSS. בצד שמאל תמצאו שני קישורים אל שני אתרים הכוללים מדריכים, בעברית ובאנגלית כיצד משתמשים בסגנונות.

העזר הנסקר כאן TopStyle Lite הינו עורך CSS חופשי בגרסה קלה שנגזרה מגרסת ה- Pro שעולה כ- ‎$ 50‎ והתומכת בתכונות רבות נוספות. הגרסה הקלה יועדה כדי לעזור בעריכת סגנונות המוטבעים בדף כלשהו אך בו במידה ניתן ליצור ולערוך איתה קבצי סגנונות חיצוניים. זהו עזר מעולה וכל המשתמש ב- CSS חייב להעזר בו. בוני אתרים מקצועיים יעדיפו לרכוש את גרסת Pro שתאפשר להם אופטימיזציה של הקבצים והאתרים.

לעזר שלושה חלקים עיקריים:

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

אזהרה: לכותבי אתרים בעברית ויזואלית - אל תגדירו שמות ומשפחות פונטים לסגנונות טקסט עבריים. ניתן להגדיר כאלה לסגנונות טקסט בשפות אחרות.

עריכה ומאפיינים של אלמנט Body

בחירה באלמנטים וקלאסים שונים ומבט מוקדם

מבט על TopStyle Pro