מסגרת היא אזור באתר (חלון) שבו דף אינטרנט אחר גלוי. מנהלי אתרים משתמשים בהזדמנות זו כדי להציג את דף הבית של אתרים של חברים או שותפים שלהם. אותה טכניקה משמשת להצגת טופס החיפוש בתיבות עם התוצאה לצדו וכו'.
אבל בעיקר משתמשים במסגרות ליצירת פורטלי אינטרנט גדולים, שבהם נדרשים מספר ניכר של פריטי תפריט ותתי-תפריטים. בדרך כלל אומרים על אנשים כאלה: "אתר על מסגרות". נדרש ידע טוב ב-HTML כדי ליצור משאב כזה.
יצירת מסגרות בבונה אתרים
בוני אתרים מסוימים מספקים יצירה אוטומטית של קוד כזה. בדרך כלל כפתור הוסף מסגרת ממוקם בתפריט הראשי של התוכנית. ראשית עליך למקם את הסמן במקום הנכון בעמוד, ולאחר מכן ללחוץ על הכפתור, חלון ייפתח (כפי שמוצג בצילום המסך). בו ניתן להגדיר את כתובת העמוד שייפתח במסגרת, ולהתאים את המידות: רוחב וגובה.
אבל בעיקר משתמשים במסגרות ליצירת פורטלי אינטרנט גדולים, שבהם נדרשים מספר ניכר של פריטי תפריט ותתי-תפריטים. בדרך כלל אומרים על אנשים כאלה: "אתר על מסגרות". כדי ליצור משאב כזה צריך ידע טובשפת HTML.
בעזרת ה"שירות" הזה ניתן ליצור מספר פריימים בעמוד, אך לא תקבלו אלמנטים מחוברים באופן זה.
מסגרות ב-CMS
בתוכניות רבות ליצירת אתרים, אפשר להתקין את המודול המתאים. לדוגמה, עבור ג'ומלה, מסגרת היא מודול "עטיפה".
ניתן למצוא וליצור אותו בלוח הבקרה של Joomla CMS: "הרחבות" - "מנהל המודולים" - "צור" (כפתור כתום עגול עם סימן פלוס בפנים). בחלון המוקפץ, ברשימה, תראה את מודול ה"עטיפה".
אם זה לא כאן, זה לא כלול. כדי להשתמש בו, תחילה עליך להפעיל אותו כאן: לשונית "הרחבות", לאחר מכן "מנהל ההרחבות", ולאחר מכן הכרטיסייה "ניהול". ואנחנו מחפשים ברשימה שנפתחת, לחיפוש מהיר בשדה "מסנן" הכנס את המילה: עטיפה. מול מודול זה אמור להיות סמל ירוק עם סימן ביקורת בפנים. עיגול אדום עם נקודה בפנים פירושו שהתוסף הזה מושבת.
לאחר הליך זה, אתה יכול לחזור ל"מנהל המודולים", ליצור מסגרת ולהגדיר את הפרמטרים שלה.
כפי שניתן לראות בתמונה, המודול מאפשר להגדיר: את הכותרת מעל המסגרת, את מיקום המודול, לבחור את דפי האתר בהם הוא יוצג. וגם להתאים את הרוחב, הגובה; להוסיף מסגרת ולמעשהקישור לדף אינטרנט. אם במסגרת אתה רוצה להציג את העמוד הראשי של אתר ברוחב מלא, אז 100%, מוגדר כברירת מחדל, לא יספיק. אתה יכול מיד לשים בבטחה 400%. גובה של 200 מספיק בדרך כלל כדי להציג את התפריט העליון של העמוד. כל שאר התוכן יהיה גלוי אם המשתמש (המבקר באתר) ישתמש בסרגל הגלילה.
הנה דוגמה למה זה מסגרת בג'ומלה.
מודול Jumla ליצירת מסגרת מאוד נוח וקל לשימוש. עם זאת, היכולות שלו מוגבלות, וכך גם היכולות של הבנאי.
היסטוריה ומציאות
בתרגול של יצירת אתרים ממסגרות, התג הזה (היישום שלו) נמוג מזמן ברקע. הם הצליחו להיות מוחלפים על ידי מודולים, הגדרות בתוכנות קונסטרוקטור המייצרות קוד עבור דף אינטרנט ללא השתתפות של בונה אתרים. עם זאת, במקרים מסוימים זה לא מספיק. לדוגמה, כאשר מסגרת היא מבנה מורכב הוליסטי של אזורים המוצגים בדפדפן. כך רואים זאת בעלי אתרים מורכבים. יצירתו משמשת רק במקרים קיצוניים, שכן אתרי פריים נוצרים אך ורק בעזרת תגיות מיוחדות.
אתרים בעלי מבנה מורכב
עבורם, יצירת מספר פריימים מחוברים זה לזה היא הפתרון הטוב ביותר לארגון תוכן בדפי משאבים. אלה הם, ככלל, פורטלים גדולים, שמתחזקים מדי שנה.
איך להשיג את אותה תוצאה? כיצד נוצר מבנה המסגרת?
איךהכנס מסגרת לקוד הדף
מסגרות ב-HTML מתווספות באמצעות תגים:
- מסגרת (עבור חלון נפרד);
- frameset (משתמש בו ליצירת מבנה שלם);
- iframe ("מסגרת צפה");
- noframes (במקרה שהמסגרת לא מוצגת בדפדפן של המשתמש).
התג הראשון שצוין תמיד מתאים לזוג ו-. וזה מחליף ו. ובעזרת התכונות המתאימות, ניתן להתאים את המאפיינים של כל אלמנט: השם (שם=), גודל (קולות=ושורות=), נוכחות של גבול (גבול), מראה פס הגלילה ו, כמובן, הקישור לדף האינטרנט להצגה.
וריאציות עיצוב
ניתן לחלק את כל עמוד האתר לאזורים. לדוגמה, כך:
| Left | מסגרת עליונה |
| נכון |
מבנה כזה (נקרא Nested) ניתן להשיג על ידי כתיבת התכונה cols בתוך התג, כלומר מיקום המסגרת בצורה אופקית, ושורות - אנכית. לאחר מכן, שמים את הסימן=וקובעים את המידות. לדוגמה, 60%, 40% - אחוז (חלון אחד ייקח 60% משטח הדפדפן, השני, בהתאמה, 40%). או 100, 200 - יחס רוחב-גובה בפיקסלים. לא ניתן להגדיר כלל את הגודל של אחת הפריימים (הוא יוגדר כברירת מחדל). כדי לעשות זאת, אחרי או לפני הפסיק, עליך לציין את הסמל.
קינוןכל אזור חדש מסומן על ידי ערכת מסגרות חדשה.
דוגמה לקוד:
שים לב שבדוגמה שלנו, עבור המסגרת השנייה והשלישית, הגדלים מצוינים פעם אחת בלבד.
רעיונות רבים מאפשרים לך להשלים מסגרות. דוגמאות למיקומם בחלון הדפדפן ניתן לתת בלי סוף (שינוי הקוד בהתאם). עם זאת, מידע זה לא מצא יישום מעשי במשך זמן רב. מסגרות, אם נעשה בהן שימוש היום בעת יצירת אתרים, הן רק בצורת מודולים ב-CMS חינמי או בצורת iframe.
מסגרת צפה
מוזר למה זה קיבל שם כזה, המילה "מובנית" מתאימה כאן יותר. מסגרת זו נוצרת כדי להציג את התוכן של קובץ. אתה מעלה כל מסמך או קובץ למסד הנתונים, כותב את הנתיב אליו באמצעות תגיות iframe - והמבקרים יראו את הטקסט של הקובץ (סרטון או תמונה). למרבה הצער, דפדפנים לא תמיד מעבדים תוכן. לשם כך, בוני אתרים מכניסים את הביטוי בין תגי הפתיחה והסגירה: "הדפדפן שלך לא מציג תוכן."
לדוגמה, Seopult.ru הוא שירות ידוע עבור מאסטרים לקידום. רק לא האתר הראשי שלו, אלא מראה I.seopult.pro, שנוצר עבור לקוחות פורטל. קוד ה-iframe כתוב כאן באופן הבא:
הוראות
. איפה התג
-
נוצר כדי להגדיר פריט רשימה. נתמך על ידי כל הדפדפנים.
בדף המראה עצמו, ניתן לראות את המילה "הוראה" בצורת כפתור. לחיצה עליו במרכז חלון הדפדפן פותחת את המצגת.
הכל גדולאתרים לצפייה בסרטים וסדרות נוצרים באמצעות iframes (לדוגמה, "Imhonet"), כמו גם רשתות חברתיות. אפילו העמוד הראשי של "Yandex" מכיל את התג הזה, ויותר מזוג אחד.
איך כותבים iframe
ניתן להעלות מסמך בצורת חלון עם פס גלילה לכל מקום באתר. בדרך כלל מניחים תגים בתוך הגוף. מעבר לסטנדרט
ו, כפי שמוצג בדוגמה למעלה, ניתן להשתמש בתג הרשימה גם -
-
תכונות מתווספות ל-iframe:
- רוחב (רוחב) וגובה (גובה=);
- edge alignment align;
- indents שניתן לציין או לא: ערך ברירת המחדל הוא 6 - זה די מספיק;
- באמצעות allowtransparency, אתה יכול להגדיר את השקיפות של אזור המסגרת כך שניתן יהיה לראות את הרקע של הדף;
- בתוספת הסקר המוכר, שם, גלילה, גבול.
ניווט עם iframe
מיומנות המסגור המעניינת ביותר היא כתיבת קוד המאפשר לפתוח תוכן בחלון באמצעות קישור, מה שעשו יוצרי המראה של Seopult, רק עם מספר קישורים בו-זמנית (זמינים בו-זמנית למשתמש ב- אותו עמוד).
לשם כך, נלקח iframe, השם נכתב בו בנוסף דרך name=. לדוגמה, כותרת. עוד לפניו בתגיות והקישורים נכתבים באמצעות HREF=עם ציון התכונה החובה אחריהם.לפני השימוש בתגית הסגירה a מצוין כיתוב שישמש כפתור קישור. תגיות "א" פתיחה וסגירהמצורפים בתג p.
ניתן לכתוב כמה שורות כאלה בקוד על מנת לקבל בסופו של דבר מספר כפתורי קישור בשורה אחת באתר, על ידי לחיצה על איזה תוכן שונה יוצג בחלון למטה.
הקוד ייראה כך:
פרסם מודעה
הצג מודעות
Image איך זה יראה באתר:
איך להכניס iframe לאתר ג'ומלה
כסטנדרט, ללוח הבקרה של ג'ומלה יש מודול "קוד HTML" מופעל (מוכן לשימוש). בעזרתו תוכלו להכניס כל קוד בכל מקום באתר. עם זאת, הוא מתעלם בעקשנות מהקוד עם תג iFrem. לכן, נשתמש במודול Jumi מיוחד.
קודם כל, עליך להוריד אותו מהאינטרנט ולהתקין אותו דרך פאנל הניהול של ג'ומלה: "הרחבות" - "מנהל ההרחבות" - "בחר קובץ". ציין את הנתיב לארכיון שהורדת ולחץ על "הורד".
לאחר התקנה מוצלחת, עבור אל "מנהל המודולים" וצור אחד חדש. בחר את סוג הג'ומי. בחלון שנפתח, בשדה "קוד מותאם אישית", הזינו את ה-iFrem המוכן, כפי שמוצג בפסקה הקודמת של המאמר. תן כותרת למודול, ציין את מיקום המיקום ודפי האתר. לחץ על שמור ובדוק את זה.
דפדפנים ומסגרות
כל הדפדפנים הפופולריים מציגים היטב את התוכן של חלונות המסגרת: Chrome, Safari, Firefox, Android, iOS. ל-Internet Explorer ו-Opera יש שיעור גבוה במיוחד בהקשר זה. ובכל זאת אין ערובהשהמבקר באתר שלך יראה את התוכן של כל החלונות. במקרה זה, עליך להשאיר הודעה באמצעות תגית noframe (פתיחה וסגירה). אתה יכול להזין בו את הדברים הבאים: "הדפדפן שלך לא מעודכן. עדכן את הגרסה כדי להציג את תוכן האתר". אם הדפדפן של המשתמש מציג מסגרות בצורה נכונה, הוא לא יראה את ההודעה הזו.
אז מסגרת היא אזור או חלון של אתר שיש להם כתובת אתר משלו. משמש להצגת מספר דפי אינטרנט או מסמכים עצמאיים בשדה דפדפן אחד בו-זמנית, גם בעל כתובת URL משלהם. למרות העובדה שמסגרות מאפשרות לארגן היטב אתר מורכב, לא נעשה בהן שימוש במשך זמן רב, למעט ה-iframe. השימוש בתג זה עדיין רלוונטי לטעינת מצגות, נגן וידאו, מסמכי טקסט בחלון מסוים. הוא נמצא בשימוש פעיל על ידי משאבי אינטרנט גדולים וידועים.
-
