1 / 15

חוג פיתוח אתרי אינטרנט

חוג פיתוח אתרי אינטרנט. שיעור 4. מה למדנו עד עכשיו ?. מבנה עמוד html ותגיות נפוצות יצירת אתר חדש באמצעות visual studio פתיחת אתר קיים באמצעות visual studio פרסום האתר באמצעות תיקיית public ב dropbox הוספת תמונה לאתר. תזכורת - שימוש בתיקיית public ב dropbox.

hamilton-noble
Download Presentation

חוג פיתוח אתרי אינטרנט

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. חוג פיתוח אתרי אינטרנט שיעור 4

  2. מה למדנו עד עכשיו ? • מבנה עמוד html ותגיות נפוצות • יצירת אתר חדש באמצעות visual studio • פתיחת אתר קיים באמצעות visual studio • פרסום האתר באמצעות תיקיית public ב dropbox • הוספת תמונה לאתר

  3. תזכורת - שימוש בתיקיית public ב dropbox • נכנסים אל תיקיית dropbox במחשב או דרך אתר האינטרנט • נכנסים לתוך תיקיית public (מי שאין לו תיקייה כזאת, לוחץ כאן ובוחר ב enable public folder) • לוחצים קליק ימני על קובץ האתר (index.html) ובוחריםב copy public link • את הקישור מדביקים בדפדפן

  4. עיצוב באמצעות CSS

  5. מה זה css ? • CSS היא כלי להוספת תבנית עיצוב לאתר שלך. • היא יכולה לחסוך לך זמן רב והיא מאפשרת לך לתכנן ולעצב אתר אינטרנט בצורה שונה לגמרי. • CSS היא חובה לכל מי שעוסק בעיצוב אתרים. יתרונות CSS: • שליטה על תבנית העיצוב של מסמכים רבים מגיליון עיצוב אחד. • שליטה מדויקת יותר על תבנית העיצוב. • מספר רב של טכניקות עיצוב מתקדמות ומתוחכמות.

  6. אז איך עובדים עם css ?

  7. שלב 1 יוצרים אתר אינטרנט חדש באמצעות visual studio כפי שלמדנו • לוחצים על File – New – Website • בוחרים באפשרות ASP.NET Empty Web Site • בוחרים למטה את המיקום בו האתר ישמר • לוחצים על ok

  8. שלב 2 מוסיפים עמוד אינטרנט חדש • נבצע קליק ימני על שם האתר שלנו בתפריט מצדימין (במקרה שלנו MyCard) • נבחר ב Add – Add New Item • בחלון שנפתח בוחרים ב html page (ניתן לבצע חיפוש מצד ימין) • משנים את הקובץ ל index.html • לוחצים על Add

  9. שלב 3 יוצרים תיקייה חדשה בשם styles • נבצע קליק ימני על שם האתר שלנו בתפריט מצדימין (במקרה שלנו MyCard) • נבחר ב add – new folder • ניתן לתיקייה החדשה שם styles

  10. שלב 4 מוסיפים קובץ style sheet לתיקייה • נבצע קליק ימני על תיקיית styles • נבחר ב add – add new item • בחלון שנפתח נבחר בקובץ מסוג style sheet(אפשר לחפש מצד ימין style) • נלחץ add והקובץ יתווסף לתיקייה

  11. שלב 5 מוסיפים את קובץ ה style אל תוך עמוד האינטרנטשלנו באמצעות גרירה של הקובץ אל תוך העמודבתוך ה <head> חשוב לגרור את הקובץ אל תוך ה <head> בלבד,אחרת הוא לא יעבוד !

  12. סיימנו עם ההכנות... עכשיו אפשר להתחיל לעבוד !

  13. תחילת העבודה עם css על מנת להיכנס אל קובץ ה css נבצע לחיצה כפולה עליו כעת נוכל להתחיל לבצע שינויים בעיצוב נתחיל עם שינוי עיצוב ל body נכתוב את השורות הבאות ונראה מה קורה... body { direction: rtl; font-family: Arial (Hebrew); background-color: yellow; color: blue; }

  14. מאפייני cssפופלריים : כיוון העמוד (ימין או שמאל)Direction סוג הגופן:Font-family : צבע רקעBackground-color : צבע הטקסטcolor : גודל הטקסטFont-size יישור הטקסט (ימין, מרכז, שמאל):Text-align גודל השורה:Line-height יצירת גבול :border

  15. תרגיל • בצעו שינויי עיצוב גם לתגיות הבאות: • h1 • p • a • img

More Related