Scribd Logo
Upload

Welcome to Scribd!

  • שיעור מספר 3 - מיקומים

    Uploaded by

    Tal Danilof
    17 views29 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    17 views29 pages

    שיעור מספר 3 - מיקומים

    Uploaded by

    Tal Danilof

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    of 29

    ‫תכנות ‪WEB‬‬

    ‫מרצה‪ :‬ד"ר אורלי ברזילי‬


    ‫‪orlybarz@gmail.com 050-4707039‬‬
    ‫תכנות ‪ – WEB‬נושאי הקורס‬

    ‫‪ CSS‬ומודל‬
    ‫‪ CSS‬ומיקום‬ ‫‪CSS‬‬ ‫תגיות ‪HTML‬‬
    ‫הקופסה‬
    ‫שיעור ‪3‬‬ ‫שיעור ‪2‬‬ ‫שיעור ‪1‬‬
    ‫שיעור ‪4‬‬

    ‫תגיות המבנה‬ ‫רספונסיביות ו‬


    ‫‪JavaScript‬‬ ‫טפסים‬
    ‫החדשות‬ ‫‪Bootstrap‬‬
    ‫‪8-9‬‬ ‫שיעור‬ ‫שיעור ‪7‬‬
    ‫שיעור ‪6‬‬ ‫‪5‬‬ ‫שיעור‬

    ‫אתר‬ ‫‪PHP +‬‬


    ‫שיעור חזרה‬ ‫אינטראקטיבי‬ ‫‪JQuery‬‬
    ‫‪MYSQL‬‬
    ‫‪13‬‬ ‫שיעור‬ ‫‪HTML CSS‬‬ ‫‪10‬‬ ‫שיעור‬
    ‫שיעור ‪12‬‬ ‫‪11‬‬ ‫שיעור‬

    ‫‪2‬‬
    ‫שיעור מספר ‪ CSS –3‬ומיקום‬

    ‫‪‬תצוגות ‪ block‬ו ‪inline‬‬


    ‫‪‬ציפה ‪float -‬‬
    ‫‪‬מיקום ‪position‬‬

    ‫מטרת השיעור‪ :‬הסטודנט ידע למקם אלמנטים בדף תוך‬


    ‫שימוש בתכונות הציפה והמיקום‪.‬‬
    ‫‪3‬‬
    ‫רוברט דה נירו‬

    ‫כיצד נגרום לתמונה‬


    ‫להופיע בצד ימין של‬
    ‫?הכתוב ולא מתחתיו‬

    ‫~‪4‬‬
    Block ‫תגיות עם תצוגת‬
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <p>This is paragraph1</p>
    <p>This is paragraph2</p>
    </body>
    </html>
    5
    Inline ‫תגיות עם תצוגת‬
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <a href="#">This is link1<a>
    <a href="#">This is link2<a>
    </body>
    </html>
    6
    CSS ‫נוסיף מסגרת לאלמנט ב‬
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p,a{border-style:solid;}
    </head> </style>
    <body>
    <p>This is a paragraph</P>
    </body> <a>This is a link</a>

    </html>
    7
    ‫תגיות מסוג ‪ block‬לעומת ‪Inline‬‬
    ‫‪‬תגיות מסוג ‪ block‬הן תגיות שתמיד מתחילות‬
    ‫בשורה חדשה ותופסות את כל הרוחב שקיים להן‪.‬‬
    ‫‪‬תגיות מסוג ‪ Inline‬הן תגיות שאינן מתחילות‬
    ‫בשורה חדשה ותופסות רק את הרוחב הנדרש‪.‬‬

    ‫‪8‬‬
    ‫תגיות עם תצוגת ‪Block‬‬
    ‫‪ block‬הן בעלות התכונות הבאות‪:‬‬ ‫תגיות מסוג‬
    ‫‪‬מתחילות בשורה חדשה‬
    ‫‪‬הן יתפרסו על ‪ 100%‬מרוחב התגית שמכילה אותן‬
    ‫‪‬הגובה שלהן יהיה בהתאם לגובה התוכן הכתוב בין‬
    ‫התגית פתיחה והסגירה‪.‬‬
    ‫‪‬ניתן להגדיר את רוחב וגובה התגית שהן יתפסו‬
    ‫דוגמאות‪ >h1> <div> <p> <ul< :‬וכדומה‪.‬‬
    ‫‪9‬‬
    ‫ – נגדיר את רוחב התגית‬block ‫תצוגת‬
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p{border-style:solid; width:50%; }
    </head> </style>
    <body>
    <p>This is paragraph1</P>
    </body> <p>This is paragraph2</P>

    </html>
    10
    ‫תגיות עם תצוגת ‪inline‬‬
    ‫‪ inline‬הן בעלות התכונות הבאות‪:‬‬ ‫תגיות מסוג‬
    ‫‪‬אינן מתחילות בשורה חדשה‬
    ‫‪‬הרוחב שלהן יהיה בהתאם לרוחב התוכן הכתוב בין התגית‬
    ‫פתיחה והסגירה‪.‬‬
    ‫‪‬הגובה שלהן יהיה בהתאם לגובה התוכן הכתוב בין התגית‬
    ‫פתיחה והסגירה‪.‬‬
    ‫‪‬לא ניתן להגדיר את רוחב התגית שהן יתפסו‬
    ‫דוגמאות‪ >a> <b> <i< :‬וכדומה‪.‬‬
    ‫‪11‬‬
    ‫נשנה את התצוגה של התגית‬
    ‫ניתן לשנות את סוג האלמנט על ידי שימוש בתכונה‬
    ‫‪.display‬‬

    ‫ניתן לשנות להן את ההגדרה במסמך ה ‪:CSS‬‬


    ‫‪a‬‬
    ‫{‬
    ‫;‪display:block‬‬
    ‫}‬
    ‫‪12‬‬
    a ‫נשנה את סוג התצוגה של התגית‬
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    a{border-style:solid; display:block; }
    </head> </style>
    <body>
    <a href="#">This is link1<a>
    </body> <a href="#">This is link2<a>
    </html>
    13
    inline-block ‫תצוגת‬
    <!DOCTYPE html>
    <html>
    <head> <style>
    p{border-style:solid; display:inline-block;

    width:40% }
    </head> </style>
    <body>
    <p>This is paragraph1</P>
    </body> <p>This is paragraph2</P>
    </html>
    14
    ‫נחזור לשאלה מתחילת השיעור‪...‬‬

    ‫כיצד נגרום לתמונה‬


    ‫להופיע בצד ימין של‬
    ‫?הכתוב ולא מתחתיו‬

    ‫‪15‬‬
    ‫איך נראה הדף?‬

    ‫מיקום האלמנט בזרימה‬


    ‫הרגילה יקבע לפי סדר הופעת‬
    ‫האלמנטים בקוד‪.‬‬
    ‫זוהי ברירת המחדל‬

    ‫~‪16‬‬
    ‫נרצה שהתמונה תהיה מימין לכתוב‬
    ‫אלמנטים צפים (‪:)float‬‬
    ‫‪‬ניתן להגדיר אלמנט צף שאינו חלק מהזרימה‬
    ‫הכללית‪.‬‬
    ‫‪‬אלמנט צף יכול להיות מוצמד לשמאל או לימין‪.‬‬

    ‫;‪float:right‬‬
    ‫;‪float:left‬‬
    ‫‪17‬‬
    ‫נשדרג את הקוד ‪1 -‬‬

    ‫~‪18‬‬
    ‫מה קורה לשאר האלמנטים?‬
    ‫נוסיף עוד אלמנט בסוף‪:‬‬

    ‫~‪19‬‬
    clear - ‫הפסקת הציפה‬
    <!DOCTYPE html>
    <html> <style>
    .to-left{float:left;}
    <head> .to-right{float:right;}
    . .clear{clear:both;}
    </style>

    </head>
    <div class="to-left">
    <body> ……
    </div>
    <img class="to-right“ src=“….”>
    </body>
    <div class="clear"></div>
    </html>
    <p>….</p>
    20~
    ‫התמונה מרוחקת מידי מהטקסט‬
    <!DOCTYPE html> .to-left ‫נקשר לתמונה את המחלקה‬
    <html>
    <style>
    <head> .to-left{float:left;}
    .to-right{float:right;}
    ..clear{clear:both;}
    </style>
    </head>
    <body> <div class="to-left">
    ……
    </div>

    </body> <img class="to-left“ src=“….”>


    </html>
    <div class="clear"></div>
    <p>….</p>
    21~
    ‫עוד דבר לשים לו לב‬
    ‫ברגע שהצפנו את התגית ‪( div‬השתמשנו בתכונה‬
    ‫‪ ,)float‬רוחב התגית נקבע על פי הטקסט בתוכה‪.‬‬

    ‫‪22‬‬
    ‫נרצה לעדן את המיקום של התמונה‬
    ‫‪‬נשתמש בתכונה ‪.position‬‬
    ‫‪‬התכונה מאפשר לשנות את השיטה שבה ימוקמו‬
    ‫האלמנטים בדף ועל ידי כך להזיז אותה‪.‬‬
    ‫‪‬לתכונה יש ‪ 4‬ערכים‪:‬‬
    ‫‪static,relative,fixed,absolute‬‬
    ‫‪‬לאחר שקבענו את השיטה‪ ,‬ניתן באמצעות התכונות‬
    ‫‪ top, bottom, right, left‬למקם את האלמנטים‪.‬‬

    ‫‪23‬‬
    ‫מיקום יחסי ‪Relative position -‬‬
    ‫‪position: relative‬‬
    ‫‪‬האלמנטים ממוקמים באופן יחסי לזרימה‬
    ‫הרגילה‪.‬‬
    ‫‪‬כל שאר האלמנטים שומרים על מקומם‪.‬‬
    ‫‪‬באמצעות מיקום יחסי נזיז את התמונה של‬
    ‫רוברט דה‪-‬נירו קצת ימינה ולמעלה‪.‬‬
    ‫*ניתן להזיז גם באמצעות ‪ margin‬או ‪padding‬‬

    ‫‪24‬‬
    ‫נזיז את התמונה באמצעות ‪position‬‬

    ‫‪25‬‬
    ‫מיקום מוחלט ‪Absolute position -‬‬
    ‫‪‬האלמנטים ממוקמים מחוץ לזרימה הכללית‪.‬‬
    ‫‪‬כל שאר האלמנטים מתנהגים כאילו האלמנט לא‬
    ‫קיים‪.‬‬

    ‫‪26‬‬
    ‫מיקום מוחלט ‪Absolute position -‬‬
    ‫‪‬התמונה ממוקמת אחרי הכותרת שהיא על פי‬
    ‫הזרימה הכללית של הדף‪.‬‬
    ‫‪ ‬ניתן לקבוע מיקום מדויק באמצעות התכונות ‪top,‬‬
    ‫‪ .left‬המיקום נקבע ביחס לתחילת הדף או‬
    ‫לאלמנט האבא‪.‬‬
    ‫‪‬נחמד לשימוש כאשר רוצים לשים שני אלמנטים‬
    ‫אחד על השני ואחד הוא בתור רקע‪.‬‬
    ‫‪https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute‬‬

    ‫‪27‬‬
    Absolute position - ‫מיקום מוחלט‬

    28
    ‫מיקום מקובע – ‪Fixed position‬‬
    ‫‪‬אלמנטים במיקום מקובע הם אלמנטים שאינם‬
    ‫זזים ממקומם‪ ,‬כדי שהאלמנט יישאר במקומו גם‬
    ‫כשגוללים את הדף‪.‬‬
    ‫‪‬אלמנטים במיקום מקובע אינם לוקחים חלק‬
    ‫בזרימה הכללית‪.‬‬
    ‫‪‬אלמנטים במיקום מקובע ממוקמים ביחס למסך‪.‬‬
    ‫‪https://davidwalsh.name/css-fixed-position‬‬

    ‫‪29‬‬

    You might also like