מעל 250,000
כבר בחרו לפתוח אתר במערכת בניית אתרים שלנו, אנו מציעים לך לבדוק אותנו ולראות שלא תוכל לקבל מוצר טוב יותר במקום אחר. פתח אתר כעת
לייבסיטי - מאמרים
טכניקות בניית אתרים - טבלאות מול CSS
מלאכת עיצוב האתר אינה פעולה של מה בכך – קיימות טכניקות רבות לסידור התכנים בצורה נוחה כשהבולטות ביניהן הן טבלאות ושימוש בCSS. במאמר זה נסקור את ההבדלים בין הגישות, לרבות היתרונות והחסרונות של כל גישה.
בניית אתרים - טבלאות להצבת רקע
שימוש בטבלאות בתהליך בניית אתרים התחיל ברגע שהאינטרנט נהיה "גרפי". טבלאות מוכרות, פחות או יותר, לכל משתמש במחשב שעבד בשלב כזה או אחר עם מעבד תמלילים דוגמת וורד או אקסל.
בתהליך בנייית אתרים טבלה מאפשרת להגדיר את כמות השורות, כמות העמודות, לאחד תאים, לקבוע מימדים לכל תא בנפרד ואף ליצור טבלאות פנימיות לטובת סידור מורכב-יחסית של תכנים. הקונספט מוכר לנו מעבודת היומיום מול המחשב, בעוד העבודה עצמה היא פשוטה ומובנת לכל. בהקשר של בניית אתרים, כל תא יכול לקבל הגדרות ספציפיות משל עצמו ועל כן להיות מופרד משאר התאים מבחינת הגדרותיו.
מיד כשהתאפשר להסתיר את המסגרת (ובכך להסתיר את עובדת קיומה של הטבלה) מעיניו של הגולש, השימוש בה ככלי עיצובי צבר תאוצה רבה.
עקב הפופולאריות הרבה, עיצוב מבוסס טבלאות הוא עדיין סוג העיצוב הנפוץ ביותר באינטרנט, על אף שנחשב ל"מיושן".
בניית אתרים - שימוש בטבלאות, יתרונות וחסרונות
כפי שצויין, היתרון הגדול של שימוש בטבלאות בתהליך בנייית אתרים הוא בעיקר האינטואיטיביות הרבה. בעל האתר מעוניין להציג תמונה בסמוך לטקסט? הוא יצור טבלה של שתי עמודות – עמודת הטקסט רחבה, עמודת התמונה צרה. לחילופין, תפריט עבודת-יד אינו אלא טבלה בעלת עמודה אחת וכמות שורות בהתאם למספר הכפתורים – כשכל כפתור יכול להיות טקסט, תמונה או אף פלאש. רוצים לעצב כל תא בנפרד? אין בעיה! עיצוב טבלאי מאפשר זאת, שכן מבחינת קוד, כל תא הוא יישות עצמאית. דבר זה מאפשר "לשרשר" הוראות: אם אני רוצה להגדיר הגדרה מסויימת לשורה שלמה, אני יכול להגדיר רק אותה במקום להגדיר כל תא בנפרד, כנ"ל לעמודה.
אליה וקוץ בה: ריבוי ההגדרות השונות יוצר קוד עמוס, כלומר משקלו של הקוד גדל בהתאם לגודל הטבלה. קוד כבד מאט את פעולת הטעינה – על המשמעויות השונות של איטיות זו: נגישות מופחתת למשתמש, דירוג נמוך יחסית לאתרים מהירים במנועי חיפוש.
חיסרון בולט נוסף נמצא בכך שהתוכן הופך להיות חלק אינטגרלי מהטבלה. שינוי בטבלה ידרוש הזזה של התוכן למקום אחר, בניה מחודשת של כל התכנים. זה לא קשה כשמדובר באתר קטן או אתר שנבנה על ידי אדם אחד, אך כשמדובר באתר בעל עמודים רבים שמספר רב של אנשים עובדים על עדכונו, “להכניס עובד לעניינים" ידרוש לימוד של הקוד הקיים והגדרותיו.
בניית אתרים - מחלקות CSS, רקע
עם צבירת התאוצה של שפת הCSS כשפה משלימה לHTML הסטנדרטי – גבר השימוש בשפה זו מבחינת עיצוב אתרים.
בפשטות, שימוש בשפה זו לעיצוב כרוך ביצירת "מיכלים" (containers), לרוב - תגיות div, והכנסת התוכן לתוך המיכלים. אם הכנסתי טקסט למיכל שכזה, כדי לשנות את העיצוב שלו, אני לא צריך לגעת בטקסט, אלא לשנות את הגדרות המיכל.
גישה זו תופסת תאוצה בזכות התפיסה שיש להפריד תוכן מעיצוב, שכן העיצוב יכול להשתנות (לדוגמא, בין דפדפנים שונים) אך התוכן חייב להיות מוצג בצורה תקינה. אם האתר שלי יודע לזהות, לצורך העניין, שגולש מגיע באמצעות דפדפן סלולרי, אני יכול "להנחות" את האתר לטעון את סט ההגדרות הרלוונטי עבור משתמשים סלולאריים – במקום להניח שהדפדפן של המשתמש ידע לפרש את העיצוב שלי בצורה דומה.
בעבודה עם מחלקות CSS, בדרך כלל יהיה קובץ עיצוב יחיד עם כלל הגדרות העיצוב (ניתן לדמיין ספר מתכונים) וכל אלמנט עיצובי ימשוך במידת הצורך את ההגדרה (או המתכון) הרלוונטיים בלבד.
בניית אתרים - CSS, יתרונות וחסרונות
כטכניקה הנחשבת כממשיכת דרכה של טכניקת הטבלאות, מעצבי אתרים רבים מדביקים למילה "טבלאות" את ההקשר "מיושן" באופן אוטומטי. גישה זו הינה מתקדמת יותר טכנולוגית ומאפשרת חופש עיצובי רב – כדי לשנות עיצוב של פסקה, לדוגמא, אני לא צריך לעבור על כלל הפסקאות באתר, אלא לשנות באופן כללי את ההגדרה של "פסקה מהי". אם אחליט שכותרות באתר שלי תמיד יהיו מודגשות, גדולות ואדומות – מספיק שאגדיר זאת פעם אחת בקובץ הCSS, וכל מה שהגדרתי ככותרת יקבל אוטומטית את ההגדרה שלי. אם כן, חסכון רב בקוד הינו יתרון נוסף – משמעותו משקל קטן יותר ומהירות טעינה מוגברת.
כפי שצויין קודם, ניתן בגישה זו לכתוב סט הגדרות שונה עבור כל דפדפן ובכך להתגבר על ההבדלים הבולטים בין הדפדפנים, תוך הגברת תאימות האתר לתצוגות שאינן סטנדרטיות.
החסרון הבולט נובע מעצם ההגדרה – מדובר בשפה בפני עצמה, תפיסה שונה ומחודשת שיש ללמוד. העבודה אינה אינטואיטיבית עבור מי שלא ישב ולמד את השפה. בניגוד לגישה הרווחת בעולם המחשבים של WYSIWYG (“מה שאתה רואה זה מה שתקבל"), עבודה עם CSS היא "מאחורי הקלעים" מעצם הגדרתה – המעצב עובד על קובץ ההגדרות ולא על האתר בפועל. העבודה תדרוש הבנה רבה בקוד HTML ותיעשה ברובה בתצוגת הקוד ולא בממשק עריכה נוח כלשהו. יש לשנס מותניים ולצפות לעבודה רבה מול טקסט, כדי לראות תוצאות בשטח: בהחלט לא למתחילים!
בנוסף, מעצבי CSS חייבים להכיר בכך שהם מכוונים את האתרים שלהם לבעלי דפדפנים חדשים בלבד. אמנם בטוח יחסית להניח שלרוב הגולשים יהיה דפדפן מעודכן, אך אל לנו לשכוח שמוסדות גדולים או חברות ותיקות ייתכן וטרם ביצעו את המעבר לתוכנה עדכנית – ועובדיהן עדיין משתמשים בתוכנה שאינה יודעת לפרש CSS כהלכה.
אז מה עדיף?
שאלת מיליון הדולר. מעצב מקצועי, מעצם היותו בעל מקצוע בתחום זה, ימליץ בחום על עבודה מול CSS והצדק יהיה איתו. מדובר בטכנולוגיה מתקדמת יותר המאפשרת חופש רב יותר, תאימות מוגברת ויכולת קלה לביצוע שינויים בעתיד.
בונה אתר מתחיל המסתמך על מושגים שהוא מכיר מעולם המחשוב הכללי ימליץ על עבודה עם טבלאות – פשוט, ברור, אינטואיטיבי ונגיש. רוב האתרים מבוססים על טבלאות, אז הסבירות שיוצרי דפדפן כלשהו יוותרו על היכולת להציג את הרוב הגדול של האתרים באינטרנט היא נמוכה בהחלט: תמיכה בטבלאות מובטחת לעוד שנים רבות וטובות. אם amazon.com עדיין מציגים עיצוב טבלאי נכון לרגע כתיבת שורות אלו, לא עושה רושם שיש להם בעיה קידומית כלשהי או מחסור ביחסי-ציבור...
האיזון נמצא איפשהו באמצע, בהתאם לרמת בונה האתר.
אם אתה מתחיל בתחום בניית אתרים, שנסיונו במחשבים מסתכם במעבדי תמלילים – אין כל פסול בשימוש בטבלאות. יתירה מזאת, עם קצת חשיבה יצירתית תוכל לבנות אתר שלא נופל ברמתו משום אתר אחר.
אם אתה מעצב בעל ניסיון, סביר להניח שלא תיצור טבלה אחת באתר כולו ותשתמש במיכלים בלבד. כל עוד אתה יודע מה אתה עושה – לך על זה.
קיימת גם פשרת ביניים – הרי גם טבלאות מסוגלות לקבל הגדרת CSS. המשתמש הפשוט יוכל לבנות לעצמו טבלה, והמעצב יוכל "להלביש" עליה סט שלם של הגדרות עיצוב מתקדמות, כך שהגישות אינן ב"מלחמה" כפי שמעצבים נהנים לצייר אותן. בכל מקרה, ההמלצה תמיד תהיה לבחור בגישה הנוחה יותר ולבטא את עצמך באמצעותה בצורה הטובה ביותר!
English
Español
Deutsch
Français
Pусский
العربية
हिंदी
Italiano
日本の
Português
עברית
