על חשיבה 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 (קובץ נפרד לכל עיצוב)
Wired News – ואתר חדשות מסחרי זה נבנה כולו ע"י CSS
Espn.com – ואתר זה הוא האתר של חברת הטלוויזיה ESPN. אם מסתכלים בקוד המקור שלו רואים שאין אפילו טבלה אחת. ואפשר להסיק מזה שאפילו אתרים עם עיצוב מדהים וכביכול מסובך אפשר לכתוב לעצב אותם ע"י CSS
W3C – Box Model Tutorial – ו קישור למדריך מודל הקופסא מבית W3C (ארגון תקני הוואב)

– אתר כותבת המאמר: Xslf