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

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

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

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

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

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

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

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

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

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

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

Пояснение к примеру №1

Как видно из кода выше, страница созданная из фреймов очень похожа на обыкновенную html-страницу: есть открывающий тег html, раздел , заголовок <span>Ваш браузер не поддерживает отображение фреймов </span>

Код файла top.html

Пример №2

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

Код файла menu.html

• Главная страница
• О сайте
• Об авторе
• ...

Код файла content.html

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

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

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

О сайте

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

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

Об авторе

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

Код файла footer.html

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

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

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

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

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

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

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

Фреймы - хорошо или плохо?

Рассматривать полезность фреймов можно с трех позиций – с позиции пользователя, с позиции seo-специалиста и вебмастера.

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

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

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

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

Влияние фреймов на раскрутку сайта.

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

Итак, как и чем влияет использование фреймов на раскрутку?

Влияние это серьезное. Дело в том, что именно на фреймах расположены все важные ссылки на внутренние страницы сайта. И для того, чтобы их прописать, верстальщику не нужно использовать теги …. А именно по этому тегу поисковой робот и определяет, что перед ним – ссылка, по которой можно зайти на другую страницу и проиндексировать ее (либо добавить к ее ссылочному весу еще пару «хлебных крошек»).

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

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

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

8.9K

Элемент

Frames

Что же делает

Основное различие между . В ТЭГС

Браузер Microsoft Internet Explorer - первый из браузеров (и пока единственный), который поддерживает так называемые "плавающие" фреймы.

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

Фрейм справа от данного текста размещен на странице с помощью специального тега