Подготовка фрейма main. Значение слова фрейм

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

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

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

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

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

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

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

Самое интересное умение в области создания фреймов - это написание кода, позволяющего открывать в окне контент по ссылке, - то, что сделали создатели зеркала 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. Применение этого тега по-прежнему актуально для загрузки в определенном окне презентаций, видеоплеера, текстовых документов. Его активно используют крупные и известные в сети веб-ресурсы.

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

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

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

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

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

На первый взгляд, фреймы – это нечто сложное, но их легче понять, если провести аналогию с ячейками таблицы. Расположение фреймов на экране задается почти так же, как ячеек в таблице: тэги и атрибуты работают так же, как их табличные родственники. Однако, хотя аналогия между единичным фреймом на странице и ячейкой таблицы полезна, нужно помнить, что есть и отличия. Содержимое ячейки задано в коде HTML-страницы с таблицей. Текст или графика, составляющие содержимое таблицы, фактически вводятся на той же самой странице HTML, что и тэг или атрибут, описывающие таблицу. Напротив, экран с фреймами описывается в НТМL-странице, называемой (frameset). Содержимое же фрейма – это отдельная HTML-страница, которая может находиться где угодно – в другом каталоге, на локальном сервере или на удаленном узле где-то в сети. Фреймовая структура определяет только способ организации экрана с фреймами и указывает, где находится начальное содержимое каждого фрейма. Для всех фреймов задаются URL, описывающие местонахождение их данных. Как правило, на странице с фреймовой структурой нет содержимого фреймов. Такая страница обычно невелика, – она описывает только кадровую структуру экрана. Когда документ загружается во фрейм, можно щелкнуть мышкой на ссылке в этом документе, что вызовет появление связанных документов в других кадрах, заданных во фреймовой структуре.

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

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

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

Фрейм [англ. frame - каркас, остов, рамка, структура] - 1) в когнитивной психологии понятие, описывающее структурно оформленную единицу какого-либо конкретного знания, картинки, сценария, схемы и т. п., с помощью которой может быть идентифицирована воспринимаемая ситуация- 2) в психосемантике - структурно оформленная единица знаний, организованная вокруг некоторого понятия, и содержащая данные о существенном, типичном и возможном для этого понятия (например, набор предположений об устройстве формального языка для выражения знаний, в качестве альтернативы для семантических сетей). Слово Ф. многозначно - в пер. с англ. означает, "рамка вокруг картинки", "окно", "страница", "система координат" и др. В 1970-х гг. оно впервые было использовано американским ученым М.Л. Мински (M.L. Minsky), занимавшимся проблемами искусственного интеллекта. Он одним из первых создал теоретическую модель (названную "теорией фреймов") структур знания, которые лежат в основе повседневной когнитивной деятельности людей. Мински высказал предположение, что наше знание закодировано в блоках, называемых "фреймами" ("рамками"- метафору он заимствовал из фотографии), которые облегчают понимание многих аспектов каждодневных явлений, позволяя получить быстрый доступ к информации, хранящейся в памяти и соответственно отреагировать. Эти разработки М. Мински предвосхитили современные нейропсихо-логические исследования о модулярности психики. Развиваясь, понятие Ф. стало родовым по отношению к понятиям "схема" в когнитивной психологии (Ф.Ч. Бартлет, 1932), сцена, сценарий, когнитивная модель, модуль (Ch.J. Fillmore, 1975), ассоциативные связи (G.H. Bower, 1972), семантическое поле. Например, понятие "сцены" ассоциировано с определенными языковыми Ф., при этом под "сценами" понимаются не только зрительные образы, но и иные виды внутренних мысленных образов (L. Talmy, 1977). Ф. организуют наше понимание мира в целом, а тем самым и обыденное поведение.

При этом Ф. могут выступать типовыми классификаторами (будучи зафиксированными в памяти как "ярлыки к целым сценам"), эталонами, с которыми сравниваются содержания, подлежащие классификции. С каждым Ф. связаны несколько видов информации: (1) о его использовании- (2) о том, что следует ожидать- (3) что делать, если ожидания не подтвердятся. Формально Ф. представляют в виде структуры узлов и отношений между ними. Кроме связей внутри Ф. возможны и межфреймовые отношения, когда они комбинируются в более крупные модули или рамки (библиотеки Ф.). Верхние (базовые) уровни Ф. фиксированы и соответствуют вещам (сущностным значениям) всегда справедливым по отношению к предполагаемой ситуации. Ниже этих узлов - терминальные узлы (или слоты), которые указывают на условия, которым должно отвечать его заполнение. Часто такое заполнение представляется как "подфрейм" (или вложенный Ф.). Наиболее наглядно фреймовые структуры выступают на экране компьюьера, являясь средством доставки дополнительной информации и форматирования страницы. Они позволяют разделить окно просмотра браузера на несколько прямоугольных областей (в этом Ф. очень похожи на таблицы). При помощи Ф. можно не только разделить страницу на несколько частей, но и решить задачу взаимодействия между этими частями, т. к. в каждый Ф. можно загрузить отдельный документ, выступающий как бы самостоятельной web-страницей. В результате человек, просматривающий страницу на экране компьютера, может изучать одну часть страницы независимо от остальной части. Фреймовая структура, естественно, может существовать не только на экране компьютера, но и в виде "картинки" или текстового описания на бумаге. Однако продуктивная работа с фреймовыми структурами, представляющими собой различные сложно организованные базы данных, стала возможной только с применением компьютеров. Это направление получило название "фреймовая семантика" (Ch.J. Fillmore, 1977). Оно объединяет разные типы формализованного описания деятельности человека в контексте ситуации.

Л.А. Карпенко

Определения, значения слова в других словарях:

Большой словарь эзотерических терминов - редакция д.м.н. Степанов А.М

(от англ., frame – рамка, остов, скелет). 1. Минимальное описание какого-либо явления, факта или объекта, обладающее свойством, благодаря которому удаление из этого описания любой составляющей приводит к тому, что данное явление, факт или объект перестают правильно опознаваться...

Философский словарь

(от англ. frame - каркас, остов) - понятие, введенное в 1974 г. специалистом по искусственному интеллекту М. Минским для лучшего представления и моделирования феномена "быстродействия" человеческого мышления. Минский определяет Ф. как структуру данных для представления...

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

Предназначение фреймов

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

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

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

Принципы работы фреймов

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

Структура должна быть построена так, чтобы было понятно, где находится “начинка” каждого фрейма. Чтобы точно определить адрес каждого из них, присваивается индивидуальный URL.

Алгоритм создания фреймовой структуры

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

Существует стандартный перечень, который позволит более подробно разобраться, как же выстраивается эта структура:

1. Сперва нужно определить, какой вид будет иметь страница, какой размер будет у фреймов.
2. Обдумать их содержание.
3. Разработать код с использованием тагов, которые будут нести определенную смысловую нагрузку. От них будет зависеть, сколько окон будет на экране, какой процент будет занимать каждое из них и т.д.
4. Нужно заполнить пустые фреймы содержимым.

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

Таги и атрибуты – важные составляющие фреймов

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

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

Также существуют целевые фреймы, которые применяются в исключительных случаях. К таким можно отнести:

1. Фрейм “blank”, который позволит документу загружаться в новом пустом окне.
2. Инструмент “self” укажет на то, что документ будет размещен в том фрейме, где активирована ссылка.
3. Фрейм “tор” разрешает документу появляться в другом окне вне фрейма.

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

Здравствуйте, уважаемые читатели блога сайт. Сегодня речь пойдет о фреймах в языке Html. Понятное дело, что начнем мы сначала, а именно с того, что это такое за зверь. Так же поговорим о настоящем (Frame) и будущем (Iframe) этих элементов в языке гипертекстовой разметки текущей версии и в новом стандарте Html 5 при .

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

Что это такое и чем отличается Iframe от Frame

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

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

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

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

Как создается фреймовая структура в языке гипертекстовой разметки? Если говорить про стандарт Html 4.01 (по классификации ), который является основным на текущий момент времени, то для этого используются три элемента — Frame, Frameset и Noframes.

Iframe — встроенный фрейм в стандарте Html 5

Если же говорить про стандарт Html 5 (наше будущее, некоторые элементы которого уже поддерживаются многими браузерами), то там тегов Frame, Frameset и Noframes, а равно и классической фреймовой структуры уже не будет, вместо них предусмотрен один единственный тэг Iframe (встроенный фрейм), о котором мы и поговорим в начале, а потом уже все внимание обратим на классическую схему из версии 4.01, которая сейчас, собственно, и используется.

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

Он является строчным с замещаемым контентом, потому что ведет себя в точности как строчный элемент, но вот внутри него отображается посторонний внешний контент . Таких элементов в языке Html всего четыре — Img, Iframe, Object и Embed. Поэтому наш герой подразумевает наличие внешнего файла, который будет подгружаться в область, размер которой задается с помощью атрибутов этого тега.

Т.о. Iframe является сточным элементом, в который загружается внешний объект (например, видеоролик). А для указания пути до этого файла, который должен подгружаться на странице, служит специальный атрибут Src. Но в отличии от Img элемент Iframe парный, т.е. имеется еще и закрывающий тег :

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

Т.е. этот тег создает область, в которую загружается какой-то внешний объект (не важно, с вашего ли сайта или же с другого ресурса). Ширина и высота области задаются с помощью Width и Height, а в атрибуте Src указывается путь до этого объекта.

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

Так же показательно, что выравнивание встроенного фрейма осуществляется абсолютно так же, как мы это могли видеть при изучении картинок в Html — . Все тот же Align , но уже для тега Iframe с возможными значениями Bottom, Top, Middle, Left и Right.

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

Так же в Iframe из тега Frame перекочевал атрибут Frameborder, который имеет только два значения — либо 0 (рамка вокруг фрейма не отображается), либо 1 (рамка видна). По умолчанию используется значение Frameborder=1, поэтому для ее удаления вам потребуется прописать Frameborder="0":

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

Ну, и атрибуты Marginwidth и Marginheight тоже перешли из элемента Frame. Они будут подробно рассмотрены ниже по тексту, но в двух словах — они позволяют задать отступ по ширине и высоте от краев фрейма до контента, который в него помещается.

Как я уже упоминал, наглядным примером использования Iframe является :

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

Фреймы на основе тегов Frame и Frameset — их структура

Итак, создание классической фреймовой структуры начинается с того, что вы прописываете в Html коде вместо открывающего и закрывающего тега Body, который обычно должен присутствовать в любом документе, заменяющий его контейнер на основе элементов Frameset .

Принципиальным моментом является как раз то, что элемент Body в этом случае использовать нельзя — либо Body (для обычного документа), либо Frameset (при создании фреймовой структуры документа):

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

Третий элемент, который мы еще с вами не затронули — это Noframes . Он парный и позволяет написать внутри себя какой-то текст, который будет обработан браузером и отображен на web странице только в том случае, если этот самый браузер (или другое устройство отображения) не поддерживает фреймы. Это может произойти, например, в случае использования какого-нибудь обозревателя для мобильных устройств.

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

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

Делается это с помощью добавления соответствующих атрибутов к элементу Frameset. Их имеется целых два — Cols и Rows . Cols задает разделение большого окна на вертикальные фреймы или же колонки, а Rows позволяет разделить его на горизонтальные окна или же строки.

Создание структуры на основе Frameset и его атрибутов Cols и Rows

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

Например, с помощью такой записи мы получим три вертикальных колонки, которые по ширине будут соответствовать пропорциям 2:5:3.

Раз мы задали пропорции для трех фреймов, то мы должны будем обязательно прописать между открывающим и закрывающим тегом Frameset три элемента Frame, хотя бы и без указания дополнительных атрибутов:

В результате наша фреймовая структура, состоящая из трех пустых окон, будет выглядеть так:

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

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

Давайте посмотрим на примере. Теперь выберем деление области просмотра на горизонтальные строки с помощью Rows:

Что означает эта запись? Вся область просмотра, доступная нам по вертикали, будет разделена на три строки. Высота первой будет взята в 200 пикселей, второй — в 500, а вот третья строка будет занимать все оставшееся пространство по высоте, т.к. в качестве ее размера использовалась «*».

Что примечательно, значение «*» и «1*» означают одно и то же — все оставшееся пространство мы делим на один и эту одну часть отдаем данному фрейму (ну, то есть все оставшееся пространство).

А вот посмотрите что получится, если использовать значение «*» с цифрой для деления в пропорции:

Как вы думаете, каковы должны будут получиться размеры Frame в этом случае? Понятно, что вторая строка будет однозначно иметь высоту в 100 пикселей. Но как поделится оставшееся пространство по высоте между третьей и первой строкой?

Это довольно просто сосчитать — достаточно прибавить к двум (2*) четыре (4*) и разделить на этот знаменатель (помните дроби из школьной программы) двойку и четверку. Т.е. мы получим, что первая колонка с фреймом займет одну треть от оставшегося пространства по высоте, а третья колонка — две трети. Или же, другими словами, третья будет в два раза выше первой:

Можно использовать все три способа задания размеров окон фреймов в одном атрибуте, например:

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

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

Т.е. сначала мы разбиваем с помощью «frameset cols=»20%,80%"« все доступное пространство на две колонки по вертикали и задаем тегом „frame“ содержимое правой колонки, а вот вместо того, что добавить элемент „frame“ для левой колонки, мы открываем новый „frameset rows=“10%,*»".

И уже с помощью него разбиваем правую колонку на две строки с фреймами, содержимое которых задаем с помощью двух тегов «frame», после чего закрываем оба контейнера «frameset». Все просто и логично.

Указываем путь в атрибуте Src элемента Frame

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

Итак, как же мы управляем внешним видом создаваемых окон? Все это заложено в атрибутах тега Frame. Первый из них, о котором стоит упомянуть — это Src . Мы уже встречали его в теге Img, когда рассматривали вставку изображений в Html код. Суть его не изменилась и он по-прежнему позволяет указать путь до того документа, который должен быть загружен во фрейм.

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

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

Поэтому мне было проще всего использовать именно относительные ссылки в атрибуте Src тега Frame:

Что примечательно, если вы замените все приведенные в этом коде ссылки с относительных на абсолютные (типа https://сайт/navigator/joomla.html) и откроете этот файл в браузере, то указанные во Frame документы будут подгружены с моего сервера и вы увидите аналогичную картинку в своем браузере. Причем не важно, где будет лежать ваш файл с фреймовой структурой (index.html) — на вашем компьютере или же на хостинге.

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

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

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

Итак, когда мы говорили про гиперссылки, то упоминали такой атрибут тега «A», как Target=_blank. Помните для чего он нужен? Правильно, чтобы открывать документ, на который проставлена ссылка, в новом окне. По умолчанию же, он должен открываться в том же самом окне, что эквивалентно target="_self".

Но этим возможности Target не ограничиваются. Оказывается можно добавлять в него значение в виде названия фрейма , которое предварительно указывается в специальном атрибуте Name тега Frame. Тогда документ по этой ссылке будет открываться не в том же окне, занимая все его пространство, а в указанном вами Frame. Понятно? Если не совсем, то сейчас будет понятно при разборе примера.

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

Сделали и назвали его «ktona». Теперь можно смело открывать тот файл, что подгружается в качестве меню в левое окно и добавлять ко всем тегам A в нем атрибут Target="ktona":

История появления Joomla и компонента VirtueMart

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

Достаточно лишь поставить между открывающим и закрывающим тегами Head элемент base target="ktona" и все ссылки в Html коде этого документа будут открывать новые страницы в указанном фрейме под названием «ktona»:

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

Ну, во-первых, нужно дать имя левому вертикальному фрейму:

А в файле, который загружается в верхнее окно (gor.html), нужно добавить элемент base target="gor":

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

Атрибуты тега Frame для настройки внешнего вида окон

Давайте теперь посмотрим, какие атрибуты кроме Src и Name можно использовать в теге Frame для настройки внешнего вида фреймов. Начнем с Scrolling . С помощью него мы можем настроить отображение полос прокрутки для каждого окна вашей фреймовой структуры в отдельности.

Scrolling имеет значение по умолчанию Auto — браузер будет автоматически решать, на основе размера подгружаемого во фрейм документа, отображать полосу прокрутки или нет. Если документ не будет полностью помещаться в окно, то появится полоса прокрутки, позволяющая просмотреть его весь до конца.

Так же в качестве значений для Scrolling можно использовать значения Yes (полосы прокрутки в окне будут отображаться всегда, даже если документ полностью влезает в него) и No (полосы прокрутки вообще никогда появляться не будут, даже если часть документа не влезет).

Я в своем, когда-то существовавшем инструменте, использовал значение по умолчанию Auto и полосы прокрутки во фреймах появлялись по мере необходимости:

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

При подведении курсора мыши к границе вы увидите, что курсор превратится в двунаправленную стрелку и теперь, нажав на левую кнопку мыши, можно передвигать границу по вашему желанию. Noresize накладывает на это своеволие запрет (при подведении курсора мыши к границе окон, двунаправленную стрелочку вы уже не увидите).

Еще один визуальный атрибут — Frameborder . C помощью него вы можете указать — рисовать рамку (границу) между фреймами или же не рисовать. Frameborder может иметь только два возможных значения — либо 0 (рамку не рисовать), либо 1 (границу отображать). По умолчанию, естественно, используется значение 1.

Есть одна тонкость. Если вы хотите убрать видимую рамку, то вам придется добавить Frameborder=0 во все теги Frame тех фреймов, видимые границы между которыми вы хотите убрать.

Ну, и еще нам осталось рассмотреть пару атрибутов тега Frame — Marginwidth и Marginheight , которые задают отступы по ширине (справа и слева) и высоте (сверху и снизу) от границ окна до контента загруженного в него (число означает количество пикселов отступа):

Почему нельзя делать сайт на фреймах?

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

У сложных структур могут быть тысячи различных состояний (варианты документов открытых в различных окнах фреймов), но при этом Url адрес этой самой структуры не меняется. Из-за этого будет невозможно пользоваться закладками браузера или же отправлять ссылки на понравившиеся страницы другим пользователям. Почему?

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

Хотя, конечно же, эта проблема решаема, но уже не средствами Html, а с помощью серверных (например, Php) или клиентских языков (ДжаваСкрипт) программирования, и решения эти будут работоспособными не на все сто процентов. Такие решения, по сути, позволяют дописывать к Url адресу фреймовой структуры дополнительные данные о ее текущем состоянии, но сделать это не просто, а надежность будет не абсолютной.

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

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

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

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

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

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

Но, правда, во избежании каких-либо проблем с поисковыми системами, я закрыл от всю эту фреймовую структуру, а так же добавил на всякий случай во все ее Html файлы мета тег Rodots с запретом их индексации:

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

Удачи вам! До скорых встреч на страницах блога сайт

посмотреть еще ролики можно перейдя на

Вам может быть интересно

Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов)
Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)