יסודות פריסת התוכן - קורס RUB 3,900. מהקסלט, אימון 18 שעות, תאריך: 1 בדצמבר 2023.
Miscellanea / / December 04, 2023
כיום, גיליונות סגנונות מספקים הזדמנויות נהדרות לעיצוב טקסט ובלוקים בעמוד: רקע, צבע, שימוש באודיו ווידאו. כל האלמנטים הללו מאפשרים ליצור אתרים צבעוניים ונגישים למשתמשים. זמן רב הוקדש ללימוד סלקטורים חדשים, פסאודו-שיעורים ופסאודו-אלמנטים. הם מאפשרים לך לסגנן תוכן בצורה יוצאת דופן.
מבחנים
אלו הן משימות מעשיות שאנו ממליצים לבצע לאחר סיום הקורס. המטלות יעזרו לך לצבור ניסיון נוסף בתכנות ולגבש את כישוריך הנרכשים. בדרך כלל אנו ממליצים להשלים 3-5 בדיקות. אבל אם זה לא יצליח, אל תתייאשו. פשוט תחזור אליהם מאוחר יותר.
1. מבוא
עבודה עם תוכן היא חלק בסיסי בעת יצירת פרויקט. יש תוכן מוסתר מאחורי אנימציות, בלוקים ותמונות יפות. המשתמש מגיע לאתר או פותח עבורו אפליקציה. בשיעור זה נבחן בקצרה את הנושאים שיילמדו במהלך הקורס.
תֵאוֹרִיָה
2. דגם קופסא ו-CSS
אילו מאפייני CSS משפיעים על גודל האלמנטים כשהם מוצגים בדף? בואו נזכור את הרעיון של מודל התיבה ונלמד כיצד פועלים מאפייני השוליים, הריפוד והגבול כדי להגדיר ריפוד חיצוני/פנימי וגבולות גלויים של אלמנט. בואו להכיר את תכונת גודל התיבה, המשנה את ההתנהגות הסטנדרטית של דגם התיבה
תֵאוֹרִיָה
3. סגנונות טקסט
יצירת עמוד היא קודם כל עבודה עם טקסט. לא משנה כמה העיצוב יפה, אם המידע קשה או בלתי אפשרי לקריאה, המשתמש יעזוב במהירות את העמוד. בשיעור זה נכיר את המאפיינים הבסיסיים של עיצוב טקסט.
תֵאוֹרִיָה
מבחנים
תרגיל
4. פונטים ועבודה איתם
שמעתם את המשפט "לשחק עם גופנים"? הגיע הזמן לעשות את זה. אנו לומדים לחבר גופנים באמצעות CSS, לשלוט בגודל הטקסט, בעיצוב, ולהגדיר מרווח בין שורות. בסוף השיעור נלמד את תכונת הגופן הכללית שבאמצעותה ניתן להגדיר 6 סגנונות טקסט שונים בבת אחת
תֵאוֹרִיָה
מבחנים
תרגיל
5. רשימות
רשימות הן חלק בלתי נפרד מהטקסט. הם מאפשרים לך לקבץ קטעים קשורים, לאחד אותם בהתאם למשמעותם. בשיעור זה, נחקור את סוגי הרשימות הזמינים ב-HTML, נתרגל רשימות קינון ונגע בנושא של סמני רשימות סטיילינג
תֵאוֹרִיָה
מבחנים
תרגיל
6. עמודות
יצירת פריסת מגזין מרובה עמודות הייתה בעייתית באמצעות CSS. עם כניסתו של תקן CSS3, הופיע מודול חדש - CSS Multi-column Layout, שאיפשר ליצור עמודות עם העברת תוכן אוטומטית. בואו נלמד את היכולות של מודול CSS Columns ואת המגבלות המוטלות בשיטה זו של עיצוב טקסט
תֵאוֹרִיָה
מבחנים
תרגיל
7. יחידות
ממש כמו בעולם האמיתי, עולם הפריסה משתמש ביחידות מדידה כדי לציין גדלי אלמנטים, ריפוד, גודל טקסט וכדומה. בשיעור זה נכיר את יחידות המדידה הבסיסיות והקשר שלהן עם אלמנטים באתר. בואו נלמד את המושג של יחידות יחסיות ומוחלטות ונזהה את ההבדל בין יחידות em ו-rem
תֵאוֹרִיָה
מבחנים
תרגיל
8. אלמנטים של מדיה
מבקרים באתר לא רק אוהבים לקרוא טקסט, אלא גם קולטים מידע באמצעות אלמנטים מדיה: תמונות, וידאו, אודיו. כיצד להוסיף אותם בצורה נכונה ולקחת בחשבון הבדלים בדפדפן? מדוע לתמונה באתר יש שקע קטן בתחתית? בואו לחקור את זה ועוד קצת בשיעור.
תֵאוֹרִיָה
מבחנים
תרגיל
9. טבלאות
שולחנות הם סיוט של מעצב פריסה. נעשה שימוש בהרבה תגים ליצירתם, וטעויות קטנות עלולות להרוס את מצב הרוח. בשיעור זה, צעד אחר צעד, נלמד יצירת טבלאות פשוטות ומורכבות, נבין מהיכן יכולות לנבוע שגיאות וכיצד ניתן למנוע אותן. עד סוף השיעור, תוכל ליצור בביטחון טבלאות ולהפסיק לפחד מהן.
תֵאוֹרִיָה
מבחנים
תרגיל
10. טפסים
טפסים הם מרכיב אינטראקטיבי חשוב בדף אינטרנט. כמו קישורים, טפסים מספקים אינטראקציה בין המשתמש לדף, ומאפשרים לך לשלוח נתונים. בואו ללמוד כיצד ליצור טפסים, להוסיף שדות טקסט, שדות בחירה, רשימות וכפתורים. ניגע בנושא הנגשת טפסים לאנשים עם מוגבלות
תֵאוֹרִיָה
מבחנים
תרגיל
11. בוררים
לשיעור זה, למדנו ובדקנו בוררים פשוטים שאפשרו לנו לבחור אלמנטים לפי מחלקה, מזהה או תג. איך עוד אפשר לבחור אלמנט בדף? בשיעור זה ננתח בוררים קשורים ושכנים, נלמד כיצד להשתמש בבוררים לפי תכונה
תֵאוֹרִיָה
מבחנים
תרגיל
12. פסאודו-שיעורים
בואו נמשיך את נושא הסלקטורים ב-CSS ונכיר את הרעיון של פסאודו-קלאס. בואו ללמוד כיצד להשתמש בהם כדי לבחור אלמנטים זוגיים או אי-זוגיים, כיצד להוסיף סגנונות ריחוף חדשים עכבר על אלמנט ומדוע אפילו אלמנטים יהיו כאלה כאשר משתמשים רק ברכיב מסוים פסאודו-קלאס. בואו נבין מצבי יסוד ומחלקות פסאודו מבניות
תֵאוֹרִיָה
מבחנים
תרגיל
13. פסאודו-אלמנטים
חסרים אלמנטים בדף? פסאודו-אלמנטים באים להצלה - אלמנטים שנוצרו באמצעות CSS. בשיעור זה נבחן כיצד נוצרים פסאודו-אלמנטים, מדוע הם נחוצים ואילו תכונות יש להם. בואו נראה כיצד מעוצבים סמני רשימה ב-CSS
תֵאוֹרִיָה
מבחנים
14. הצפה
גלישה היא מצב בו התוכן בתוך מיכל גדול מגודל המיכל עצמו. מצב זה יכול לקלקל את הפריסה אפילו עבור מעצב פריסה מנוסה. נלמד מה לעשות עם זה וכיצד לנהל הסתרת תוכן באמצעות מאפיין ה-overflow בשיעור זה. בואו נסתכל על מאפיין ה-text-overflow ונלמד כיצד להוסיף אליפסיס בטקסטים אם אין מספיק מקום עבורו
תֵאוֹרִיָה
מבחנים
תרגיל
15. משתני CSS
תארו לעצמכם שבאתר יש תריסר בלוקים עם רקע באותו צבע. אתה צריך לשנות את כל הצבעים האלה. איך לעשות זאת מבלי להחליף כל הזמן את הצבע בכל בורר וכיצד משתנים יכולים לעזור נלמד בשיעור זה. בואו נסתכל על האופן שבו משתנים נוצרים ומשתמשים בהם, למד על היקף ומדוע משתנים גלובליים טובים יותר ממשתנים לכל בורר
תֵאוֹרִיָה
מבחנים
16. רקע כללי
מעצב פריסה מתמודד לעתים קרובות עם הצורך לסגנן לא רק אלמנטים ספציפיים, כגון טבלאות, רשימות, טקסט, רכיבי מדיה וטפסים. לפעמים צריך גם לסגנן את הבלוקים שהם ממוקמים בתוכם. לשם כך, ניתן להגדיר את הרקע לבלוק עם תוכן, ונלמד כיצד לעשות זאת באמצעות מאפיין הרקע בשיעור זה. בואו ללמוד את המאפיינים להגדרת צבע, תמונה, ללמוד כיצד למקם את הרקע ולקבוע את גודלו
תֵאוֹרִיָה
מבחנים
17. מעברי צבע
רקע או תמונה בצבע אחד הם לא הדרך היחידה לסגנן בלוק. אמנים ומעצבים משתמשים לעתים קרובות בהדרגות כדי ליצור רקעים - מעברים חלקים מצבע אחד למשנהו. במדריך זה נלמד כיצד ליצור שיפועים ליניאריים ורדיאליים. בעזרת שיפועים וטריקים נלמד יצירת מעברים חדים בין צבעים, וגם נלמד על גלגל הצבעים וכיצד בעזרתו למצוא שילובי צבעים להדרגות
תֵאוֹרִיָה
תרגיל
18. עבודה עצמאית
משימות נוספות המאפשרות לך לגבש את התיאוריה הנרכשת
19. חומרים נוספים
מאמרים וסרטונים שנאספו על ידי צוות Hexlet. יעזור לך לצלול עמוק יותר לתוך נושא הקורס