טבלאות היו קיימות ב-HTML מסיבה אחת בלבד: להצגת מידע טבלאי. אך אז border="0" עשה זאת אפשרי עבור מעצבים ליצור רשת שעליה ימוקמו תמונות ומלל. השימוש בטבלאות (שהן עדיין האמצעי השולט בעיצוב אתרי אינטרנט עשירים) למעשה מפריע עתה בבנית אתרים טובים, נגישים, גמישים ושימושיים יותר. גלה מהיכן נובעת הבעיה ולמד פתרונות ליצירת פריסה חלופית או נטולת טבלאות כלל.
האם יש "חליפות" בקהל? האם הבוס שלך נמצא כאן ב-"Seybold", אבל נוכח כרגע בישיבה אחרת? לך תביא אותו הוא האיש שצריך לדעת איך תקני אינטרנט יכולים לחסוך כסף לחברה.
אנו נציג בפניכם שיטת עבודה אשר:
אנו גם נסביר איך פריסת עמודים בעזרת גליונות-סגנון מדורגים (CSS) דורשת דרך חשיבה שונה במקצת על התוכן והמבנה שאתה רגיל אליו.
בהתחלה, האינטרנט שימש בעיקר כמדיה לשיתוף אינפורמציה אקדמית מחקרית וצבאית. אולם לא לקח זמן רב לבעלי חזון עצמאי להבין שהאמצעי הזה הוא אידאלי למכירה של כל דבר החל מתוצרת טרייה ומזון לכלבים עד למכוניות וסיקורי ספורט שוטפים.
אולם, כמו כל אמצעי שעודו בחיתוליו, האינטרנט בראשיתו היה 'גס' אסתטית, (ולא ממש מפתה עבור הלקוחות) עד שדויד סיגל פרסם את הספר שהיה לנקודת מפנה שהציע מספר מעקפים מבריקים למוגבלויות של דפדפני אינטרנט קיימים ולהגדרות של ה-w3c בסביבות 1997. (חבר'ה, אנו מדברים על נטסקייפ 2 ו-3).
המעקפים האלה היו, למעשה, כה מבריקים, שהם עדיין השיטה הכי נפוצה כיום לעריכת דפי אינטרנט.
דפדפנים מודרניים מבצעים את תקני האינטרנט בצורה הרבה יותר טובה ואיננו צריכים להשתמש יותר בשיטות עתיקות.
במקום טבלאות מקוננות בתוך טבלאות ומילוי תאים ריקים ברווחי תמונה (Spacer GIFs), אנו יכולים להשתמש במבנה פשוט יותר וב-CSS על-מנת לפרוס אתרים יפהפיים אשר נטענים במהירות, קלים יותר לעיצוב מחודש ונגישים יותר לכולם.
על-ידי שימוש במבנה תבניתי במסמך ה-HTML שלנו ובגליונות-סגנון מדורגים כדי לפרוס את הדפים שלנו אנו יכולים לשמר את התוכן המקורי של הדפים שלנו בנפרד מאיך שהם מוצגים.
יש לזה מספר יתרונות על השימוש בטבלאות...
על-ידי הסרת מבנה הצגתי מהדפים שלכם, עיצוב מחודש של אתרים קיימים ותוכן דורש פחות מאמץ (ו-יקר הרבה פחות). כדי לשנות את הפריסה של האתר, כל שעליך לעשות הוא לשנות את גליון-הסגנון; אינך צריך כלל לערוך את הדפים עצמם.
לדוגמא, הכנס אל CSS Zen Garden, או ל-"מחליפי הסגנון" באתר של אריק מאייר. לעוד לימוד בנושא ראה "סגנונות חלופיים" מאת פול סודן.
שימוש בתקני אינטרנט מקטין את משקל הקבצים של הדפים שלך, כיוון שהמשתמשים אינם צריכים יותר להוריד מידע הצגתי בכל דף בו הם מבקרים. גליונות-הסגנון שמפקחים על הפריסה מוטמנים (Cached) על-ידי הדפדפנים של הגולשים.
הכוונה בהקטנת "משקל הקבצים" היא טעינה מהירה יותר והוצאות איחסון נמוכות יותר.
השימוש בתקני אינטרנט מאפשר גם לשמור על המשכיות חזותית בקלות יתרה בכל האתר ומכיוון שהדפים משתמשים באותו מסמך CSS לפריסה שלהם, יש להם מבנה אחיד.
דבר זה מחזק את הסמל המסחרי שלך ועושה את האתר שלך שימושי יותר.
שימוש בתקני אינטרנט גורם לנגישות גבוהה יותר לדפים שלנו עבור משתמשים עם מוגבלויות ולגולשים דרך טלפונים ניידים ומכשירי כף-יד בעת הגלישה באינטרנט.
אורחים המשתמשים בקוראי מסכים (וכן אלה עם חיבור איטי) אינם צריכים לפלס דרכם במאמץ דרך רבבות תאי טבלה ומרווחי תמונות, על-מנת להגיע לתוכן המקורי של הדפים שלנו.
במילים אחרות, הפרדת התוכן מהדרך בה הוא מוצג הופך את התוכן שלך לבלתי-תלוי בתוכנת הגלישה.
אפרופו נגישות, צמצום המבנה ושימוש נכון בתגי Header יעזור גם לשפר את דירוג מנועי החיפוש.
הקטנת היחס בין קוד לתוכן, שימוש במילות מפתח בתגי ה-Header, והחלפת תמונות עבור כותרות במלל אמיתי, יעזרו לאתרך להשיג תוצאות חיפוש טובות יותר.
זה יאפשר לגולשים (ולבוסים) אשר קשורים ונחושים בדעתם להשתמש בדפדפנים של גירסא 4 עד יומם האחרון, לקבל הערכה מתקבלת על הדעת למה שכל שאר העולם רואה.
 | |||||||||||||
| | | | | | | | | |||||
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. | | | Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper. | | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| Suscipit lobortis nisl ut aliquip ex ea commodo consequat. | | | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
| | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. | | | Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
| | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim. | | | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed.
| | ||||||||
| | | | | | ||||||||
| |||||||||||||
| |||||||||||||
| | | | | | | | | |||||
| זה בהחלט יכול להתבצע בקלות רבה יותר. | | | נחש כמה מבנה יש בטבלה הקטנה הזו? 13.7K. ישנן 17 שורות ו-9 עמודות בדבר הזה. והאם הזכרתי את כל מרווחי התמונות (Spacer GIFs)? | | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| יש כאן הרבה יותר מדי תאי טבלה ומרווחים. | | | וכל הגבולות המנוקדים נעשו עם תכונת background על תאי טבלה, אשר לא יהיו תקניי
| | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| כל זה יכול להעשות עם 8 תאי טבלה ו-4 הגדרות CSS. | | | ברצינות. 8 תאים ו-4 הגדרות CSS, זה כל מה שצריך
| | ||||||||
| | | | | | ||||||||
| |||||||||||||
| | | | | | | | | |||||
| אתה צריך הגדרה אחת עבור <table>, אחת עבור <td>, אחת עבור <ul> ועוד אחת עבור <li>. | | | זהו-זה. ברגע שיש לך את אלו - אתה על ה
| | ||||||||
| | | | | |||||||||
| |||||||||||||
הקוד שמראה את מבנה הטבלה:
table{ margin:3px; padding:2px; border:solid 2px blue }
td{ padding:2px; border-style: solid; border-width: 1px; border-color:gray gray silver silver }
| הרבה יותר טוב | נחש כמה מבנה יש בטבלה הקטנה הזו? 2.1K. ישנן 4 שורות ו-2 עמודות בדבר הזה. ואין כלל מרווחי תמונה (Spacer GIFs). |
| בדיוק מה שצריך | וכל הגבולות המנוקדים האלה נעשו באמצעות CSS והם בהחלט תקניים
|
| כל זה נעשה עם 8 תאי טבלה ו-4 הגדרות CSS. | ברצינות. 8 תאים ו-4 הגדרות CSS, זה כל מה שדרוש
|
| אתה צריך הגדרה אחת עבור <table>, אחת עבור <td>, אחת עבור <ul> ועוד אחת עבור <li>. | זהו-זה. ברגע שיש לך את אלו - אתה על ה
|
והנה קוד ה-CSS המשמש לסילוק המבנה המטופש:
table{ border-bottom:1px dotted fuchsia; border-left:1px dotted fuchsia }
td{ padding:11px 20px 20px 11px; border-top:1px dotted fuchsia; border-right:1px dotted fuchsia }
ul { margin-top:10px; margin-bottom:10px; margin-left:0; padding-left:1em }
li{ margin-bottom:10px }
השתמש ב-margin וב-padding במקום בתוספת תאים ומרווחי תמונה (Spacer GIFs).
השתמש בקישורים ובסיגנונות @import. הראשון עבור דפדפנים ישנים, השני עבור דפדפנים מודרניים.
<link href="basic.css" rel="stylesheet" type="text/css">
<style type="text/css" media="screen"><!--
@import url(modern.css) screen;
--></style>
דוגמאות הקיימות במציאות:
למידע נוסף על מעברי עיצוב, ראה פרק ראשון מתוך הספר אריק מאייר על CSS והרבה מידע מהספר עיצוב עם תקני אינטרנט מאת ג'פרי זלדמן.
לדפדפנים הנפוצים ביותר בהם גולשים משתמשים כיום יש תמיכה נרחבת ב-CSS. לכולם יש את ה-"שיגעונות" שלהם, אבל ברגע שאתה מתרגל אליהם, אתה יכול לעקוף אותם.
תכנות CSS הוא קל. אפילו עבור בחור כמוני שחושב שרוב שפת ה-Javascript נראית כמו מילות קללה.
if(links[x].length > 0);{
for (y=0; y<links[x].length; y++) {
לכל הגדרת CSS יש בורר ו-הצהרה. ההצהרה מורכבת מ-תכונה ו-ערך. תכונות, שנשמעות כאילו הן צריכות להיות שתי מילים, מופרדות על-ידי מקף.
body {margin:0; padding:0}
.related {float:right; width: 15em; margin-left:1em; margin-bottom:1em; color:blue}
#footer {color:gray; font-size:0.6em; line-height: 1.2em; background-color:white; margin:0}
בעוד שקל לכתוב את ה-CSS המקורי, שימוש ב-CSS לפריסה שלך דורש דרך חשיבה שונה במקצת מאשר רובנו רגילים אליה.
במקום לחשוב על דברים כגון "זה הולך פה וזה הולך לשם" בעודנו עובדים על דף או פריסה, עלינו לחשוב על סוגי האינפורמציה בדף שלנו ו-המבנה של המידע.
אנו נותנים לכותרת החשובה ביותר תג <h1>; כותרות משנה מסומנות בתג <h2>, וכו'.; ופסקאות הן פסקאות.
זה מה שמוכר בתור מבנה "תבניתי" או "סימנטי".
במקום לשים את התוכן שלך בתוך טבלה ותאי טבלה, עטוף אותו בתוך אלמנט div ותן לאלמנטי div שלך id או class המתאר את תוכנם ו/או את הפונקציה, במקום את ההופעה שלהם.
<b> ו-<br> במבנה שלךחשוב מדוע אתה רוצה שמשהו יופיע בצורה מסויימת; למה הכוונה? המבנה שלך יכול ו-צריך להעביר משמעות, אפילו למישהו שאינו יכול לראות את הדף שלך. מבנה סימנטי גורם לדפים שלך להיות יותר נגישים לכולם, כולל מנועי חיפוש.
כאשר אתה רוצה להטות כתב מסוים, האם זה בגלל שאתה רוצה להדגיש אותו, <em>, או בגלל שזוהי הכותרת של ספר, <cite>?
אם משהו הוא מודגש, הוא צריך להיות מסומן כ-<strong>.
אם אתה רוצה ירידת שורה אחרי משהו, רוב הסיכויים שהוא צריך להיות מסומן כאלמנט כותרת. אם זו לא כותרת, האם זה חלק מ-class שקורה לאורך כל האתר? אם זהו המקרה, אז השתמש ב-CSS במקום ב-<br>.
.foo {display:block}
למידע נוסף ראה Bed and BReakfast markup (B&BR) מאת Tantek Çelik.
חשוב על זה: הניווט שלך הוא למעשה רשימה לא מסודרת של קישורים.
תבנה אותם בתוך תגי <ul>.
אנו יכולים להשתמש ב-CSS כדי לשלוט בהצגת הרשימות הללו בדפים שלנו.
אנו יכולים ליצור תפריטי ניווט אופקיים על-ידי שימוש ב-display:inline.
להלן הקוד המשמש ליצירת תפריט ניווט זה:
#nav1{
margin-top:1em;
margin-bottom:0.5em;
}
#nav1 ul{
background-color:silver;
text-align:center;
margin-left:0;
padding-left:0;
border-bottom:1px solid gray
}
#nav1 li{
list-style-type:none;
padding:0.25em 1em;
border-left:1px solid white;
display: inline
}
#nav1 li:first-child{
border:none;
}
להלן הקוד המשמש ליצירת תפריט ניווט זה:
#nav2 {
background-color:silver;
border:solid 1px gray;
width: 8em
}
#nav2 ul{
list-style-type:none;
margin:0;
padding:0;
border:none
}
#nav2 li{
margin:0;
padding:0.25em 0.5em 0.25em 1em;
border-top:1px solid gray;
width: 100%;
display: block
}
html>body #nav2 li{
width: auto;
}
#nav2 li:first-child{
border:none
}
למידע נוסף ראה מאמרו של מרק ניוהאוס Taming lists שנמצא באתר A List Apart ו-"Styling lists" שנמצא ב-CSS-Discuss wiki.
ישנם דברים מסוימים ש-CSS עושה פחות טוב מפריסה טבלאית.
דוגמא, נניח שיש לך תפריט ניווט בצבע שחור ואתה רוצה להרחיב אותו לכל גובה התוכן. עם פריסה טבלאית אין פשוט מזה: רק תן ל-<td> רקע שחור.
אנו יכולים לעשות זאת בעזרת CSS, אך זה דורש דרך חשיבה שונה.
אם אנו נותנים ל-div הניווט שלנו רקע שחור, השחור ישתרע רק עד קצה הניווט שלנו. ברוב הדפים, התוכן הוא ארוך יותר מהניווט, ולכן זה לא מוצלח.
במקום זאת, אנו יכולים לרצף עם GIF שחור את div התוכן ולתת לו תוספת padding משמאל, אך אם הניווט שלנו ארוך יותר מהתוכן גם זה לא יעזור.
דרך נוספת לטפל בזה היא לרצף עם GIF שחור את הרקע של ה-<body> שלנו, שזה טוב כל עוד אינך צריך להשתמש בתמונה נוספת עבור רקע ה-<body> שלך.
או שאנו יכולים לעטוף את את התוכן בתוך div 'מעטפת' ולרצף את התמונה ב-div הזה. אולם, זה מוסיף מבנה לא סימנטי ומנפח את המבנה שלנו.
וכמובן, ריצוף תמונות רקע לא יעבוד כלל אם אתה רוצה שהרוחב של הניווט שלך יהיה גמיש.
כפי שאמרנו, ישנם דברים שטבלאות עושות טוב יותר מ-CSS. אך בסופו של דבר, עליך לשאול את עצמך, האם כל המטען הנוסף שבא עם שימוש בטבלאות עבור עיצוב במקום עבור מידע שווה את זה.
ראשית, עליך להחליט על מעבר אסטרטגי. האם אתה מתכוון להעביר את כל האתר בבת אחת או בחלקים?
אתר את החלקים והדפים שהכי ירוויחו מהמעבר. מקום טוב להתחיל בו הוא בדפי הבית, הודעות למוצרים חדשים ודפים דומים.
זהה את סוגי התוכן/מידע באתר שלך
לאחר שזיהית את סוגי התוכן באתר שלך, אתה יכול להתחיל לקטלג את הדפים שלך במחלקות הגיוניות של תוכן.
נתח את מבנה הטבלה שלך לטבלאות מקוננות, למרווחים ריקים ותאי גבול (אנו רוצים להחליף אותם בתגי div או במבנה טבלאי הרבה יותר פשוט).
ברגע שניתחת את מבנה הדפים שלך, הגיע הזמן להסתכל מתחת לפני השטח ולנתח את המבנה הנוכחי שלך עבור HTML מצגתי שיוכל להתחלף במבנה תבניתי.
<font> וממרווחי תמונה!<b> ומ-<br> במבנה שלך.bgcolor, background וכדומה).<span class="header">) במבנה תבניתי מתאים. (Tantek Çelik נכנס לפרטים נוספים במאמר A Touch of Class.)
אתה יכול להשתמש "בחפש והחלף" (וביטויים רגולריים), אך הדרך הקלה ביותר לעשות זאת היא לצפות בדף הנוכחי בדפדפן ולהעתיק ולהדביק את המלל משם לתוך עורך ה-HTML שלך.
חשוב על המבנה של המסמך שלך! החלפה בלבד של תגי ה-<b> בתגי <strong> אינה מספיקה.
מהי הכותרת החשובה ביותר? סמן אותה בתג <h1>. סמן את הכותרות המשניות בתגי <h2> וכן הלאה. סמן פיסקאות בתגי <p>. סמן את הניווט שלך כרשימה לא מסודרת.
בחר DOCTYPE והשתמש בו. (אנו ממליצים על XHTML Transitional. אלא אם אתה 'גרעין קשה', ובמקרה זה, לך על זה והשתמש ב-XHTML Strict.)
שים את הניווט הראשי בתוך div עם id של mainnav; שים את הניווט המשני בתוך div עם id או class של subnav, שים את ה-footer ב-<div id="footer"> ועטוף את התוכן שלך בתוך <div id="content">.
זה לא נראה משהו עכשיו, אבל ברגע שתתחיל להוסיף הגדרות לגליונות הסיגנון, הדברים ישתפרו במהרה.
בהתחלה, תן לכל div גבול. לדוגמא, div {border:1px dotted gray; padding:.5em} זה יעזור לך לראות היכן הם מתחילים, היכן הם נגמרים והאם יש לך קינון.
כתוב קודם את ה-CSS שלך עבור בוררי אלמנטים (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li> וכו'.)
השתמש בבוררים הקשריים או צאצאיים עד כמה שזה אפשרי. זה ישמור על המבנה שלך הרבה יותר נקי. לדוגמא, #subnav li{border:1px solid black; padding:.5em; display: inline} ישפיע רק על פריטי רשימה שנמצאים בתוך ה-div של הניווט המשני שלך.
בדוק בדפדפנים רבים ככל שתוכל ובקש מחבריך לבדוק בדפדפנים שלהם.
מובן מאליו, שאיננו יכולים לכסות בשעה את כל מה שאתה צריך לדעת בנוגע לעיצוב בעזרת CSS, אבל ספרים אלו יכולים לעזור לך להכנס לעובי הקורה בשימוש בתקני אינטרנט כדי לגרום לדפים שלך להיות גמישים, נקיים ומהירים יותר.
zeldman.com הדוח היומי: תוכן וקישורים בעלי תובנה, מעוררי מחשבות וכתובים היטב המוגשים באופן סדיר.
A List Apart עבור אנשים שיוצרים אתרי אינטרנט.
The Web Standards project יבורכו האנשים האלו.
CSS: A guide for the unglued דף קישורים מעולה.
CSS Layout Techniques: for Fun and Profit פריסות שאתה יכול להשתמש בפרויקט שלך מאת אריק קוסטלו. גם מקורות והדרכות.
Real World Style פריסות CSS. עיצות, תכסיסים וטכניקות מאת מרק ניוהאוס.
The Business Benefits of Web Standards חדשות טובות למנהלים. התורה של תקני אינטרנט מובאת במונחים שבעלי תואר במנהל עסקים יוכלו להעריך.
טבלאות מטופשות כבר תורגמו לשפות רבות. אם עברית אינה שפת האם שלך אולי תהיה מעוניין לקרוא אחת מהגרסאות האלו.
This work is licensed under a Creative Commons License.
