נעצב את האתר באמצעות CSS: נשנה צבעים וריווח, נוסיף מחלקת עיצוב ונראה את התוצאה בדפדפן אחרי כל שינוי.
הפרק הקודם: 03 — האתר הופך לשלי · הפרק הבא: 05 — אתר שנראה טוב עם Bootstrap
במסך מגע אפשר להחליק ימינה לפרק הבא ושמאלה לפרק הקודם.
מה נלמד
- להשתמש במחלקת עיצוב ולזהות selector.
- להבדיל בין color, background ו־padding.
- לראות תוצאה מיידית של שינוי CSS.
זה עדיין שלב התנסות לפני רישום הפרויקט השנתי. אפשר לעבוד בניסוי שבחרתם או ליצור ניסוי חדש בתיקייה נפרדת בעזרת 02 — מדריכי ההקמה. אם מתחילים מחדש, השלימו בו את שינויי השיעורים הקודמים הדרושים לדוגמאות שלפניכם. שמרו את הניסויים הקודמים; עדיין אין צורך לפרסם ל־GitHub.
פותחים ומריצים
פתחו את תיקיית הפרויקט שבה עבדתם, שמרו את הקבצים והריצו את האתר. בדקו שהשינוי מהמפגש הקודם מופיע לפני שמנסים שינוי חדש.
מעבדה קטנה בעיצוב
פתחו wwwroot/css/site.css. השאירו את כללי התבנית והוסיפו בסוף את כללי העיצוב שמופיעים בהמשך. הפעילו dotnet watch או Hot Reload. לאחר ההוספה שנו רק את --forest, שמרו וצפו בתוצאה. אחר כך שנו padding והחזירו לערך נעים לעין. class="intro" מקשרת בין אזור HTML לכלל .intro. מחלקת CSS היא שם של כלל עיצוב; היא אינה מחלקה בשפת C#. משתני CSS מרכזים את פלטת הצבעים במקום אחד.
שתי דרכים להשתמש במחלקות עיצוב
class="intro" מפנה לכלל .intro שנכתוב ב־site.css. לעומתו class="text-center" או class="container" מפנה למחלקות Bootstrap שכבר הגיעו עם התבנית. אפשר לשלב כמה שמות באותו class, עם רווח ביניהם. בשיעור הבא נשתמש במחלקות האלה לבניית עמודות וכרטיסים.
השינויים בקוד
RazorTaba/Pages/Index.cshtml
בקובץ הקיים בצעו את השינוי הבא. סימני + ו־- מציינים שינוי ואינם חלק מהקוד:
@model IndexModel
@{
ViewData["Title"] = "בית";
}
+<section class="intro">
<h1>החיות שלי</h1>
<p>ברוכים הבאים לפינה שלי בטבע. נכיר חיות, נקרא עליהן ונלמד איך מטפלים בהן.</p>
<h2>מה תמצאו כאן?</h2>
<ul>
<li>חיות שיש להן סיפור</li>
<li>מדריכי טיפול קצרים</li>
<li>המלצות שלי להיכרות מקרוב</li>
</ul>
<a href="https://he.wikipedia.org/wiki/שועל">לקריאה על שועלים</a>
<img src="~/images/fox.svg" alt="איור של שועל" width="180" />
+</section>
RazorTaba/wwwroot/css/site.css
הוסיפו בסוף הקובץ את הכללים הבאים, אחרי הסוגר המסולסל האחרון. השאירו את כללי התבנית במקומם; סימני + מציינים שורות חדשות ואינם חלק מהקוד שמקלידים:
+:root {
+ --forest: #173f35;
+ --leaf: #4d7058;
+ --paper: #f7f5ed;
+ --accent: #e6b66b;
+}
+body { font-family: Arial, sans-serif; color: var(--forest); background: var(--paper); line-height: 1.7; }
+a { color: var(--forest); text-underline-offset: .25em; }
+.intro { background: var(--forest); color: #fff; border-radius: 1.5rem; padding: 3rem; }
+.intro h1 { font-size: clamp(2rem, 6vw, 4rem); font-weight: 800; }
+.intro a { color: var(--accent); }
+footer { border-top: 1px solid #d8dfd3; margin-top: 3rem; color: var(--leaf); }
מריצים ובודקים
- הרקע בהיר ואזור הפתיחה כהה.
- שינוי –forest משנה את העיצוב בלי לשנות HTML.
- במסך צר הכותרת אינה חורגת.
משימה אישית ובדיקת הבנה
בחרו פלטה משלכם ושנו ריווח אחד. הסבירו איזה selector משפיע על הכותרת ואיזה על הקישורים. שמרו ובדקו את שינוי הצבעים לפני שמנסים שינוי נוסף.
בסיום שינוי: שמרו את הקבצים, בדקו את האתר בדפדפן והסבירו מה שיניתם. אפשר להמשיך בניסוי הזה או לתרגל שוב בפרויקט נפרד; רשמו היכן שמרתם כל ניסוי.
AI יכול לעזור להבין הודעת שגיאה ולנפות תקלה. אתם אחראים לכתוב, לבדוק ולהסביר את הקוד; אין להפעיל סוכן שיכתוב את הפרויקט.