מדריך HTML מספר 9 - איך להכניס מסגרות (Frames and iframes) לדף אינטרנט

Steps

1. 1

   Step 1

   בניגוד לרוב התגיות, את תגית המסגרת (frameset) אי אפשר להכניס בין תגיות הגוף (Body). דוגמא לחלוקת המסך ל2 מסגרות בצורה אנכית:
2. 2

   Step 2

   
3. 3

   Step 3

   אלמנט הframeset מגדיר את חלוקת הדף למסגרות ואילו תגיות הframe מייצגות את המסגרות עצמן. בכדי להגדיר שהמסגרות יהיו אנכיות נשתמש במאפיין cols ובערך שלו נגדיר את גודל המסגרות באחוזים כאשר הן מופרדות בפסיק. במקרה שלנו הגדרנו רק 2 מסגרות אך אין הגבלה לכמות המסגרות שאפשר להגדיר. בתגיות הframe נכניס את מאפיין הsrc וניתן לו כערך את הדף אותו נרצה להראות במסגרת. סדר הדפים הוא כרונולוגי והמסגרת שנכתבת ראשונה תהיה השמאלית ביותר והמסגרת שנכתבת אחריה תוצג מימין לה וכך הלאה.
4. 4

   Step 4

   
   הדף יראה כך בדפדפן. (בכדי לנסות את הדוגמא הזו עליכם ליצור 2 קבצי HTML שתוכלו להציג במסגרות, במקרה שלנו Left.html וRight.html).
5. 5

   Step 5

   בכדי לחלק את הדף למסגרות בצורה אופקית נשתמש במאפיין הrows במקום במאפיין הcols בדיוק באותה הצורה.
6. 6

   Step 6

   דוגמא מעניינת לשימוש במסגרות היא פתיחת מסגרות בדף בעזרת תפריט פשוט. לשם ההדגמה ניצור 4 קבצי HTML: Left.html דף שיוצב בתוך המסגרת (יכיל רק טקסט) Right.html דף שגם יוצב בתוך המסגרת (יכיל רק טקסט) Menu.html שיכיל את התפריט Some file.html - הדף שיכיל את התפריט והמסגרת נערוך תחילה את דף הMenu:
7. 7

   Step 7

   
   Right frame
   Left frame
   
8. 8

   Step 8

   נגדיר שתי קישורים עם מאפיין הhref ומאפיין target. למאפיין הtarget ניתן שם ייחודי כלשהו.
9. 9

   Step 9

   כעת נערוך את קובץ Some file.html:
10. 10

    Step 10

    
11. 11

    Step 11

    נבנה frameset אנכי כמו שלמדנו בתחילת המדריך ונגדיר שגודל המסגרת השמאלית יהיה 120 פיקסלים והמסגרת הימנית יהיה מה שנותר (כוכבית) . בתגית המסגרת הראשונה נגדיר שערך המאפיין src יהיה התפריט Menu.html ונגדיר שמאפיין הsrc במסגרת השניה יפנה לאחד הדפים עם הטקסט (שרירותית בחרתי בLeft). נוסיף למסגרת השניה את המאפיין name וניתן לו כערך את "show" מכיוון שזה מה שבחרנו כtarget בMenu.html
12. 12

    Step 12

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

    Step 13

    ניתן להעלות אתר אינטרנט בתוך אתר אינטרנט בעזרת מסגרת מיוחדת הנקראת iframe. נשתמש בתגית ובמאפייניה כך: