מבנה אתר אינטרנט - Grid Layout - חלק 2
margin ו-padding, נותנים height: 100% כדי שיתפרסו על כל גובה הדף (כברירת מחדל גובהם נקבע לפי התוכן, ואם מגדירים רק ל-body יש דפדפנים שלא יציגו נכון), יישור טקסט למרכז, גודל גופן גדול ורקע linear-gradient בזווית 45 מעלות מ-lightblue ל-white.height: 100% ו-box-sizing: border-box. כברירת מחדל width ו-height מתייחסים רק לתוכן, והמסגרת וה-padding נוספים עליהם. עם border-box הגודל כולל גם אותם. זה מונע שדברים יגלשו מהמקום.display: grid ו-grid-template-columns: repeat(6, 1fr). שש עמודות לפי המכנה המשותף הקטן ביותר בתמונה.grid-template-rows עם 15%, 8% ו-5% (בדוגמה כתובות שלוש שורות, האחרון 5%).header ו-footer מקבלים grid-column: span 6, ולכן אפשר לאחד את שני הכללים לבלוק אחד. כל אחד מה-aside תופס עמודה אחת, ו-main תופס 4.*) נותנים border: 1px solid black. הפריסה רספונסיבית ושומרת על יחסים כשמשנים את גודל החלון.box-sizing: border-box · display: grid · grid-template-columns: repeat(6, 1fr) · grid-template-rows · grid-column: span Nbox-sizing: border-box חשוב.פרקי ההרצאה: מבנה אתר אינטרנט - Grid Layout - חלק 2
תמלול ההרצאה: מבנה אתר אינטרנט - Grid Layout - חלק 2
הטקסט המלא של הדקות הראשונות בהרצאה «מבנה אתר אינטרנט - Grid Layout - חלק 2» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הראשון אנחנו מגדירים ג'נרל סטיילינג לכל האתר לא קשור לגריד והג'נרל סטיילינג רוצה קודם כל לבטל את המרג'ין והפאדינג שיש בי דיפולט אתם רואים שיש פה איזשהו מרג'ין כזה ושוליים כאלה לדף ולהגדיר עוד כל מיני הגדרות ברמת הדף עצמו וזה מתבצע על ידי תגיד גם html וגם body שזה קטע קצת מעניין כי תגיד ה html מה הקשר היא תגיד שעוטפת את כל תוכן ה html שלי ה body היא
החשובה היא זאת שבתוכה יש את מסמך ה html אבל אנחנו מחויבים בשביל שהלרט הזה יצליח לתת את ההגדרות שאני הולך לתת פה גם ל html וגם ל body נראה מוזר ככה זה עובד, אם אני לא אתן ל-HTML יש דפדפנים שלא יצליחו להציג את מה שאני מראה.
שניהם מקבלים מרג'ין, השוליים אני לא רוצה, הם הופכים להיות 0, פאדינג אני לא רוצה, הם הופכים להיות 0, הייט, שניהם הולכים להתפרס על כל הגובה של הדף, כי ב-Default דפדפנים לא מתפרסים על 100% גובה, נותנים לכם גובה לפי התוכן שלהם אנחנו רוצים שהוא יתפרס על כל הדף
עבור הלייאוט הזה לפחות בואו ניתן לו טקסט עליין סנטר ניתן לו פונט סייז אקסטרה כמו שעשינו בסרטונים הקודמים וניתן לו בק גראונד אימאג' ליניאר גרדיאנט בכדי שיהיה לי פה צבע מפה עד לפה מעין זווית של ארבעים וחמש מ-light blue ל-white.
אז זה נותן לי את הגרדיאנט הדירוג הזה של הצבעים. בואו נראה רגע איך נראה האתר שלנו, והוא מתחיל להיראות עם הצבע הזה, light blue עד white, והכל באמצע עם פונט קצת גדול.
בואו נחזיר את זה ל-100%, זה פחות או יותר מה שאנחנו רואים. אוקיי, זה ג'נרל סטיילינג, מפה אנחנו מתחילים את הגריד שלנו, לא, בעצם יש לנו קונטיינר ולקונטיינר אנחנו רוצים לתת הייט 100% בכדי שגם הוא יתפוס 100% לא רק ה-HTML וה-BODY כי אחרת הוא לא יתפוס לי את ה-100% ואנחנו רוצים בוקס סייזינג בורדר בוקס מילה
על בוקס סייזינג כאשר אנחנו מתעסקים עם כל מה שנראה כמו קופסה, לדוגמת דיו או משהו כזה, ואנחנו רוצים להתחיל לתת וויד והייט.
מה שקורה זה שהוויד וההייט של הקופסה, הוויד וההייט שייכים לקונטנט שלה. יש לקופסה תוכן, אז הוויד וההייט שאנחנו נותנים הוא רק של התוכן, אבל מעבר לזה שלקופסה יש תוכן, יש לה גם padding שזה המרווח בין ה-border לבין התוכן ויש לה גם את ה-border עצמו אז לכן ה-width וה-height
האמיתיים של כמה הקופסה תופסת לנו זה לא באמת ה-width וה-height שאנחנו נותנים ב-CSS לקופסה עצמה אלא הוא יותר הוא גם ה-border וגם ה-padding וגם ה-content.
זאת אומרת שהרוחב האמיתי של קופסה זה גם הרוחב של ה-border, גם הרוחב של ה-padding, ניקח border-left, padding-left, הרוחב האמיתי של ה-content, padding-right ו-border-right.
הגובה האמיתי שקופסה תופסת זה border-height, padding-height, הייט של הקונטנט בוטום הייט ובוטום בורדר או סליחה פאדינג בוטום ובורדר בוטום ויכול לצרוך לנו בלאגן כי אם אני נותן וויד והייט הקופסה תופסת לי יותר מהוויד וההייט שנתתי לה. עכשיו אם אני רוצה
לתת וויד והייט לקופסה ושהוא באמת יתפוס לי את כל אלה כלומר גם בורדר גם פאדינג גם קונטנט משני הצדדים זה באמת יהיה הוויד וגם בורדר וגם פאדינג וגם קונטנט מלמעלה ולמטה זה יהיה ההייט אז אנחנו צריכים לתת את ההגדרה הזאת שהבוקס סייזינג
הגודל של הבוקס מתפרס לכל האורך כולל הבורדר וזאת הגדרה קריטית בהרבה מקרים בלייאוט היא משחקת תפקיד חשוב כי היא מונעת בעיות שדברים יזלגו לכל מיני מקומות מתחת.
אז נתנו את ההגדרה הזאת ברמת ה-container. מכאן אנחנו מתחילים להגדיר grid for creating אליה. מה הם ההגדרות שאנחנו נותנים? אם אנחנו מסתכלים דרך אגב על האתר עדיין הוא נראה בצורה כזאת. אז אנחנו באים לרמת ה-container, ומה שאנחנו אומרים לו זה קודם כל display grid כמו שהיה לנו בסרטונים הקודמים.
הדבר הבא שאנחנו אומרים לו זה grid template columns. כמה עמודות יש לך? בואו נסתכל ונראה שיש לנו כאילו אחת, שתיים, שלוש, אבל זה לא באמת מה שראינו בסרטונים הקודמים של טיפול ב-grid.
מה שאנחנו צריכים לחשוב איתו זה מה הכפולות שיש למכנה המשותף הקטן ביותר ולפי מה שאני רואה פה זה נראה כאילו שזה תופס לי כפולה אחת זה תופס כפולה אחת ונראה שזה תופס ארבע סך הכל שש אז בוא נגיד לו ריקית שש פעמים אחד fr כמו שראינו בסרטונים הקודמים אותו הדבר אנחנו עושים
פחות או יותר אנחנו עושים לה Grid Template or Rows. פה אנחנו משתמשים ב-Grid Template or Rows, עוד לא השתמשנו עם זה. אני אעשה את זה בשיטה קצת אחרת, כמו שהראתי באחד הסרטונים הקודמים, וזה לפי אחוזים.
נגיד שזאת תופסת לנו 15%, זה תופס לנו 8%, והאחרון נשאר 5%. אז יש לנו כאן את כמה העמודות תופסות עבור ה-Layout שלנו. עדיין אנחנו לא ממש רואים את זה מסתדר כמו שצריך, אבל זו הגדרה ראשונית לקונטיינר.
עכשיו אנחנו רוצים, כמו בסרטון הקודם, להגיד כל אחד מהחלקים, כמה הוא מתפרס בכדי שהוא ייתפס כל אחד במקום שלו. בואו נתחיל עם ה-Header.
הדר, אנחנו רוצים שהוא יתפרס, אני אעשה את זה כאן. גריד קולום, פן, אובר, סיק, מפני שיש לי סך הכל שישה, ואני רוצה שהוא יתפרס פה בשישה.
בואו נסתכל רגע על האתר ונראה שהוא כבר תופס את כל אלה. אוקיי, מה בקשר לבא בתור, הסייד הבא בתור?
אז הסייד הבא בתור שזה זה מתפרס על זה הסייד אחד אם אני רואה נכון הוא מתפרס על אחד אבל האמת גם הסייד הזה מתפרס על אחד אז במקרה הסייד הזה נותן הוראה לשניהם אחד שתיים להתפרס על אחד אם הייתי רוצה שזה יתפוס לי נניח אחד וזה שתיים אז כמובן שהייתי מחלק אותם עם איזשהו קלאס או משהו כזה כעת אם אני מסתכל על האתר
אז הלפט הסייד תופס לי 1 והרייט הסייד תופס לי 1. עדיין המיין לא תופס לי 4. בואו נלך למיין ונגיד שהמיין