כיצד להשתמש מיקום CSS כדי ליצור פריסות ללא שולחנות

טבלאות ללא מסגרת פתח גבולות עיצוב חדשים

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

תמיכה בדפדפן של מיקום CSS

מיקום CSS נתמך היטב בכל הדפדפנים המודרניים . אלא אם אתה בונה אתר עבור Netscape 4 או Internet Explorer 4, הקוראים שלך לא צריך שום בעיה להציג את דפי האינטרנט שלך ממוקם CSS.

לחשוב מחדש איך אתה בונה דף

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

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

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

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

זיהוי חלקי התוכן שלך

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

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

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

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

מיקום התוכן

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

#content {

}

תוכן בתוך אלמנטים אלה ייקח שטח רב ככל שהוא יכול, כלומר 100 אחוז מהרוחב של המיקום הנוכחי או את הדף. כדי להשפיע על המיקום של מקטע מבלי לכפות אותו על רוחב קבוע, שנה את הריפוד או את מאפייני השוליים.

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

# left-column {
תפקיד מוחלט
משמאל: 0;
רוחב: 150px;
margin-left: 10px;
margin-top: 20px;
צבע: # 000000;
ריפוד: 3px;
}
#עמודה ימנית {
תפקיד מוחלט
משמאל: 80%;
top: 20px;
רוחב: 140px;
padding-left: 10px;
z-index: 3;
צבע: # 000000;
ריפוד: 3px;
}

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

#content {
top: 0px;
שוליים: 0px 25% 0 165px;
ריפוד: 3px;
צבע: # 000000;
}

הגדרת הדף שלך באמצעות CSS במקום טבלת HTML דורשת קצת יותר מיומנות טכנית, אך התמורה באה בעקבות עיצובים גמישים ומגיבים יותר וקלות רבה יותר בביצוע התאמות מבניות לדף שלך מאוחר יותר.