הרשם

התחבר

התחבר בעזרת פייסבוק:

שם משתמש סיסמא
זכור אותי

אוריגמי - קטגורית האוריגמי הגדולה בישראל

יצירה לילדים ולמבוגרים - באתר מדריכי יצירה שידהימו אתכם מחדש כל פעם

אוהבים מתוקים? לחצו בשביל עשרות מדריכי עוגות ועוגיות

‹ ›

יכול לעניין אתכם

מדריך HTML מספר 6 - קישורים (Links)

מאת: בקלות טכני

מדריך HTML מספר 7 - איך לעשות טבלאות (Tables)
מאת: בקלות טכני

מדריך HTML מספר 8 - רשימות (lists)

מאת: בקלות טכני

מדריך HTML מספר 10 - טפסים, שדות וכפתורים (Forms and input fields)
מאת: בקלות טכני

איך לבחור את הצבעים המתאימים לאתר האינטרנט שלך.
מאת: בקלות טכני

איך לבחור ולקנות שם לאתר שלך (Domain name)
מאת: בקלות טכני

איך לבחור לוגו

מאת: בקלות טכני

איך לשמור על אבטחת מידע בכתיבת אתר PHP

מאת: גיא חלפון

מדריך HTML מספר 1 - הכרות

מאת: בקלות טכני

מדריך HTML מספר 8 - רשימות (lists)

מאת: בקלות טכני

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

מחשבים

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

עקוב

06/06/2011 16:30:10
מאת: בקלות טכני
כתב מתחיל

דירוג:

(0 מדרגים)

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

רמת קושי: מתחילים

הוראות:

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

<p> <html> </p>
<p> <frameset cols="50%,50%"> </p>
<p> <frame src="Left.html" /> </p>
<p> <frame src="Right.html" /></p>
<p> </frameset> </p>
<p> </html> </p>

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

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

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

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

<p> <html></p>
<p> <body> </p>
<p> <a href ="Right.html" target ="show"> Right frame</a></p>
<p> <br> </p>
<p> <a href ="Left.html" target ="show">Left frame</a></p>
<p> <br> </p>
<p> </html> </p>
<p> </body></p>

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

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

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

<p> <html> </p>
<p> <frameset cols=''120,*''> </p>
<p> <frame src=''menu.html'' /></p>
<p> <frame src=''Left.html'' name=''show'' /> </p>
<p> </frameset> </p>
<p> </html> </p>

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

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

ניתן להעלות אתר אינטרנט בתוך אתר אינטרנט בעזרת מסגרת מיוחדת הנקראת iframe. נשתמש בתגית ובמאפייניה כך:
<iframe src="some web page.html" width="200" height="200"></iframe>

הוסף למועדפים שלחו לחבר הדפיסו את המדריך

ראיתם משהו שאהבתם? יש לכם שאלה? כתבו תגובה

אם לא בא לכם להשאיר תגובה דרך הפייסבוק:

מדריכים נוספים בנושא:

איך לבחור את הצבעים המתאימים לאתר האינטרנט שלך.

איך לבחור ולקנות שם לאתר שלך (Domain name)

איך לבחור לוגו

איך לבחור את האיחסון (Hosting) שמתאים לך.

עוד מדריכים בנושא זה