בניית אתר אינטרנט אמיתי לחנות חיות - דף פנימי באתר

תמלול ההרצאה: בניית אתר אינטרנט אמיתי לחנות חיות - דף פנימי באתר

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

1. 00:02

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

2. 00:18

   יש לנו פה גם כן איזושהי פסקה here are some of our animals בחנות ויש לנו פה 1, 2, 3, 4, 5, 10 תמונות שמסודרות בצורה כזאתי. אנחנו רואים שיש פה רווחים זהים משני הצדדים, אז את זה אנחנו כמובן יודעים איך עושים, ראינו את זה בסרטון של הפלקס.

3. 00:39

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

4. 00:58

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

5. 01:26

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

6. 01:49

   כך לעשות את זה. אז אין לנו כל כך ברירה אלא לשכפל כרגע את החלקים השונים של הדף, אבל שימו לב שאם אנחנו מפתחים את זה באיזושהי framework יותר מתקדמת, כמו React, כמו Angular, כמו Vue.js אנחנו לא משכפלים את החלקים האלה.

7. 02:08

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

8. 02:30

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

9. 02:44

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

10. 02:59

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

11. 03:16

    דבר הבא כל התוכן של המיין, בואו ניפטר ממנו, ופה אנחנו רוצים שיהיה לנו תוכן אחר משלנו שמתאים לדף האנימלס. נתנו פה איזושהי פסקה והיה כתוב בה here are our here are some of our animals זה מה שהיה כתוב בואו נראה רגע אוי שזה לא זה זה היה בתמונה איפה התמונה שלנו הנה here are some of our animals בדיוק זה מה שרצינו שיהיה כתוב כאן ואנחנו רוצים קודם

12. 03:53

    כל שהדבר הזה איפה זה נמצא כרגע אם אני מסתכל זה נמצא פה אז אנחנו רוצים שהוא יקבל את אותו עיצוב שהיה מקודם וזה היה Class Description ובואו נראה איך זה מסתדר עכשיו ככה בעצם אנחנו רוצים Here are some of our animals וכאן אנחנו רוצים את התמונות עצמן כאן אנחנו נכנסים שוב פעם לשילוב פלקס ולצורך כך אנחנו צריכים

13. 04:26

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

14. 04:38

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

15. 04:59

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

16. 05:20

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