בניית אתר אינטרנט אמיתי לחנות חיות - Layout
section עם class בשם layout-container) שבתוכו header, aside לתפריט, main ו-footer. בכל חלק כותבים תוכן זמני כדי לראות אותו.html ול-body נותנים margin ו-padding של 0, גובה 100%, יישור טקסט למרכז, גודל גופן גדול ורקע linear-gradient של 45 מעלות בין סלמון לורוד.layout-container נותנים גובה 100%, box-sizing: border-box ו-display: grid.grid-template-columns של שש עמודות שוות (repeat עם 1fr), ו-grid-template-rows של 15% לכותרת, 80% לאזור המרכזי ו-5% לתחתונה.header וה-footer מקבלים grid-column שמתפרס על כל שש העמודות. ה-main מתפרס על חמש, והתפריט תופס עמודה אחת לפי ברירת המחדל, ולכן לא צריך לעצב אותו..layout-container > *.פרקי ההרצאה: בניית אתר אינטרנט אמיתי לחנות חיות - Layout
תמלול ההרצאה: בניית אתר אינטרנט אמיתי לחנות חיות - Layout
הטקסט המלא של הדקות הראשונות בהרצאה «בניית אתר אינטרנט אמיתי לחנות חיות - Layout» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אחרי שראינו מה זה פלקס ומה אפשר לעשות עם פלקס ואחרי שראינו מה זה גריד וכל מיני דברים שאפשר לעשות עם גריד בואו נראה איך אנחנו יכולים לבנות מעין אתר תדמית פשוט וקטן אבל לשלב בו את האלמנטים שלמדנו מגריד ומפלקס איך בעצם אנחנו יכולים להשתמש בזה בשביל לבנות משהו תדמיתי וקטן כזה אנחנו רוצים לבנות איזשהו אתר תדמית לחנות חיות כאשר יש לנו
פה למטה אפיון של לאן אנחנו רוצים להגיע, מה אנחנו רוצים להצליח לבצע. אז הנה יש לנו אתר תדמית עם שלושה דפים, אנחנו כבר רואים כאן את דף הבית עם איזשהו layout כזה שיש לי פה כותרת עליונה, יש לי פה תפריט, יש לי פה כותרת תחתונה עם זכויות יוצרים ומשהו כתוב פה פסקה למעלה עם איזשהו סרטון מיוטיוב וזה דף הבית.
ברגע שאני עובר לדף השני, זה כמובן רק תמונות מה שאנחנו רואים כאן. אז כאן אנחנו רואים דף שמתאר לנו תמונות שיש באתר, ואנחנו רואים שיש לנו פה סדרה של תמונות, והן מסודרות כזה בצורה יפה, וזה כנראה יהיה עם פלקס, כאשר כל ה-layout יהיה עם גריד.
ואם אני הולך לדף צורך קשר, אז כל מה שאני רואה פה זה איזושהי טבלה, וזה כמובן הולך להתבצע על ידי מה שלמדנו עם גריד בכדי ליצור טייבל. כמו שאנחנו רואים זה לא אתר מי יודע מה מעוצב ובטח באתר אמיתי אנחנו אולי רוצים עיצובים או תמונות נוספות שיהיה לנו כאן או אייקונים או גופנים אבל כאמור כרגע זה בעצם מספק אותנו
בכדי לגלם את הפלקס ואת הגריד באתר התדמית הזה. אז דבר ראשון, מה שאנחנו רוצים לעשות זה לבנות את ה-Layout.
בואו נלך ל-Visual Studio, יש לנו כאן איזשהו דף ריק, יש לנו כאן CSS שמקושר אליו שגם הוא ריק, בואו נשים אותם אחד ליד השני. ומה שאנחנו רוצים לבנות ב-HTML זה קודם כל את המרכיבים השונים של ה-Layout.
אז אנחנו יכולים להסתכל שוב פעם בציור הזה, בואו נחזור רגע לדף הבית, ונראה שיש לנו פה כמה חלקים, יש לנו פה כותרת עליונה, אזור של התוכן וכותרת תחתונה.
כמה חלקים? 1, 2, 3, 4 חלקים. כמובן הם צריכים להיות עטופים באיזשהו קונטיינר. אז בואו נחזור לכאן ואנחנו רוצים קודם כל לבנות לעצמנו את הקונטיינר.
ניקח כאן סקשן, למרות שאנחנו יכולים גם דיו, ויש לנו כאן קלאס ונקרא לו layout container. כי הולכים להיות לנו כל מיני קונטיינרים באתר אז זה יהיה ה-layout container.
יש לנו את ה-Header ואחריו יש לנו את ה-Asside ואחריו יש לנו את ה-Main. אין לנו פה עוד Asside כמו שהיה בסרטון של ה-Layout, פה לא קיים, זה בעצם ה-Layout שאנחנו רוצים להשיג ויש לנו למטה רק את ה-Footer.
אלה החלקים של ה-Layout, אנחנו כבר יכולים ללכת לאזור של ה-CSS ולבנות אותם. אז ב-CSS, כמו שעשינו בסרטון של ה-Layout, אנחנו רוצים לצוות קודם כל את ה-HTML ואת ה-Body.
אנחנו רוצים לתת להם Margin 0, אנחנו רוצים לתת להם Padding 0, בכדי שלא יהיה שום שוליים בדף שיתפסו לנו מקום. אנחנו רוצים Height 100%, Text Align, בואו נשים את הכל באמצע, Font Size נגדיל ל-Extra Large, וניתן איזשהו Background Image, Linear Gradient, ניתן לו 45 Degrees
והצבעים שמה זה היה סלמון ופינק אם אני ראיתי נכון בואו רגע נסתכל עוד פעם על האפיון זה נראה כמו סלמון פינק כזה אבל הכי טוב זה ממש להריץ את זה ולבדוק מה בעצם אנחנו רואים כשאנחנו מריצים את האתר אז הנה האתר רץ ובאמת אנחנו רואים פה את הצבעים בואו רק נרשום לעצמנו כל מיני דברים בהדר בהדר, באסייד, במיין ובפוטר בכדי שנוכל לראות
אותם. אז בהדר יש לנו את הכותרת Animal Store, בפוטר יש לנו All Rights Reserved עם איזשהו סימן של קופי כזה. בואו נניח שבתפריט יהיה כתוב כרגע מניו, תכף נטפל בזה, ובמיין יהיה פה את ה-content, גם פה אנחנו הולכים לטפל.
בואו נבדוק רגע מה אנחנו רואים כשאנחנו מריצים את האתר ויש לנו כרגע את הכל באמצע ובגלל שכל רכיב כזה ששמנו כל