פיתוח אתר בעזרת CSS

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

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

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

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

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

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

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

שיטה מוכרת לחלוקה של התוכן והתגיות היא כזאת:
תחת ה-body יש div גלובאלי, אליו נכנסות שאר התגיות, בתוך ה-div יש חלוקה של תגיות לפי מיקום, אם זה נניח אזור עליון שנפרש על כל ה-div הגלובאלי, מתחת חלוקה של 2 divs אחד לצד השני, ואז div תחתון שנפרש כמו העליון.
בעזרת החלוקה של תגיות לפי מיקום אנחנו מקבלים את מבנה האתר בעצם (המבנה שתיארתי במקרה הזה דומה למבנה של הבלוג שלי).
תחת התגיות על פי מיקום אנחנו ממקמים את התוכן בהתאם לתכונות שנתנו לו, נניח h1 אנחנו נכניס ל-DIV העליון שנמצא בגלובאל ונכתוב את שם האתר, ובעצם כעת אנו נחלק את התכנים לפי המיקום המתאים.

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

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

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

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

אני מאחל לכולם בהצלחה, והמלצה קטנה: כשאתם משתמשים ב-CSS, תנסו לחשוב מחוץ לקופסא.