בניית אתר אינטרנט אמיתי לחנות חיות - דף צור קשר
table, רק עם Grid, ומוצב במרכז הדף בעזרת Flex.index.html לקובץ חדש. שמות קבצים נהוג לכתוב באותיות קטנות עם מקפים, כאן contact-us. הקישור active עובר לקישור של צור קשר, והתוכן הישן של main נמחק.section עם class בשם contact-us-table-container ובתוכו שש div: תווית השם, input מסוג טקסט, תווית ההודעה, textarea להודעה מרובת שורות, div ריק וכפתור send.display: grid, עמודות של 1fr ו-3fr, ושורות minmax(70px, auto) כך שכל שורה מינימום 70 פיקסלים. רוחב הטבלה 50%, כי ברירת המחדל היא 100%.div בתוך הקונטיינר נותנים גופן גדול, יישור למרכז, padding של 10 וגבול של פיקסל שחור.div הופך ל-display: flex עם flex-direction: column ו-justify-content: center. כך התוכן מתמרכז אנכית וגם נמתח.textarea והכפתור לא יורשים את הגופן, ולכן קובעים להם אותו font-size ואת font-family: Arial.div או section נוסף עם class בשם contact-us-container, שהוא display: flex עם justify-content: center ו-padding-top של 100 פיקסלים. הטבלה מוצבת כפריט אחד באמצע.פרקי ההרצאה: בניית אתר אינטרנט אמיתי לחנות חיות - דף צור קשר
תמלול ההרצאה: בניית אתר אינטרנט אמיתי לחנות חיות - דף צור קשר
הטקסט המלא של הדקות הראשונות בהרצאה «בניית אתר אינטרנט אמיתי לחנות חיות - דף צור קשר» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לדף האחרון והדף הזה זה הדף של צור קשר בואו נפתח לנו כאן את זה ונשכפל שוב פעם בואו נשכפל את האינדקס בוא נניח קונטרול סי קונטרול וי ונקרא לו קונטקט הופה נקרא לו פה קונטקט אס בצורה כזאת מקובל ששמות של קבצים יהיו עם מקפים והכל אותיות קטנות אז הנה יש לנו דף קונטקט אס ששכפלנו אנחנו רוצים קודם כל את
האקטיב הזה לגזור ולהעביר לאזור של הקונטקט אסט, ללינק של הקונטקט אסט, שהוא יהיה צבוע, להיפטר מכל מה שיש פה, בואו רגע נוריד את זה, ומה שאנחנו רוצים כאן זה, בואו נסתכל עוד פעם על האפיון, זה לינק קונטקט אסט, מוביל אותנו לאיזושהי
טבלה שפשוט קיימת כאן, ואנחנו רואים שיש לנו כאן, יש פה שם ומסג', זה טבע טקסט, זה טקסט אריה, אנחנו רואים שהוא יותר גדול, לחצן, אנחנו רוצים להגיע לעיצוב הזה.
אז מה שאנחנו רוצים זה קודם כל להתעסק עם גריד, כמו שבעצם היה לנו. אז נפתח כאן, אולי קודם כל נפתח את ה-section, זה בסדר, בואו ניתן ל-class, נניח טייבל קונטיינר זה בעצם אולי ניתן משהו יותר ספציפי קונטאקט אס טייבל קונטיינר קצת שם ארוך אבל לא נורא
ומה שאנחנו רוצים זה עכשיו שהטיינר הזה יכיל לנו איפה בעצם הסטייל שלנו נשים אותו פה בצד אנחנו רוצים שהקונטיינר הזה או בעצם יהיה בתוכו, את הטבלה הזאת.
וראינו בסרטונים של FlexGrid, שטבלה ניתן לבצע בצורה פשוטה על ידי גריד. למרות שאנחנו יכולים להשתמש ב-Table, TR, TD, THead וכו', יותר מקצועי לעשות את זה בעזרת גריד, ולכן זה מה שאנחנו רוצים.
אנחנו רוצים שהטבלה הזאת תהיה בעזרת גריד, אז זה הקונטיינר שלה, ואנחנו רוצים בתוכה פשוט לזרוק את הרכיבים השונים. אז יש לנו כאן דיווים, נניח הדיו הראשונה הייתה name וליד הדיו של ה-name, בעצם כמה דיווים יש לנו אמרנו?
1, 2, 3, 4, 5, 6, אז בואו נניח 1, 2, 3, 4, 5, 6. הדיו הבאה בתור אנחנו רוצים שיהיה לנו input type text, נשים אותם האמת בצורה כזאת. לאחר מכן יש לנו דיו של הודעה, המודעה זה טקסט אריה אז יש לנו טקסט אריה כי זה בעצם אמור להיות מולטי ליין זה אמור להיות טקסט אריה הדיב הזאת אין בה שום דבר ובזאת באחרונה יש בטון בואו נבוא לפה ויש לנו בטון שכתוב עליו פשוט
send שוב נשים את זה באותה שורה בצורה כזאת good אז הנה המרכיבים השונים שקיימים בתוך הסקשן הזה אנחנו עכשיו רוצים לגרום לדבר הזה להיות כמו קודם כל בואו נראה איך זה בכלל נראה, נלך לקונטקט אס, וזה כמובן נראה בצורה כזאת, אין שום קשר כרגע לטבלה.
אז בואו נחזור, אנחנו רוצים לגשת לפה, ל-CSS, נרד פה למטה, וכאן ב-CSS אנחנו רוצים להתחיל לעצב את הטבלה שלנו.
אז זאת הקלאס, בואו נעתיק אותה, נשים אותה פה, ונגיד שיש לנו דיספליי, כמובן גריד, והגריד טמפלייט קולומס שלנו מוגדר כבואו נסתכל רגע על העיצוב כמה זה תופס לי מבחינת עמודות מול כמה זה תופס זה נראה לי שליש נראה שזה שליש אז בואו נגיד שזה 1 fr זה עמודה ראשונה ו3
fr עמודה שנייה יש לנו רק שתי עמודות גריד נגדיר הפעם auto rose מין מקס ניתן לו 70 פיקסלים מינימום וכמה שאתה צריך מקסימום ובואו נגדיר לו האתר שלנו נמצא נגדיר שהוא לא תופס 100% כי בי דיפולט הוא מנסה לתפוס 100% אלא זה נראה לי כמו 50% בואו ננסה 50% ניתן לו וויד 50% נראה כמה הוא תופס לנו רגע זה התמונה
יופי, נראה שהוא תופס כאילו חצי מהדף, זה בסדר, תכף גם כמובן נשים אותו באמצע וכדומה. עכשיו, מה שאנחנו רוצים לעשות זה בכל דיב שנמצאת בתוך הקונטיינר, וזה מה שאנחנו עושים.
אנחנו רוצים עכשיו להתחיל לתת הגדרות לדיבים הפנימיים האלה. אז בואו ניתן שה-font size הוא extra large, זה אפילו לא קשור ל-CSS 3 פלקסוגריד, זה סתם עיצובים של הטבלה.
וה-text-align הוא נמצא באמצע. ובואו ניתן איזה padding 10 פיקסלים. ובואו ניתן איזה border 1px solid black. משהו, דברים שהם מאוד טנדרטיים שבדרך כלל אנחנו רוצים, והנה כבר אנחנו מתחילים לראות איזושהי טבלה כזאת.
הדבר הבא אולי שכדאי לעשות זה להציב את הקונטנט הזה באמצע מהבחינה הוורטיקלית שה-Name אתם רואים שהוא לא באמת יושב באמצע וגם זה לא באמת יושב באמצע אז כאן אנחנו רוצים שיהיה לנו עבור כל DIV קונטיינר כי ה-DIVים עצמם הם מהווים קונטיינרים למה שנמצא בתוכם אז בואו ניגש לכאן ונגדיר דיספליי פלק שימו לב שכל אחד מהדיו
הולך להיות פלקס בעצמו, פלקס דיירקשן הולך להיות קולום כי אנחנו רוצים מרכוז מבחינה ורטיקלית, ג'אסטיפיי קונטנט, סנטר וזה אמור, שימו לב הוא שם לי אותם באמצע וגם מתח לי אותם, עשה לי את העבודה, מגניב.