קורס [HTML] | שיעור תשיעי - מסגרות (frames)

קורס HTML / אוראל – שיעור תשיעי: מסגרות (frames)

היום כבר לא משתמשים בשיטה הזאת (מסגרות), בין השאר מכיוון שמבחינת מנועי החיפוש היא מאוד בעייתית, אבל בתור ידע כללי, זה לא מזיק (על מנת להגיע תוצאות כגון אלה – דינאמיות, משתמשים בשפות צד שרת, כגון PHP ו-ASP).
מסגרות אפילו יצאו באופן רשמי משימוש ולא תקניים ב-HTML 5 ו-XHTML.

העיקרון העומד מאחורי frames הוא שיש דף ראשי שמכיל בתוכו מספר דפים אחרים. הדפים המוכלים בדף הראשי לא חייבים להתחלף כולם כשאחד מתחלף.

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

נקבל דף המכיל את הדף framesTop.html שמוקצים לו 10% מהדף, ואת הדף frames.html שמוקצה לו כל שאר השטח של הדף.

לתג <frameset> יש את המאפיין rows שאחראי על החלוקה האופקית של המסך. הוא מקבל ערכים שמציינים את גובה המסגרות שיהיו בדף, מופרדים בפסיקים. מקבל פיקסלים, אחוזים, או *. האחרון הוא ערך מיוחד, שאומר שהמסגרת אליה הוא מתייחס תתפוס את כל השטח שנשאר.

להזכירכם,
אופקי: –
אנכי: |

אם אנחנו רוצים לחלק את הדף בצורה אנכית, נשתמש במאפיין cols במקום המאפיין rows. כמובן שלא ניתן לכתוב את שניהם באותו ה-frameset, אך ניתן לקונן framesetים זה בתוך זה כך שיוצא שאנו משתמשים גם ב-rows וגם ב-cols, לדוגמא:

התוצאה של הקוד הנ"ל תהיה: 10% העליון של הדף (בחלוקה אופקית) יכיל את framesTop.html ושאר הדף יחולק בצורה אנכית: לדף framesLeft.html יוקצו 25% מהשטח שנשאר ולדף frames.html יוקצה כל השטח שנשאר.


מאפייני התג frame
חובה להשתמש במאפיינים הבאים:
src - מיקום קובץ ה-HTML שהמסגרת תכיל.
name - שם המסגרת.

ניתן להשתמש במאפיינים הבאים, אך לא חובה:
scrolling - האם יהיה פס גלילה למסגרת הזו? מקבל את הערכים yes, no או auto.
frameborder - עובי הגבול מסביב למסגרת זו (מקבל ערך מספרי).
marginheight - ריווח בין תוכן המסגרת לגבול העליון והגבול התחתון שלה (מקבל ערך בפיקסלים).
marginwidth - ריווח בין תוכן המסגרת לגבול הימני והגבול השמאלי שלה (מקבל ערך בפיקסלים).
resize - האם ניתן יהיה לשנות את הגודל ע"י גרירה של פינת החלון? מקבל את הערכים yes או no.
noresize - כמו resize="no", רק שזה מתאים גם לדפדפנים יותר ישנים. ניתן להשתמש בשניהם יחד.


קישורים במסגרות
זוכרים את המאפיין target של הקישורים?
על מנת לגרום לכך שלחיצה על קישור במסגרת אחת תשנה את התוכן במסגרת אחרת, משתמשים במאפיין target שמקבל את השם של המסגרת שבה אנו רוצים שהקישור יפתח. המאפיין יכול להכיל את הערך _top (הקישור יפתח במקום מערכת המסגרות). אם משתמשים במסגרות מקוננות, ניתן לגרום לכך שהקישור יפתח ברמה אחת מעל המסגרת בה הוא נמצא, ע"י הערך _parent במאפיין target.


noframes
אחרי סגירת התג frameset, רצוי להוסיף תמיד את התג noframe, ולציין בו לגולש מה הוא יכול לעשות אם הדפדפן שלו לא תומך במסגרות.


מסגרות פנימיות - iframe
ניתן ליצור מסגרות פנימיות בתוך הדף ע"י שימוש בתג iframe.

מאפייני התג iframe:
src - מיקום קובץ ה-HTML שהמסגרת תכיל.
name - שם המסגרת.
width - רוחב המסגרת בדף (מקבל ערך בפיקסלים).
height - גובה המסגרת בדף (מקבל ערך בפיקסלים).
scrolling - האם יהיה פס גלילה למסגרת הזו? מקבל את הערכים yes, no או auto.
frameborder - עובי הגבול מסביב למסגרת זו (מקבל ערך מספרי).
marginheight - ריווח בין תוכן המסגרת לגבול העליון והגבול התחתון שלה (מקבל ערך בפיקסלים).
marginwidth - ריווח בין תוכן המסגרת לגבול הימני והגבול השמאלי שלה (מקבל ערך בפיקסלים).
resize - האם ניתן יהיה לשנות את הגודל ע"י גרירה של פינת החלון? מקבל את הערכים yes או no.
noresize - כמו resize="no", רק שזה מתאים גם לדפדפנים יותר ישנים. ניתן להשתמש בשניהם יחד.

דפדפנים ישנים לא תומכים בתג iframe.


המאפיין target של קישורים
זוכרים אותו? ובכן, הנה ערכים אפשריים שלו:
(שימו לב שה_ נמצא לפני המילה, ולא ההפך).
_blank – יגרום לפתיחת המטרה בחלון חדש.
_parent – יגרום לפתיחת המטרה בתוך ה-frameset שממנו הוא נפתח (שבו נמצא הקישור).
_self – יגרום לפתיחת המטרה בתוך אותו חלון או frame שבו הקישור נמצא. זה ערך ברירת המחדל.
_parent – יגרום לפתיחת המטרה בתוך כל גוף החלון.
_frameName – יגרום לפתיחת המטרה בתוך המסגרת ששמה לאחר המקף התחתון.

הערה: ב-XHTML וגם ב-HTML 5 הוסר השימוש במאפיין target (אני אישית נתקלתי במידע זה לא מזמן ולא יודע איך להתמודד עם זה ). כאן ניתן למצוא מדריך המסביר איך לגרום למטרה להיפתח בחלון חדש (יהיה יותר שימושי לכם לאחר שתלמדו JavaScript).

מה?!?!?!?!

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