Successfully reported this slideshow.

גליונות עיצוב

875 views

Published on

  • Be the first to comment

  • Be the first to like this

גליונות עיצוב

  1. 1. C.S.S Cascading Style Sheets
  2. 2. מה זה C.S.S <ul><li>CSS : C ascading S tyle S heets. </li></ul><ul><li>הרעיון : החלת סיגנונות עיצוב קבועים לאובייקטים מסוגים אחידים בעמוד . </li></ul><ul><li>למשל : במקום להגדיר עבור כל פיסקה את סוג הפונט , הגודל שלו וצבעו , מגדירים אותו פעם אחת עבור כל העמוד </li></ul><ul><li>CSS מספק לנו הפרדה בין קוד לעיצוב </li></ul>
  3. 3. השיטה הישנה <ul><li>בניה בעזרת טבלאות , קוד ה HTML מכיל גם את האלמנטים העיצוביים – קוד מסורבל , לא קריא ולא ברור </li></ul>
  4. 4. חסרונות <ul><li>תאימות – צריך לכתוב את כל הקוד מחדש בשביל כל מדיה כגון מחשב כף יד , סלולר , מקרן וכ '. </li></ul><ul><li>קוד מבולגן ולא קריא – שימוש במבנה טבלאי , עומס רב של מידע על כל תגית HTML </li></ul><ul><li>קושי בשינויים – שינויים יחסית קטנים כגון שינוי גודל פונט מצריך עבודה רבה </li></ul><ul><li>ריבוי דפים = ריבוי כללים – במקום להגדיר כללי עיצוב אחידים לכל העמודים באתר מגדירים לכל עמוד כללים משלו </li></ul><ul><li>נפח העמוד – ככל שיש יותר שורות קוד – נפח העמוד גדול יותר </li></ul>
  5. 5. השיטה הטובה יותר <ul><li>בניה בעזרת Xhtml , קוד סמנטי , ברור , מובן . נקי ממאפיינים עיצוביים </li></ul>
  6. 6. היתרונות <ul><li>תאימות – קוד ה HTML נשאר קבוע ועבור כל מדיה מייצרים רק הוראות עיצוב </li></ul><ul><li>קוד קריא – שימוש בתגיות נושאות שמות רלוונטיים , כמעט וללא עומס על האלמנטים . </li></ul><ul><li>הקלה על עריכת שינויים עיצוביים – למשל הגדלת כל הפונטים בעמוד על ידי שינוי במקום אחד בלבד . </li></ul><ul><li>סט כללים יחיד לכל האתר – אין חשיבות לכמות העמודים ולסוגם , מגדירים כללים גורפים לאתר כולו והתאמות פרטיות לאלמנטים ספציפיים בעמודים הפנימיים . </li></ul><ul><li>הקטנת נפח העמוד – פחות קוד פחות Kb. </li></ul>
  7. 7. כיצד עובד ה CSS <ul><li>בשיטה הישנה , הגדרה של כללי עיצוב בוצעה ב HTML : </li></ul><ul><li><body bgcolor=&quot; #FF0000 &quot;> </li></ul><ul><li>בעבודה עם CSS יכיל קובץ ה Html את תגית ה <body> בלבד ואילו הגדרת העיצוב הבאה תמצא בקובץ ה css . </li></ul><ul><li>body {background-color: #FF0000;} </li></ul><ul><li>בשני המקרים הגדרנו שעמוד האינטרנט יהיה על רקע אדום רק שהאופציה השניה ברורה יותר , קריאה יותר ותפעל על כל העמודים שיעזרו בקובץ ה CSS הזה . </li></ul>
  8. 8. <ul><li>כפי שניתן לראות , הגדרת עיצוב ב CSS מורכבת משלושה חלקים – בורר , מאפיין וערך : </li></ul><ul><li>selector { property : value ;} </li></ul><ul><li>body { background-color : #FF0000 ;} </li></ul><ul><li>הסלקטור הוא העוגן במסמך ה html ובכל פעם שהדפדפן יפגוש את העוגן הזה הוא יפעיל עליו את הגדרת העיצוב הרלוונטית . </li></ul>
  9. 9. סוגי בוררים <ul><li>בוררי HTML – אלו רכיבים ראשיים שהם חלק מתגיות ה html כגון : </li></ul><ul><li>p, a, h2, code, body, li, ul </li></ul><ul><li>בקובץ ה css הם ירשמו כפי שהם רשומים במסמך ה html </li></ul><ul><li>p { property: value;} </li></ul><ul><li>בורר יחודי – מזהה יחודי יכול להופיע רק פעם אחת בעמוד והוא מסומן בקובץ ה Css בעזרת הסימון # בקוד ה HTML הוא יופיע בצורה הזו : </li></ul><ul><li><div id=“content”> </li></ul><ul><li>ובקוד ה css יופיע בצורה הזו ( סימן סולמית בהתחלה ): </li></ul><ul><li>#content { property: value;} </li></ul><ul><li>מחלקה ( בורר ה class ) דומה בעיקרון לבורר היחודי אך יכולה להופיע מספר פעמים בעמוד . בקוד ה HTML תראה כך : </li></ul><ul><li><div class=&quot;post&quot;> </li></ul><ul><li>ובקובץ ה CSS תופיע בצורה הבאה ( סימן נקודה בהתחלה ) </li></ul><ul><li>.post {property:value;} </li></ul>
  10. 10. היררכיה ותורשה <ul><li>כאשר מגדירים מאפיינים של פיסקה ( p ) הם חלים על כל הפסקאות בעמוד </li></ul><ul><li>מה אם אנחנו רוצים להחיל לפסקה ספציפית עיצוב ספציפי ? </li></ul><ul><li>בקוד ה HTML : </li></ul><ul><li><p> פיסקת טקסט רגילה לחלוטין </p> </li></ul><ul><li><div id=“post”> </li></ul><ul><li><p> פיסקת טקסט פנימית של בורר יחודי </p> </li></ul><ul><li></div> </li></ul><ul><li>קוד ה CSS : </li></ul><ul><li>P {font-size:12px;} </li></ul><ul><li>#post p {font-size:15px;} </li></ul><ul><li>על גבי הדפדפן : </li></ul><ul><li>פיסקת טקסט רגילה לחלוטין </li></ul><ul><li>פיסקת טקסט פנימית של בורר ייחודי </li></ul>
  11. 11. עיצוב ועימוד <ul><li>אחד היתרונות של CSS כאמור – שינוי העיצוב אינו מצריך שינוי של ה HTML . לצורך כך – מבחינת השלד כל הדוגמאות הללו מבוססות על אותו קוד HTML כשרק הגדרות ה CSS הספציפיות משתנות . </li></ul>
  12. 12. מודל הקופסה - המישור כל אובייקט שאנחנו רואים בעמוד אינטרנט מורכב מבחינת הדפדפן מכמה אלמנטים המגדירים את המיקום שלו והסידור שלו בעמוד . Padding Border margin <ul><li>#content p { </li></ul><ul><li>width : 225px; </li></ul><ul><li>border : 3px solid #000000; </li></ul><ul><li>margin: 5px 5px 5px 5px; </li></ul><ul><li>padding: 10px 7px; </li></ul><ul><ul><ul><li>} </li></ul></ul></ul>
  13. 13. לאובייקט יש &quot; עומק &quot; Border מודל הקופסה מתיחס לסידור האובייקט במישור ומגדיר את המרחקים מעליו , מימינו , מתחתיו ומשמאלו . אך כל אובייקט מורכב למעשה מכמה שכבות : טקסט , תמונת רקע וצבע רקע
  14. 14. כיצד מגדירים CSS ? <ul><li>הרע - הטמעה בתוך הקוד לכל אובייקט : </li></ul><ul><li><body style =&quot; background - color : #FF0000; &quot; > </li></ul><ul><li>המכוער – בלוק עיצוב בראש הקוד </li></ul><ul><li><style type =&quot; text / css &quot; > </li></ul><ul><li>body {background-color: #FF0000;} </li></ul><ul><li></style> </li></ul><ul><li>הטוב – קריאה לקובץ חיצוני </li></ul><ul><li><link rel =&quot; stylesheet &quot; type =&quot; text / css &quot; href=&quot;style.css&quot; /> </li></ul>
  15. 15. סוגי מדיה <ul><li><link rel =&quot; stylesheet &quot; type =&quot; text / css &quot; href=&quot;style.css&quot; media=&quot;screen&quot; /> </li></ul><ul><li>בסוף ההגדרה אפשר לראות את התגית : media=&quot;screen&quot; </li></ul><ul><li>התגית media מאפשרת לציין עבור איזו פלטפורמה נועד קובץ ה CSS . </li></ul><ul><li>אפשר ליצור קבצי עיצוב יעודיים לכל אחת מהמדיות הקימות </li></ul><ul><li>דוגמאות : </li></ul>הגדרות למקרן Projection הגדרות למסך טלוויזיה tv הגדרות למקריא טקסטים speech הגדרות למכונות ברייל braille עיצוב למחשב כף יד Handheld עיצוב למסך מחשב screen עיצוב להדפסה Print

×