- 10. מסגרות

דף ראשי «

מפת האתר «

אודות האתר «

עזרה «

study.eitan.ac.il «

» נושאי לימוד

יום שבת 23 בנובמבר 2024

10. מסגרות

דף ראשי

טכניקות לכתיבת HTML נגיש

10. מסגרות

טכניקה 10: מסגרות (frames)

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

באופן שמסגרות מיושמות כיום (בעזרת אלמנטי FRAMESET, FRAME ו- IFRAME) יש בעיתיות בגלל מספר סיבות:

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

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

10.1 ספק כותרת למסגרת

12.1 תנו כותרת הגיונית לכל מסגרת, שתקל על זיהוי המסגרת ועל הניווט. [עדיפות 1]

דוגמא, השתמש בתכונה "title" למסגרות חדשות:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="10%, 90%"
 title="Our library of electronic documents">
 <FRAME src="nav.html" title="Navigation bar">
 <FRAME src="doc.html" title="Documents">
 <NOFRAMES>
 <A href="lib.html" title="Library link">
 Select to go to the electronic library</A>
 </NOFRAMES>
</FRAMESET>

10.2 לתאר את היחס בין המסגרות

1.1 לספק מקבילת טקסט לכל אלמנט שאינו טקסט (כלומר ע"י "alt" או "longdesc" או בתוכן האלמנט). האלמנטים כוללים: תמונות, הצגות גרפיות של טקסט (כולל סמלים), מפות-תמונות, אנימציה (כלומר קבצי GIF מונפשים) יישומונים ואלמנטים תכנותיים, אומנות ascii, מסגרות, סקריפטים, תמונות המשמשות כסימון לרשימה (תבליטים), אלמנטים להפרדה (כגון קוים מפרידים), כפתורים גרפיים, צלילים (כאלה שהמשתמש יוצר וגם כאלה שאינם דורשים אינטראקציה), קבצי אודיו, פסי קול של סרטי וידאו, ווידאו. [עדיפות 1]
12.2 תארו מה תפקידה של כל מסגרת ומה הקשר בין המסגרות, במידה וכותרת המסגרת אינה מספקת. [עדיפות 2]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"><HTML> <HEAD> <TITLE>Today's news</TITLE> </HEAD> <FRAMESET cols="10%,*,10%"> <FRAMESET rows="20%,*"> <FRAME src="promo.html" name="promo" title="promotions"> <FRAME src="sitenavbar.html" name="navbar" title="Sitewide navigation bar" longdesc="frameset-desc.html#navbar"> </FRAMESET> <FRAME src="story.html" name="story" title="Selected story - main content" longdesc="frameset-desc.html#story"> <FRAMESET rows="*,20%"> <FRAME src="headlines.html" name="index" title="Index of other national headlines" longdesc="frameset-desc.html#headlines"> <FRAME src="ad.html" name="adspace" title="Advertising"> </FRAMESET> <NOFRAMES> <a href="noframes.html">No frames version</a> <a href="frameset-desc.html">Descriptions of frames.</a> </NOFRAMES> </FRAMESET></HTML>

ב- frameset-desc.html אולי יהיה כתוב:

#Navbar - this frame provides links to the major sections of the site: World News, National News, Local News, Technological News, and Entertainment News.#Story - this frame displays the currently selected story.#Index - this frame provides links to the day's headline stories within this section.

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

10.3 כתיבה לדפדפנים שלא תומכים במסגרות

1.1 לספק מקבילת טקסט לכל אלמנט שאינו טקסט (כלומר ע"י "alt" או "longdesc" או בתוכן האלמנט). האלמנטים כוללים: תמונות, הצגות גרפיות של טקסט (כולל סמלים), מפות-תמונות, אנימציה (כלומר קבצי GIF מונפשים) יישומונים ואלמנטים תכנותיים, אומנות ascii, מסגרות, סקריפטים, תמונות המשמשות כסימון לרשימה (תבליטים), אלמנטים להפרדה (כגון קוים מפרידים), כפתורים גרפיים, צלילים (כאלה שהמשתמש יוצר וגם כאלה שאינם דורשים אינטראקציה), קבצי אודיו, פסי קול של סרטי וידאו, ווידאו. [עדיפות 1]
6.5 הבטיחו שהתוכן הדינמי יהיה נגיש או ספקו הצגה חלופית לדף. [עדיפות 2]

בדוגמה הזו, אם המשתמש קורא "top.html":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>This is top.html</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%" title="Our big document">
 <FRAME src="main.html" title="Where the content is displayed">
 <FRAME src="table_of_contents.html" title="Table of Contents">
 <NOFRAMES>
 <A href="table_of_contents.html">Table of Contents.</A>
 
 </NOFRAMES>
</FRAMESET>
</HTML>

וסוכן המשתמש לא מציג מסגרות, למשתמש תהיה גישה (דרך קישור) לגרסאות ללא מסגרות של אותו המידע.

10.4 המקור (source) של המסגרת

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

מפתחי תוכן צריכים לספק טקסט מקביל של מסגרות באופן שהתוכן והקשר בין המסגרות יהיה מובן. הערה: מיד כהשתוכן של מסגרת משתנה , גם התיאור שלה צריך להישתנות. אם מוכנס IMG ישירות למסגרת, לא ניתן לעשות זאת. יוצא, שמפתחי תוכן צריכים תמיד לעשות את המקור ("src") של המסגרת כקובץ HTML. תמונות יכולות להיכנס לקובץ HTML והטקסט המקביל שלהם ישתנה בהתאמה.

דוגמא:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"><HTML>
<HTML>
<HEAD>
<TITLE>A correct frameset document</TITLE>
</HEAD>
<FRAMESET cols="100%" title="Evolving frameset">
<FRAME name="goodframe" src="apples.html" title="Apples">
</FRAMESET>
</HTML>

<IMG src="apples.gif" alt="Apples">

צריך להימנע מהדוגמה הנגדית הבאה מאחר שה-IMG מוכנס ישירות למסגרת.

דוגמא שגויה:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<HTML>
<HEAD>
<TITLE>A bad frameset document</TITLE>
</HEAD>
<FRAMESET cols="100%" title="Static frameset">
<FRAME name="badframe"
src="apples.gif" title="Apples">
</FRAMESET>
</HTML>

שימו לב: אם לדוגמא קישור יכניס תמונה חדשה למסגרת

Visit a beautiful grove of
<A target="badframe" href="oranges.gif" title="Oranges">oranges</A>

אז הכותרת הקודמת (תפוחים) כבר לא מתאימה לתוכן החדש של המסגרת - תפוזים

10.5 שימוש במטרות מסגרת

10.1 כל עוד סוכני המשתמש אינם מאפשרים למשתמשים לכבות חלונות ש"נולדים" מתוך חלונות קיימים, אין לגרום להופעתו של חלון pop-up או כל חלון אחר, ואין לשנות את החלון הנוכחי מבלי להודיע למשתמש. [עדיפות 2]

מפתחי תוכן צריכים להימנע מלסמן חלון חדש כמטרה של מסגרת עם target="_blank".

10.6 אלטרנטיבות למסגרות

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

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

<OBJECT data="nav.html">
Go to the <A href="nav.html">table of contents</A>
</OBJECT>

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

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