חדש! תכנית ׳ריאליטי ווב׳ - דוקו שדרוג אתר כבר באוויר! בואו לצפות בחלק הראשון

מדריך אלמנטור, שיר ויצמן, מדריך וורדפרס, אלמנטור פרו, אלמנטור למתחילים

שיעור 3: הגדרות אזורים, עמודות ואלמנטים – צוללות פנימה

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

לצפייה בסרטון (אותו התוכן כמו במאמר, רק בוידאו):

שיעור 3: הגדרות אזורים, עמודות ואלמנטים – צוללות פנימה

היי קואלטיז! 

בשיעור הזה נכיר יותר לעומק את ההגדרות באזור העריכה של האזורים, עמודות ואלמנטים שונים ונלמד:

  • באיזה יחידת מידה כדאי להשתמש (px, vh, vw)
  • איך לשנות את ההגדרות של האלמנטים
  • איך לשנות צבעים לעמודות ואזורים
  • איך להגדיר תמונת רקע קבועה לאזור
  • מה זה מפרידון צורה
  • איך לתת מסגרת לאזור או עמודה ועוד…

אז…. Let’s Go!


מה ההבדל בין יחידות המידה PX, EM, REM, %, VW ו- VH?

נתחיל מההתחלה, 

וורדפרס בבסיס שלה בנוייה על שפות קוד. אחת מהן היא CSS.

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

יחידות המידה שתמצאו בכמה מהאפשרויות של אלמנטור כוללות PX, EM, REM,%, VW ו- VH, (אף על פי שב- CSS קיימות עוד כמה יחידות).

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

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

יחידות מוחלטות – אבסולוטיות (Absolute Units)

היחידה היחידה המוחלטת באלמנטור היא יחידה שנקראת PX כלומר פיקסל.

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

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

יחידות יחסיות (Relative Units)

EM: יחסית לאלמנט ההורה שבו היא נמצאת

REM: יחסית לאלמנט הבסיס (תג HTML)

%: יחסית לאלמנט ההורה שבו היא נמצאת

VW: יחסית לרוחב התצוגה ממכשיר המשתמשות

VH: יחסית לגובה התצוגה ממכשיר המשתמשות

בניגוד ל- PX, יחידות יחסיות כמו %, EM ו- REM מתאימות יותר לעיצוב רספונסיבי וגם עוזרות לעמוד בתקני נגישות. יחידות יחסיות מתנהגות טוב יותר במכשירים שונים מכיוון שהן יכולות להתרחב ולהתכווץ בהתאם לגודל המכשיר.

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


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

חדשות בוורדפרס? קבלו את המדריך המלא לבניית אתרים – מדריך וורדפרס למתחילים.

עוד במדריך
פוסטים אחרונים

חלק 1 פרק 4 – יצירת צ׳קליסט והצבת דד-ליין לפרויקט

חלק 1 פרק 3 – הצבת מטרות ויצירת תכנית פעולה

חלק 1 פרק 2 – סקר לקוחות

חלק 1 פרק 1 – למי התכנית מתאימה?

שיעור 15 – קידום בגוגל ויוטיוב – חוזרים להתחלה

שיעור 14 – ניתוח נתונים

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *