מדריך לעימוד דפים ב - CSS

שימוש באלמנטים מסוג <div> כאבני בניין לעימוד דפים

בעבר היה מקובל לעצב את העימוד - layout - של דפי HTML בעזרת טבלאות. מזה כמה שנים ועם התפתחות שפת CSS מגמה זו השתנתה והדרך הפופולארית יותר כמו גם הנכונה מבחינה תכנותית היא לעמד דפי HTML באמצעות אלמנטים מסוג <div>.

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

1. דפדפנים מציגים טבלאות לאט יותר מאשר divs;

2. הקוד של טבלאות הוא גדול יותר מהקוד המקביל ב - divs;

3. טבלאות גמישות פחות מ - divs ולכן קשה יותר לעצב בעזרתן עימודים מורכבים במיוחד;

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

5. עימוד מבוסס טבלאות יוצר לעתים קשיים בהדפסה בעוד שעיצוב מבוסס divs מאפשר שליטה טובה יותר בהדפסת העמוד.

 

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


דף HTML עם שתי עמודות

את כל עימודי ה - CSS שלנו נעשה בעזרת שלד בסיסי של אלמנטים מסוג <div> אשר ישתנה רק במעט ורק במידה ונרצה להוסיף עמודות נוספות לדף שלנו.

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


קוד ה - HTML הבסיסי שלנו ייראה כך:

<body>

  <div id="wrapper">
     <div id="header"></div>
     <div id="LeftColumn"></div>
     <div id="RightColumn"></div>
     <div id="footer"></div>
  </div>

</body>

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

כעת נותר לנו להוסיף את קוד ה - CSS שלנו. נתחיל בהגדרות לאלמנט <body>. היות וברצוני שהרקע החיצוני לדף יהיה בצבע אפור אגדיר זאת ברמת ה - body.

body
{
  background-color:#cccccc;
}

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

#wrapper
{
  width: 800px;
  margin: 0 auto;
  background-color: white;
}

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

#header
{
  background-color:#FF9900;
  color: white;
  height: 140px;
  width: 800px;
  margin-bottom:10px;
}

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

עתה נעבור להגדרת העמודה השמאלית שלנו, האמורה לשמש כמכילת התוכן המרכזית בדף:

#LeftColumn
{
float:left;
width: 600px;
background-color:White;
}

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

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

#RightColumn
{
  float:left;
  width: 200px;
  background-color :#E5EEF6;
  text-align: right;
}

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

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

#footer
{
width:800;
background-color:Teal;
text-align:center;
}

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

דף HTML עם שלוש עמודות

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

<body>

    <div id="Wrapper">
         <div id="header"></div>
         <div id="LeftColumn"></div>
         <div id="CenterColumn"></div>
         <div id="RightColumn"></div>
         <div id="Footer"></div>
    </div>

</body>

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

body
{
  background-color:#CCCCCC;
}

#wrapper
{
  width: 800px;
  margin: 0 auto;
  background-color: white;
}

#header
{
  background-color:#FF9900;
  color: white;
  height: 140px;
  width: 800px;
  text-align:center;
}

#RightColumn
{
  float:left;
  width: 150px;
  float: left;
  background-color :#E5EEF6;
  text-align: right;
}

#CenterColumn
{
  width: 500px;
  float: left;
  background-color:White;
  text-align:center;

}

#LeftColumn
{
  width: 150px;
  float: left;
  background-color :#E5EEF6;
}

#footer
{
  width:800;
  background-color:Teal;
  text-align:center;
}

   

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

 
 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש