что такое фрейм в программировании

Фреймы

Frame — это отдельная область окна, являющаяся по своей структуре законченным документом HTML. Понятие пришло к нам из английского языка и переводится как «рамка». Фрейм — это структура, разделяющая окно браузера на отдельные участки и содержащая в себе самостоятельную и полноценную страницу. Данная технология программирования продолжает вызывать много споров, хотя пик ее популярности прошел.

Современное положение технологии

Решение о прекращении работ с фреймовой структурой окончательно принято W3C (ведущей организацией по стандартизации интернет-технологий), обычные теги для создания frame, noframes, frameset признаны устаревшими и не поддерживаются в HTML5. Данная позиция подтверждается данными об отрицательном влиянии такой структуры на возможности использования сайтов (юзабилити) и их доступность в Сети. При этом элемент iframe современные технологии поддерживают, его использование дает возможность включать фреймы в текстовые блоки на страницах и выравнивать их положение относительно самого текста. При этом важным моментом остается то, что у фреймов отсутствует атрибут, необходимый для изменения размеров, и изменить размер встроенного фрейма в принципе невозможно.

Перспективы использования технологии

Без скачкообразных изменений технологии в будущем применение фреймов маловероятно, что также подтверждается позицией W3C. При создании новых ресурсов фреймы не должны использоваться в структуре страниц. При этом при доработке и поддержке текущих сайтов особенности технологии и их применение могут быть весьма продуктивными и полезными.

Преимущества фреймов

Ряд неоспоримых преимуществ использования фреймов объясняет, зачем они в принципе нужны и почему до сих пор активно применяются.

Удобство использования. Фреймовые технологии просто использовать, они имеют высокую скорость работы и позволяют точно позиционировать информацию в необходимом месте окна.

Экономия трафика. При использовании фреймов объем передаваемого трафика сокращается, так как для обращения к другому информационному разделу обычно обновляется только один участок страницы, а не весь ее код.

Дополнительные возможности навигации. Фреймовая структура обеспечивает новые интересные возможности использования контента. Неоспоримым плюсом является то, что внутри одного окна в соседних фреймах можно смотреть совершенно разную информацию. Поиск по фрейму абсолютно равнозначен той же операции на новой странице браузера.

Вариативность размеров отдельного участка. При работе с сайтом есть возможность динамически изменять размеры отдельного участка, что тяжелее реализовать с помощью иных технологий.

Возможные недостатки

Проблемы работы сайтов с использованием фреймов имеют накопительную природу. На сегодняшний день они достигли порогового значения. К основным минусам можно отнести следующие:

неудовлетворительное юзабилити. На сегодняшний день доля пользователей планшетов и мобильных устройств с небольшим разрешением экрана стремительно растет и заметно превышает число посетителей, посещающих сайты с ноутбуков и стационарных компьютеров. Применение фреймов создает проблемы в части адаптации страниц при их отображении на разных устройствах. Существующая проблема практически не имеет решений;

снижение доступности сайта для разных программ. Увеличение числа дополнительных программ, например экранных дикторов, выявляет снижение доступности информации для считывания;

единый адрес всей структуры. Внутренние страницы сайта с фреймами нельзя добавить в закладки, что может приводить к неудобствам в работе пользователей;

некорректное отображение страниц. Фреймовая структура часто имеет в браузере некорректный дизайн. Это обуславливают особенности технологии. Использование фреймов при html-верстке страниц с точки зрения SEO крайне нежелательно;

некорректная индексация поисковыми системами. Формирование одной страницы из нескольких полноценных документов приводит к затруднениям в работе поисковых систем. При индексации могут появляться существенные ошибки. В результате наблюдается неверное определение адресов и тематики, невключение критически значимого контента в индексацию;

непрестижность. Этот недостаток является довольно необычным для сетевых ресурсов. Устаревание создания сайтов на фреймах может приводить к тому, что владельцы и авторы таких ресурсов будут считаться противниками прогресса. При этом все же существует отдельное исключение. Таким примером являются современные сайты, имеющие чаты.

Индексирование фреймов поисковыми системами

Информация, поступающая из поисковых систем, однозначно говорит, что наиболее медленно индексируемые сайты с фреймовой структурой. При этом имеют место ошибки, связанные с самой контейнерной структурой. Это объясняется тем, что каждый фрейм отображает полноценную страницу, и в базу индексации может попасть именно эта часть.

Возможные неудобства для пользователя. Как правило, при переходе на внутреннюю часть страницы пользователю недоступно меню и другие механизмы навигации. Это создает массу сложностей при работе. Решение обновить или перезагрузить фрейм в данном случае не поможет, так как вся навигация размещается в другом контейнере структуры. Таким образом, параметры сайта, содержащего фреймы, с точки зрения SEO значительно снижаются. Статистика поведения пользователей свидетельствует о снижении авторитета сайта у поисковых систем, что однозначно отрицательно сказывается на посещаемости.

Почему сайты с фреймами не индексируются. Основная страница содержит заголовок, описание всех метатегов и тег frameset, полное содержание размещено в отдельных документах, которые пользователь и увидит в рамке. Поисковые системы настроены так, чтобы получить и проиндексировать информацию основной страницы с тегом body. Именно там происходит поиск необходимого для пользователя контента. Фреймовая страница такой тег не содержит, он заменяется на frameset, вследствие чего поисковый бот считает страницу неполезной и не индексирует ее. Особенно тяжело поисковым системам работать с множественными и кадровыми структурами. Тот факт, что каждый имеющийся контейнер отвечает признакам отдельного документа, но не содержит полноценную информацию и навигацию, дополнительно усложняет задачу.

Пути решения. Частично решить проблему можно с помощью noframes. Однако при обращении к данному элементу на многих сайтах определяется только информация о том, что браузером не поддерживаются фреймы, и для просмотра страницы необходимо использовать другую программу. Правильная перелинковка на страницах может скорректировать работу поисковых систем. Это достигается за счет дублирования всех ссылок меню, чтобы они были доступны в каждой части страницы. Но это замедлит и усложнит работу по обновлению информации на сайте и его оптимизации. Однако опыт многих веб-мастеров и оптимизаторов показывает, что даже в случае попадания в базу индексации страницы на фреймах не получают высоких мест в выдаче поиска.

Продвижение сайтов во фреймах

Корректным считается заполнение поисковых баз адресами родительских сайтов. В результате неправильной индексации фреймовой структуры зачастую поисковики заполняются ссылками на дочерние ресурсы. Для минимизации проблем индексации при описании сайтов на фреймах используются специальные параметры и теги. В контейнерной структуре основным элементом является frameset, который заменяет стандартный body в исходном коде. Каждый контейнер структуры описывается frame. Его число в коде страницы соответствует количеству самостоятельных участков, которые отображаются при просмотре в браузере. Указанные теги размещаются на главной странице, затем содержание дублируется внутри каждого из них.

Источник

1.5. Фреймы. Что такое фрейм?

Для чего можно использовать фреймы

Например, разумно хранить в фрейме логотип компании только на первых нескольких уровнях самых важных страниц, а основные данные показывать без фреймов.

Как работают фреймы

Создание простой страницы с фреймами

Создадим, для лучшего понимания, пару простых страничек с фреймами, чтобы стало понятно, каково строение НТМL страницы с фреймами и для чего нужны основные таги и атрибуты.

Построим страницу с двумя фреймами. Зададим слева фрейм оглавления с заголовками статей, а справа поместим страницу с самими статьями. Сделаем так, что когда пользователь щелкает мышкой на ссылке в той части экрана, где находится оглавление, сама статья появляется в правом фрейме. Это основной, наиболее распространенный способ использования фреймов.

Задание фреймовой структуры

Это означает, что фрейм под именем main будет содержать страницу b.php. Заметим, что поскольку мы не собираемся показывать в левом фрейме никаких страниц, кроме menu.php, нам не нужно его называть.

Подготовка содержимого фрейма

Заметим, что здесь ничего не говорится о фреймах. О них все сказано в фреймовой структуре. Единственное, о чем нужно позаботиться на каждой НТМL странице, появляющейся в фрейме, так это о том, где поместить ссылки, активирующие те или иные действия. В нашем примере, в левом фрейме, где находится оглавление, будет располагаться только одна страница. Мы хотим, чтобы при щелчке мышкой в левой странице ссылочный документ появлялся бы в правом фрейме main.

Подготовка фрейма main

Правый фрейм main будет содержать сами HTML-страницы. Ваша задача так их спроектировать, чтобы они хорошо смотрелись в меньшем, чем обычно, окне, потому что часть экрана будет занята левым кадром оглавления. Но больше эти страницы ничем не примечательны. Ниже приводится код для страницы, упомянутой первой в оглавлении ( html-pr2-4.php).

Обратите внимание: на приведенных страницах нигде тайно не запрограммирован фрейм. Это значит, что можно без особых проблем конвертировать все документы вашего Web-сервера для использования в фреймовой структуре.

Использование тага

Можно поместить на страницу с фреймами кнопку No Frames (Без фреймов). Ее назначение очевидно. Такой вариант достаточно разумен и легко осуществим.

Специфические таги и атрибуты фреймов

Изучив таги и атрибуты для работы с фреймами, давайте поговорим о том, как лучше всего проектировать страницы с фреймовой структурой.

А можно сделать так:

Столбцы задаются так же, как строки. Для них применимы те же атрибуты.

Таг определяет внешний вид и поведение фрейма. Этот таг не имеет закрывающего тага, поскольку в нем ничего не содержится. Вся суть тага в его атрибутах. Их шесть: NАМЕ=, MARGINWITH=, MARGINHEIGHT=, SCROLLING=, NORESIZE= и SRC=.

Если вы хотите, чтобы при щелчке мыши на ссылке соответствующая страница отображалась в определенном фрейме, вы должны указать этот фрейм, чтобы страница знала, куда что загружать. В предыдущих примерах мы назвали большой правый фрейм main, и именно в нем появлялись страницы, выбранные из оглавления в левом фрейме. Фрейм, в котором отображаются страницы, называется целевым (target). Фреймы, которые не являются целевыми, именовать не обязательно. Например, можно записать такую строку:

Имена целевых фреймов должны начинаться с буквы или цифры. Выбирайте названия попроще, чтобы не запутаться. Одни и те же имена разрешается использовать в нескольких фреймовых структурах. По щелчку мыши соответствующие страницы будут отображаться в именованном фрейме:

Атрибут МАRGINHEIGHT= действует так же, как и МАRGINWITH =. Он задает поля в верхней и нижней части фрейма.

Хотите ли вы, чтобы ваши читатели пользовались прокруткой в фрейме? Иногда бывает разумно лишить их этого удовольствия. Возможные варианты: SCROLLING =YES, SCROLLING =NО, SCROLLING =АUТО. SCROLLING =YES означает, что в фрейме всегда будут полосы прокрутки, даже если это не нужно. При задании SCROLLING =NО полос прокрутки не будет, даже если они необходимы. Если документ слишком большой, а вы задали режим без прокрутки, то документ просто будет обрезан. Атрибут SCROLLING =АUТО предоставляет броузеру самому решать, требуются ли полосы прокрутки или нет. Если атрибут SCROLLING= отсутствует, результат будет таким же, как и при задании SCROLLING =АUТО.

Чтобы разобраться с атрибутом ТАRGЕТ=, давайте вернемся к нашему простому примеру с кадром оглавления. Когда пользователь щелкает мышкой на одной из ссылок в левом фрейме, соответствующая страница должна появиться в правом фрейме, а оглавление остается неизменным. Чтобы этого добиться, нужно определить целевой фрейм ТАRGЕТ, в котором будет отображаться страница для каждого пункта оглавления. Задание целевых фреймов осуществляется в ссылках левого фрейма. Вот зачем всем кадрам в фреймовой структуре были присвоены имена. Правый фрейм называется main, так что нужно в каждой ссылке добавить атрибут ТАRGЕТ=»main», в результате чего соответствующая страница появится в фрейме main. Обратите внимание: каждая ссылка содержит атрибут ТАRGЕТ=»main», который в ответ на щелчок мышью отображает страницу в фрейме main.

«Волшебные» целевые фреймы

целевые фреймы предназначены исключительно для особых случаев. Прежде чем вы решитесь их применить, дважды подумайте: они способны усложнить жизнь некоторым пользователям.

Фрейм «blank»

Если атрибут ТАRGЕТ= ссылается на » blank», то документ всегда будет появляться в новом пустом окне.

Фрейм «self»

Имя «self» указывает на то, что выбранная страница загружается в тот же фрейм, где была активирована ссылка. Если вы щелкнете мышкой на ссылке в фрейме оглавления, выбранная страница окажется в том же самом фрейме. Если вы задали фрейм для всего документа в атрибуте ВАSЕ=, то «self» помогает нейтрализовать ссылку в ВАSЕ=.

Фрейм «раrent»

Пользоваться этим именем небезопасно. Документы, вызываемые по ссылке на «раrent», появляются в родительской фреймовой структуре. Это хороший способ окончательно сбить с толку читателей. Да и у вас могут возникнуть трудности в процессе форматирования страниц. Соблюдайте осторожность.

Фрейм «top»

При указании ссылки «tор» документы появляются в отдельном окне вне фрейма. Независимо от вашего желания броузер откроет новое окно просмотра.

Вложенные и множественные кадровые структуры

Источник

Фреймы в HTML

Разница между Frames и Iframes

При использовании frameset вы разделяете видимую часть окна браузера на несколько фреймов. Каждый фрейм имеет собственное содержимое, которое не затрагивает содержимое следующего. Frames и Iframes выполняют аналогичную функцию — встраивают ресурс в веб-страницу, но они принципиально отличаются друг от друга:

История и будущее фреймов

Проблемы с фреймами

В данный момент в веб-разработке прослеживается глобальная тенденция разделения содержимого веб-страницы от ее представления:

Будущее фреймов

Как сделать фреймы в HTML

В разработке новых сайтов фреймы использоваться не должны, но для веб-мастеров, которые занимаются поддержкой старых ресурсов, умение применять их может оказаться полезным.

Основная концепция фреймов

Основная концепция фреймов довольно проста:

Создание вертикальных столбцов

А вот как эта разметка будет отображаться:

Создание горизонтальных строк

Внеся это изменение, мы сделали так, что фреймы теперь загружаются в четыре ряда, друг над другом:

Объединение столбцов и строк

Фрейм в HTML пример:

Вложенный frameset располагается внутри родительского элемента, первого фрейма. Вложенный элемент может быть размещен в любом месте. Например, если мы хотим, чтобы вложенный элемент размещался в центре, то просто переставляем элементы следующим образом:

Вот, как теперь будут отображаться фреймы:

Можно создать другие вложенные фреймы:

Этот код создает набор из двух одинаковых по размеру столбцов. Затем мы разделили второй столбец на две строки. И, наконец, мы разделили вторую строку на две колонки. Вот, как это будет выглядеть:

Другой способ создать комбинацию строк и столбцов — определить сетку столбцов и строк в одном фрейме. Например, если вы хотите создать сетку из четырех фреймов одинакового размера, можно использовать следующий код:

Полученная сетка строк и столбцов будет выглядеть следующим образом:

Как задавать стили для фреймов

Определение стилей фреймов в исходном документе

Определение стилей и форматирование frameset

Как повлиять на представление frameset помимо определения стилей самих документов:

Определение размеров фреймов

Мы создадим следующий макет:

Мы можем создать фрейм HTML с помощью следующего кода:

Этот код создает frameset из двух рядов:

Но посетитель сайта сможет вручную изменить их размеры.

Этот код создает веб-страницу, отображаемую следующим образом:

Форматирование рамки и отступов вокруг фрейма

Теперь, когда мы определили макет, если нам нужно, мы можем увеличить или уменьшить отступы между фреймами, а также удалить рамку между ними. Используя макет, который мы создали в предыдущем пункте, давайте удалим рамки между тремя столбцами, но оставим рамку между верхними и нижними рядами. Давайте также добавим отступ вокруг содержимого первого фрейма HTML :

Указание фреймов с помощью ссылок

Одним из наиболее распространенных случаев использования фреймов является создание во фрейме « прилипающего » меню навигации, которое всегда видно независимо от положения содержимого других фреймов. При правильном применении, ссылки в меню навигации приводят к загрузке новых ресурсов во фрейме, в то время как остальные фреймы остаются статическими.

Можно отформатировать анкоры для указания конкретных фреймов через присвоение нужному элементу frame атрибута name и использование атрибута target внутри элемента a для загрузки href в указанном фрейме. Если все это немного сбивает вас с толку, давайте разберем процесс создания фреймов в HTML шаг за шагом.

Первым делом нам нужно присвоить name для фрейма, в котором должны открываться ссылки. В разметке, которую мы создали чуть ранее, можно использовать левый столбец для меню навигации, а центральный столбец в качестве целевого фрейма. Для этого нужно присвоить атрибут name целевому элементу:

Предоставление резервного варианта noframes

Как сделать фреймы адаптивными

При применении фреймов довольно сложно обеспечить удобство использования для посетителей, заходящих на сайт со смартфонов и небольших планшетов. Так как фреймы были полностью удалены из HTML5 и считаются устаревшими, важно, чтобы владельцы сайтов, созданных с использованием фреймов, запланировали перестройку своих ресурсов и переход на другие технологии.

Использование строк, а не столбцов

Используйте проценты для ширины столбцов

Когда размеры столбцов задаются в процентах, а не в пикселях, они будут автоматически изменяться в зависимости от размера экрана устройства. Хотя это может создать определенные проблемы, связанные с тем, что некоторые фреймы могут стать слишком маленькими, но в целом опыт взаимодействия и просмотра будет лучше, если общая ширина столбцов задается в процентах, а не в пикселях.

Как перейти с фреймов на другие технологии

Оценка контента, содержащегося во фреймах

Стратегия для вашего нового сайта

Переход на CMS на начальном этапе потребует больше времени, но в долгосрочной перспективе преимущества от запуска современного сайта перевесят краткосрочные сложности. Чтобы помочь вам определиться с системой управления контентом, рекомендуем обратить внимание на три самые популярные из них:

Дополнительные ресурсы

Если вы хотите узнать о фреймах HTML больше, лучшим источником для получения дополнительной информации является World Wide Web Consortium ( W3C ). Вот некоторые из страниц с информацией о фреймах:

Связанные элементы

width создает встроенный фрейм, который выводит в текущий документ независимый HTML-документ. frameset frameborder

bordercolor Элемент использовался, чтобы создать группу фреймов, которые могут управляться и стилизоваться, как одно целое. На данный момент фреймы в HTML устарели и не должны использоваться. frame Src

bordercolor Элемент использовался, чтобы разбить окно браузера на несколько независимых частей. На данный момент фреймы устарели и не должны использоваться.

Пожалуйста, опубликуйте ваши отзывы по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, лайки, подписки, дизлайки, отклики!

Дайте знать, что вы думаете по этой теме статьи в комментариях. Мы очень благодарим вас за ваши комментарии, лайки, отклики, подписки, дизлайки!

Источник

Фреймы

Фреймы – это прямоугольные области экрана, каждая из которых содержит свой собственный html-документ. Фреймы использовались для оформления следующих документов:

Тег заменяет тег и используется для разделения экрана. Имеет закрывающий тег.

Атрибуты тега

Пример

Пример

Обратите внимание также на различие в порядке нумерации фреймов.

Атрибуты тега

Пример

Использование тега a для загрузки во фрейм

С помощью тега гиперссылки можно загрузить документ в определенный фрейм.

Атрибуты

В следующем примере экран разбивается на две вертикальные области. В меньшей левой части находится оглавление, а в правую будут загружаться все остальные html-документы. В файле оглавления находятся простые текстовые гиперссылки на соответствующие разделы. Чтобы все работало, необходимо создать html-документы в файлах cosm.htm, eat.htm, perf.htm, massage.htm и manic.htm.

Пример

Использование тега даст возможность уменьшить размер файла оглавления left.htm предыдущего примера.

Пример

Специальные эффекты, получаемые с помощью атрибута target

Как уже упоминалось, имена фреймов не могут начинаться с символа подчеркивания, так как с него начинаются служебные имена, передающие браузеру особую информацию. Ниже перечислены специальные имена, каждое из которых используется для достижения определенного эффекта.

В основном эти служебные имена предназначены для того, чтобы тем или иным способом «вырваться» из текущей фреймовой структуры. Поэкспериментируйте с ними, чтобы понять, как можно загружать документы в различные окна.

С помощью тега можно поместить один фрейм в обычный html-документ. Закрывающий тег обязателен!

Атрибуты тега

Определяет, что будет показано в окне браузера, если он не поддерживает фреймы.

Как загрузить фрейм без дополнительных файлов?

Чтобы загрузить фрейм без использования внешних файлов, необходимо положить в переменную html-код фрейма, а затем в качестве SRC тега указать «javascript:parent.имя переменной«.

Проблема адресной строки при фреймовой структуре сайта

При использовании фреймов на сайте используется одна страница, которая указывает местоположение фреймов.

Приведём пример такой страницы:

После загрузки этой страницы происходит загрузка информации во фреймы. Внутри этих фреймов происходят все переходы пользователя по страницам сайта. В адресной строке всегда отображается только путь к начальной странице, который не изменяется при переходах. Посетитель не знает, где он находится в данный момент.

Если посетитель сразу попадает не на главную страницу сайта (например, из поисковика), то это не приводит к воссозданию общей структуры фреймов. Это является причиной того, что владелец сайта не может указать адрес на внутреннюю страницу сайта.

Есть несколько путей решения этой проблемы

Ранее был рассмотрен пример фреймовой структуры. Будем рассматривать различные способы решения этой проблемы именно на нём.

Возможны три случая:

В первом случае после выполнения проверки никаких действий не требуется. Второй и третий практически идентичны, поэтому далее будем рассматривать только второй случай.

Итак, посетитель попадает «куда не надо». В самое начало страницы вставляем скрипт, который будет создавать фреймовую структуру.

Реализация решения возможна как на стороне клиента, так и на стороне сервера.

JavaScript-решение

Вначале проверяем окружение страницы, а затем, в случае отсутствия требуемой фреймовой структуры, создаём её.

Создадим файл frame.js:

К каждой странице сайта подключаем файл frame.js. Теперь страницы сайта будут иметь такую структуру:

При таком подходе к решению данной задачи исчезает необходимость в файле, содержащем фреймовую структуру.

PHP-решение

При таком подходе сайт станет доступным большему числу посетителей.

Проверять окружение страницы будем по другому (не так, как при использовании JavaScript). Загрузку документа во фрейм будем выполнять с параметром frames=yes. При открытии страницы проверяем этот параметр, и в случае необходимости динамически создаём фреймовую структуру. Ниже приведён код, который за это отвечает.

Помещаем код в файл frames.php. Теперь необходимо подключить его к каждой странице сайта. Ниже приведён пример такой страницы.

В данном случае, как и при реализации на стороне клиента нет необходимости отдельно создавать html документ, описывающий фреймовую структуру.

Источник