Фрейм - это что? Структура и создание фреймов

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

Но в основном фреймы используются в создании крупных веб-порталов, где требуется немалое количество пунктов меню и подменю. О таких обычно говорят: "сайт на фреймах". Для создания подобного ресурса требуется хорошее знание HTML-языка.

Создание фреймов в конструкторе сайтов

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

Но в основном фреймы используются в создании крупных веб-порталов, где требуется немалое количество пунктов меню и подменю. О таких обычно говорят: "сайт на фреймах". Для создания подобного ресурса требуется хорошее знание HTML-языка.

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

Фреймы в CMS

Во многих программах для создания сайтов предусмотрена возможность установки соответствующего модуля. Например, для Joomla фрейм - это модуль "Обёртка (Wrapper)".

Его можно найти и создать в панели управления CMS Джумла: "Расширения" - "Менеджер модулей" - "Создать" (круглая кнопка оранжевого цвета с плюсиком внутри). Во всплывающем окне, в списке, вы увидите модуль "Обёртка".

Если его здесь не будет, значит, он не включен. Чтобы воспользоваться ним, сначала нужно его активировать здесь: вкладка "Расширения", далее "Менеджер расширений", далее вкладка "Управление". И ищем в открывшемся списке, можно для быстрого поиска в поле "Фильтр" ввести слово: Wrapper. Напротив данного модуля должен стоять значок зелёного цвета с галочкой внутри. Красный кружок с точкой внутри будет означать, что данный плагин выключен.

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

Как видно на картинке, модуль позволяет установить: заголовок над фреймом, позицию модуля, выбрать страницы сайта, на которых он будет отображаться. А также настроить ширину, высоту; добавить рамку и собственно ссылку на веб-страницу. Если во фрейме вы хотите отобразить главную страницу какого-либо сайта во всю ширину, то 100%, установленных по умолчанию, будет недостаточно. Можно сразу смело ставить 400%. Высоты 200 обычно хватает, чтобы отобразить верхнее меню страницы. Весь остальной контент будет виден, если пользователь (посетитель сайта) воспользуется полосой прокрутки.

Вот пример того, что такое фрейм в Джумле.

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

История и реалии

В практике создания сайтов из фреймов этот тег (его применение) уже давно отошел на второй план. Их смогли заменить модули, настройки в программах-конструкторах, генерирующие код для веб-страницы без участия сайтостроителя. Однако в некоторых случаях этого бывает недостаточно. Например, когда фрейм - это целостная сложная структура из областей, отображаемых в браузере. Так видят его владельцы сложноструктурированных сайтов. На её создание идут только в крайних случаях, поскольку фреймовские сайты создаются исключительно при помощи специализированных тегов.

Сложноструктурированные сайты

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

Как добиться такого же результата? Как создается структура фрейма?

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

Фреймы в HTML добавляют при помощи тегов:

• frame (для отдельного окна);
• frameset (при помощи него создается целая структура);
• iframe ("плавающий" фрейм);
• noframes (на случай неотображения фрейма в браузере пользователя).

Первый указанный тег всегда вписывается в паре <frameset> и </frameset>. Причем она заменяет <body> и </body>. А при помощи соответствующих атрибутов можно корректировать характеристики каждого элемента: название (name=), размер (cols= и rows=), наличие рамки (border), вид полосы прокрутки и, конечно, ссылку на веб-страницу для отображения.

Вариации оформления

Всю страницу сайта можно разбить на области. Например, так:

Такую структуру (её называют вложенной) можно получить, прописав внутри тега атрибут cols, означающий расположение фрейма по горизонтали, и rows - по вертикали. Следом ставится знак = и прописываются размеры. Например, 60%, 40% - процентное соотношение (одно окно займет 60% пространства браузера, другое, соответственно, 40%). Или 100, 200 - соотношение размеров в пикселях. Размеры одного из фреймов можно вообще не задавать (установится по умолчанию). Для этого после или перед запятой нужно указать символ *.

Внутри этой пары frameset прописывает каждый фрейм с параметрами: src=, далее в кавычках дается ссылка на веб-страницу и name= с заголовком (например, Фрейм 1).

Вложенность каждой новой области обозначается новым frameset.

Пример кода: <frameset rows="50" cols="80,20"> <frame SRC="[ссылка на страницу]" name="Фрейм № 1"> <frameset rows="80,20"> <frame SRC=" [ссылка на страницу]" name="Фрейм № 2"> <frame SRC="[ссылка на страницу]" name="Фрейм № 3"> </frameset> </frameset>

Заметьте, в нашем примере для фреймов второго и третьего размеры прописываются только один раз.

Множество задумок позволяют выполнить фреймы. Примеры их расположения в окне браузера можно приводить бесконечно (меняя код соответствующим образом). Однако практического применения эти сведения не находят уже давно. Фреймы, если и используются сегодня при создании сайтов, то только в виде модулей в бесплатных CMS или в виде iframe.

Плавающий фрейм

Странно, почему он получил такое название, здесь больше подходит слово "встроенный". Этот фрейм создан для отображения содержимого файла. Вы загружаете в базу какой-либо документ или файл, при помощи тегов айфрейма прописываете путь к нему - и посетители увидят текст файла (видео или изображение). К сожалению, браузеры не всегда отображают содержимое. Для этого веб-строители вписывают между открывающим и закрывающим тегом фразу: "Ваш браузер не отображает содержимое".

Например, Seopult.ru - известный сервис у мастеров по продвижению. Только не его основной сайт, а зеркало I.seopult.pro, созданное для клиентов портала. Код айфрейма здесь прописан так: <li><a HREF="[ссылка на страницу]">Инструкция</a></li>. Где тег <li> создан для определения элемента списка. Поддерживается всеми браузерами.

На самой странице зеркала можно увидеть слово "Инструкция" в виде кнопки. При нажатии на неё в центре окна браузера открывается презентация.

Все крупные сайты для просмотра фильмов и сериалов созданы при помощи айфреймов (например, "Имхонет"), так же как и социальные сети. Даже главная страница "Яндекса" содержит этот тег, и не одну пару.

Как прописать iframe

Закачать на сайт документ в виде окошка с полосой прокрутки можно в любое место. Обычно теги располагают внутри body. Помимо стандартного <p> и </p>, как было показано на примере выше, может использоваться и тег списка - <li>.

В айфрейм добавляются атрибуты:

• ширины (width) и высоты (height=);
• выравнивания по краю align;
• отступов, которые можно и не прописывать: по умолчанию задается значение 6 - этого вполне достаточно;
• при помощи allowtransparency можно задать прозрачность области фрейма, чтобы было видно фон страницы;
• плюс уже знакомые scr, name, scrolling, border.

Навигация при помощи айфрейма

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

Для этого берется айфрейм, в нем дополнительно прописывается имя через name=. Например, zagolovok. Далее перед ним в тегах <a> и </a> прописываются ссылки через a HREF = с обязательным указанием после них атрибута target=zagolovok. Перед тем как использовать закрывающий тег а, указывается надпись, которая будет служить ссылкой-кнопкой. Теги "а" открывающие и закрывающие заключаются в тег p.

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

Код будет выглядет так:

<p> <a HREF="[ссылка на страницу]" target= "zagolovok"> Подать объявление </a>

<a HREF ="[ссылка на страницу]" target= "zagolovok"> Просмотреть объявления </a> </p>

<p> <iframe SRC="[ссылка на страницу]" name="zagolovok" width="100%" height="200"> </iframe> </p>

Как это будет выглядеть на сайте:

Как вставить iframe в сайт Джумла

Стандартно в панели управления Джумла есть включенный (т. е. готовый к использованию) модуль "HTML-код". При помощи него можно вставить любой код в любое место на сайте. Однако код с тегом айфрем он упорно игнорирует. Поэтому будем использовать специальный модуль Jumi.

Прежде всего его нужно скачать из интернета и установить к себе через административную панель Джумла: "Расширения" - "Менеджер расширений" - "Выбрать файл". Укажите путь к скачанному архиву и нажмите "Загрузить".

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

Браузеры и фреймы

Все популярные браузеры хорошо отображают содержимое окон frame: Chrome, Safari, Firefox, Android, iOS. Особенно высокий показатель в этом отношении у Internet Explorer и Opera. И всё же нет гарантии, что посетитель вашего сайта увидит содержимое всех окон. На этот случай следует оставить сообщение при помощи тега noframe (открывающего и закрывающего). В него можно вписать следующее: "Ваш браузер устарел. Для отображения содержимого сайта обновите версию". Если браузер пользователя правильно отображает фреймы, то это сообщение он не увидит.

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