עם התפתחות שפות תכנות, סגנון ושפות סימון רבות כל כך, לימוד עיצוב אתרים הופך להיות מסובך מתמיד. למרבה המזל, ישנם המון כלים זמינים שיעזרו לך להתחיל. חפש כמה משאבים בסיסיים, כמו הדרכות מקוונות או ספר עדכני על עיצוב אתרים. לאחר שאתה מוכן להתחיל, התחל בשליטה על היסודות של HTML ו- CSS. לאחר מכן תוכל להתחיל לחקור שפות עיצוב אתרים מתקדמות יותר, כמו JavaScript!
צעדים
שיטה 1 מתוך 4: מציאת משאבי עיצוב אתרים
שלב 1. בדוק באינטרנט קורסים והדרכות לעיצוב אתרים
האינטרנט מלא במידע מפורט אודות עיצוב אתרים, והרבה ממנו זמין באופן חופשי. אתה יכול להתחיל לקחת כמה קורסים מקוונים בחינם ב- Udemy או CodeCademy, או להצטרף לקהילת קידוד כמו freeCodeCamp. תוכל למצוא גם הדרכות וידאו לעיצוב אתרים ב- YouTube.
- אם אתה יודע בדיוק מה אתה מחפש, נסה לבצע חיפוש באמצעות מונחים ספציפיים (למשל, "בוחרי כיתות במדריך CSS").
- אם אתה מתחיל ללא ניסיון בעיצוב אתרים, התחל ללמוד על יסודות הקידוד ב- HTML וב- CSS.
שלב 2. תסתכל על השתתפות בכיתה במכללה או אוניברסיטה מקומית
אם אתה לומד במכללה או באוניברסיטה, פנה למחלקה למדעי המחשב של בית הספר שלך או התייעץ עם קטלוג הקורסים שלך כדי לברר אם קיימים קורסי עיצוב אתרים. אם אתה לא בבית ספר, בדוק אם מכללות או אוניברסיטאות בקרבתך מציעות שיעורי השתלמות בעיצוב אתרים.
חלק מהאוניברסיטאות מציעות שיעורי עיצוב אתרים מקוונים הפתוחים לכל מי שרוצה להירשם. בדוק באתרים כמו Coursera.org כדי למצוא שיעורי עיצוב אתרים בחינם או במחירים נוחים הנלמדים על ידי מדריכים באוניברסיטה
שלב 3. קבל כמה ספרי עיצוב אתרים מחנות הספרים או הספרייה
ספר טוב על עיצוב אתרים יכול להוות אסמכתא שלא יסולא בפז כאשר אתה לומד ומיישם את המלאכה שלך. חפש ספרים עדכניים על עיצוב אתרים כללי או פורמטים ספציפיים של קידוד ושפות שתרצה ללמוד.
קריאת מגזינים ומאמרי בלוג על עיצוב אתרים היא גם דרך טובה ללמוד טכניקות חדשות, לקבל השראה ולהתעדכן במגמות האחרונות
שלב 4. הורד או רכוש תוכנת עיצוב אתרים כלשהי
תוכנה טובה לעיצוב אתרים יכולה לעזור לך לבנות אתרים בצורה יעילה ויעילה יותר, והיא גם מצוינת לעזור לך ללמוד את הפריטים והיתרונות של יישום קידוד, סקריפטים ורכיבי עיצוב מרכזיים אחרים. אתה עשוי להרוויח משימוש בכלים כגון:
- תוכניות עיצוב גרפי, כמו Adobe Photoshop, GIMP או Sketch.
- כלים לבניית אתרים, כגון WordPress, Chrome DevTools או Adobe Dreamweaver.
- תוכנת FTP להעברת הקבצים המוגמרים שלך לשרת שלך.
שלב 5. מצא כמה תבניות אתר שאפשר לשחק איתן בזמן שתתחיל
אין שום רע בשימוש בתבניות כשאתה לומד את היסודות של עיצוב אתרים. חפש תבניות של דפי אינטרנט שאתה אוהב, והסתכל מקרוב על הקוד כדי לקבל מושג כיצד המעצב חיבר את הדף. תוכל גם להתנסות בשינוי הקוד והוספת אלמנטים משלך לתבנית.
חפש תבניות אתרים בחינם כדי להתחיל, או התנסה בתבניות שמגיעות עם תוכנת עיצוב האתרים שלך
שיטה 2 מתוך 4: שליטה ב- HTML
שלב 1. הכר את תגי HTML בסיסיים
HTML היא שפת סימון פשוטה המשמשת לעיצוב האלמנטים הבסיסיים של אתר אינטרנט. אתה יכול לעצב אלמנטים שונים של האתר שלך באמצעות תגים. תגים מופיעים בסוגריים זוויתיים לפני ואחרי כל אלמנט, ומספקים הנחיות כיצד יתפקוד רכיב זה בדף. כדי לסגור את התג, שים / מול התווית הסופית בתוך הסוגריים הזווית.
- לדוגמה, אם אתה רוצה שחלק מהטקסט שלך יהיה נוֹעָז, היית מקיף את האלמנט בתג, כך: הטקסט הזה מודגש.
- כמה תגיות נפוצות כוללות (פסקה), (עוגן, המגדיר טקסט מקושר) ו- (גופן, שיכול לעזור להגדיר תכונות שונות של הטקסט, כמו גודל וצבע).
- תגים אחרים מגדירים את החלקים השונים של מסמך ה- HTML עצמו. לדוגמה, משמש להכיל מידע על הדף שלא יהיה גלוי לצופה, כמו מילות מפתח או תיאור דף שיופיע בתוצאות מנועי החיפוש.
שלב 2. למד כיצד להשתמש בתכונות תג
חלק מהתגים זקוקים למידע נוסף כדי לציין כיצד עליהם לפעול. מידע נוסף זה מופיע בתוך תג הפתיחה, והוא נקרא "תכונה". שם התכונה מופיע מיד אחרי שם התג, מופרד ברווח. ערך התכונה מצורף לשם התכונה בסימן = ומוקף במרכאות.
- לדוגמה, אם ברצונך להפוך חלק מהטקסט שלך לאדום, תוכל לעשות זאת באמצעות התג ותכונה מתאימה של צבע גופן, כך: טקסט זה אדום.
- רבות מהאפקטים שהושגו פעם באופן שגרתי באמצעות תכונות תג HTML, כגון הגדרת צבעי גופנים שונים, נעשות כיום בדרך כלל עם קידוד CSS במקום.
שלב 3. ניסוי עם אלמנטים מקוננים
HTML גם מאפשר לך למקם אלמנטים בתוך אלמנטים אחרים על מנת ליצור עיצוב מורכב יותר. לדוגמה, אם ברצונך להגדיר פסקה ולאחר מכן להעתיק חלק מהטקסט בתוך הפסקה, תוכל לעשות זאת כך:
אני אוהב קידוד!
שלב 4. היכרות עם אלמנטים ריקים
חלק מהאלמנטים ב- HTML אינם זקוקים לתגי פתיחה וסגירה כאחד. לדוגמה, אם אתה מוסיף תמונה, אתה רק צריך תג "img" אחד המכיל את שם התג וכל תכונות נחוצות אחרות (כגון שם קובץ התמונה וכל טקסט חלופי שתרצה להוסיף לצורכי נגישות). לדוגמה:
שלב 5. חקור את הפריסה הבסיסית של מסמך HTML
על מנת שהאתר מבוסס HTML שלך יפעל כראוי, יהיה עליך לדעת כיצד לעצב את הדף כולו. זה כולל הגדרה היכן קוד html שלך מתחיל ונגמר, כמו גם שימוש בתגים כדי לקבוע אילו חלקים מהקוד יוצגו לעומת אלו שיש בהם כדי לספק מידע רקע מוסתר. לדוגמה:
- השתמש בתג כדי להגדיר את הדף שלך כמסמך HTML.
- לאחר מכן, הכיל את כל הדף שלך בתוך התגים כדי להגדיר היכן הקוד שלך מתחיל ונגמר.
- הצב בתוך התגים כל מידע שלא יוצג לצופה, כגון כותרת הדף, מילות המפתח ותיאור הדף שלך.
- הגדר את גוף הדף שלך (כלומר, כל טקסט ותמונות שאתה רוצה שהצופה יראה) עם התגים.
שיטה 3 מתוך 4: היכרות עם CSS
שלב 1. השתמש ב- CSS כדי להחיל סגנונות על מסמכי ה- HTML שלך
CSS היא שפת גיליון סגנונות המאפשרת ליישם סגנונות ואלמנטים עיצוביים שונים על דף האינטרנט שלך. לדוגמה, אם ברצונך להחיל באופן סלקטיבי גופן או צבע טקסט ספציפי על חלק מרכיבי הטקסט בדף שלך, תוכל ליצור קובץ CSS לשם כך. לאחר מכן תוכל להכניס את קובץ ה- CSS למסמך ה- HTML שלך בכל מקום שתרצה.
-
לדוגמה, אם אתה רוצה שקובץ CSS יהפוך את כל רכיבי הפיסקה למסמך ה- HTML שלך לירוק, תוכל ליצור קובץ.css המכיל את השורות:
- p {
- צבע ירוק;
- }
- לאחר מכן היית שומר את הקובץ בשם כמו style.css.
- כדי להחיל את גיליון הסגנונות על מסמך ה- HTML שלך, היית מוסיף אותו כאלמנט קישור ריק בתוך התגים. לדוגמה:
שלב 2. הכירו את המרכיבים של מערכת חוקי CSS
פיסת קוד CSS בודדת נקראת "קבוצת חוקים". מערך הכללים מכיל את האלמנטים השונים המגדירים מה אתה רוצה שהקוד שלך יעשה. אלו כוללים:
- הבורר, המגדיר את רכיב ה- HTML שברצונך לעצב. לדוגמה, אם אתה רוצה שהכלל שלך ישפיע על רכיבי פסקה, היית מתחיל את מערך הכללים באות "p".
- ההצהרה, המגדירה את המאפיינים שתרצו לעצב (כגון צבע גופן). ההצהרה כלולה בסוגריים מתולתלים {}.
- המאפיין, המציין את המאפיין של רכיב ה- HTML שברצונך לעצב. לדוגמה, בתוך התג, תוכל לציין שברצונך לעצב את צבע הטקסט.
- ערך הנכס מגדיר באופן ספציפי כיצד ברצונך לשנות את הנכס (למשל, אם המאפיין הוא צבע גופן, ערך הנכס יהיה "ירוק").
- אתה יכול לשנות מספר נכסים שונים בתוך הצהרה אחת.
שלב 3. החלת CSS על הטקסט שלך כדי שהסוג שלך ייראה נחמד
CSS שימושי ליישום מגוון אפקטים על הטקסט שלך ללא צורך לקוד כל נכס בנפרד ב- HTML. נסה לשנות נכסי סגנונות שונים ב- CSS, כולל:
- צבע גופן
- גודל גופן
- משפחת גופנים (למשל, טווח הגופנים שבו ברצונך להשתמש בטקסט שלך)
- יישור טקסט
- גובה קו
- ריווח אותיות
שלב 4. ניסוי עם קופסאות וכלים אחרים בפריסת CSS
CSS שימושי גם להוספת אלמנטים חזותיים אטרקטיביים לדף שלך, כגון תיבות טקסט וטבלאות. בנוסף, תוכל להשתמש בו כדי לשנות את הפריסה הכוללת של הדף שלך ולהגדיר היכן ממוקמים האלמנטים השונים ביחס זה לזה.
לדוגמה, אתה יכול להגדיר תכונות כמו רוחב וצבע הרקע של אלמנט, להוסיף גבול או להגדיר שוליים שייצרו מרווח בין האלמנטים השונים בדף שלך
שיטה 4 מתוך 4: עבודה עם שפות עיצוב אחרות
שלב 1. למד JavaScript אם ברצונך להוסיף אלמנטים אינטראקטיביים לדפים שלך
JavaScript היא שפה מצוינת ללמוד אם אתה מעוניין להוסיף תכונות מתקדמות יותר לאתרים שלך, כגון אנימציות וחלונות קופצים. קח קורס או חפש הדרכות מקוונות כיצד לקוד ב- JavaScript ושלב אותם רכיבים מקודדים בדפי האינטרנט שלך | באמצעות HTML.
לפני שתוכל להרגיש בנוח עם JavaScript, עליך להכיר את היסודות של בניית דפים ב- HTML וב- CSS
שלב 2. להכיר את jQuery כדי להפוך את קידוד JavaScript לקל יותר
jQuery היא ספריית JavaScript שיכולה לפשט את תכנות הג'אווה על ידי מתן גישה למגוון רכיבי JavaScript קודנים מראש. jQuery הוא כלי נהדר אם אתה כבר מכיר את היסודות של קידוד JavaScript.
תוכל לגשת לספריית jQuery ולהמון משאבים יקרי ערך אחרים באמצעות jQuery.org, אתר האינטרנט של קרן jQuery
שלב 3. למד שפות בצד השרת אם אתה מעוניין בפיתוח back-end
בעוד HTML, CSS ו- JavaScript אידיאליים למעצבי אתרים המתמקדים במה שהמשתמש רואה ועושה באתר, שפות בצד השרת שימושיות אם אתה מעוניין יותר בעבודה מאחורי הקלעים. אם אתה רוצה ללמוד על פיתוח back-end, התמקד בלימוד שפות כמו Python, PHP ו- Ruby on Rails.
שפות אלו שימושיות לניהול ועיבוד נתונים שהמשתמש אינו רואה. לדוגמה, ניתן להשתמש ב- PHP לבניית כלים ליצירת סיסמאות מאובטחים באתרים הדורשים כניסה
קבצי עזרה
גיליון לרמות HTML
גיליון בגידה של CSS
