על חשיבה CSSית ובניית אתרים
אחת הבעיות שיש לאנשים במעבר ליצירת אתר מבוסס css
לחלוטין (ללא טבלאות) היא שיטת החשיבה השונה.
ביצירת אתר טבלאי, מתחילים בדרך כלל בשרטוט "גריד" אותו ממלאים
בתכנים.
אומרים: "זה יהיה בתא הזה, וזה יהיה בתא הזה". אח"כ מתרגמים את הגריד
לטבלה, זורקים בה את התוכן, ונגמר הסיפור.
ב-css זה אחרת. אם משתמשים ב־css לכל העיצוב לאתר, ולא רק להוספת צבע,
צריך לחשוב בצורה שונה.
אחד העקרונות המרכזיים של CSS הוא הפרדת התוכן
מהתצוגה. לכן, הדבר החשוב ביותר בדף הוא המבנה
הלוגי שלו, ומשם צריך להתחיל.
השאלה שצריך לשאול קודם כל היא "ממה מורכב הדף שלנו?" ואז לענות-
כותרות ראשיות, כותרות משניות, תפריטי ניווט, המאמר עצמו וכו'.
זהו גם הבסיס לשיטה מאוד יעילה ליצירת אתרים לא טבלאיים (שלא אני
פיתחתי, אבל אימצתי בחום):
- לכתוב קודם את הדף ללא עיצוב כלל, רק markup (הגדרת כגותרות ופיסקאות, לא יותר מזה) כך שיש לך ביד את המבנה הלוגי של הדף.
- להוסיף את ה-css כשאתה עובד מול מוזילה / מוזילה פיירפוקס (ועם התוסף web developer) , מכיוון שהם קרובים יותר לתקן. ושוב- צריך ללמוד "לצאת מהמסגרת" ולא לחשוב במונחים של גריד/טבלה, אלא במונחים של "זו כותרת, אני רוצה שהיא תיראה כך", "זהו תפריט, אני רוצה שהוא יראה כך".
- לעבור על הדף עם אקספלורר, ולהוסיף את ההאקים שהוא זקוק לו.
- עכשיו כשהדף הסטטי עובד, אפשר להוסיף לו את הסקריפטים שרוצים.
התוסף web developer: תוסף זה הינו אחד ממיני רבים של
תוספים שנכתבו עבור מוזילה פיירפוקס. כשמו כן הוא תוסף עבור מפתחי
אתרים. תוסף זה מאפשר לך לבדוק במהירות האם העמוד שלך תומך בתקן שאותו
הגדרת בעמודך, גישה ישירה לרפרנסים של W3C, בדיקת רזולוציות, הצגת קוד
מקור, סימון של סוגי אלמנטים וכדומה.
התוסף ניתן להורדה כאן
למרות שזו נראית דרך ארוכה, היא למעשה קצרה יותר, כי אתה לא מתעסק
עם קוד שגוי למשך זמן בעקבות הרנדור של אקספלורר- אתם מתחילים עם קוד
נקי ונכון ורק בעת הצורך מוסיפים לו האקים.
אני מאוד ממליצה על הספרים eric mayer on css ו- more eric mayer on
css, שמסבירים את הגישה הזו (עם המון דוגמאות) צעד-אחר-צעד.
למידע על הספרים ראו כאן:
http://www.ericmeyeroncss.com
ולמי שתהה: ה-box model אינו פתרון קסמים ליצירת דף שמתאים לכל
רזולוציה, במיוחד אם משתמשים בו כתחליף טבלה.
ומאוד לא מומלץ ללמוד אותו באמצעות אקספלורר- פשוט אקספלורר מבוגג
מאוד כשזה מגיע ל-box model, כך שהלמידה תהיה הרבה יותר מבלבלת. אפשר
לגרום גם לאקספלורר להציג את האתר כשורה בלי יותר מידי בעיות, אבל
בשביל לעשות את זה, אתם חייבים לדעת מה הפקשושים שלו, ואיך הקוד
"אמור" להתפרש על ידי הדפדפן.
הערה: זה בסדר גמור שהדף יראה שונה ברזולוציות שונות. האינטרנט זה
לא דפוס, והוא מדיום נזיל וגמיש. זהו טבעו.
מה שחשוב הוא שהדף קריא, והמבנה הלוגי נשמר, כך שאפשר להבין מה הולך
שם.
קישורים שימושיים:
- CSS Zen Garden - The Beauty in CSS Design - באתר זה יש "תיק עבודות" כאשר כל העיצובים משתמשים באותו קוד HTML והעיצוב עצמו נעשה ע"י CSS (קובץ נפרד לכל עיצוב)
- positioniseverything.net- אתר העוסק בבאגים של דפדפנים הקשורים ל־CSS, ואיך לעקוף אותם. בצורה לא מפתיעה, רוב הבאגים הם של אקספלורר.
- Wired News - אתר חדשות מסחרי זה נבנה כולו ע"י CSS
- Espn.com - אתר זה הוא האתר של חברת הטלוויזיה ESPN. אם מסתכלים בקוד המקור שלו רואים שאין אפילו טבלה אחת. ואפשר להסיק מזה שאפילו אתרים עם עיצוב מדהים וכביכול מסובך אפשר לכתוב לעצב אותם ע"י CSS
- W3C - Box Model Tutorial - קישור למדריך מודל הקופסא מבית W3C (הארגון שקובע את התקנים באינטרנט)
0 הפניות
Listed below are links to blogs that reference this entry: על חשיבה CSSית ובניית אתרים.
TrackBack URL for this entry: http://www.xslf.com/mt/xslf-tb.cgi/85
כדאי אולי להוסיף לינק לדיון המקורי בפורום בוני האתרים? אני סקרן לדעת מה היו התגובות.
הקישור נוסף לקטע.
מודה, התעצלתי קודם לאתר מחדש את הקישור :-)