Триколор 

Создание фреймов в html. История и будущее фреймов. Форматирование рамки и отступов вокруг фрейма

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

Что такое Фреймы в html

Фрейм (англ. frame) - некоторая подключаемая независимая область на веб-странице.

Не пугайтесь, что это звучит немного непонятно. Давайте сразу приведем самый простой пример и тогда все станет ясно.

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

Рис 1. Использования фреймы на примере хелпа блокнота

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

Пример с фреймами №1 (делаем помощь)

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


Рис 2. Каркас использования фреймов для примера №1

Разбиение страницы на области с помощью фреймов очень напоминает табличную верстку html (см. HTML тег table). Примерный код такой страницы может выглядеть следующим образом:

<span>Пример №1 html-страницы с фреймами </span>
Пояснение к примеру №1

Как видно из кода выше, страница созданная из фреймов очень похожа на обыкновенную html-страницу: есть открывающий тег html, раздел , заголовок , но есть одно большое различие. Наверное, Вы обратили внимание, что тег body, который отвечает за тело страницы - отсутствует. Вместо него вставлен тег <frameset> , который отвечает за тело страницы. У этого тега есть два атрибут cols="25%,75%" , что означает разбить все тело страницы на две области по вертикали в пропорции 1:3. Первая область займет 25% от ширины всего экрана (в ней будет первый фрейм menu.html ), вторая область займет 75% от ширины всего экрана (в ней будет второй фрейм content.html ).</p> <p>Последний совсем <a href="/kod-prostoi-html-stranicy-sozdanie-html-stranicy-v-bloknote.html">необязательный тег</a> это <noframes> . Он нужен для браузеров, которые не поддерживают фреймы. Если браузер не поддерживает фреймы, то рекомендуется вежливо сообщить об этом пользователю через этот тег.</p> <p>Кстати, обратите внимание, что для тега <frame> не нужен закрывающий тег.</p> <p>Надеюсь, что теперь у Вас есть представления о фреймах. Чтобы понять более трудные примеры, давайте попробуем создать <a href="/kak-sozdat-veb-stranicu-v-bloknote-html-sozdaem-veb-stranicu-i.html">простую html-страницу</a> состоящую из 4 фреймов. Это будет пример №2.</p> <h2>Пример с 4 фреймами №2</h2> <p>Каркас для примера 2:</p> <p><img src='https://i1.wp.com/zarabotat-na-sajte.ru/uroki-html/img/primer2-frame-karkas.jpg' width="100%" loading=lazy><br>Рис 3. Каркас использования фреймов для примера №2</p> <p>Код <a href="/ishodnyi-html-kod-stranicy-kak-posmotret-ishodnyi-kod-stranicy-v-google.html">исходной html-страницы</a> с фреймом будет следующий:</p> <blockquote><html > <head > <title ><span>Пример №2 html-страницы с фреймами </span> <span>Ваш браузер не поддерживает отображение фреймов </span>

Код файла top.html

<span>Файл top.html - шапка сайта </span>

Пример №2

А здесь могло быть лого и не только:)

Код файла menu.html

<span>Файл menu.html - меню сайта </span>

Код файла content.html

<span>Файл content.html - контент сайта </span>

Главная страница

Содержимое сайта. Сейчас открыт файл content.html
Это исходное состояние нашего фрейма. Назовем этот файл "Главной страницей"

Код файла about-site.html

<span>Файл about-site.html - Страница о сайте </span>

О сайте

Страница о сайте. Сейчас открыт файл about-site.html

Код файла about-autor.html

<span>Файл about-autor.html - об авторе </span>

Об авторе

Страница об авторе. Сейчас открыт файл about-autor.html

Код файла footer.html

<span>Файл footer.html - о сайте </span> Футер сайта. Сейчас открыт файл footer.html
Пояснение к примеру №2

Первоначально вся страница разбивается на три области по горизонтали в пропорции 3:14:3. За это отвечает атрибут rows="15%,70%,15%" . Первый фрейм в нашем примере - шапка (мы её обозвали top.html ), на нее отводится 15% места по высоте. Далее идет большой фрейм занимающий 70% по высоте. Мы его разбиваем на две части с помощью cols="25%,75%" в пропорции 1:3. Слева будет фрейм menu.html , справа content.html . Мы специально дали имя второму фрейму name="main" с целью возможности переключения страниц. Обратите внимание, что в файле menu.html к каждой ссылки приписан атрибут target="main" , что позволяет при нажатии на эту ссылку загружать элементы в область с именем main. Внизу сайта расположился последний фрейм footer.html .

Если вы реализуете пример №2, то должны получить такую html-страницу в исходном состоянии:


Рис 4. Пример №2 - исходное состояние

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


Рис 5. Пример №2 - второе состояние


Рис 6. Пример №2 - третье состояние

Тег

Необязательные атрибуты этого тега являются width="ширина" и height="высота" , а обязательный атрибут src="адрес фрейма" .

Атрибуты и свойства тега

1. Атрибут COLS="Параметры"
Задает количество разбиений страницы по вертикали.

2. Атрибут ROWS="Параметры"
Задает количество разбиений страницы по горизонтали.

Теперь рассмотрим каким образом можно задать параметры разбиение.

а) С помощью числа , которому будет соответствовать количество пикселей. Например, cols = "100,100,300" задает разбиение страницы на три области, каждая из которых будет по ширине: 100 пикселей, 100 пикселей и 300 пикселей соответственно.

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

в) С помощью * (звездочки). Например, cols = "2*,3*,100" задает первые две области в соотношение 2:3, а третья область будет шириной в 100 пикселей.

Все три способа можно совмещать. Например, cols="2*,100,15%,4*" .

3. Атрибут frameborder="{yes|no}"
Определяет наличие рамки у фрейма. Если ответ yes, то следующий четвертый атрибут border имеет силу.

4. Атрибут border="параметр"
В пикселях border задает толщину обводки области фрейма. Например, frameborder = "2" задает область с выделенным контуром в 2 пикселя.

5. Атрибут bordercolor="цвет"
Определяет цвет рамки, если она есть. Цвет можно задать как словами, так и кодом (см. цветовая палитра html).

Примечание: обратите внимание, что тегу нужен закрывающий тег .

Атрибуты и свойства тега

1. Атрибут src="адрес элемента"
В качестве параметра здесь должен указываться полный URL к адресу элемента. Этот атрибут обязателен. Он уже знаком Вам, т.к. он присутствовал в примерах 1 и 2.

2. Атрибут marginwidth="число"
Задает отступ внутри фрейма от границ в пикселях по ширине. Например, marginwidth="10" задаст отступ содержимого слева и справа от границы фрейма.

3. Атрибут marginhight="число"
Аналогичен второму с той лишь разницей, что задает отступ по высоте.

4. Атрибут scrolling="{yes|no|auto}"
Задает возможность прокрутки фрейма, в случае если он не смог уместиться в рамки отведенной ему области. По умолчанию стоит значение auto (означает, что при необходимости создавать скролл).

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

5. Атрибут name="название"
С помощью этого атрибута можно давать фрейму имя. Это нужно для того, чтобы к этому фрейму могли обращаться другие фреймы. В примере №2 как раз рассматривается такой случай.

Примечание:
Имя не должно начинаться с нижнего подчеркивания "_".

6. Атрибуты frameborder, border и bordercolor
Эти три атрибута такие же как и у frameset (см. атрибуты frameset выше).

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

Плюсы фреймов

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

Минусы фреймов

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

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

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

Всем привет. В html есть один интересный тег, с помощью которого можно на свою веб-страничку вставить другую, причем она будет выглядеть так, как будто вшита в вашу. Это статья о том, как вставить в html iframe с примером.

Возможности iframe

Итак, с помощью этого парного тега можно вставить в свою статью страницу с любого веб-сайта в интернете. Давайте рассмотрим вот такой фрагмент кода:

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

Адрес нужной страницы задается в атрибуте src . В нем нужно написать полный адрес до сайта. Следующий атрибут – имя фрейма. Тут можно написать произвольное значение. Наконец, scrolling отвечает за появление полос прокрутки, а его значение auto делает так, что прокрутка появится только при необходимости. Также тут можно задать значение no . В этом случае полосы прокрутки не будут появляться, но тогда и прокрутить страницу нельзя будет — вы сможете только просмотреть ее фрагмент, на сколько хватит заданной высоты.

Остальные параметры при необходимости вы можете задать через css. Например, это могут быть отступы или рамка.

Пример вставки iframe в html

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

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

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

Всем доброго времени суток! С Вами Бернацкий Андрей.

Прежде, чем перейти непосредственно к статье, я Вам хочу дать ссылку на видео-версию данной темы:

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

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

Теперь рассмотрим, как это все можно осуществить.

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

XHTML

… ….

…

….

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

У тега есть два параметра:

rows = число – количество строк (горизонтальных подокон).

cols = число – количество столбцов (вертикальных подокон).

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

Давайте, разберем это на примере, и все будет понятно. Сейчас создадим фреймовый документ следующего вида:

Код, который определит нам такую структуру фрейма, будет выглядеть так:

XHTML

В первой строке приведенного кода открывается контейнер frameset, в параметре cols указано, что будет три вложенных фрейма. У первого ширина будет 30% от всей ширины экрана. У третьего ширина будет тоже 30% от всей ширины экрана. А второй фрейм займет все оставшееся место. Да символ "*" (звездочка) означает занять все оставшееся место на экране.

Кстати, рассмотрим, каким образом фреймам можно задавать размеры в параметрах cols и rows:

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

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

Можно задавать размер фрейма символом “*” (звездочка). Это означает, что фрейм должен занять все оставшееся место. Если будет указано, например , то есть две звездочки, то все оставшееся место будет поровну разделено между этими двумя фреймами (в данном случае по 40%).

Можно комбинировать варианты задания размеров фреймов в HTML. Например:

XHTML

Этот код означает, что у первого фрейма размер будет 70 пикселей, у третьего 40% ширины экрана, а второй займет все оставшееся место.

С первой строкой кода разобрались полностью. Идем дальше.

Далее следуют теги . Поскольку через запятую в параметре cols тега frameset задано три числа (то есть будет три фрейма), то и тегов должно быть тоже три. Значением параметра src является адрес web страницы, которая будет загружаться в данный фрейм. Адрес, как видно из примера, может быть абсолютным и относительным.

И в последней строке закрывается контейнер .

Если заменить в первой строке кода параметр cols на rows, то мы получим такой же фреймовый документ, состоящий из трех фреймов. Только разбиение на фреймы будет идти по вертикали.

XHTML

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

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

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

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

Параметры тегов frame и frameset :

src ="url" – обязательный параметр. Указывает адрес страницы, которая будет отображена внутри фрейма. Используется только для frame.

noresize – отменяет возможность изменения размеров. Используется только для frame .

scrolling="yes/no/auto" – определяет наличие полос прокрутки. Значение yes – указывает на присутствие полос прокрутки. Значение no – указывает, что полос прокрутки не будет. При значение auto – браузер сам определяет, будут ли полоски прокрутки. Используется только для frame .

name="frame-name" – имя фрейма. Данный параметр используется для взаимодействия между фреймами. Подробнее о нем поговорим чуть позже. Используется только для frame .

border=число – толщина границ между фреймами. Если принимает значение 0, то границы между фреймами не отображаются. Используется только для frameset.

framespacing="число" – расстояние между фреймами. Используется только для frameset.

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

XHTML

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

Пожалуй, с параметрами все. Рассмотрели на примере как их применять.

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

Для этого, создаем структуру из трех фреймов с разбиением по вертикали.

XHTML

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

XHTML

"../урок3/Untitled-1.html" />

После этого вставляем наш третий фрейм с контактной информацией и закрываем главный контейнер

XHTML

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

XHTML

"../урок3/Untitled-1.html" />

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

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

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

Создадим фрейм следующего вида:

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

Создаем такой фрейм:

XHTML

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

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

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

Структура разбивки окна хранится в отдельном HTML документе, он и называется документом с фреймами. Структура фреймов формируется при помощи специального элемента FRAMESET. Обычный документ имеет один раздел HEAD и один раздел BODY, тогда как в документе с фреймами раздел BODY заменяется описанием структуры фреймов, Т.е. разделом FRAMESET.
В раздел FRAMESET может быть добавлен элемент NOFRAME с альтернативным содержанием для отображения в браузерах, не поддерживающих фреймы, или в браузерах с отключенной поддержкой фреймов. Такие браузеры просто не поймут структуры FRAMESET и NOFRAME, а отобразят помещенный внутри них текст.

Простой документ с фреймами</ТIТLЕ> </span> </HEAD> <FRAМESET > <span> ...описание структуры фреймов... </span> <NOFRAМES> <span> Альтернативное содержание для браузеров, не поддерживающих фреймы </span> </NOFRAМES> </FRAМESET> </HТМL> <p>Обратите внимание, что раздел BODY в документе отсутствует полностью, а элемент NOFRAMES содержится внутри раздела FRAMESET.<br> Сама структура фреймов формируется делением окна браузера на части — строки и колонки; В какой-то степени это похоже не создание таблиц. Для этого у элемента FRAMESET существуют атрибуты cols и rows, задающие деление на колонки и строки соответственно.<br> Единицы измерения, в которых можно задавать размеры фреймов, это, как обычно, пиксели и проценты. Есть еще возможность задавать размер в новой пока для нас единице измерения, которую условно можно назвать «часть» окна. Значения атрибутов cols и rows задаются перечислением размеров соответствующих областей через запятую. Можно комбинировать разные способы задания. Рассмотрим несколько примеров, исходя из предположения, что размер окна браузера 800х600 пикселей.</p> <FRAМESET rows= "50%, 50%"> </FRAМESET> <p>Такой код поделит окно по горизонтали на два одинаковых по высоте фрейма (строки). Если задать атрибут cols=» 50%, 50%», то получим две одинаковые по ширине колонки.</p> <span><FRAМESET cols= "120, 400. *"> </span> <span> . . . продолжение определения структуры фреймов. . . </span> </FRAМESET> <p>При таком коде получим три колонки фреймов: левая шириной 120 пикселей, средняя шириной 400 пикселей, а на третью колонку отводится все, что останется от первых двух колонок, в атрибуте это значение обозначается символом звездочки «*».</p> <FRAМESET cols= "1*, 4*"> <span> . . . продолжение определения структуры фреймов. . . </span> </FRAМESET> <p>Такой код создаст две колонки фреймов. Ширина первой принимается за единицу (это обозначается как 1 * или просто *), ширина второй в четыре раза больше. Таким образом, ширина первой будет 20%, а ширина второй 80% от общей ширины окна браузера.</p> <span><FRAМESET cols= "100, 40%, *"> </span> <span> . . . продолжение определения структуры фреймов... </span> </FRAМESET> <p>В приведенном мере комбинируются все три способа задания размеров. Ширина первой колонки будет равна 100 пикселей, для второй отводится 40% оставшейся ширины (800 — 100 = 700), и на третью остается все, что не занято первой и второй колонками.<br> Раздел FRAMESET может содержать вложенные разделы FRAMESET, что позволяет создать довольно сложную структуру фреймов. Допустим, нам надо разделить окно на 4 фрейма следующим образом:</p> <p><img src='https://i2.wp.com/samsebewebmaster.ru/wp-content/uploads/2016/06/Fr-1.jpg' align="center" width="100%" loading=lazy></p> <p>Сначала необходимо организовать 2 колонки таким образом:</p> cols= "100, * " <p>Затем вторую колонку поделить на три строки таким образом:</p> rows=" 80, *, 30" <p>Отдельный фрейм, точнее его описание, задается элементом FRAME и его атрибутами: подробнее о нем чуть позже. Вернемся к вложенным элементам FRAMESET. Рассмотрим пример кода, создающего такую структуру фреймов:</p> <FRAМESET cols= "100, * "> <span> <FRAМE name= "framel" src= "framel.html"> </span> <span> <FRAМESET rows= "80, *, 30"> </span> <span> <FRAМE name= "frame2" src= "frame2.html"> </span> <span> <FRAМE name= "frame3" src= "frame3.html"> </span> <span> <FRAМE name= "frame4" src= "frame4.html"> </span> </FRAМESET> </FRAМESET> <p>Каким образом разбивается окно на фреймы, вроде бы разобрались. При создании фреймов можно сделать так, чтобы границы между фреймами видно не было. Как вы, наверное, уже догадались, делается это при помощи атрибута border его значение должно равняться нулю. Но дело в том, что для фреймов этот атрибут не воспринимается <a href="/ustanovit-poslednyuyu-versiyu-internet-explorer-obnovlyaem-brauzer-internet-explorer-do.html">браузером Internet</a> Explorer, зато поддерживается браузером Netscape Navigator. Для <a href="/otklyuchenie-rezhima-sovmestimosti-internet-explorer-rezhimy-internet.html">Internet Explorer</a> граница между фреймами задается атрибутом frameborder, который не поддерживается браузером Netscape Navigator. Получается, что необходимо задавать <a href="/kak-v-xl-naiti-odinakovye-znacheniya-faily-dublikaty-ccleaner-nahozhdenie-odinakovyh.html">одинаковые значения</a> для обоих атрибутов, чтобы оба браузера восприняли HTML код одинаково и толщина границ между фреймами была одинаковой.<br> Толщину границ или, по-другому, расстояние между фреймами также можно регулировать атрибутом framespacing, значение которого задается в пикселях. Все атрибуты элемента FRAMESET приведены в таблице.</p> <h2>Атрибуты элемента <FRAMESEТ></h2> <table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%"> <h3>Атрибут</h3> </td> <td bgcolor="#E7E7E7" width="60%"> <h3>Описание</h3> </td> <td bgcolor="#E7E7E7" width="20%"> <h3>Пример</h3> </td> </tr></tbody></table><table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%">rows </td> <td bgcolor="#E7E7E7" width="60%">Определяет количество и размеры горизонтальных фреймов (фреймов строк) в окне браузера. В качестве значения задается список размеров фреймов через запятую. Способы задания размеров: <p>а) в процентах от высоты <a href="/chto-takoe-veb-uzel-web-uzel-sozdanie-i-upravlenie-chto-takoe-rabochaya-oblast.html">рабочей области</a> окна браузера например: "30%, 30%, 40%" ;</p> <p>б) в виде знака «*» (звездочка), говорящего о том, что фрейм занимает все <a href="/pereustanovit-windows-s-sohraneniem-failov-kak-sohranit-dannye-i-faily-pri.html">свободное пространство</a> окна браузера, незанятое другими фреймами с явно указанными размерами например, звездочка в записи "25%, 25%, *" равносильна 50%;</p> <p>в) в пикселях например: "75, *" .</p> <p>Все три способа можно совмещать.</p> </td> <td bgcolor="#E7E7E7" width="20%"> rows= "25%, 25%, *" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">cols </td> <td bgcolor="#E7E7E7" width="60%">Определяет количество и размеры вертикальных фреймов (фреймов столбцов) в окне браузера. В качестве значения<br> задается список размеров фреймов через запятую. Размеры задаются так же, как и в <a href="/kak-pomenyat-apparatnuyu-versiyu-na-routere-proshivka-routera.html">предыдущем параметре</a> ROWS. </td> <td bgcolor="#E7E7E7" width="20%"> cols= "265, *" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">border </td> <td bgcolor="#E7E7E7" width="60%">Определяет ширину рамок фреймов в пикселях. Данный параметр действует только в браузерах Netscape. </td> <td bgcolor="#E7E7E7" width="20%"> Border= "0" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">frameborder </td> <td bgcolor="#E7E7E7" width="60%">Данный параметр действует только в браузерах lnternet Explorer и определяет наличие рамок у содержащихся внутри элемента <a href="/sozdanie-freimov-dlya-veb-stranic-v-html-sozdanie-struktury-freimov-element.html">FRAMESET фреймов</a>. Возможные значения: Yes отображать рамки; No или 0 не отображать рамки. </td> <td bgcolor="#E7E7E7" width="20%"> Frameborder= "0" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">framespacing </td> <td bgcolor="#E7E7E7" width="60%">Определяет расстояние (так называемую «серую область») между фреймами в пикселях. Данный параметр также необходим для создания фреймов без рамок. </td> <td bgcolor="#E7E7E7" width="20%"> framespacing= "0" </td> </tr></tbody></table><p>Теперь вернемся к элементу FRAME, который описывает отдельный фрейм внутри всей структуры. <a href="/podklyuchenie-vtorogo-yadra-processora-rasshirennye-nastroiki-processora-s-aida64.html">Обязательный параметр</a> для него — атрибут src, который задает URL HTML — документа или изображения для отображения в этом фрейме. Также лучше задать фрейму имя при помощи атрибута name. Это позволит использовать <a href="/marshrutizatory-d-link-dir-300-sohranenie-dannyh-nastroiki-routera-ustanovka-imeni.html">данное имя</a> в качестве значения <a href="/html-target-blank-zapret-otkrytiya-giperssylka-chto-eto-takoe-kak-sdelat-ssylku-i.html">атрибута target</a> элемента А и управлять тем, в какой фрейм должна загружаться ссылка. Имена фреймов не могут начинаться с цифр, в качестве начальных символов допустимы только буквы латинскою алфавита (az, AZ).</p> <p>Когда в структуре фреймов не задана рамка между фреймами, их содержимое может слишком плотно примыкать друг к другу, что будет не очень красиво выглядеть. Если хотите раздвинуть содержимое фреймов и при этом все-таки не включать отображение границ между ними, то это можно сделать, задав внутри фреймов отступы. Размер этих отступов задается в пикселях и попарно: для отступов сверху и снизу атрибутом marginheight,<br> а для отступов справа и слева атрибутом marginwidth. Тогда расстояние между содержимым соседних фреймов будет равно сумме соответствующих отступов этих фреймов.</p> <p>Должна ли отображаться рамка вокруг отдельною фрейма, определяется его атрибутом frameborder. Значение yes (или 1) говорит о том, что рамка должна быть, значение no (или 0) указывает, что рамки быть не должно.<br> Пользователь может изменять размер фреймов, созданный <a href="/chto-takoe-html-struktura-dokumenta-html-opisanie-tipa-dokumenta-html5-tak-kakoi-zhe.html">HTML документом</a>. Для этого достаточно подвести курсор мыши к границе фреймов (неважно, видны эти границы или нет) и стандартным для <a href="/kak-pravilno-ustanovit-operacionnuyu-sistemu-ustanovka-operacionnoi.html">операционной системы</a> способом изменить размер окна.<br> В <a href="/chernyi-ekran-bez-kursora-windows-10-posle-zagruzki-windows-ch-rnyi-ekran-i.html">Windows курсор</a> мыши примет вид двунаправленной черной стрелки. Нажав левую кнопку мыши, можно передвинуть границу окна. Аналогично можно изменить и размер фрейма, поскольку фрейм это тоже окно. Если вы рассчитали размеры своих фреймов и не хотите, чтобы пользователь менял их, задайте атрибут noresize. В результате изменение размеров будет запрещено.<br> Как мы уже говорили ранее, полосы прокрутки у фрейма появляются в том случае, если его содержимое в заданных его границах полностью не помещается. Наличие полос прокрутки регулируется атрибутом scrolling. Допустимы три значения yes, no и auto.<br> Значение auto соответствует <a href="/chto-delat-esli-poyavlyaetsya-ekran-smerti-chto-delat-pri.html">автоматическому появлению</a> полос прокрутки в тех случаях, когда это действительно необходимо. Если содержимое видно и так, полос прокрутки нет, если часть содержимого не помещается появляется нужная полоса прокрутки.<br> Значение yes включает обе полосы прокрутки независимо от того, нужны они или нет. Иногда это может выглядеть не очень красиво.<br> Значение no запрещает показывать полосы прокрутки совсем. Будьте осторожны с этим значением, поскольку при его указании можете лишить пользователя возможности увидеть все содержимое фрейма, Когда оно не помещается в нем полностью. Все атрибуты элемента FRAME приведены в таблице.</p> <h2>Атрибуты элемента <FRAME></h2> <table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%"> <h3>Атрибут</h3> </td> <td bgcolor="#E7E7E7" width="60%"> <h3>Описание</h3> </td> <td bgcolor="#E7E7E7" width="20%"> <h3>Пример</h3> </td> </tr></tbody></table><table cellspacing="1" cellpadding="15"><tbody><tr><td bgcolor="#E7E7E7" width="20%">src </td> <td bgcolor="#E7E7E7" width="60%">Обязательный параметр. Указывает адрес (URL) HTL<br> файла, отображаемого в данном фрейме </td> <td bgcolor="#E7E7E7" width="20%"> src= "frame2 .html" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">name </td> <td bgcolor="#E7E7E7" width="60%">Определяет имя данного фрейма, которое будет в дальнейшем использоваться для ссылки на него из других документов с помощью атрибута target (см. элемент А). В качестве значения нужно указать любое имя без пробелов с использованием <a href="/kody-latinskih-simvolov-kodirovka-ascii-american-standard-code-for-information-interchange--.html">латинских символов</a> и цифр<br> (начальными символами могут быть только буквы <a href="/latinskii-alfavit-onlain-perevodchik-transliteraciya-i-translit-perevodchiki.html">латинского алфавита</a>: a-z, A-Z). Имя не должно начинаться с цифр и <a href="/simvoly-dlya-avatarii-novye-specialnye-simvoly-dlya-nika-zv-zdochki-serdechki.html">специальных символов</a>. Зарезервированные имена фреймов начинаются со знака подчеркивания. </td> <td bgcolor="#E7E7E7" width="20%"> name= "menu1" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">marginwidth </td> <td bgcolor="#E7E7E7" width="60%">Определяет ширину (в пикселях) левого и правого полей фрейма. Если параметр не указан, браузер самостоятельно определит <a href="/dopolnitelnye-atributy-komandy-format-kakoi-razmer-klastera.html">оптимальный размер</a> отступа. </td> <td bgcolor="#E7E7E7" width="20%"> marginwidth= "0" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">marginheight </td> <td bgcolor="#E7E7E7" width="60%">Определяет ширину (в пикселях) верхнего и нижнего полей фрейма. Если параметр не указан, браузер самостоятельно определит оптимальный размер отступа. </td> <td bgcolor="#E7E7E7" width="20%"> marginheight= "0" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">scrolling </td> <td bgcolor="#E7E7E7" width="60%">Определяет наличие полос прокрутки содержимого фрейма. Возможные значения:<br> yes — отображать полосы прокрутки;<br> no — не отображать полосы прокрутки;<br> auto — отображать полосы прокрутки при необходимости (если документ, указанный в параметре SRC, не умещается во фрейме) </td> <td bgcolor="#E7E7E7" width="20%"> scrolling= "auto" </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">noresize </td> <td bgcolor="#E7E7E7" width="60%">Не позволяет изменять размеры фрейма. Данный параметр является флагом и не требует указания значения. </td> <td bgcolor="#E7E7E7" width="20%"> noresize </td> </tr><tr><td bgcolor="#E7E7E7" width="20%">frameborder </td> <td bgcolor="#E7E7E7" width="60%">Определяет наличие рамок у фрейма. Возможные значения:<br> yes или 1 — отображать рамки;<br> no или 0 — не отображать рамки. </td> <td bgcolor="#E7E7E7" width="20%"> frameborder= "0" </td> </tr></tbody></table> <p>Здравствуйте, уважаемые читатели блога сайт. Сегодня речь пойдет о фреймах в <a href="/razrabotal-yazyk-html-yazyk-razmetki-html-stili-v-html-dokumente.html">языке Html</a>. Понятное дело, что начнем мы сначала, а именно с того, что это такое за зверь. Так же поговорим о настоящем (Frame) и будущем (Iframe) этих элементов в языке <a href="/osnovnye-tegi-yazyka-gipertekstovoi-razmetki-yazyki-gipertekstovoi-razmetki-sgml.html">гипертекстовой разметки</a> <a href="/chem-otlichaetsya-32-ot-64-chto-eto-takoe-kak-proverit-razryadnost-tekushchei.html">текущей версии</a> и в новом стандарте Html 5 при .</p><p>В конце статьи, после <a href="/podklyuchaem-mms-na-tele2-kak-nastroit-mms-na-tele2.html">детального описания</a> процесса создания встроенных фреймов и их классической структуры в <a href="/kommentarii-na-stranice-html-chto-takoe-kommentarii-v-kode-html-i-kak-ih.html">Html коде</a> (уже редко используется), мы затронем вопрос актуальности построения сайта на них, а так же обсудим <a href="/fail-png-v-jpg-sposoby-vozmozhnoi-konvertacii-png-v-jpg.html">возможные способы</a> их применения в текущий период времени на примере моего блога.</p><h2>Что это такое и чем отличается Iframe от Frame</h2><p>Что же это такое? Оказывается, что они могут использоваться не только на сайтах, но и в каких-либо приложениях к программам, но отличаются тем, что окно web страницы или же приложения будет разделено на несколько областей, в каждую из которых загружен какой-то отдельный документ. Причем, эти области фреймов ведут себя не зависимо друг от друга.</p><p>Наверное, самый наглядный пример их использования, с которым сталкивались практически все из вас, это так называемые файлы помощи (хелпы), которые имеются у многих программ установленных на вашем компьютере.</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/chto-takoe-freim.png' width="100%" loading=lazy></p><p>В левое окно загружен файл с меню хелпа, а в правом выводится соответствующий выбранному пункту меню документ. Примечательно, что такая структура позволяет не подгружать в левое окно повторно файл с меню при открытии нового документа в правом. Именно в этом и состоит <b>основное преимущество использования фреймов </b> в Html.</p><p>Собственно, само название этих элементов следует трактовать именно как самостоятельное окно. С помощью фреймов у нас появляется возможность разбить одно большое окно на несколько фрагментов, которые в свою очередь могут служить приемниками для отдельных независимых друг от друга документов (страниц, текстов, изображений, видео и т.п.).</p><p>Как создается фреймовая структура в языке гипертекстовой разметки? Если говорить про <a href="/standarty-html-no-my-zdes-ne-za-etim-nastoyashchaya-problema---v-nepravilnom-upotreblenii-etot-eleme.html">стандарт Html</a> 4.01 (по классификации ), который является основным на текущий момент времени, то для этого используются три элемента — Frame, Frameset и Noframes.</p><h3>Iframe — встроенный фрейм в стандарте Html 5</h3><p>Если же говорить про стандарт Html 5 (наше будущее, некоторые элементы которого уже поддерживаются многими браузерами), то там тегов Frame, Frameset и Noframes, а равно и классической фреймовой структуры уже не будет, вместо них предусмотрен один единственный тэг Iframe (встроенный фрейм), о котором мы и поговорим в начале, а потом уже все внимание обратим на классическую схему из версии 4.01, которая сейчас, собственно, и используется.</p><p>Iframe в отличии от классики, которая рассмотрена ниже, не требует замены тега Body на теги Frameset. Т.е. этот тег можно будет вставлять на <a href="/programma-dlya-skachivaniya-so-stranicy-oblako-zagruzhaem-na-obychnyi-platnyi.html">обычные страницы</a>, например, внутри параграфа или в любом другом месте. По своей сути этот элемент очень похож уже на рассмотренный нами тег Img.</p><p>Он является строчным с замещаемым контентом, потому что ведет себя в точности как строчный элемент, но вот внутри него отображается <b>посторонний <a href="/kak-uznat-kakoi-kontent-podklyuchen-chto-takoe-kontent-kak.html">внешний контент</a> </b>. Таких элементов в языке Html всего четыре — Img, Iframe, Object и Embed. Поэтому наш герой подразумевает наличие внешнего файла, который будет подгружаться в область, размер которой задается с помощью атрибутов этого тега.</p><p>Т.о. Iframe является сточным элементом, в который загружается внешний объект (например, видеоролик). А для указания пути до этого файла, который должен подгружаться на странице, служит специальный атрибут Src. Но в отличии от Img элемент Iframe парный, т.е. <b>имеется еще и закрывающий тег </b>:</p><p> <span class="fHaAsFZL1nQ"></span> </p><p>В <a href="/szhatie-dannyh-v-primerah-szhatie-dannyh.html">данном примере</a> показан вывод на странице видеоролика с Youtube с помощью Iframe. Для того, чтобы ограничить область фрейма (окна), куда будет подгружаться <a href="/cmd-ne-yavlyaetsya-vnutrennei-ili-vneshnei-komandoi-imya-faila.html">внешний файл</a>, предусмотрены атрибуты <b>Width и Height </b>, значения которых задаются в пикселах:</p><p> <span class="fHaAsFZL1nQ"></span> </p><p>Т.е. этот тег создает область, в которую загружается какой-то внешний объект (не важно, с вашего ли сайта или же с другого ресурса). Ширина и высота области задаются с помощью Width и Height, а в атрибуте Src указывается путь до этого объекта.</p><p>Все эти атрибуты элемент Iframe унаследовал от подобных ему строчных тегов с замещаемым контентом (типа уже упомянутого выше Img). Ну, и еще у картинок он взял и атрибуты <b>Hspace и Vspace </b>, которые позволяют задать отступы от границ фрейма до обтекающего его текста.</p><p>Так же показательно, что выравнивание встроенного фрейма осуществляется абсолютно так же, как мы это могли видеть при изучении картинок в Html — . Все тот же <b>Align </b>, но уже для тега Iframe с возможными значениями Bottom, Top, Middle, Left и Right.</p><p>Но этот элемент взял так же и несколько атрибутов от тэга Frame из классической фреймовой структуры, о которой мы очень и очень подробно поговорим ниже по тексту. К таким атрибутам относится Name, значение которого можно использовать в качестве значения для того, чтобы нужный вам документ при переходе по ссылке открывался именно в окне этого фрейма (подробности читайте ниже).</p><p>Так же в Iframe из тега Frame перекочевал атрибут Frameborder, который имеет только два значения — либо 0 (рамка вокруг фрейма не отображается), либо 1 (рамка видна). По умолчанию используется значение Frameborder=1, поэтому для ее удаления вам потребуется прописать Frameborder="0":</p><p> <span class="fHaAsFZL1nQ"></span> </p><p>Из Frame в этот элемент перешел еще и атрибут Scrolling, имеющий по умолчанию значение Auto — полосы прокрутки во фрейме будут появляться по мере необходимости, когда контент будет больше по размеру окна, предназначенного для его отображения.</p><p>Ну, и атрибуты Marginwidth и Marginheight тоже перешли из элемента Frame. Они будут подробно рассмотрены ниже по тексту, но в двух словах — они позволяют задать отступ по ширине и высоте от краев фрейма до контента, который в него помещается.</p><p>Как я уже упоминал, наглядным примером использования Iframe является :</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/iframe-video.png' width="100%" loading=lazy></p><p>Вставив Iframe напрямую в web страницу, вы получите вывод ролика с ютуба. Делаем вывод, что этот элемент является помесью <a href="/vybrat-vse-display-u-kotoryh-none-ispolzovanie-svoistva-css-display-none.html">строчных элементов</a> с замещаемым контентом и, собственно, классических фреймов, о которых сейчас и пойдет речь.</p><h2>Фреймы на основе тегов Frame и Frameset — их структура</h2><p>Итак, создание классической фреймовой структуры начинается с того, что вы прописываете в Html коде вместо открывающего и закрывающего тега Body, который обычно должен присутствовать в любом документе, заменяющий его контейнер на основе элементов <b>Frameset </b>.</p><p>Принципиальным моментом является как раз то, что элемент Body в этом случае использовать нельзя — либо Body (для обычного документа), либо Frameset (при создании фреймовой структуры документа):</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/17-08-201318-13-43.png' width="100%" loading=lazy></p><p>Каждый фрейм, который мы с вами формируем внутри главного, создается с помощью отдельного элемента <b>Frame </b>. Этот тег является одиночным и в нем мы задаем путь до того документа, который должен будет подгружаться в это окно.</p><p>Третий элемент, который мы еще с вами не затронули — это <b>Noframes </b>. Он парный и позволяет написать внутри себя какой-то текст, который будет обработан браузером и отображен на <a href="/kak-sozdat-veb-stranicu-samostoyatelno-chto-takoe-veb-stranica-s-chego.html">web странице</a> только в том случае, если этот самый браузер (или другое устройство отображения) не поддерживает фреймы. Это может произойти, например, в случае использования какого-нибудь обозревателя для мобильных устройств.</p><p>Обычно в Noframes добавляют не только информацию о сложившейся ситуации с невозможностью обработки фреймовой структуры, но и добавляют так же возможность перейти на другие страницы, где можно будет продолжить работу без их использования. Сказать о нем что-то еще трудно, поэтому продолжим.</p><p>Получается так, что элемент Frameset, используемый заместо тега Body, занимает все место, которое отведено для области просмотра, а уже внутри этой области будут создаваться фреймы с помощью <a href="/kuda-zahodit-chtob-suzit-ekran-na-kompe-kak-umenshit-masshtab.html">отдельных элементов</a> Frame. В связи с этим возникает вопрос — как делить область просмотра между <a href="/kazhdaya-papka-otkryvaetsya-v-otdelnom-okne-brauzer-sam.html">отдельными окнами</a> или, другими словами, как задать размер каждого из них.</p><p>Делается это с помощью добавления соответствующих атрибутов к элементу Frameset. Их имеется целых два — <b>Cols и Rows </b>. Cols задает разделение большого окна на вертикальные фреймы или же колонки, а Rows позволяет разделить его на горизонтальные окна или же строки.</p><h3>Создание структуры на основе Frameset и его атрибутов Cols и Rows</h3><p>В качестве значений для Cols и Rows Html тега Frameset выступают числа, проставленные через запятую (без пробелов). Эти числа задают пропорции тех окон, которые мы с вами хотим получить в результате. Следовательно, сколько будет написано чисел через запятую в Cols или в Rows, столько у нас фреймов и должно будет получиться в результате.</p><p>Например, с помощью такой записи мы получим три вертикальных колонки, которые по ширине будут соответствовать пропорциям 2:5:3.</p><p> <frameset cols="20%,50%,30%"> </p><p>Раз мы задали пропорции для трех фреймов, то мы должны будем обязательно прописать между открывающим и закрывающим тегом Frameset три элемента Frame, хотя бы и без указания дополнительных атрибутов:</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/17-08-201318-25-34.png' width="100%" loading=lazy></p><p>В результате наша фреймовая структура, состоящая из трех пустых окон, будет выглядеть так:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/frame.png' width="100%" loading=lazy></p><p>В данном примере размеры окон (Frame) мы задавали с помощью процентов, которые берутся от ширины области просмотра (это в случае использования Cols) или от ее высоты (Rows). При изменении области просмотра процентное соотношение между размерами фреймов будет сохраняться. Но вместо процентов можно использовать и просто числа, которые будут означать . Тут, думаю, тоже никаких трудностей в понимании возникнуть не должно.</p><p>Но есть в обозначениях размеров и довольно необычный вариант, который выглядит как <b>звездочка «*» </b>. Причем, может стоять как просто «*», так и звездочка с цифрой впереди, например, так «3*». Хитрая штуковина, очень похожая на проценты и означающая, что мы делим пространство для Frame пропорционально.</p><p>Давайте посмотрим на примере. Теперь выберем деление области просмотра на горизонтальные строки с помощью Rows:</p><p> <frameset rows="200,500,*"> </p><p>Что означает эта запись? Вся область просмотра, доступная нам по вертикали, будет разделена на три строки. Высота первой будет взята в 200 пикселей, второй — в 500, а вот третья строка будет занимать все оставшееся пространство по высоте, т.к. в качестве ее размера использовалась «*».</p><p>Что примечательно, значение «*» и «1*» означают одно и то же — все оставшееся пространство мы делим на один и эту одну часть отдаем данному фрейму (ну, то есть все оставшееся пространство).</p><p>А вот посмотрите что получится, если использовать значение «*» с цифрой для деления в пропорции:</p><p> <frameset rows="2*,100,4*"> </p><p>Как вы думаете, каковы должны будут получиться размеры Frame в этом случае? Понятно, что вторая строка будет однозначно иметь высоту в 100 пикселей. Но как поделится оставшееся пространство по высоте между третьей и первой строкой?</p><p>Это довольно просто сосчитать — достаточно прибавить к двум (2*) четыре (4*) и разделить на этот знаменатель (помните дроби из <a href="/igra-ugadai-pesnyu-po-opisaniyu-dlya-vzroslyh-ty---moya-melodiya.html">школьной программы</a>) двойку и четверку. Т.е. мы получим, что первая колонка с фреймом займет одну треть от оставшегося пространства по высоте, а третья колонка — две трети. Или же, другими словами, третья будет в два раза выше первой:</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/17-08-201321-11-58.png' width="100%" loading=lazy></p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/frameset.png' width="100%" loading=lazy></p><p>Можно использовать все три способа задания размеров окон фреймов в одном атрибуте, например:</p><p> <frameset cols="10%,100,4*,3*,2*"> </p><p>В результате мы получим первую колонку Frame шириной в десять процентов от всей <a href="/chto-vhodit-v-razdely-isogd-usluga-po-predostavleniyu-svedenii-iz.html">доступной области</a>, вторую — 100 пикселей, а три оставшихся будут иметь ширину в пропорциях четыре, три и две девятых от оставшегося пространства по ширине. Вот так вот все просто и наглядно.</p><p>Если вы хотите разбить основное окно не только на горизонтальные и вертикальные фреймы, а, например, на их комбинации, то можно будет для этого использовать вложенную структуру элементов Frameset отдельно для колонок и отдельно для строк. Например, чтобы получить структуру показанную на скриншоте чуть ниже, то достаточно использовать такую конструкцию:</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/17-08-201321-15-19.png' width="100%" loading=lazy></p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/freimy-v-html.png' width="100%" loading=lazy></p><p>Т.е. сначала мы разбиваем с помощью «frameset cols=»20%,80%"« все <a href="/kak-ustanovit-rabochii-stol-eppl-svorachivanie-sredstvami-os-x.html">доступное пространство</a> на две колонки по вертикали и задаем тегом „frame“ содержимое правой колонки, а вот вместо того, что добавить элемент „frame“ для левой колонки, мы открываем новый „frameset rows=“10%,*»".</p><p>И уже с помощью него разбиваем правую колонку на две строки с фреймами, содержимое которых задаем с помощью двух тегов «frame», после чего закрываем оба контейнера «frameset». Все просто и логично.</p><h3>Указываем путь в атрибуте Src элемента Frame</h3><p>Но это мы все говорили про элемент Frameset и его атрибуты Cols и Rows, с помощью которых формируем структуру и задаем их размеры. Теперь давайте разберемся с тем, как выводить в нужных фреймах нужные документы и как настроить взаимодействие между их окнами.</p><p>Итак, как же мы управляем внешним видом <a href="/kak-sozdat-v-html-vsplyvayushchie-okna-sozdaem-modalnoe-okno-na-html5-i.html">создаваемых окон</a>? Все это заложено в атрибутах тега Frame. Первый из них, о котором стоит упомянуть — это <b>Src </b>. Мы уже встречали его в <a href="/alt-tega-img-izobrazheniya-i-ssylki---atributy-alt-i-title-kak-pisat-s-bolshoi.html">теге Img</a>, когда рассматривали вставку изображений в Html код. Суть его не изменилась и он по-прежнему позволяет указать путь до того документа, который должен быть загружен во фрейм.</p><p>Путь до документа в Src может быть указан в виде . <a href="/otnositelnye-puti-v-html-absolyutnyi-i-otnositelnyi-put-k.html">Относительные пути</a> обычно используются для документа, который расположен на вашем же ресурсе, а вот абсолютные вам понадобятся, когда вы захотите загрузить в окно фрейма документ с другого сайта.</p><p>Если не будет прописан атрибут Src с указанием пути до <a href="/ne-vse-kontakty-sinhroniziruyutsya-icloud-sinhroniziruem-kontakty-iphone-s-icloud.html">нужного документа</a>, то в окно будет загружен <a href="/kak-udalit-list-v-dokumente-word-kak-udalit-pustuyu-stranicu-v-word.html">пустой документ</a>. Лично я когда-то делал подобную вещь для своего блога (как <a href="/kak-pronumerovat-stranicy-otdelno-v-vorde-kak-bystro-pronumerovat-vse.html">дополнительный элемент</a> навигации) и при этом создавал на сервере хостинга <a href="/poddomen-ili-otdelnaya-papka---mastertalk-subdomen-ili-papka-chto.html">отдельную папку</a> для него и помещал туда не только Html файлик с фреймовой структурой (который назвал index.html), но и все подгружаемые в различные окна документы, а так же файлы изображений, которые использовались в качестве фона.</p><p>Поэтому мне было проще всего использовать именно относительные ссылки в атрибуте Src тега Frame:</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/17-08-201321-23-15.png' width="100%" loading=lazy></p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/freimy-eto.png' width="100%" loading=lazy></p><p>Что примечательно, если вы замените все приведенные в этом коде ссылки с относительных на абсолютные (типа https://сайт/navigator/joomla.html) и откроете этот файл в браузере, то указанные во Frame документы будут подгружены с моего сервера и вы увидите аналогичную картинку в своем браузере. Причем не важно, где будет лежать ваш файл с фреймовой структурой (index.html) — на вашем компьютере или же на хостинге.</p><p>В приведенном на рисунке примере, в окно левого фрейма у меня загружается страничка с неким меню, которое представляет из себя обычный . Но не суть важно как формируется меню, а важно то, что произойдет после нажатия на любую из его ссылок.</p><p>Если вы проделаете это, то все произойдет именно так, как надо — документ откроется в правом нижнем окне. Но для этого мне пришлось применить одну небольшую хитрость, ибо в варианте по умолчанию документ открывался на весь размер окна, заменяя собой фреймовую структуру, что мне было вовсе не нужно, ибо исчезало навигационное меню в левом и верхнем фреймах.</p><h2>Как открывать документы по ссылке во фрейме</h2><p>Итак, когда мы говорили про гиперссылки, то упоминали такой атрибут тега «A», как Target=_blank. Помните для чего он нужен? Правильно, чтобы открывать документ, на который проставлена ссылка, в новом окне. По умолчанию же, он должен открываться в том же самом окне, что эквивалентно target="_self".</p><p>Но этим возможности <b>Target </b> не ограничиваются. Оказывается можно добавлять в него значение <b>в виде названия фрейма </b>, которое предварительно указывается в специальном атрибуте Name тега Frame. Тогда документ по этой ссылке будет открываться не в том же окне, занимая все его пространство, а в указанном вами Frame. Понятно? Если не совсем, то сейчас будет понятно при разборе примера.</p><p>Итак, вернемся к нашему примеру приведенному на расположенном чуть выше рисунке. Нам нужно открывать страницы по ссылкам из левого окна в правом нижнем (большом) фрейме. Следовательно, для начала нужно этому большому окну дать имя с помощью <a href="/target-blank-i-drugie-znacheniya-atributa-target-osnovy-html-rabota-so.html">атрибута Name</a> в теге Frame.</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/17-08-201321-32-09.png' width="100%" loading=lazy></p><p>Сделали и назвали его «ktona». Теперь можно смело открывать тот файл, что подгружается в качестве меню в левое окно и добавлять ко всем тегам A в нем атрибут Target="ktona":</p><p> История появления Joomla и компонента VirtueMart </p><p>Конечно же, с помощью инструмента поиска и замены в проставить его для всех гиперссылок будет не трудно, но зачем же излишне загружать код, когда у нас есть прекрасная возможность использовать <b>специальный тег Base </b>, о котором мы уже упоминали все в той же статье про гиперссылки, когда говорили про использование Target blank.</p><p>Достаточно лишь поставить между открывающим и закрывающим <a href="/head-kody-teg-head-sozdanie-nastroika-i-naznachenie.html">тегами Head</a> элемент base target="ktona" и все ссылки в Html коде этого документа будут открывать новые страницы в указанном фрейме под названием «ktona»:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/17-08-201321-36-13.png' width="100%" loading=lazy></p><p>Кстати, если рассматривать мой когда-то существовавший инструмент в качестве примера, то нужно еще сделать так, чтобы все ссылки из верхнего <a href="/chto-takoe-lotus-domino-i-notes-i-kak-oni-rabotayut-gorizontalnaya-polosa.html">горизонтального окна</a> открывали бы свои страницы именно в левом вертикальном фрейме, которое служит у меня левым меню. Что нужно для этого сделать?</p><p>Ну, во-первых, нужно дать имя левому вертикальному фрейму:</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/17-08-201321-38-31.png' width="100%" loading=lazy></p><p>А в файле, который загружается в верхнее окно (gor.html), нужно добавить элемент base target="gor":</p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/17-08-201321-40-02.png' width="100%" loading=lazy></p><p>Все, теперь мы сделали все как надо. Все документы по ссылкам из верхнего фрейма открываются в левом окне, а все ссылки уже из него будут открывать документы в центральном и самом большом Frame. По-моему, все просто и логично.</p><h3>Атрибуты тега Frame для настройки внешнего вида окон</h3><p>Давайте теперь посмотрим, какие атрибуты кроме Src и Name можно использовать в теге Frame для настройки <a href="/kak-otkryt-aityuns-na-kompyutere-kak-effektivno-ispolzovat-programmu-itunes.html">внешнего вида</a> фреймов. Начнем с <b>Scrolling </b>. С помощью него мы можем настроить отображение полос прокрутки для каждого окна вашей фреймовой структуры в отдельности.</p><p>Scrolling имеет значение по умолчанию Auto — браузер будет автоматически решать, на основе размера подгружаемого во фрейм документа, отображать полосу прокрутки или нет. Если документ не будет полностью помещаться в окно, то появится полоса прокрутки, позволяющая просмотреть его весь до конца.</p><p>Так же в качестве значений для Scrolling можно использовать значения Yes (полосы прокрутки в окне будут отображаться всегда, даже если документ полностью влезает в него) и No (полосы прокрутки вообще никогда появляться не будут, даже если часть документа не влезет).</p><p> <frame scrolling="yes" src="gor.html"> </p><p>Я в своем, когда-то существовавшем инструменте, использовал значение по умолчанию Auto и полосы прокрутки во фреймах появлялись по мере необходимости:</p><p><img src='https://i2.wp.com/ktonanovenkogo.ru/image/freim.png' width="100%" loading=lazy></p><p>Следующий атрибут тега Frame — <b>Noresize </b> — является одиночным (у него нет значений). Прописав его, вы тем самым запретите изменение его размеров, которое по умолчанию осуществляется <a href="/kak-v-fotoshope-transformirovat-izobrazhenie-bez-izmeneniya.html">простым перетаскиванием</a> границы фреймов мышью.</p><p> <frame noresize src="gor.html"> </p><p>При подведении курсора мыши к границе вы увидите, что курсор превратится в двунаправленную стрелку и теперь, нажав на левую кнопку мыши, можно передвигать границу по вашему желанию. Noresize накладывает на это своеволие запрет (при подведении курсора мыши к границе окон, двунаправленную стрелочку вы уже не увидите).</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/freimy.png' width="100%" loading=lazy></p><p>Еще один визуальный атрибут — <b>Frameborder </b>. C помощью него вы можете указать — рисовать рамку (границу) между фреймами или же не рисовать. Frameborder может иметь только два <a href="/menyu-bios-kak-zaiti-znachenie-punktov-i-vozmozhnosti-vozmozhnye.html">возможных значения</a> — либо 0 (рамку не рисовать), либо 1 (границу отображать). По умолчанию, естественно, используется значение 1.</p><p>Есть одна тонкость. Если вы хотите убрать видимую рамку, то вам придется добавить Frameborder=0 во все теги Frame тех фреймов, <a href="/kak-v-vorde-sdelat-granicy-tablicy-vidimymi.html">видимые границы</a> между которыми вы хотите убрать.</p><p> <frame frameborder="0" src="gor.html"> </p><p><img src='https://i1.wp.com/ktonanovenkogo.ru/image/iframe-freim.png' width="100%" loading=lazy></p><p>Ну, и еще нам осталось рассмотреть пару атрибутов тега Frame — <b>Marginwidth и Marginheight </b>, которые задают отступы по ширине (справа и слева) и высоте (сверху и снизу) от границ окна до контента загруженного в него (число означает количество пикселов отступа):</p><p><img src='https://i0.wp.com/ktonanovenkogo.ru/image/iframe-freimy.png' width="100%" loading=lazy></p><h2>Почему нельзя делать сайт на фреймах?</h2><p>Давайте посмотрим в чем заключается принципиальный недостаток классических структур, который по сути ставит крест на их использовании при создании сайта. Он состоит в том, что по этой фреймовой структуры <b>невозможно отследить ее состояние </b>.</p><p>У сложных структур могут быть тысячи <a href="/otpravka-zablokirovana-microsoft-office-kak-otklyuchit-razlichnye-sostoyaniya.html">различных состояний</a> (варианты документов открытых в различных окнах фреймов), но при этом Url адрес этой самой структуры не меняется. Из-за этого будет <b>невозможно пользоваться закладками браузера </b> или же отправлять ссылки на понравившиеся страницы другим пользователям. Почему?</p><p>Потому что адрес остается неизменным и при открытии его из закладок браузера, или же из письма <a href="/gde-zaregistrirovana-elektronnaya-pochta-kak-uznat-svoi-adres-elektronnoi-pochty.html">электронной почты</a>, вы получите страницу со стартовым состоянием фреймовой структуры, а не то ее состояние, которое вы хотели бы сохранить.</p><p>Хотя, конечно же, эта проблема решаема, но уже не <a href="/chem-otkryt-obemnyi-fail-html-kak-otkryt-fail-html-prosteishie-sredstva-v-chem.html">средствами Html</a>, а с помощью серверных (например, Php) или клиентских языков (ДжаваСкрипт) программирования, и решения эти будут работоспособными не на все сто процентов. Такие решения, по сути, позволяют дописывать к <a href="/bezyshodnyi-link-php-prostoi-skript-dlya-sokrashcheniya-url-adresa.html">Url адресу</a> фреймовой структуры дополнительные данные о ее текущем состоянии, но сделать это не просто, а надежность будет не абсолютной.</p><p>Это первый минус использования фреймов для создания сайтов и очень весомый, но есть и еще один огромный минус. Поисковики, конечно же, уже давно научились индексировать их и извлекать из них адреса тех документов, которые подгружаются в их окна. Проблема в другом.</p><p>Когда пользователь переходит из <a href="/gde-v-facebook-naiti-kak-iskat-v-facebook-i-kak-popast-v-top-poiskovoi.html">поисковой выдачи</a> Яндекса или Google на ваш сайт, построенный на базе фреймовой структуры, то откроется только тот документ, который загружался в один из фреймов, а не вся структура. Понимаете, о чем я говорю?</p><p>Пользователь увидит документ и <b>не увидит навигации по вашему сайту </b>, ибо она будет зашита в других окнах, а они подгружаются только в составе всей структуры.</p><p>В итоге сайт, построенный на фреймах, становится просто не юзабельным. Хотя опять же есть решения этой проблемы на базе серверных скриптов, когда будет осуществляться редирект с адресов отдельных документов на фреймовую структуру находящуюся в нужном состоянии, но это опять же очень сложно и не всегда надежно.</p><p>В общем, вывод можно сделать однозначный — <b>создавать сайты на фреймах не нужно </b>. Но зато они постоянно используются для создания хелпов для <a href="/nado-li-zagruzhat-obnovleniya-na-smartfon-kak-otklyuchit.html">различных приложений</a>, ну и еще где-то по мелочи могут пригодиться.</p><p>Например, я создал фреймовую структуру, которую обозвал «Навигатор» (сейчас ее временно убрал) и которая стала своеобразным развернутым внешним меню для моего блога, которое, как мне кажется, должно упростить работу с ресурсом и , а следовательно и улучшить , которые сейчас «без балды» очень и очень сильно влияют на продвижение сайта.</p><p>Но, правда, во избежании каких-либо проблем с <a href="/naznachenie-i-osnovnye-vozmozhnosti-poiskovyh-sistem.html">поисковыми системами</a>, я закрыл от всю эту фреймовую структуру, а так же добавил на всякий случай во все ее Html файлы мета тег Rodots с запретом их индексации:</p><p> <head> <meta name="robots" content="noindex,nofollow"> <base target="ktona"> <meta charset="utf-8"> <title>JOOMLA

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

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

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

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

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