Transcript הורדת מצגת השיעור

‫חוג פיתוח אתרי אינטרנט‬
‫שיעור ‪4‬‬
‫מה למדנו עד עכשיו ?‬
‫•‬
‫מבנה עמוד ‪ html‬ותגיות נפוצות‬
‫•‬
‫יצירת אתר חדש באמצעות ‪visual studio‬‬
‫•‬
‫פתיחת אתר קיים באמצעות ‪visual studio‬‬
‫•‬
‫פרסום האתר באמצעות תיקיית ‪ public‬ב ‪dropbox‬‬
‫•‬
‫הוספת תמונה לאתר‬
‫תזכורת ‪ -‬שימוש בתיקיית ‪ public‬ב ‪dropbox‬‬
‫•‬
‫נכנסים אל תיקיית ‪ dropbox‬במחשב או דרך אתר האינטרנט‬
‫•‬
‫נכנסים לתוך תיקיית ‪( public‬מי שאין לו תיקייה כזאת‪ ,‬לוחץ כאן‬
‫ובוחר ב ‪)enable public folder‬‬
‫•‬
‫לוחצים קליק ימני על קובץ האתר (‪ )index.html‬ובוחרים‬
‫ב ‪copy public link‬‬
‫•‬
‫את הקישור מדביקים בדפדפן‬
‫עיצוב באמצעות ‪CSS‬‬
‫מה זה ‪? css‬‬
‫•‬
‫•‬
‫•‬
‫‪ CSS‬היא כלי להוספת תבנית עיצוב לאתר שלך‪.‬‬
‫היא יכולה לחסוך לך זמן רב והיא מאפשרת לך לתכנן ולעצב אתר אינטרנט בצורה שונה לגמרי‪.‬‬
‫‪CSS‬היא חובה לכל מי שעוסק בעיצוב אתרים‪.‬‬
‫יתרונות ‪:CSS‬‬
‫•‬
‫שליטה על תבנית העיצוב של מסמכים רבים מגיליון עיצוב אחד‪.‬‬
‫•‬
‫שליטה מדויקת יותר על תבנית העיצוב‪.‬‬
‫•‬
‫מספר רב של טכניקות עיצוב מתקדמות ומתוחכמות‪.‬‬
‫אז איך עובדים עם ‪? css‬‬
‫שלב ‪1‬‬
‫יוצרים אתר אינטרנט חדש באמצעות ‪ visual studio‬כפי שלמדנו‬
‫‪File – New – Website‬‬
‫•‬
‫לוחצים על‬
‫•‬
‫בוחרים באפשרות ‪ASP.NET Empty Web Site‬‬
‫•‬
‫בוחרים למטה את המיקום בו האתר ישמר‬
‫•‬
‫לוחצים על ‪ok‬‬
‫שלב ‪2‬‬
‫מוסיפים עמוד אינטרנט חדש‬
‫•‬
‫נבצע קליק ימני על שם האתר שלנו בתפריט מצד‬
‫ימין (במקרה שלנו ‪)MyCard‬‬
‫•‬
‫נבחר ב ‪Add – Add New Item‬‬
‫•‬
‫בחלון שנפתח בוחרים ב ‪( html page‬ניתן לבצע חיפוש‬
‫מצד ימין)‬
‫•‬
‫משנים את הקובץ ל ‪index.html‬‬
‫•‬
‫לוחצים על ‪Add‬‬
‫שלב ‪3‬‬
‫יוצרים תיקייה חדשה בשם ‪styles‬‬
‫•‬
‫נבצע קליק ימני על שם האתר שלנו בתפריט‬
‫מצד ימין (במקרה שלנו ‪)MyCard‬‬
‫•‬
‫נבחר ב ‪add – new folder‬‬
‫•‬
‫ניתן לתיקייה החדשה שם ‪styles‬‬
‫שלב ‪4‬‬
‫מוסיפים קובץ ‪ style sheet‬לתיקייה‬
‫•‬
‫נבצע קליק ימני על תיקיית ‪styles‬‬
‫•‬
‫נבחר ב ‪add – add new item‬‬
‫•‬
‫בחלון שנפתח נבחר בקובץ מסוג ‪style sheet‬‬
‫(אפשר לחפש מצד ימין ‪)style‬‬
‫•‬
‫נלחץ ‪ add‬והקובץ יתווסף לתיקייה‬
‫שלב ‪5‬‬
‫מוסיפים את קובץ ה ‪ style‬אל תוך עמוד האינטרנט‬
‫שלנו באמצעות גרירה של הקובץ אל תוך העמוד‬
‫בתוך ה >‪<head‬‬
‫חשוב לגרור את הקובץ אל תוך ה >‪ <head‬בלבד‪,‬‬
‫אחרת הוא לא יעבוד !‬
‫סיימנו עם ההכנות‪...‬‬
‫עכשיו אפשר להתחיל לעבוד !‬
‫תחילת העבודה עם ‪css‬‬
‫על מנת להיכנס אל קובץ ה ‪ css‬נבצע לחיצה כפולה עליו‬
‫כעת נוכל להתחיל לבצע שינויים בעיצוב‬
‫נתחיל עם שינוי עיצוב ל ‪body‬‬
‫נכתוב את השורות הבאות ונראה מה קורה‪...‬‬
‫;‪direction: rtl‬‬
‫;)‪font-family: Arial (Hebrew‬‬
‫;‪background-color: yellow‬‬
‫;‪color: blue‬‬
‫‪body‬‬
‫{‬
‫}‬
‫מאפייני ‪ css‬פופלריים‬
‫‪:Direction‬‬
‫כיוון העמוד (ימין או שמאל)‬
‫‪:Font-family‬‬
‫סוג הגופן‬
‫‪:Background-color‬‬
‫צבע רקע‬
‫‪:color‬‬
‫צבע הטקסט‬
‫‪:Font-size‬‬
‫גודל הטקסט‬
‫‪:Text-align‬‬
‫יישור הטקסט (ימין‪ ,‬מרכז‪ ,‬שמאל)‬
‫‪:Line-height‬‬
‫גודל השורה‬
‫‪:border‬‬
‫יצירת גבול‬
‫תרגיל‬
‫• בצעו שינויי עיצוב גם לתגיות הבאות‪:‬‬
‫• ‪h1‬‬
‫• ‪p‬‬
‫• ‪a‬‬
‫• ‪img‬‬