|fav המועדפים שלי |pad מחברת אישית|talckback תגובות הקוראים|poll השתתף בסקר |
  
|about אודות|eitan home page   תפריט איתן
המדריך לבניית אתרים - גיליון סגנונות מדורג
התהליך
    ממשק המשתמש   
עיצוב האתר
עיצוב דף
טיפוגרפיה
עריכה
גרפיקה
מולטימדיה
קישורים
 
  לפני שמתחילים
  לפני שמתחילים
    תהליך הפיתוח
    תהליך הפיתוח
 
תכנון
תכנון
מפרט האתר
מפרט האתר
 
הגדרות ותכנון
הגדרות ותכנון
ארכיטקטורת מידע
ארכיטקטורת מידע
עיצוב האתר
עיצוב האתר
בניית האתר
בניית האתר
שיווק האתר
שיווק האתר
תחזוקת האתר
תחזוקת האתר
 
  דף האינטרנט
  דף האינטרנט
  'דפים 'עצמאיים
  'דפים 'עצמאיים
  כללים בסיסיים
  כללים בסיסיים
  ניווט
  ניווט
 
עיצוב ידידותי
עיצוב ידידותי
נגישות
נגישות
 
     אירגון המידע        
     אירגון המידע        
       מבנה האתר        
       מבנה האתר        
  מוטיבים בעיצוב האתר
  מוטיבים בעיצוב האתר
      יסודות האתר       
      יסודות האתר       
אינטרנט לעומת מסמך
אינטרנט לעומת מסמך
 
חלוקת המידע
חלוקת המידע
 
מבנה בסיסי
מבנה בסיסי
תרשימי האתר
תרשימי האתר
 
הכשרה
הכשרה
לימוד
לימוד
השכלה
השכלה
אתרי בידור
אתרי בידור
אתרי חדשות
אתרי חדשות
מסחר אלקטרוני
מסחר אלקטרוני
 
דף הבית
דף הבית
תפריטים
תפריטים
רשימת מקורות
רשימת מקורות
מדריכי אתר
מדריכי אתר
'?מה חדש'
'?מה חדש'
מאפייני חיפוש
מאפייני חיפוש
משוב משתמשים  
משוב משתמשים  
ביבליוגרפיה ונספחים
ביבליוגרפיה ונספחים
שאלות נפוצות
שאלות נפוצות
הודעות שרת
הודעות שרת
 
היררכיה ויזואלית
היררכיה ויזואלית
עקביות
עקביות
מימדי דף
מימדי דף
אורך דף
אורך דף
קוים מנחים
קוים מנחים
כותרות
כותרות
עימוד דף
עימוד דף
מסגרות
מסגרות
 
מאפיינים
מאפיינים
  מבנה התוכן    
  מבנה התוכן    
     קריאות      
     קריאות      
עקביות
עקביות
פלטפורמות
פלטפורמות
נגישות
נגישות
גרפיקת טקסט
גרפיקת טקסט
 
  גליונות סגנון  
  גליונות סגנון  
 
אורך שורה
אורך שורה
פונטים
פונטים
גודל הפונט
גודל הפונט
הדגשה
הדגשה
 
אירגון התוכן
אירגון התוכן
סגנון מקונן
סגנון מקונן
כותרות
כותרות
קישורים
קישורים
 
  גרפיקה ברשת   
  גרפיקה ברשת   
   קבצי גרפיקה   
   קבצי גרפיקה   
תמונות על המסך  
תמונות על המסך  
  HTML -גרפיקה ו
  HTML -גרפיקה ו
 
הצגת צבעים
הצגת צבעים
'צבעים 'בטוחים
'צבעים 'בטוחים
מיזוג צבעים
מיזוג צבעים
רזולוצית מסך
רזולוצית מסך
(Gamma) ניגודיות
(Gamma) ניגודיות
גרפיקה ורוחב פס
גרפיקה ורוחב פס
 
GIF - קבצי
GIF - קבצי
JPEG - קבצי
JPEG - קבצי
PNG - קבצי
PNG - קבצי
סיכום - סוגי קבצים
סיכום - סוגי קבצים
 
מסך מול הדפס
מסך מול הדפס
המחשות מורכבות
המחשות מורכבות
תרשימי מסך
תרשימי מסך
 
יישומי מולטימדיה
יישומי מולטימדיה
  אסטרטגיות ברשת  
  אסטרטגיות ברשת  
  יצירת מולטימדיה  
  יצירת מולטימדיה  
עיצוב ומולטימדיה
עיצוב ומולטימדיה
 
שמע
שמע
  שיקופיות  
  שיקופיות  
ווידאו
ווידאו
אנימציה
אנימציה
 
  עיבוד  
  עיבוד  
  העברה  
  העברה  
 
דף הבית >> טיפוגרפיה >> מבנה התוכן >> CSS

 

גיליון סגנונות מדורג

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

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

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

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

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

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

<H1 ALIGN="center"><FONT FACE="Verdana, Helvetica, Arial, sans-serif" SIZE="6" COLOR="gray">Section heading</H1></FONT>

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

<H1 ALIGN="center"><FONT FACE="Verdana, Helvetica, Arial, sans-serif" SIZE="6" COLOR="gray">Section heading</H1></FONT>

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

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

 


  |   דף הבית  |  הדפס עמוד  |  מפת האתר  |  לתחילת העמוד  |  


המדריך לבניית אתרים
מערכת המידע האקדמית - איתן כל הזכויות שמורות © 2003