Как вы думаете, каковы должны будут получиться размеры 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 с запретом их индексации:
JOOMLA
Но все эти ограничения касаются только структур на тегах Frame и Frameset, а встроенные фреймы на тегах Iframe
не имеют никаких видимых недостатков, и их вполне можно и даже нужно использовать на своих проектах, хотя бы для вставки видеороликов с Ютуба.
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов)
Embed и object - Html теги для отображения медиа контента (видео, флеш, аудио) на веб страницах
Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C
Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Списки в Html коде - теги UL, OL, LI и DL
Теги Font (Face, Size и Color), Blockquote и Pre - устаревшее форматирование текста в чистом HTML (без использования CSS)
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
Тег
Тег
Синтаксис
...
Параметры
align
Определяет как фрейм будет выравниваться по краю, а также способ обтекания
его текстом.
frameborder
Устанавливает, отображать границу вокруг фрейма или нет.
height
Высота фрейма.
hspace
Горизонтальный отступ от фрейма до окружающего контента.
name
Имя фрейма.
scrolling
Способ отображения полосы прокрутки во фрейме.
src
Путь к файлу, содержимое которого будет загружаться во фрейм.
vspace
Вертикальный отступ от фрейма до окружающего контента.
width
Ширина фрейма.
Закрывающий тег
Обязателен.
Пример 1. Использование тега
Тег IFRAME
Ваш браузер не поддерживает плавающие фреймы!
Описание параметров тега
Параметр ALIGN
Описание
Для плавающего фрейма можно указать его положение на веб-странице или задать
способ обтекания текстом или другими элементами веб-страницы. Способ выравнивания
задается параметром align
тега
.
Синтаксис
...
Аргументы
absmiddle
Выравнивание середины фрейма по середине текущей строки.
baseline
Выравнивание фрейма по базовой линии текущей строки.
bottom
Выравнивание нижней границы фрейма по окружающему тексту.
left
Выравнивает фрейм по левому краю окна.
middle
Выравнивание середины фрейма по базовой линии текущей строки.
right
Выравнивает фрейм по правому краю окна.
texttop
Верхняя граница фрейма выравнивается по самому высокому текстовому элементу
текущей строки.
top
Верхняя граница фрейма выравнивается по самому высокому элементу текущей
строки.
Наиболее популярные параметры — left
и right
,
создающие обтекание текста вокруг фрейма. Чтобы текст не прилегал плотно к содержимому
фрейма, рекомендуется в теге
добавить
параметр hspace
и vspace
,
задающих расстояние до текста в пикселах.
Значение по умолчанию
Пример 2. Выравнивание плавающего фрейма
Тег IFRAME, параметр align
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
Параметр FRAMEBORDER
Описание
По умолчанию вокруг содержимого фрейма рисуется рамка с эффектом трехмерности.
Чтобы ее скрыть применяется параметр frameborder
.
Синтаксис
...
...
Аргументы
yes (или 1)
Отображает рамку вокруг фрейма.
no (или 0)
Скрывает рамку вокруг фрейма.
Значение по умолчанию
Пример 3. Сокрытие исходной рамки вокруг фрейма
Тег IFRAME, параметр frameborder
Параметр HEIGHT и WIDTH
Описание
Для изменения размеров фрейма средствами HTML предусмотрены параметры width
и height
. Допускается использовать значения в пикселах
или процентах. Если установлена процентная запись, то размеры фрейма вычисляются
относительно родительского элемента — контейнера, где находится тег
.
В случае отсутствия родительского контейнера, в его качестве выступает окно
браузера. Иными словами, width="100%"
означает, что фрейм будет занимать всю ширину веб-страницы.
Если значение высоты или ширины не заданы, то фрейм автоматически принимает
размер 300 х 150 пикселов.
Синтаксис
...
...
Аргументы
Любое целое положительное число в пикселах или процентах.
Значение по умолчанию
width — 300 пикселов, height — 150 пикселов.
Пример 4. Ширина и высота фрейма
Тег IFRAME, параметр width
Параметр HSPACE и VSPACE
HTML:
3.2
4
XHTML:
1.0
1.1
Описание
Для любого фрейма можно задать невидимые отступы по горизонтали и вертикали
с помощью, соответственно, параметров hspace
и
vspace
. Особенно это актуально при обтекании содержимого
фрейма текстом. В этом случае, чтобы текст не «наезжал» плотно на
границу фрейма, необходимо вокруг него добавить пустое пространство.
Синтаксис
...
...
Аргументы
Любое целое положительное число в пикселах.
Значение по умолчанию
Пример 5. Поля вокруг фрейма
Тег IFRAME, параметр hspace
Параметр NAME
Описание
В обычном HTML-документе при переходе по ссылке, в окне браузера текущий документ
заменяется новым. Чтобы направить содержимое во фрейм, он должен иметь уникальное
имя, задаваемое атрибутом name
. В этом случае при
создании ссылки у тега
требуется указать параметр
target
, в качестве значения которого выступает
имя фрейма.
Синтаксис
...
Аргументы
Для указания имени используется набор символов, включая числа и буквы. При
обращении к фрейму по имени соблюдайте то же написание, что и в параметре name
.
Значение по умолчанию
Тег IFRAME, параметр name
Чебурашка
Крокодил Гена
Шапокляк
Параметр SCROLLING
Описание
Если содержимое фрейма не помещается в отведенные размеры, автоматически появляются
полосы прокрутки для просмотра информации. В некоторых случаях, полосы прокрутки
нарушают дизайн веб-страницы, поэтому от них можно отказаться. Для управления
отображением полос прокрутки используется параметр scrolling
.
Синтаксис
...
Аргументы
auto
Полосы прокрутки добавляются браузером только по необходимости, в том случае,
когда содержимое фрейма превышает его видимую часть.
no
Запрещает отображение полос прокрутки.
yes
Всегда вызывает появление полос прокрутки, независимо от объема информации.
Значение по умолчанию
Пример 7. Сокрытие полос прокрутки
Тег IFRAME, параметр scrolling
Параметр SRC
Описание
Указывает адрес файла (URL), который будет загружаться во фрейм. Это может
быть HTML-документ, изображение или серверная программа. Допустимо использовать
не только путь к файлу, но также имя функции JavaScript, которое возвращает
значение.
Синтаксис
...
Аргументы
В качестве значения принимается полный или относительный путь к файлу.
Значение по умолчанию
Пример 8. Путь к файлу
Тег IFRAME, параметр src
Теги фреймов
FRAME определяет свойства отдельного фрейма, на которые делится окно браузера. FRAMESET определяет структуру фреймов на веб-странице. Фреймы разделяют окно браузера на отдельные области, расположенные вплотную друг к другу. В каждую из таких областей загружается самостоятельная веб-страница определяемая с помощью тега FRAME. IFRAME создает плавающий фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы. NOFRAMES отображается в браузере, когда он не поддерживает фреймы и не умеет их интерпретировать. Браузеры, которые работают с фреймами, полностью игнорируют содержимое тега NOFRAMES.
Элемент
Frames
Что же делает ?
Как вставить страницу в страницу HTML
? Для этого нужно использовать , который создает в текущем документе встроенный фрейм, в котором отображается другой HTML-документ
.
Отображение
Display block.
Пример кода
Мощный, но легкий в использовании
Еще в старые недобрые времена веб-дизайна было много элементов, портящих жизнь каждого разработчика. Они почти всегда были плохим подходом к дизайну. К счастью, элемент был объявлен устаревшим в HTML5
. Но или «встроенный фрейм
» по-прежнему доступен. Будет ли он устаревшим в следующей версии? Может, стоит его избегать? Есть несколько допустимых вариантов использования этого элемента при создании HTML
страницы. Но нужно понять, что это такое и как оно работает, чтобы избежать ошибок.
Сходства и различия и
Оба этих элемента позволяют создать отдельный HTML-документ
. Ссылка на содержимое документа, на который ссылается текущая веб-страница, указывается в атрибуте src
.
. . . . . .
Основное различие между и заключается в том, что обеспечивает соблюдение правила, о том, что HTML
документ в приоритете. Содержимое отображается внутри элемента, который является частью текущего документа. В качестве примера рассмотрим это встроенное видео, взятое из YouTube
:
Видео явно на HTML
странице, а не на какой-то отдельной панели. элемент сломал эту парадигму и позволил документу осуществлять контроль над окном браузера, разбив его на несколько мелких панелей (фреймов
), каждая из которых отображает отдельный документ. Все другие различия между и вытекают из этого основного различия.
Не переделывайте макеты на основе фреймов с помощью iframe
Когда-нибудь вам может попасться задача по обновлению старого сайта, который был построен с использованием фреймов. Возможно, вы захотите использовать и фиксированную ширину макета, чтобы воссоздать тот же кошмар из независимых панелей и подокон. Но вы не сможете использовать атрибут target
, чтобы открыть ссылку в отдельном фрейме. Вы можете начать искать решения на JavaScript
. Пожалуйста, не делайте этого.
Удачное (и ужасное) применение
Существует несколько допустимых вариантов использования для создания HTML
страницы:
встраивание стороннего медиа контента;
встраивание собственного медиа контента через кроссплатформенный документ;
встраивание примеров кода;
встраивание сторонних «апплетов
» в качестве форм оплаты.
А вот некоторые ужасные варианты использования :
Фотогалерея;
форум или чат.
Если вам нужно встроить независимые, уже существующие HTML-документы
в текущий, используйте . Если же вы строите все с нуля, нет никаких причин разбивать дизайн страницы на несколько самостоятельных документов. Особенно если они на самом деле не являются независимыми частями контента.
Атрибуты iframe
Название атрибута
Значение
Описание
sandbox
Allow-same-origin
Allow-top-navigation
Allow-forms
Allow-scripts
Задает ряд ограничений на контент, загружаемый во фрейм. Задается перед тем, как создать HTML страницу.
scrolling
yes no auto
Определяет показывать скроллы в фрейме или нет. Является устаревшим в HTML5. Вместо него используйте CSS.
Name
название
Задает имя фрейма.
Align
left right top
middle bottom
Определяет выравнивание фрейма относительно окружающих элементов. Является устаревшим. Вместо него используйте CSS.
frameborder
yes (или 1)
no
Используется для включения отображения границы вокруг фрейма. Является устаревшим в HTML5. Вместо него используйте CSS.
longdesc
URL
Используется, чтобы указать URL-адрес страницы, которая содержит длинное описание содержания фрейма. Является устаревшим. Вместо него используйте CSS.
marginwidth
пиксели
Используется для контроля ширины отступа от содержания до границы фрейма. Является устаревшим. Вместо него используйте CSS.
src
URL
Определяет URL-адрес документа для отображения в IFRAME.
vspace
пиксели
Устанавливает вертикальные отступы от фрейма до окружающего контента. Является устаревшим. Вместо него используйте CSS.
width
пиксели %
Определяет ширину фрейма на HTML странице.
Данная публикация представляет собой перевод статьи «
» , подготовленной дружной командой проекта