כלי הפיתוח של Internet Explorer 9 / מדריך – עבודה עם HTML ו-CSS

בחלק הראשון הסברנו כיצד עובדים כלי הפיתוח של אינטרנט אקספלורר 9. בחלק השני, מסביר גיא בורשטיין כיצד להבין ולשפר את המבנה, התפקוד והביצועים של האתר שלכם באמצעות HTML ו-CSS.

הפוסט הזה הוא הפוסט השני בסדרת פוסטים בנושא כלי הפיתוח של אינטרנט אקספלורר, שיעזרו לך להבין ולשפר את המבנה, התפקוד והביצועים של האתר שלך.

  • חלק 1 – מבוא
  • חלק 2 – עבודה עם HTML ו- CSS
  • חלק 3 – לדבג סקריפטים ב- JavaScript
  • חלק 4 – לבצע Profiling ל- JavaScript
  • חלק 5 – ביצועים ברשת ואופטימיזציה

אם זה הפוסט הראשון שאתה קורא במדריך, כדאי להתחיל מפרק המבוא לכלי הפיתוח של אינטרנט אקספלורר.

עבודה עם HTML ו- CSS

אחד השימושים הפופולרים של כלי הפיתוח של אינטרנט אקספלורר הוא תחקור ותיקון בעיות במבנה הדף מבחינת HTML ועיצובו ב- CSS. את העבודה נתחיל לרוב בבחירת אלמנט בדף, וניווט באלמנטים והמאפיינים בטאב ה- HTML.

בחירת אלמנט ע”י קליק

נלחץ על כפתור הבחירה בכלי הפיתוח  או נשתמש בקיצור Ctrl + B, ונסמן את האלמנט על הדף אותו אנחנו רוצים לתחקר. האלמנט שסימנו יצבע במסגרת כחולה והוא יוצג בתצוגת ה- HTML של כלי הפיתוח.

חיפוש ב- HTML

תיבת החיפוש מופיעה בכל הטאבים, למעט טאב ה- Console, ומאפשרת לבצע חיפוש במסמך הנוכחי. במידה ויש יותר מתוצאה אחת, ניתן לדפדף בין התוצאות ע”י שימוש בחיצים .

בתצוגת ה- HTML, תיבת החיפוש תומכת בסלקטורים של CSS (משמשים גם כסלקטורים ב- jQuery), אך חשוב לזכור להשתמש בסימן @ כדי לבצע חיפוש לפי סלקטורים.

למשל, אם ביצוע חיפוש של המחרוזת: "@.postOptions a" יביא לחיפוש כל הקישורים שמתחת לתגיות עם class בשם postOptions. התוצאות יסומנו בצבע צהוב בתצוגת ה- HTML.

סימון אלמנטים ע”ג הדף

כדי שיהיה קל לראות אלמנטים מסויימים בדף, נוכל לסמן אותן דרך תפריט ה- Tools->Outline Elements:

נזין את הסלקטור לחיפוש ונבחר את הצבע לסימון

האלמנטים העונים לחיפוש יסומנו ע”ג הדף (כתום וירוק):

תחקור ה- HTML בדף

אחרי שמצאנו את האלמנטים שחיפשנו, טאב ה- HTML מאפשר לנו לתחקר ולשנות את ה- HTML וכן לשמור את השינויים שביצענו. ניתן לשנות ערכים של attributes וכן להוסיף מאפיינים חדשים ע”י לחיצה על הכפתור הימני ובחירה באפשרות Add Attribute. אפשר גם לערוך את ה- HTML ישירות ע”י שימוש בכפתור ה- Edit  (או שימוש בקיצור Ctrl+E).

שינויים שמבוצעים דרך תצוגת ה- HTML משפיעה רק על העותק המקומי שמוצג כרגע ולא משפיע על האתר. כדי לשמור את השינויים שביצעת בקבצי ה- HTML וה- CSS, עליך ללחוץ על כפתור השמירה   ולשמור אותם מקומית. דרך שימושית אחרת לבודד את האלמנט הנוכחי עם הגדרות העיצוב שלו היא ע”י לחיצה על כפתור ה- Element Source with Style  (או Ctrl+T). יוצג קוד ה- HTML והגדרות ה- CSS של האלמנט הנוכחי.

אפשר להציג את קוד ה- DOM של הדף כולו או של האלמנט הנבחר מתוך תפריט ה- View->Source.

מיד נרחיב לגבי תצוגת ה- CSS ונסביר על הפרטים שאנחנו רואים מימין לתצוגת ה- HTML, אך חשוב לדעת כי איזור ה- Attributes רלוונטי גם עבור מאפייני CSS וגם עבור מאפיינים של אלמנטי HTML.

עבודה עם CSS

כלי הפיתוח של אינטרנט אקספלורר הם כלי עבודה מעולים בכל הקשור לעבודה עם CSS, ועוזרים מהם כדי להבין ולתקן תופעות במהלך עיצוב האתר (“למה הכותרת הזאת לא בצבע אדום??”).

אחרי שסימנת אלמנט HTML כלשהו, האיזור הימני של הכלי הפיתוח מציג את תצוגת Style.

אפשר לראות את סגנונות העיצוב שמוגדרים על האלמנט הנבחר, ומאילו אלמנטים או Classים הוא מקבל בירושה את סגנונות העיצוב. התצוגה מתחילה מהאלמנט הראשי בדף (במקרה הזה תגית ה- HTML עצמה) ויורדת פנימה לפי עץ האלמנטים עד האלמנט הנוכחי. שימו לב למאפיינים שנראים מחוקים בתצוגה (יש מעליהם קו אופקי) – ערכי מאפיינים אלה נדרסים ע”י אלמנט נמוך יותר בהיררכיה.

לחיצה על ה- Checkbox שליד כל מאפיין, תגרום להדלה או כיבוי שלו ותשפיע בזמן אמת על עיצוב האלמנט בדף – דרך מצויינת לתחקר עיצובים של אתרים וללמוד כיצד עיצבו אלמנט כלשהו.

בתצוגת Trace Styles נקבל את התמונה באופן אחר ונראה עבור האלמנט הנבחר את כל המאפיינים שלו בצורה מרוכזת. הרחבת ה + שליד כל מאפיין, יגיד לנו מאיזה אלמנט הוא מגיע.

כמו בתצוגה Style גם כאן אפשר להדליק ולכבות את המאפיין ע”י לחיצה על ה- Check Box.

תצוגת Layout מציגה בצורה גרפית את האלמנט עם הגודל, ה- Offset, ה- Margin וה- Padding שלו. התצוגה הזאת מאפשרת עריכה, וניתן לשנות את כל המאפיינים האלו מכאן.

תצוגת Attributes מציגה את כל המאפיינים של האלמנט הנבחר. גם מאפיינים על האלמנט עצמו וגם מאפיינים בתוך התכונה Style. ניתן לערוך את המאפיינים ולהוסיף מאפיינים חדשים עם עזרה של השלמה אוטומטית של מאפיינים.

טאב ה- CSS

טאב ה- CSS בחלקו השמאלי של כלי הפיתוח, מציג את הגדרות ה- CSS שקיימות בדף, ומאפשר לנו לתמקד בהגדרות של דף CSS ספציפי.

ניתן לשנות את המאפיינים השונים ישירות מתוך הרשימה, או להוסיף אלמנטים חדשים.

סיכום

הטאבים HTML ו- CSS של כלי הפיתוח של אינטרנט אקספלורר עוזרים לנו בתחקור ותיקון בעיות במבנה הדף מבחינת HTML ועיצובו ב- CSS, והכירות טובה איתם עוזרת למפתחי ווב בעבודתם היום יומית.

פורסם במקור בבלוג MSDN ישראל

גיא בורשטיין

מומחה טכנולוגיות פיתוח במיקרוסופט ישראל, אחראי על הקשר עם קהילת הפתחים בארץ ובימים אלו מוביל את פעילות פיתוח האפליקציות ל- Windows 8

הגב

3 תגובות על "כלי הפיתוח של Internet Explorer 9 / מדריך – עבודה עם HTML ו-CSS"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

* שימו לב: תגובות הכוללות מידע המפר את תנאי השימוש של Geektime, לרבות דברי הסתה, הוצאת דיבה וסגנון החורג מהטעם הטוב ו/או בניגוד לדין ימחקו. Geektime מחויבת לחופש הביטוי, אך לא פחות מכך לכללי דיון הולם, אתיקה, כבוד האדם והדין הישראלי.

סידור לפי:   חדש | ישן | הכי מדורגים
אלון
Guest

אפשר להשתמש בכלי הפיתוח של מיקרוסופט (ולירוק דם) או שאפשר להשתמש בפיירבאג ולהנות.
הכלי של מיקרוסופט כל כך מסורבל שאנני מבין מי בכלל משתמש בו. הן לכרום והן לפפ יש כלים מובנים או כתוספים המהווים כלי חובה אצל כל מי שמפתח דפי אינטרנט.

תומר
Guest

כלי המפתחים של אינטרנט אקספלורר הם לא יותר מהעתקה חפוזה של פיירבאג. ההבדל הוא שבניגוד לפיירפוקס, שיש עבורו מבחר עשיר של כלי פיתוח, הכלים המובנים של אינטרנט אקספלורר הם הבחירה היחידה שיש למפתח חובבן שמסיבה לא ברורה מעדיף לעבוד עם כלים של דפדפן בסכנת הכחדה.

קרטמן
Guest
או שאפשר פשוט להתקין פיירפוקס ופיירבאג או כרום ולהפוך ליותר פרודוקטיבי. כמה כבר אפשר לשמוע על הכלים המגעילים של מקרוסופט לווב באתר הזה? אז מה אם אתה עובד של מיקרוסופט? זה לא אומר שאתה צריך לספר לנו שקרים בשם החברה. 36 שנים החברה הזאת קיימת, ובכל הזמן הזה היא לא הצליחה ליצור דפדפן נורמלי לווב, ובטח שלא כלי פיתוח שמפתח ישמח להשתמש בו לווב. הגיע הזמן לוותר, Visual Studio הוא כלי נהדר לפיתוח תוכנה, סטיק ויב איט ודי לבלבל את המוח על פיתוח לאינטרנט. אף מפתח ווב רציני לעולם לא יסלח לחברה הזאת על מה שהיא עשתה בעזרת החוסר אחידות… Read more »
wpDiscuz

תגיות לכתבה: