ראשי > מבוא > עיצובים דינמיים

עיצובים דינמיים

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

בקצרה, יש מספר דרכים לממש עיצוב תוך שימוש בגיליונות סגנון. תוכל להגדיר עיצובים שמתייחסים באופן גלובלי לאלמנטים של HTML מסוג מסוים. לדוגמה, תוכל ליצור גיליון סגנון שקובע שכל האלמנטים מסוג <H3> יהיו בולטים (תכונת font-weight) ואדומים (תכונת color).

תוכל להגדיר עיצוב "מחלקות", שהוא עיצוב מוגדר מראש שמתייחס לאלמנט על פי דרישה. למשל, תוכל לקבוע שמחלקת העיצוב “redbold” מכילה טקסט בולט בצבע אדום. המחלקה הזו תיושם רק עבור אלמנטים עבורם תדרוש עיצוב זה, לדוגמה: 

<BLOCKQUOTE CLASS="redbold">. 

   לבסוף, כמו שראית, תוכל להגדיר וליישם עיצובים בתוך השורה (inline), תוך שימוש בתכונה STYLE עבור תג. לדוגמה:

  <H4 STYLE="color:red;font-weight:bold;">

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

HTML דינמית לכאורה

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

באינטרנט אקספלורר של מיקרוסופט, ניתן לשנות רבות מתכונות העיצוב שהוגדרו בגיליון הסגנון ע"י שימוש ב-Javacript. שינויים אלה ייראו מיידית על המסך—כך, אם תשנה את תכונת הצבע של מחלקת redbold לכחול, כל טקסט על המסך שמשתמש במחלקה ישנה צבעו לכחול. בצורה דומה, תוכל לשנות כל תכונת עיצוב עבור אלמנטים שמוגדר בהם עיצוב inline.

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

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

לעמוד הקודם      לעמוד הראשי        לעמוד הבא