עיצוב מטרו - Metro - חלק 2
span, מציינים לכל פריט את קו ההתחלה וקו הסיום שלו לפי מספרי הקווים של הגריד.grid-column: 1 / 5, כלומר מקו 1 עד קו 5. והוא נפרס על שתי שורות, ולכן grid-row: 1 / 3.grid-row: 2 / 4, ואין צורך בעמודות. פריט 4: עמודות 1 / 3, שורות 3 / 5. פריט 5: עמודות 3 / 5, בלי שורות. פריט 6: עמודות 3 / 6.grid-row: 2 / 5 במקום 3 / 5 יושב על פריט אחר, כמו פרסומת או תמונה שמונחת מעל אחרת.grid-column: 1 / 5 · grid-row: 2 / 4פרקי ההרצאה: עיצוב מטרו - Metro - חלק 2
תמלול ההרצאה: עיצוב מטרו - Metro - חלק 2
הטקסט המלא של הדקות הראשונות בהרצאה «עיצוב מטרו - Metro - חלק 2» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
עכשיו יש עוד טכניקה שבאה להחליף את הטכניקה הזאת. לפי דעתי זאת היא קצת יותר נוחה, לפחות לי, אבל בואו נראה כבר את הטכניקה הנוספת שקיימת.
אז הטכניקה הנוספת אומרת כזה דבר. יש לנו כאן את הציור שאליו אנחנו רוצים להגיע, ויש לי כאן כאילו את העמודות שקיימות, אבל אנחנו יכולים למספר אותם כאשר זה מתחיל מ-1, זה 2, זה 3, אני מדבר על העמודות, זה 4, זה 5 וזה 6. שורות, זה 1 פה למעלה, זה 2, זה
3, זה 4 וזה 5. ציירתי איזשהו ציור שהוא כמו הציור הזה, אני רגע אחפש אותו, הנה הוא נמצא פה, אז אני אפטר מהתמונה הזאת ואני אריץ את התמונה הזאת שהיא אותו הדבר, ציירתי את העמודות עצמן עם המספרים האלה.
אז זה כמובן מספרים וירטואליים לחלוטין, אבל אפשר להגיד שזה מספר אחד, ועמודה הבאה זה שתיים שלוש ארבע חמש שש. פה יש לנו אחד, שתיים שלוש, ארבע חמש, ואנחנו הולכים להשתמש עם המספרים הווירטואליים האלה.
איך? אני לוקח את כל זה משכפל ושם את הקודם בהערה. אז שוב, זו טכניקה אחרת, לפעמים יש אנשים שחושבים שהטכניקה השנייה יותר נוחה, אני יותר אוהב את הראשונה, לי הראשונה יותר נוחה, אבל בואו נראה מה הטכניקה השנייה אומרת.
הטכניקה השנייה אומרת שאנחנו אומרים לכל column ו-row איפה ההתחלה ואיפה הסוף של המספרים האלה. אם נסתכל רגע מה היה כתוב פה, הראשון זה div f-9-1 ואנחנו מדברים על העמודות שלו, הוא מתפרס על ארבעה חלקים, אבל אם אנחנו מסתכלים על המספרים האלה הוא מתפרס מ-1 עד 5. אוקיי, אז במקום לרשום span 4 אנחנו פשוט אומרים לו 1 / 5. ואם אנחנו נסתכל רגע על האתר
אנחנו נראה שהוא בעצם אותו הדבר. אוקיי, זה האתר שלנו, האמת אולי נוריד את כל היתר ונראה שהאתר בעצם חזר להיות ככה. זה הראשון. הוא מתפרס מ-1 עד 5. השני, אני לא נותן לו האמת לפני השני, כמה עמודות, כמה שורות הראשון מתפרס?
אז ראינו שהוא מתפרס 2, אבל 2 זה מ-1 עד 3. אז אנחנו באים בחזרה ואומרים לו תשמע, ונעביר לפה. אתה מתפרס בשורות מ-1 עד 3, עושים את זה ככה עם סלאש כזה.
בואו נלך לאתר שלנו, והנה הוא מתפרס מ-1 עד 3. 2 אנחנו לא נוגעים, שלוש אנחנו אומרים לו שהעמודות בעצם אנחנו לא נוגעים בעמודות. שורות מקודם הם היו span 2. אוקיי, כמה הם עכשיו?
אז אנחנו לא רוצים להגיד לו span 2, אנחנו רוצים להשתמש בטכניקה הזאת. אנחנו לא יכולים להגיד לו 1 עד משהו כי הוא מתחיל מ-2. בואו נסתכל עוד פעם על הציור הזה.
הוא מתחיל מ-2 אבל הוא מתפרס מ-2 עד 4 ואז אז אנחנו יכולים להגיד לו 2/4 וזה בדיוק נותן לו את המיקום. מה בקשר למספר 4?
עמודות מ-1 עד 3, שורות מ-3 עד 5. בואו נרשום את זה. זה נשים פה וזה אמרנו עמודות 1 עד 3 ושורות שלוש עד חמש, אחד עד שלוש ושלוש עד חמש. בואו נראה את האתר בדיוק איפה שהוא צריך.
מה אם חמש? עמודות מתפרסות מאחד, שתיים, שלוש, האמת יותר קל לראות את זה בציור הזה, אחד, שתיים, משלוש תתפרס עד חמש, אז אנחנו אומרים לו, זה כבר נשים פה, אנחנו אומרים לו שהוא מתפרס עמודות שלוש עד חמש, שלוש עד חמש. בואו נראה את האתר שלנו, הנה
שלוש עד חמש, מעולה. ושורות אני לא צריך להגיד לו מפני שהוא מתפרס אחד, נשאר לנו רק שש והוא מתפרס משלוש עד שש מבחינת עמודות.
אז את זה אפשר להוריד ויש לנו שלוש עד שש וזה סוגר לנו את העיצוב הזהה לעיצוב הקודם בטכניקה אחרת.
לטכניקה הזאת יש יתרון והיתרון הוא שאנחנו יכולים לשנות את המיקום של כל אחד כך שהוא יהיה מעל מישהו אחר. לדוגמה, אם אנחנו רוצים ש-4 יתחיל מפה, אז אנחנו יכולים להגיד לו, תשמע, אתה לא מתחיל מ-3, אתה מתחיל מ-2 ואז הוא עולה על מישהו אחר.
בואו נראה את זה. אז יש לנו את 4 מבחינת שורות, במקום להתחיל 3 עד 5, תתחיל מ-2 עד 5. והופה, כאילו פרסומת עולה על פרסומת אחרת,