Master Page

תמלול ההרצאה: Master Page

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

1. 00:01

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

2. 00:22

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

3. 00:37

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

4. 00:59

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

5. 01:12

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

6. 01:28

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

7. 02:01

   ויש לי פה אתר ריק מה שאני עושה אני מוסיף לו קודם כל קובץ ראשון שזה יהיה המאסטר פייג' שלי הקובץ הזה שאני מוסיף לו כרגע נקרא מאסטר פייג' השם שלו זה masterpage.master ולא .aspx אבל מאוד חשוב ללכת ולשנות לו את השם, אנחנו נראה בהמשך למה.

8. 02:31

   בואו נקרא לו site masterpage. גם כאן יש לי place code in separate file בכדי שasp.net תגדיר לי קובץ c-sharp נפרד עבור הפעילות של צד השרת ששייכת לקובץ הזה.

9. 02:50

   אני שם לב ששפת התכנות היא c-sharp ומבצע add. כעת יש לי באתר שלי רק את אותו הקובץ שהוא משותף למספר דפים ואמור להחזיק בתוכו גרפיקה שמשותפת לכל הדפים.

10. 03:10

    אוקיי, מה אני רואה שיש לי בדף הזה? אז אני רואה שהדף בעצם דומה לדף fpx רגיל, אני רואה שיש לי פה תגית html, אני רואה שיש לי תגית head עבור הערכים ששייכים לאזור של ה-head, אני רואה שיש לי תגית body, form ו-div מרכזית.

11. 03:34

    בנוסף אני רואה שיש לי כאן תגית צד שרת שנקראת ASP נקודותיים content placeholder, content זה תוכן, placeholder זה שומר מקום.

12. 03:47

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

13. 04:13

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

14. 04:34

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

15. 05:03

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

16. 05:31

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

17. 05:44

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

18. 06:07

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

19. 06:54

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

20. 07:52

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

21. 08:36

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

22. 08:58

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

23. 09:18

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

24. 09:37

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