02 — סביבת הפיתוח: מריצים ומשנים אתר


יוצרים פרויקט Razor Pages, מכירים את הקבצים, עורכים HTML ובודקים בדפדפן

ניצור ונריץ אתר ב־Visual Studio, ב־VS Code או ב־Rider, נכיר את הקבצים ונשנה את התוכן. נשמור, נריץ ונראה את התוצאה בדפדפן.

הפרק הקודם: 01 — הדף הראשון שלי · הפרק הבא: 03 — האתר הופך לשלי

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

מה נלמד

  • להריץ אתר מקומי ב־Windows או ב־macOS.
  • לזהות את Pages ואת wwwroot.
  • לערוך HTML, לשמור קבצים ולבדוק את התוצאה בדפדפן.

מתנסים ביצירת פרויקט Razor Pages

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

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

Visual Studio ב־Windows — יצירת Razor Pages דרך הממשק

1. מתקינים את כלי הפיתוח

  1. התקינו Visual Studio Community בגרסה שתומכת ב־.NET 10. אם Visual Studio כבר מותקן, פתחו Visual Studio Installer ובדקו אם נדרש עדכון.
  2. בחלון ההתקנה סמנו ASP.NET and web development ולחצו Install. בהתקנה קיימת לחצו Modify, סמנו את הרכיב והשלימו את השינוי.
  3. ודאו שמותקן .NET 10 SDK. אם הוא חסר, התקינו אותו ופתחו מחדש את Visual Studio.

פרויקט מכיל את הקוד של האתר. Solution / פתרון הוא מסגרת ש־Visual Studio משתמש בה כדי לפתוח ולנהל פרויקטים. אצלנו יהיה בו פרויקט אחד.

2. בוחרים מקום ושמות

את תיקיות הפרויקט ייצור Visual Studio עבורכם. התחילו במסך הפתיחה של התוכנה.

פותחים את חלון יצירת הפרויקט

פתחו Visual Studio 2026. בצד ימין של מסך הפתיחה לחצו Create a new project, כפי שמסומן בצילום.

אם כבר פתוח חלון עבודה, בחרו File → New → Project כדי להגיע לאותו חלון.

מסך הפתיחה של Visual Studio 2026 עם סימון על Create a new project

מחפשים ובוחרים את תבנית האתר

בתיבת החיפוש בחלק העליון הקלידו raz. ברשימת התוצאות לחצו על ASP.NET Core Web App (Razor Pages), כפי שמסומן בצילום, ואחר כך על Next בתחתית החלון.

ודאו שבחרתם בתבנית האתר בשפת C#. התוצאה Razor Class Library שמופיעה מתחתיה אינה התבנית שנשתמש בה. אל תבחרו Blazor, Web API או תבנית עם MVC בשם.

חיפוש raz ובחירת ASP.NET Core Web App (Razor Pages) בחלון יצירת פרויקט

אפשר ללחוץ על כל צילום כדי לפתוח אותו בגודל מלא.

נותנים שמות ובוחרים תיקייה

בצילום מופיע השם GuysRazor; אצלכם אפשר לבחור שם אחר לניסוי.

בחלון Configure your new project בחרו שם באנגלית ללא רווחים, למשל RazorPractice או AnimalsTry2. זהו פרויקט להתנסות; השם האישי המחייב ייקבע רק בשיעור Git אחרי Bootstrap.

  • Project name: הקלידו את השם שבחרתם.
  • Location: השאירו את מיקום ברירת המחדל שמציע Visual Studio, בדרך כלל source\repos בתוך תיקיית המשתמש שלכם. אין להעתיק את שם המשתמש 3stra מהצילום.
  • Solution name: השאירו את אותו שם כמו הפרויקט.
  • Place solution and project in the same directory: השאירו לא מסומן.

בתחתית החלון תוכלו לראות היכן הפרויקט ייווצר. לחצו Next. אין צורך ליצור תיקייה בסייר הקבצים לפני כן.

חלון Configure your new project עם שם לדוגמה ומיקום ברירת המחדל source repos

Visual Studio ייצור תיקייה חיצונית לפתרון ותיקייה פנימית לפרויקט, שתיהן בשם שבחרתם. בדוגמה שלנו שתיהן נקראות RazorPractice.

אם כבר יצרתם את הפרויקט, פתחו אותו דרך Open a project or solution ובחרו את RazorPractice.sln או RazorPractice.slnx שבתיקייה הקיימת. כדי להמשיך עבודה קיימת אין צורך ליצור פרויקט נוסף. לתרגול יצירה מחדש בחרו שם חדש ותיקייה חדשה. את first-page מהשיעור הקודם נשאיר כפי שהיא.

3. יוצרים את פרויקט Razor Pages

בחלון Additional information בחרו את ההגדרות הבאות. שימו לב להבדל המצוין לגבי top-level statements בצילום הישן:

  • Framework: .NET 10.0 (Long Term Support).
  • Authentication type: None.
  • Configure for HTTPS מסומן.
  • Enable container support לא מסומן.
  • Do not use top-level statements לא מסומן: משאירים את קוד האתחול הרגיל של התבנית. בצילום הישן האפשרות מסומנת; אצלכם הסירו את הסימון.
  • Enlist in Aspire orchestration לא מסומן.

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

הגדרות Additional information עבור Razor Pages עם NET 10 ואפשרות Do not use top-level statements מסומנת

אם תבנית Razor Pages או .NET 10 אינן ברשימה, חזרו לשלב ההתקנה והעדכון. אל תבחרו תבנית אחרת רק כדי לעבור את המסך; הראו למורה מה חסר.

4. בדיקה ראשונה: לוחצים על Play ורואים אתר

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

  1. לחצו על המשולש הירוק ▶ (Play) בסרגל העליון של Visual Studio.
  2. המתינו לסיום הבנייה ולהפעלת הדפדפן. בהרצה הראשונה הדבר עשוי לקחת מעט זמן.
  3. בדקו שבדפדפן מופיע דף הפתיחה של האתר עם הכותרת Welcome, ובשורת הכתובת מופיע localhost עם מספר יציאה. זה האתר שלכם, שרץ כרגע על המחשב שלכם.

הבדיקה הצליחה: לחצתם על Play והדף Welcome נפתח בדפדפן. הפרויקט נוצר בהצלחה ואפשר להמשיך לעבוד עליו ולנסות שינויים.

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

בהרצה הראשונה מופיעה בקשה לאישור תעודת HTTPS?

Visual Studio עשוי לבקש לאשר תעודת פיתוח מקומית עבור HTTPS. היעזרו במורה אם אינכם בטוחים מה לאשר. אפשר גם לעצור את ההרצה, לבחור http ברשימה שליד המשולש הירוק וללחוץ שוב על Play.

עוצרים, מכירים את הקבצים ומשנים כותרת

חזרו ל־Visual Studio ולחצו על הריבוע האדום Stop בסרגל העליון כדי לעצור את ההרצה.

פתחו View → Solution Explorer. הרחיבו את הפרויקט RazorPractice ואת התיקייה Pages. בסייר הקבצים תוכלו לראות את המבנה הבא:

source/repos/
└── RazorPractice/
    ├── RazorPractice.slnx (או RazorPractice.sln)
    └── RazorPractice/
        ├── RazorPractice.csproj
        ├── Program.cs
        ├── Pages/
        │   └── Index.cshtml
        └── wwwroot/

Pages מכילה דפי אתר ו־wwwroot מכילה עיצוב, תמונות ו־JavaScript. בהמשך, הנתיב RazorPractice/Pages/Index.cshtml מתחיל מתיקיית RazorPractice; ב־Solution Explorer פותחים את הפרויקט ואז את Pages.

  1. ב־Solution Explorer פתחו את הפרויקט בשם שבחרתם, ואז Pages → Index.cshtml.
  2. בשורת הכותרת החליפו רק את Welcome ב־החיות שלי ושמרו עם Ctrl+S.
  3. לחצו שוב על המשולש הירוק Play ובדקו שבדפדפן מופיעה הכותרת החדשה.
  4. חזרו ל־Visual Studio ועצרו באמצעות Stop לפני שממשיכים לעריכה.

כעת גם השינוי שלכם מופיע באתר. שמרו את הקבצים והמשיכו לשיעור המשותף.

איך משתמשים בשמות שלכם בשיעורים הבאים?

בדוגמאות בקורס הפרויקט נקרא RazorTaba. אצלכם השתמשו בשם שבחרתם: למשל, RazorTaba/Pages/Index.cshtml הוא RazorPractice/Pages/Index.cshtml בתוך תיקיית הפתרון. אין לשנות את שם הפרויקט כדי להתאים לדוגמה. ב־Solution Explorer פתחו את הפרויקט שלכם ואז את Pages.

השאירו את Program.cs ואת Properties/launchSettings.json כפי שנוצרו. בשלב הזה עורכים תוכן ועיצוב בלבד. אין צורך ליצור מאגר Git או לפרסם ל־GitHub.

VS Code ב־macOS — יצירת Razor Pages בטרמינל

1. מכינים את הכלים

  1. התקינו VS Code ואת .NET 10 SDK. ב־Mac בחרו Arm64 למחשב עם Apple Silicon או x64 למחשב Intel. צריך SDK, ולא Runtime בלבד.
  2. ב־VS Code פתחו Extensions, חפשו C# Dev Kit של Microsoft ולחצו Install. התוסף עוזר לערוך C#; את הפרויקט ניצור בטרמינל.
  3. פתחו Terminal → New Terminal. ב־Mac אפשר גם לפתוח את Terminal דרך Spotlight. הקלידו ולחצו Enter:
dotnet --list-sdks

בדקו שמופיעה גרסה שמתחילה ב־10.0. אם הפקודה אינה מזוהה, סגרו ופתחו את VS Code לאחר התקנת ה־SDK. אם עדיין אינה פועלת, פנו למורה.

2. בוחרים תיקיית אב ושם לניסוי

הפקודות הבאות מיועדות ל־Terminal ב־macOS. העתיקו כל שורה בנפרד ולחצו Enter:

mkdir -p ~/WebProjects
cd ~/WebProjects
pwd

mkdir -p מכינה תיקיית אב אם היא חסרה. cd מעבירה את הטרמינל אליה, ו־pwd מציגה היכן אתם נמצאים. בדקו שהנתיב מסתיים ב־WebProjects, ולא בתיקייה של פרויקט אחר.

בחרו שם חופשי באנגלית ללא רווחים, למשל RazorPractice. בכל הפקודות הבאות החליפו אותו באותו שם שבחרתם. אם כבר קיימת תיקייה בשם הזה, בחרו שם חדש כמו RazorPractice2; אין לדרוס אותה.

3. יוצרים פרויקט מתבנית Razor Pages

dotnet new webapp --name RazorPractice --output RazorPractice --framework net10.0 --auth None
cd RazorPractice

webapp היא תבנית Razor Pages. --name קובע את שם הפרויקט; --output יוצר תיקייה חדשה בשם הזה. net10.0 בוחר את גרסת הקורס, ו־None יוצר אתר ללא חשבונות משתמשים. המתינו להודעת הצלחה ולסיום שחזור החבילות. אין להוסיף --force אם מופיעה הודעה שהתיקייה כבר מכילה קבצים.

ב־VS Code בחרו File → Open Folder, עברו ל־WebProjects שבתיקיית הבית ופתחו את RazorPractice. אם VS Code שואל אם אתם סומכים על הקבצים שיצרתם, אפשר לאשר. ב־Explorer בדקו שמופיעים RazorPractice.csproj, התיקייה Pages והתיקייה wwwroot.

אם פתחתם חלון חדש, פתחו בו שוב Terminal → New Terminal. בדקו שהטרמינל נמצא בתיקייה שמכילה את קובץ ה־.csproj.

4. מריצים אתר לפני שמשנים אותו

dotnet watch --launch-profile http

המתינו לשורה Now listening on: http://localhost:…. פתחו בדפדפן את הכתובת המדויקת שמופיעה אצלכם; מספר היציאה נבחר בתבנית ויכול להיות שונה בין פרויקטים. אם הדפדפן לא נפתח מעצמו, העתיקו את הכתובת לשורת הכתובת שלו. השאירו את הטרמינל פועל בזמן הגלישה.

הדף מציג Welcome ויש בו תפריט Home ו־Privacy. זו תבנית Razor Pages עובדת, שכבר כוללת Bootstrap וקובץ עיצוב אישי בשם wwwroot/css/site.css.

5. משנים, עוצרים ופותחים שוב

  1. פתחו Pages/Index.cshtml ושנו את המילה Welcome ל־החיות שלי. שמרו עם Cmd+S ורעננו את הדפדפן אם השינוי לא מופיע מעצמו.
  2. חזרו לטרמינל ולחצו Ctrl+C כדי לעצור את השרת. סגירת לשונית הדפדפן לבדה אינה עוצרת אותו.
  3. בפעם הבאה פתחו את אותה תיקייה והפעילו שוב dotnet watch --launch-profile http.
  4. לתרגול יצירה נוספת עצרו את השרת, חזרו לתיקיית האב עם cd ~/WebProjects וחזרו על שלב 3 בשם חדש. אל תיצרו פרויקט בתוך פרויקט קיים.

השאירו את Program.cs, את הגדרות ההרצה ואת קובצי Bootstrap כפי שנוצרו. בשלב הזה אין צורך ב־Git או ב־GitHub.

עזרה: תבניות dotnet new

Rider ב־Windows או ב־macOS — יצירת Razor Pages דרך הממשק

1. מכינים את הכלים

התקינו JetBrains Rider ואת .NET 10 SDK למערכת ההפעלה שלכם. ב־Mac בחרו Arm64 למחשב Apple Silicon או x64 למחשב Intel. אם Rider היה פתוח בזמן ההתקנה, פתחו אותו מחדש.

2. יוצרים פתרון ופרויקט דרך הממשק

במסך הפתיחה של Rider לחצו New Solution, כפי שמוצג בצילום. אם כבר פתוח פתרון, בחרו File → New Solution.

מסך הפתיחה של Rider עם כפתור New Solution

בוחרים Web ואז Razor Pages

בחרו Web בצד שמאל. ברשימת Template בחרו במפורש Web App (Razor Pages) — הכניסה לקטגוריה Web עשויה לבחור תחילה Blazor, ולכן חשוב לבדוק את השורה המסומנת.

תנו שם חופשי לניסוי, למשל RazorPractice, ובחרו תיקיית אב משלכם. בצילום השתמשנו בתיקיית דוגמה ב־Windows; ב־Mac אפשר לבחור WebProjects בתיקיית הבית. אל תעתיקו את נתיב הדוגמה אם הוא אינו התיקייה שלכם.

חלון New Solution ב־Rider עם שם RazorPractice ותבנית Web App Razor Pages מסומנת

בודקים את הגדרות היצירה

  1. ב־Solution name הקלידו שם חופשי באנגלית ללא רווחים, למשל RazorPractice. השאירו את Project name זהה.
  2. ב־Solution directory בחרו תיקיית אב משלכם, למשל WebProjects בתיקיית הבית. בדקו את הנתיב המלא לפני אישור היצירה. אין לבחור תיקייה של פרויקט אחר.
  3. השאירו Put solution and project in the same directory לא מסומן. כך יש תיקיית פתרון חיצונית ותיקיית פרויקט פנימית.
  4. בחרו C# ומסגרת net10.0. גללו את החלון כלפי מטה באמצעות פס הגלילה החיצוני הימני, מעבר לרשימת התבניות, כדי לראות את האפשרויות הנוספות.
  5. השאירו Do not use top-level statements לא מסומן. בשדה Auth בחרו No authentication. השאירו Add Dockerfile לא מסומן. אין צורך לשנות אפשרויות ב־Advanced Settings.
  6. הסירו את הסימון Create Git repository. בשלב הזה מתנסים ביצירה ובהרצה; שיתוף ב־GitHub יגיע אחרי Bootstrap.
  7. לחצו Create והמתינו לסיום יצירת הקבצים ושחזור החבילות.

אפשרויות Razor Pages ב־Rider עם net10.0, אימות No authentication ואפשרות Do not use top-level statements לא מסומנת

אפשר ללחוץ על כל צילום כדי לראות אותו בגודל מלא.

אם .NET 10 או התבנית המתאימה אינם מופיעים, בדקו את התקנת ה־SDK ופנו למורה. אל תבחרו תבנית אחרת כדי להמשיך.

3. מריצים ובודקים

  1. בחלון Solution משמאל (חלון עץ הקבצים) הרחיבו את הפרויקט ואת Pages. ודאו שקיימים Index.cshtml, קובץ .csproj והתיקייה wwwroot.
  2. ברשימת תצורות ההרצה בסרגל העליון בחרו RazorPractice: http, או את שם הפרויקט שלכם ואחריו http. אם כבר נבחר הפרופיל הזה, השאירו אותו. לחצו על Run ▶.
  3. המתינו לסיום הבנייה. פתחו את כתובת http://localhost:… שמופיעה בחלון Run אם הדפדפן אינו נפתח אוטומטית. השתמשו במספר היציאה שהפרויקט שלכם מציג.
  4. בדקו שמופיע Welcome עם תפריט Home ו־Privacy. עצרו באמצעות Stop ■.
  5. פתחו Pages/Index.cshtml, החליפו את Welcome ב־החיות שלי, שמרו והפעילו שוב. בדקו שהכותרת השתנתה.

בצילום Rider רואים את הפרויקט ואת Pages משמאל, את פרופיל http בסרגל העליון ואת חלון Run בתחתית. השורה Now listening on מציגה את כתובת האתר שלכם. מספר היציאה עשוי להיות שונה מהצילום. האזהרה הצהובה שבצילום מציינת שלא נבחרה יציאת HTTPS בהרצת פרופיל http; אם שורת Now listening on מופיעה ודף Welcome נפתח, הרצת HTTP הצליחה.

פרויקט RazorPractice ב־Rider לאחר הרצה עם http וחלון Run שמציג Now listening on

בדפדפן צריך להופיע דף התבנית עם Welcome, תפריט Home / Privacy ושם הפרויקט שלכם.

דף Welcome של פרויקט RazorPractice שנוצר והורץ מתוך Rider

יש לכם אתר Razor Pages שנוצר מתבנית ופועל מתוך Rider. Bootstrap כבר נמצא ב־wwwroot/lib/bootstrap, והעיצוב האישי נמצא ב־wwwroot/css/site.css.

4. ממשיכים או מנסים שוב

לעבודה קיימת בחרו Open ופתחו את קובץ הפתרון .sln או .slnx. לתרגול יצירה מחדש עצרו את ההרצה, חזרו ל־New Solution ובחרו שם חדש, למשל RazorPractice2, ותיקייה חדשה לצד הראשונה. שמרו את הניסוי הקודם; אין צורך למחוק אותו.

השאירו את Program.cs, את הגדרות ההרצה ואת קובצי התבנית במקומם. אין צורך לפרסם דבר לרשת.

עזרה: יצירת אתר ב־Rider

מתרגלים יצירה נוספת

  1. עצרו את האתר הראשון באמצעות Stop או Ctrl+C בטרמינל.
  2. חזרו למדריך שלכם וצרו פרויקט שני בשם אחר, למשל RazorPractice2, בתיקייה נפרדת לצד הראשונה.
  3. הריצו גם אותו ובדקו שמופיע Welcome. שנו כותרת כדי שתדעו איזה ניסוי פתוח.
  4. עצרו ופתחו שוב את הניסוי הראשון. בדקו שהקבצים שלו והשינוי שעשיתם עדיין קיימים.

אתם יודעים ליצור אתר, לעצור אותו ולפתוח עבודה קיימת. בחרו כעת אחד מהניסויים להמשך תרגול תוכן ו־CSS. אפשר לנסות שוב עד שיעור Bootstrap; בשיעור Git שלאחריו נרשום את הפרויקט השנתי בשם FirstNameLastNameRazor ונשתף את המורה.

ממשיכים עם הפרויקט שיצרנו

1. פותחים את העבודה הקיימת

ב־VS Code פתחו את תיקיית הפרויקט בשם שבחרתם באמצעות File → Open Folder. ב־Visual Studio פתחו את קובץ הפתרון בשם שבחרתם, למשל GuysRazor.slnx או GuysRazor.sln, מתוך תיקיית הפתרון שלכם. לפתיחה מחדש של עבודה קיימת אין צורך ליצור פרויקט. ב־Rider פתחו את קובץ הפתרון באמצעות Open.

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

2. עורכים את האתר שלנו

השאירו את הדפדפן לצד העורך. ב־Visual Studio או ב־Rider הפעילו את פרופיל http. ב־VS Code פתחו טרמינל בתיקייה שמכילה את קובץ ה־.csproj והריצו:

dotnet watch --launch-profile http

בקטע הבא נתאים את דף הבית ואת התבנית המשותפת לעברית. בדוגמאות כאן RazorTaba הוא שם תיקיית הפרויקט הפנימית. אם בחרתם שם אישי ב־Visual Studio, החליפו את החלק הזה בשם שלכם: למשל GuysRazor/Pages/Index.cshtml. במסלול עם תיקיית פתרון חיצונית הנתיב מתחיל ממנה; ב־VS Code, כשפתחתם ישירות את תיקיית ה־.csproj, התחילו מ־Pages/Index.cshtml בלי להוסיף תיקייה נוספת. הקבצים כבר נוצרו בהקמה; כעת עורכים אותם.

צרו בתוך RazorTaba/wwwroot תיקייה בשם images והעתיקו אליה את fox.svg ששמרתם בתיקיית first-page בשיעור הקודם. כך התמונה שבדף הבית תימצא בנתיב RazorTaba/wwwroot/images/fox.svg.

3. שומרים ובודקים

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

השינויים בקוד

RazorTaba/Pages/Index.cshtml

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

 @page
 @model IndexModel
 @{
-    ViewData["Title"] = "Home page";
+    ViewData["Title"] = "בית";
 }
-
-<div class="text-center">
-    <h1 class="display-4">Welcome</h1>
-    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
-</div>
+<h1>החיות שלי</h1>
+<p>זה האתר הראשון שלי. כאן אכיר לכם חיות שמסקרנות אותי.</p>
+<img src="~/images/fox.svg" alt="איור של שועל" width="180" />

RazorTaba/Pages/Shared/_Layout.cshtml

קובץ זה כבר קיים בתבנית ומחבר את כל הדפים ל־Bootstrap ול־site.css. אין להחליף אותו. בצעו רק את שני השינויים הבאים כדי להתאים את כיוון הדף ואת Bootstrap לעברית:

לפני

<!DOCTYPE html>
<html lang="en">
⁞
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

אחרי

<!DOCTYPE html>
<html lang="he" dir="rtl">
⁞
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.rtl.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />

השאירו את שאר השורות, כולל הקישור לקובץ ששמו מסתיים ב־.styles.css, תפריט Home ו־Privacy, כפתור פתיחת התפריט בנייד והסקריפטים שבתחתית הקובץ. נסו לצמצם את רוחב החלון ולפתוח את התפריט בכפתור שלו.

מכירים את קובצי העיצוב שנוצרו

  • wwwroot/lib/bootstrap/dist/css/bootstrap.rtl.min.css מכיל מחלקות עיצוב מוכנות. משתמשים בשמות המחלקות בתוך HTML; אין לערוך את קובץ הספרייה.
  • wwwroot/css/site.css הוא קובץ העיצוב האישי של האתר בתבנית הזאת. כאן נוסיף כללי CSS משלנו בשיעור CSS, אחרי הכללים שכבר נוצרו.
  • Pages/Shared/_Layout.cshtml.css מכיל עיצוב של התבנית המשותפת. הקישור ל־שםהפרויקט.styles.css טוען את העיצוב הזה לאחר הבנייה; אין ליצור קובץ כזה ידנית.

השאירו את Program.cs, את Properties/launchSettings.json ואת כללי CSS המקוריים כפי שנוצרו. כבר יש לנו אתר עובד. כתובת ההרצה היא הכתובת שהעורך או הטרמינל מציגים אצלכם; אין צורך לקבוע מספר יציאה משותף לכל הניסויים.

מריצים ובודקים

  1. האתר נפתח בכתובת localhost שההרצה שלכם מציגה.
  2. הכותרת והפסקה מופיעות בעברית והתמונה נטענת.
  3. שמרו שינוי נוסף, הריצו וודאו שהוא מופיע.
  4. עצרו את ההרצה, פתחו שוב את אותו פרויקט והריצו אותו.

משימה אישית ובדיקת הבנה

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

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

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


המשך