Фрейм - це що? Структура і створення фреймів


Фрейм - це область на сайті (вікно), в якій видно іншу веб-сторінку. Веб-майстри використовують таку можливість, щоб продемонструвати головну сторінку сайту своїх друзів чи партнерів. Той же прийом використовується, щоб відображати у віконцях форму пошуку густо його результат, і т. Д.

Але в основному фрейми використовуються у створенні великих веб-порталів, де потрібна чимала кількість пунктів меню і підменю. Про такі зазвичай кажуть: "сайт на фреймах". Для створення подібного ресурсу потрібне гарне знання 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. Застосування цього тега і раніше актуально для завантаження в певному вікні презентацій, відеоплеєра, текстових документів. Його активно використовують великі і відомі в мережі веб-ресурси.

    Поділися в соц мережах:
    » » Фрейм - це що? Структура і створення фреймів

    • Увага, тільки СЬОГОДНІ!