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

שלבים

1. 1

   שלב 1

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

2. 2

   שלב 2

   

   <html>

   <frameset cols="50%,50%">

   <frame src="Left.html" />

   <frame src="Right.html" />

   </frameset>

   </html>

4. 3

   שלב 3

   אלמנט הframeset מגדיר את חלוקת הדף למסגרות ואילו תגיות הframe מייצגות את המסגרות עצמן.

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

   במקרה שלנו הגדרנו רק 2 מסגרות אך אין הגבלה לכמות המסגרות שאפשר להגדיר.

   בתגיות הframe נכניס את מאפיין הsrc וניתן לו כערך את הדף אותו נרצה להראות במסגרת.

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

5. 4

   שלב 4

   

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

6. 5

   שלב 5

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

7. 6

   שלב 6

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

   לשם ההדגמה ניצור 4 קבצי HTML.

   Left.html דף שיוצב בתוך המסגרת (יכיל רק טקסט)

   Right.html דף שגם יוצב בתוך המסגרת (יכיל רק טקסט)

   Menu.html שיכיל את התפריט

   Some file.html - הדף שיכיל את התפריט והמסגרת.

   נערוך תחילה את דף הMenu:

8. 7

   שלב 7

   

   <html>

   <body>

   <a href ="Right.html" target ="show"> Right frame</a>

   <br>

   <a href ="Left.html" target ="show">Left frame</a>

   <br>

   </html>

   </body>

9. 8

   שלב 8

   נגדיר שני קישורים עם מאפיין הhref ומאפיין target.

   למאפיין הtarget ניתן שם ייחודי כלשהו.

10. 9

    שלב 9

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

11. 10

    שלב 10

    

    <html>

    <frameset cols=''120,*''>

    <frame src=''menu.html'' />

    <frame src=''Left.html'' name=''show'' />

    </frameset>

    </html>

12. 11

    שלב 11

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

    בתגית המסגרת הראשונה נגדיר שערך המאפיין src יהיה התפריט Menu.html ונגדיר שמאפיין הsrc במסגרת השניה יפנה לאחד הדפים עם הטקסט (שרירותית בחרתי בLeft).

    נוסיף למסגרת השניה את המאפיין name וניתן לו כערך את "show" מכיוון שזה מה שבחרנו כtarget בMenu.html

13. 12

    שלב 12

    

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

14. 13

    שלב 13

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

    <iframe src="some web page.html" width="200" height="200"></iframe>