Your SlideShare is downloading. ×
0
גליונות עיצוב
גליונות עיצוב
גליונות עיצוב
גליונות עיצוב
גליונות עיצוב
גליונות עיצוב
גליונות עיצוב
גליונות עיצוב
גליונות עיצוב
גליונות עיצוב
גליונות עיצוב
גליונות עיצוב
גליונות עיצוב
גליונות עיצוב
גליונות עיצוב
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

645

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
645
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. C.S.S Cascading Style Sheets
  • 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. השיטה הישנה <ul><li>בניה בעזרת טבלאות , קוד ה HTML מכיל גם את האלמנטים העיצוביים – קוד מסורבל , לא קריא ולא ברור </li></ul>
  • 4. חסרונות <ul><li>תאימות – צריך לכתוב את כל הקוד מחדש בשביל כל מדיה כגון מחשב כף יד , סלולר , מקרן וכ '. </li></ul><ul><li>קוד מבולגן ולא קריא – שימוש במבנה טבלאי , עומס רב של מידע על כל תגית HTML </li></ul><ul><li>קושי בשינויים – שינויים יחסית קטנים כגון שינוי גודל פונט מצריך עבודה רבה </li></ul><ul><li>ריבוי דפים = ריבוי כללים – במקום להגדיר כללי עיצוב אחידים לכל העמודים באתר מגדירים לכל עמוד כללים משלו </li></ul><ul><li>נפח העמוד – ככל שיש יותר שורות קוד – נפח העמוד גדול יותר </li></ul>
  • 5. השיטה הטובה יותר <ul><li>בניה בעזרת Xhtml , קוד סמנטי , ברור , מובן . נקי ממאפיינים עיצוביים </li></ul>
  • 6. היתרונות <ul><li>תאימות – קוד ה HTML נשאר קבוע ועבור כל מדיה מייצרים רק הוראות עיצוב </li></ul><ul><li>קוד קריא – שימוש בתגיות נושאות שמות רלוונטיים , כמעט וללא עומס על האלמנטים . </li></ul><ul><li>הקלה על עריכת שינויים עיצוביים – למשל הגדלת כל הפונטים בעמוד על ידי שינוי במקום אחד בלבד . </li></ul><ul><li>סט כללים יחיד לכל האתר – אין חשיבות לכמות העמודים ולסוגם , מגדירים כללים גורפים לאתר כולו והתאמות פרטיות לאלמנטים ספציפיים בעמודים הפנימיים . </li></ul><ul><li>הקטנת נפח העמוד – פחות קוד פחות Kb. </li></ul>
  • 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. <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. סוגי בוררים <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. היררכיה ותורשה <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. עיצוב ועימוד <ul><li>אחד היתרונות של CSS כאמור – שינוי העיצוב אינו מצריך שינוי של ה HTML . לצורך כך – מבחינת השלד כל הדוגמאות הללו מבוססות על אותו קוד HTML כשרק הגדרות ה CSS הספציפיות משתנות . </li></ul>
  • 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. לאובייקט יש &quot; עומק &quot; Border מודל הקופסה מתיחס לסידור האובייקט במישור ומגדיר את המרחקים מעליו , מימינו , מתחתיו ומשמאלו . אך כל אובייקט מורכב למעשה מכמה שכבות : טקסט , תמונת רקע וצבע רקע
  • 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. סוגי מדיה <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

×