Download presentation
Presentation is loading. Please wait.
1
תזכורת על מה דיברנו שיעור שעבר? בנינו אתר אינטרנט עם כותרות
בעיית הרשת טופלה. נשמור את האתר ברשת. ניצור תיקייה עם השם שלנו ב K >> שנתון י >> מדעי מחשב
2
קביעת הדף הראשון שיוצג באתר
בתוך סייר הקבצים נלחץ קליק ימני על הדף html שיצרנו >> set as start page אתר ללימוד html
3
צפייה בקוד html של אתר מסויים
קליק ימני על נקודה כלשהי ע"ג הדף >> view source
4
המאפיין style (עיצוב) אחד המאפיינים שעוזר לנו להפריד בין עיצוב הדף, לתוכן שלו. את המאפיין style יש לשייך לאיזור המבוקש בדף. למשל לתוך התג body , div או hi. ניתן להוסיף כמה תכונות, מופרדות בנקודה פסיק (;). לכל תכונה ניתן ערך. <body style=“תכונה3;תכונה2;תכונה1”> טקסט מסויים שיוצג בעיצוב הנ'ל </body> צבע גופן color <div style=“color: צבע מתוך רשימה”>
5
צבע רקע background color
<div style=“background-color: צבע מתוך רשימה”> יישור טקסטtext-align טקסט יכול להיות מיושר לימין, לשמאל ולמרכז <div style=“text-align: center”>
6
מעברי שורות וחלוקה לפסקאות
על מנת לעבור לשורה הבאה בדף, נשתמש בתג <br/> שימו לב, אין לו תג פותח ותג סוגר. כדי לפתוח פסקה חדשה, נשתמש ב <p> ונסיים ב </p> נסו זאת בעצמכם! חלקו את הדף לפסקאות והוסיפו צבעי פונט ורקע. נא לשמור בדיסק און קי.
7
תמונת רקע: המאפיין background-image
background-image : url(‘כתובת אינטרנט או שם קובץ’) על מנת לעבוד עם תמונה, קודם כל נשמור את קובץ התמונה בתוך התיקייה בה שמור האתר ונרענן את הפרוייקט בויזואל סטודיו נוסיף עיצוב לתג body ניתן גם להשתמש בתמונה השמורה באתר אינטרנט, תוך שימוש ב
8
מאפיינים נוספים של תמונת רקע
background-position: מיקום תמונת הרקע בדף התמונה יכולה להתמקם במרכז, מימין, משמאל, מלמעלה או מלמטה. background-repeat: התאמת מימדי התמונה למימדי דף האינטרנט קביעת תצוגת התמונה בהתאם לגודל הדף. אם התמונה קטנה מדף האינטרנט, יש אפשרות לשכפל אותה (repeat) כך שתמלא את כל המסך או להשאיר חלל ריק בדף (no-repeat).
9
המאפיין display של style
ניתן לקבוע עיצוב מסוים אך בפועל לא להציג את האלמנטים עצמם תרגול: הוסיפו תמונת רקע ממורכזת ולא משוכפלת ואל תציגו את הפסקאות הטקסט הפנימי לא מוצג בדף ברירת המחדל היא display:block כלומר האלמנטים מוצגים.
Similar presentations
