בניית אתר אינטרנט אמיתי לחנות חיות - Menu

תמלול ההרצאה: בניית אתר אינטרנט אמיתי לחנות חיות - Menu

הטקסט המלא של הדקות הראשונות בהרצאה «בניית אתר אינטרנט אמיתי לחנות חיות - Menu» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:03

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

2. 00:27

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

3. 00:50

   לשני ואני רוצה שהכותרת הזאת ה-animal store יהיה פה באמצע אנחנו רוצים שמשהו יהיה באמצע וכנ"ל הכותרת התחתונה אולי נוריד טיפה את הרזולוציה ונראה את זה בצורה כזאת אז איך אנחנו בעצם מבצעים את כל הדברים האלה?

4. 01:06

   בואו נתחיל עם זה וזה. אז ראשית אנחנו חוזרים בחזרה לתוכן שלנו ומה שאנחנו רוצים זה שה-animal.store יהיה בתוך h1 כי זה מה שמקובל שהכותרת הראשית באתר שלנו זה כותרת של h1.

5. 01:28

   ובואו נגיד שה-all right reserved הזה יהיה בתוך פסקה. זה נראה לי הגיוני שזה סוג של פסקה, למרות שזה יכול להיות גם בתוך span או משהו, בואו נניח.

6. 01:40

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

7. 02:06

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

8. 02:33

   שגם ההדר וגם הפוטר מה שאנחנו רוצים לעשות לגביהם זה display flex ושימו לב שההדר והפוטר מהווים לנו למעשה מעין קונטיינר עבור מה שיש בתוכם בין אם זה h1 בין אם זה פסקה אז זה בסדר לבוא ולהגיד שכאילו הקונטיינר הוא פלקס, ואנחנו רוצים פלקס דיירקשן, אנחנו רוצים קולום, כי אנחנו רוצים לסדר את

9. 03:06

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

10. 03:30

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

11. 03:58

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

12. 04:12

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

13. 04:31

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

14. 04:43

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

15. 05:21

    שלינקים הם אינליין אלמנט וזה אומר שהם נמצאים אחד אחרי השני הם לא יורדים אוטומטית שורה זה לא בלוק אלמנט שתופס את כל הרוחב שהוא יכול ולא נותן לאף אחד אחר להיות איתו בשורה הוא בהחלט נותן לאחרים להיות איתו בשורה כל