1 / 13

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

חוג פיתוח אתרי אינטרנט. שיעור 8. פקודות css - תזכורת. מה זה דיב ? מהי מחלקה ומה ניתן לעשות באמצעותה ? כיצד יוצרים דיב ונותנים לו מחלקה ? כיצד מזיזים דיב מסוים ימינה, שמאלה, למעלה או למטה ? כיצד משנים גודל לתמונה ? כיצד מוסיפים גבול ? כיצד משנים צבע קישור בעת מעבר עכבר ?. margin.

dustin-cote
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. חוג פיתוח אתרי אינטרנט שיעור 8

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

  3. margin • אם נרצה להזיז אלמנט מסוים ימינה, שמאלה, למעלה או למטה. שם המחלקה h1.first { margin-right: 20px; margin-left: 20px; margin-top: 20px; margin-bottom: 20px; } יוצר מרווח של 20 פיקסל מצד ימין יוצר מרווח של 20 פיקסל מצד שמאל יוצר מרווח של 20 פיקסל מלמעלה יוצר מרווח של 20 פיקסל מלמטה

  4. border • אם נרצה להגדיר גבול ל class מסוים שם המחלקה h2.first { border: 1pxsolidblue; } צבע הגבול גודל הגבול סוג הגבול

  5. שינוי גודל תמונה • אם נרצה להגדיר רוחב וגובה לתמונה שם המחלקה Img.first { width: 200px; height: 200px; }

  6. מעבר עכבר • אם נרצה להגדיר פעולה המתרחשת בעת מעבר עכבר על קישור a: { color: blue; } a:hover { color: red; cursor: pointer; }

  7. יצירת עמוד בית עמוד הבית הוא העמוד הראשון אליו נכנסים. index.html הוא תמיד יהיה בעמוד הבית נציג מידע קצר על האתר שלנו וקישורים לשאר העמודים באתר.

  8. container מהיום כאשר אנו יוצרים עמוד כלשהו נשתמש ב div בשם containerה container יכיל את כל התוכן שבאתר שלנו • ב css, נגדיר לו גודל ומיקום קבוע במרכז <divclass="container"> </div> .container { width: 960px; margin: 0auto0auto; }

  9. תרגיל - יצירת עמוד הבית שלב א - הכנה • היכנסו אל האתר שלכם בתוך תיקיית הדרופבוקס • שנו את העמוד של כרטיס הביקור שלכם ל card.html • צרו עמוד חדש באמצעות קליק ימני על שם האתר Add-Add new itemובחירה בעמוד html. • הגדירו לעמוד הזה את השם index.html • כעת צריכים להיות לכם שני עמודים באתר - index.html, card.html

  10. תרגיל - יצירת עמוד הבית שלב ב - טיפול ב head • תנו לעמוד שלכם כותרת בתוך title • גררו את קובץ ה css שלכם אל תוך תגית ה head <head> <title>עמוד הבית שלי</title> <linkhref="styles/StyleSheet.css"rel="stylesheet"/> </head>

  11. תרגיל - יצירת עמוד הבית שלב ג - יצירת התשתית הראשונית • צרו דיב בשם container • הגדירו לו גודל px960 ומיקום במרכז כפי שלמדתם • צרו בתוכו שני דיבים נוספים - right ו left • הציבו אותם אחד ליד השני באמצעות display:inline ו float: right

  12. תרגיל - יצירת עמוד הבית • כעת הכניסו תוכן לשני הדיבים שיצרתם. • לדיב הימני הכניסו רשימה ובה קישורים לעבודות שעשיתם עד עתה (כרטיס הביקור שלכם). • בדיב השמאלי הכניסו מעט מידע על האתר ותמונה כלשהי. • הגדירו לשני הדיבים צבע רקע, גודל טקסט, צבע טקסט ועוד.. • השתמשו בקישורים ב a:hover

  13. למתקדמים... • שילוב תמונת רקע ב css background-image:url(../images/back.jpg); background-size: cover; background-position: 2px2px; background-repeat:no-repeat;

More Related