Фрейм - це що? Структура і створення фреймів
Фрейм - це область на сайті (вікно), в якій видно іншу веб-сторінку. Веб-майстри використовують таку можливість, щоб продемонструвати головну сторінку сайту своїх друзів або партнерів. Той же прийом використовується, щоб відображати в віконцях форму пошуку і поруч його результат, і т. Д.
Але в основному фрейми використовуються в створенні великих веб-порталів, де потрібна велика кількість пунктів меню і підменю. Про таких зазвичай кажуть: "сайт на фреймах". Для створення подібного ресурсу потрібне гарне знання HTML-мови.
Створення фреймів в конструкторі сайтів
У деяких конструкторах сайтів передбачена автоматична генерація подібного коду. Зазвичай кнопка додавання фрейму знаходиться в основному меню програми. Спочатку необхідно встановити курсор в потрібному місці на сторінці, потім натиснути кнопку, відкриється вікно (як показано на скріншоті). У ньому можна задати адресу сторінки, яка буде відкриватися у фреймі, і відрегулювати розміри: ширину і висоту.
Але в основному фрейми використовуються в створенні великих веб-порталів, де потрібна велика кількість пунктів меню і підменю. Про таких зазвичай кажуть: "сайт на фреймах". Для створення подібного ресурсу потрібне гарне знання HTML-мови.
За допомогою даного "сервісу" можливе створення декількох фреймів на сторінці, ось тільки взаємопов`язаних елементів таким чином вам не отримати.
Фрейми в CMS
У багатьох програмах для створення сайтів передбачена можливість установки відповідного модуля. Наприклад, для Joomla фрейм - це модуль "Обгортка (Wrapper)".
Його можна знайти і створити в панелі управління CMS Джумла: "розширення" - "Менеджер модулів" - "створити" (Кругла кнопка оранжевого кольору з плюсом всередині). під спливаючому вікні, в списку, ви побачите модуль "обгортка".
Якщо його тут не буде, значить, він не включений. Щоб скористатися ним, спочатку потрібно його активувати тут: вкладка "розширення", далі "Менеджер розширень", Далі вкладка "управління". І шукаємо в списку, можна для швидкого пошуку в поле "Фільтр" ввести слово: Wrapper. Навпаки даного модуля повинен стояти значок зеленого кольору з галочкою всередині. Червоний гурток з точкою всередині означатиме, що даний плагін вимкнений.
Після цієї процедури можна повернутися в "Менеджер модулів", Створити фрейм і встановити його параметри.
Як видно на зображенні, модуль дозволяє встановити: заголовок над фреймом, позицію модуля, вибрати сторінки сайту, на яких він буде відображатися. А також налаштувати ширину, висоту- додати рамку і власне посилання на веб-сторінку. Якщо у фреймі ви хочете відобразити головну сторінку будь-якого сайту на всю ширину, то 100%, встановлених за замовчуванням, буде недостатньо. Можна відразу сміливо ставити 400%. Висоти 200 зазвичай вистачає, щоб відобразити верхнє меню сторінки. Весь інший контент буде видно, якщо користувач (відвідувач сайту) скористається смугою прокрутки.
Ось приклад того, що таке фрейм в Джумла.
Модуль Джумла для створення фрейму дуже зручний і простий у застосуванні. Однак його можливості обмежені, як і можливості конструктора.
Історія і реалії
У практиці створення сайтів з фреймів цей тег (його застосування) вже давно відійшов на другий план. Їх змогли замінити модулі, настройки в програмах-конструкторах, що генерують код для веб-сторінки без участі сайтостроітеля. Однак в деяких випадках цього буває недостатньо. Наприклад, коли фрейм - це цілісна складна структура з областей, що відображаються в браузері. Так бачать його власники складнострукурованих сайтів. На її створення йдуть тільки в крайніх випадках, оскільки фреймовскіе сайти створюються виключно за допомогою спеціалізованих тегів.
складнострукурованих сайти
Для них створення декількох взаємопов`язаних фреймів є оптимальним рішенням організації контенту на сторінках ресурсу. Це, як правило, великі портали, що розростаються з кожним роком все сильніше.
Як домогтися такого ж результату? Як створюється структура фрейму?
Як вписати фрейм в код сторінки
Фрейми в HTML додають за допомогою тегів:
- frame (для окремого вікна);
- frameset (за допомогою нього створюється ціла структура);
- iframe ("плаваючий" фрейм);
- noframes (на випадок невідображення фрейма в браузері користувача).
Перший вказаний тег завжди вписується в парі
. Причому вона замінює і . А за допомогою відповідних атрибутів можна коригувати характеристики кожного елемента: назва (name =), розмір (cols = і rows =), наявність рамки (border), вид смуги прокрутки і, звичайно, посилання на веб-сторінку для відображення.варіації оформлення
Всю сторінку сайту можна розбити на області. Наприклад, так:
лівий | верхній фрейм |
правий |
Таку структуру (її називають вкладеної) можна отримати, прописавши всередині тега атрибут cols, що означає розташування фрейму по горизонталі, і rows - по вертикалі. Слідом ставиться знак = і прописуються розміри. Наприклад, 60%, 40% - процентне співвідношення (одне вікно займе 60% простору браузера, інше, відповідно, 40%). Або 100, 200 - співвідношення розмірів в пікселях. Розміри одного з фреймів можна взагалі не ставити (встановиться за замовчуванням). Для цього після або перед коми потрібно вказати символ *.
Усередині цієї пари frameset прописує кожен фрейм з параметрами: src =, далі в лапках дається посилання на веб-сторінку і name = з заголовком (наприклад, Фрейм 1).
Вкладеність кожної нової області позначається новим frameset.
Приклад коду:
Зауважте, в нашому прикладі для фреймів другого і третього розміри прописуються тільки один раз.
Безліч задумів дозволяють виконати фрейми. Приклади їх розташування у вікні браузера можна наводити нескінченно (змінюючи код відповідним чином). Однак практичного застосування ці відомості не знаходять вже давно. Фрейми, якщо і використовуються сьогодні при створенні сайтів, то тільки у вигляді модулів в безкоштовних CMS або у вигляді iframe.
плаваючий фрейм
Дивно, чому він отримав таку назву, тут більше підходить слово "вбудований". Цей фрейм створений для відображення вмісту файлу. Ви завантажуєте в базу будь-якої документ або файл, за допомогою тегів айфрейма прописуєте шлях до нього - і відвідувачі побачать текст файлу (відео або зображення). На жаль, браузери не завжди відображають вміст. Для цього веб-будівельники вписують між відкриває і закриває тегом фразу: "Ваш браузер не відображає вміст".
Наприклад, Seopult.ru - відомий сервіс у майстрів по просуванню. Тільки не його основний сайт, а дзеркало I.seopult.pro, створене для клієнтів порталу. Код айфрейма тут прописаний так:
. де тегНа самій сторінці дзеркала можна побачити слово "Інструкція" у вигляді кнопки. При натисканні на неї в центрі вікна браузера відкривається презентація.
Всі великі сайти для перегляду фільмів і серіалів створені за допомогою айфреймов (наприклад, "Імхонет"), Так само як і соціальні мережі. Навіть головна сторінка "Яндекса" містить цей тег, і не одну пару.
Як прописати iframe
Закачати на сайт документ у вигляді віконця з смугою прокрутки можна в будь-яке місце. Зазвичай теги розташовують усередині body. Крім стандартного
і
, як було показано на прикладі вище, може використовуватися і тег списку -У айфрейм додаються атрибути:
Навігація за допомогою айфрейма
Найцікавіше вміння в області створення фреймів - це написання коду, що дозволяє відкривати у вікні контент за посиланням, - то, що зробили творці дзеркала Seopult, тільки відразу з декількома посиланнями (одночасно доступними користувачеві на одній сторінці).
Для цього береться айфрейм, в ньому додатково прописується ім`я через name =. Наприклад, zagolovok. Далі перед ним в тегах і прописуються посилання через a HREF = з обов`язковим зазначенням після них атрибута target = zagolovok. Перед тим як використовувати закриває тег а, вказується напис, яка буде служити посиланням-кнопкою. Теги "а" відкривають та закривають полягають в тег p.
Таких рядків в коді можна прописати декілька, щоб в результаті на сайті отримати в один ряд кілька кнопок-посилань, натискаючи на які у вікні знизу буде відображатися різний контент.
Код буде виглядати так:
Як це буде виглядати на сайті:
Як вставити iframe в сайт Джумла
Стандартно в панелі управління Джумла є включений (т. Е. Готовий до використання) модуль "HTML-код". За допомогою нього можна вставити будь-який код в будь-яке місце на сайті. Однак код з тегом Айфрі він наполегливо ігнорує. Тому будемо використовувати спеціальний модуль Jumi.
Перш за все його потрібно завантажити з інтернету і встановити до себе через адміністративну панель Джумла: "розширення" - "Менеджер розширень" - "вибрати файл". Вкажіть шлях до завантажити архіву і натисніть "Завантажити".
Після вдалої установки заходимо в "Менеджер модулів" і створюємо новий. Виберіть тип Jumi. У вікні, в полі "довільний код", Введіть підготовлений Айфрі, як було показано в попередньому абзаці статті. Дайте модулю заголовок, вкажіть позицію розміщення і сторінки сайту. Натисніть зберегти і перевірте, що вийшло.
Браузери і фрейми
Всі популярні браузери добре відображають вміст вікон frame: Chrome, Safari, Firefox, Android, iOS. Особливо високий показник в цьому відношенні у Internet Explorer і Opera. І все ж немає гарантії, що відвідувач вашого сайту побачить вміст всіх вікон. На цей випадок слід залишити повідомлення за допомогою тега noframe (відкриває і закриває). У нього можна вписати наступне: "Ваш браузер застарів. Щоб продемонструвати вміст сайту поновіть версію". Якщо браузер користувача правильно відображає фрейми, то це повідомлення він не побачить.
Отже, фрейм - це область або вікно сайту, яке має власний URL-адресу. Використовується для відображення в одному полі браузера відразу декількох веб-сторінок або незалежних документів, також мають свій URL. Незважаючи на те що фрейми дозволяють добре організувати складнострукурованих сайт, їх вже давно не використовують, крім iframe. Застосування цього тега як і раніше актуально для завантаження в певному вікні презентацій, відеоплеєра, текстових документів. Його активно використовують великі і відомі в мережі веб-ресурси.
