בואו נסתכל על עיצוב הרשת של האתר ונפרק את הרכיבים הבודדים. בואו לחקור מדוע ציפה כל כך שימושית, כמו גם את הטכניקה הפופולרית לבניית רשת האינטרנט הראשונה משלושה זרמים וכותרת תחתונה של האתר.
כדי ללמוד את בניית הרשת של אתר, עליך להבין מה זה "זרימה". זרימה הם מרכיבי האתר, הממוקמים בזה אחר זה. לדוגמא, אלה יכולים להיות אלמנטים של חלוקה אשר עוברים בזה אחר זה כברירת מחדל. אך ניתן לסדר את הזרימה ולשנות את מיקום אלמנטים הבלוק.
כדי לשלוט בזרימה, אנו משתמשים במאפיין float, אשר יכול למקם את החסימה בצד שמאל או ימין. זה מספיק לכתוב בקובץ CSS:
"שם מחלקה או חסום" {float: ימין / שמאל; }
החיסרון היחיד של לצוף הוא היכולת "לחפוף" בלוק אחד על גבי אחר.
כדי למנוע דריסה, אנו משתמשים בבירור: שניהם - מאפיין זה יקבע את הזרימה סביב הבלוק. הגדרנו את הרוחב והגובה, כמקסימום ומינימלי, כך שהערך יתגבש בהתאם לגודל התוכן (טקסט, תמונות). שוליים - הגדר את הערך לאוטומטי כך ששוליים חיצוניים ייווצרו באופן אוטומטי בהתאם למיקום החסימה.
מכיוון ש- float יכול להציב בלוקים לשני כיוונים, נהוג לחלק את האתר לזרמים - שמאלה וימינה. אם המתכנת זקוק לשני זרמים בלבד, הוא משאיר את השמאל והשמאל הימני, אך אם יש יותר משניים, הוא מכוון את השוליים באמצעות שוליים. איך זה קורה:
.עמודה 1 {צף: שמאל; רוחב: 65 פיקסלים; גובה דקות: 50 פיקסלים; שוליים מימין: 9 פיקסלים; // 9 פיקסלים מהתיבה המרכזית}
זרם 2:
.עמודה 2 {צף: שמאל; // לחסום השמאלי, אך ללא "חפיפה", מכיוון שהחלנו רוחב שוליים: 80 פיקסלים; גובה דקות: 50 פיקסלים; }
זרם 3:
.עמודה 3 {צף: מימין; רוחב: 65 פיקסלים; גובה דקות: 50 פיקסלים; }
התייחסות לכותרת התחתונה (.footer):
.footer {ברור: שניהם; // עוטפים את שני הצדדים}
כך יצרנו רשת לאתר באמצעות float, המורכבת משלושה זרמים.
