Frame это – Iframe и Frame — что это такое и как лучше использовать фреймы в Html

2

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

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

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

3

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

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

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

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

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

4

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

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

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

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

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

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

sovetclub.ru

Фреймы

1. Основные понятия
2. Страница набора фреймов
3. Атрибуты фрейма
4. Пример «невидимой» страницы кода HTML
5. Использование атрибута target для загрузки страницы в определенный фрейм
6. Почему следует использовать фреймы
7. Почему не следует использовать фреймы

Фрейм — это неподвижная часть (неподвижное окно) web-страницы, которая является элементом окна броузера. В каждом фрейме отображается свой документ HTML.
Пример использования фреймов — область элементов перемещения, которая обычно располагается слева или справа, а иногда снизу или вверху.
Создание стандартной страницы с фреймами требует по крайней мере трех oтдельных страниц HTML.
Во-первых, нужен файл набор фреймов (frameset), невидимая страница кода HTML, который управляет расположением и работой фреймов (назовем ее установочной, иногда ее называют страница-контейнер).
Во-вторых, нужны отдельные страницы кода для каждого фрейма.
Итак, если самая простая страница с фреймами содержит две видимые страницы, то всего получается три страницы HTML; если в странице есть три фрейма, всего получается четыре страницы и т. д.
В любом случае будет создаваться невидимая страница набора фреймов — установочная страница.

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

• <frameset>. Этот тег обозначает набор фреймов, и его основные аргументы определяют строки и столбцы. Информация о наборе закрывается соответствующим тегом </frameset>.
• <frame>. Этот тег определяет отдельные фреймы внутри набора фреймов. Здесь определяется, каким документом HTML будет заполнен фрейм. Для этого используется атрибут src=x (где х- относительный или абсолютный URL страницы HTML).

Примечание

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

Как и таблицы, фреймы состоят из сетки столбцов и строк. Таблицы могут быть сложными, с ячейками, занимающими несколько столбцов или строк. В таблицах выбор горизонтальных и вертикальных точек отсчета лежит на программисте. Фреймы более просты. Столбец несомненно вертикален, строка — горизонтальна.
Синтаксис также понятен. Строки (rows) обозначаются атрибутом rows, столбцы (columns) — атрибутом cols. Размер столбцов и строк может быть задан как в пикселях, так и в процентах. Например, cols=»220, *» создает столбец слева шириной 220 пикселей и столбец справа (обозначенный звездочкой), занимающий оставшееся пространство. Чтобы добавить дополнительные столбцы, просто определите их по очереди. Например, если надо создать четыре столбца равной ширины, можно применить такой синтаксис: соls5=»25%,25%,25%,25%».
Если вы хотите создать строки, просто измените синтаксис на rows=»220, *», и в результате получится строка в верхней части экрана высотой 220 пикселей. Чтобы создать четыре отдельных строки равной высоты, понадобится код rows= «25%,25%,25%,25%».
Для создания комбинаций столбцов и строк надо просто расставить значения в соответствующие теги.
Простой файл набора фреймов выглядит следующим образом:

<html>
<frameset cols="220,*">
<frame src="leftmenu.htm">
<frame src=="welcome.htm">
</frameset>
</html>

Конечно, чтобы страницу можно было просмотреть, файлы leftmenu.htm и welcome.htm должны быть доступны.

Аналогично организована и наша установочная страница. Результат вы видете в окне своего броузера.

Для тегов <frameset> и <frame> существует несколько мощных атрибутов:

Атрибуты тега <frameset>

• cols=x. Создает столбцы. X- переменная, которая заменяется на значение либо в пикселях, либо в процентах, либо на комбнацию одного из них и звездочки (*). В последнем случае создается динамический фрейм или фрейм относительного размера, занимающий остаток доступного пространства
• rows=x. Создает строки так же, как атрибут cols — столбцы.
• border=x. Используется броузером Netscape Navigator версии 3.0 и выше для указания ширимы рамки. Значение переменной задается в пикселях.
• frameborder=x. Используется Internet Explorer для задания ширины рамки в пикселях. Netscape Navigator 3.0 и выше использует этот атрибут со значениям и уеs или no.
• framespacing=x. Используется Internet Explorer для управления шириной рамки.

Для управления отдельными фреймами используются следующие атрибуты тега <frame>:

• frameborder=x. Управляет рамками вокруг отдельных фреймов. Netscape Navigator требует значения yes или no, a Internet Explorer будет искать числовое значение ширины в пикселях.
• marginheight=x. Контролирует высоту поля фрейма; значение указывается в пикселях.
• marginwidth=x. Контролирует ширину поля фрейма: значение указывается в пикселях
• name==x. Присваивает имя отдельному фрейму. Имена фреймов позволяют создавать ссылки па них из других страниц HTML. Имена должны начинаться со стандартного символа или цифры.
• noresize. Поместите этот полезный атрибут в вашу строку, если не хотите, чтобы пользователи вручную изменяли высоту или ширину фрейма.
• scrolling=x. Управляет отображением полос прокрутки; этому атрибуту присваиваются значения yes, no или auto. Значение yes автоматически помещает полосу прокрутки во фрейм, значение no означает, что полоса прокрутки не появится. Параметр auto отдает управление броузеру, который автоматически помещает полосу прокрутки во фрейм в случае необходимости.
• src=x. Надо заменить переменную «x» на относптельный или абсолютный URL страницы HTML, которую вы желаете поместить внутрь фрейма.
• border=x.Определяет ширину разделительной полосы между фреймами в пикселях.
• bordercolor=x.Определяет цвет разделительной полосы. Цвет задается либо шестнадцатиричным кодом, либо именем. Указание цвета подробно описано на странице Форматирование страницы

Совет

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

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

<html>

<head>


<title>Изучаем HTML!</title>

</head>

<frameset cols="120,*" frameborder="0" framespacing="0">
    <frame src="leftmenu.htm" name="Menu" scrolling="auto">
    <frameset rows="44,*" frameborder="1" framespacing="0">
        <frame src="navbar.htm" name="Navbar"
        scrolling="no" noresize>
        <frame src="welcome.htm" name="RIGHT">
    </frameset>
    <noframes>
    <body>
   Для просмотра необходим броузер, поддерживающий  фреймы.
    </body>
   </noframes>
</frameset>
</html>

Вы заметили незнакомые теги <noframes> и </noframes>?

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

В нашем примере, как легко видеть в окне вашего броузера, организовано три фрейма: «Menu»,»Navbar» и «RIGHT». Это имена фреймов.
Фрейм «Menu» — вертикальный — располагается в левой стороне окна броузера, занимая постоянную ширину в 120 пикселей. Он не очерчен границей и не имеет пустого пространства вокруг него. Исходным HTML-файлом для этого фрейма является файл «leftmenu.htm» — меню (карта сайта). Если этот файл не помещается на одной странице вашего броузера (это зависит от вида броузера и его настроек), то разрешена прокрутка информации в окне фрейма (атрибут scrolling=»auto»).
Фрейм «Navbar» — горизонтальный — расположен в верхней части окна броузера, занимает в высоту 44 пикселя, очерчен границей. Запрещено менять размеры этого фрейма (noresize),запрещена прокрутка (scrolling=»no»). Исходным HTML-файлом для этого фрейма является файл «navbar.htm». В нем описаны 3 навигационные «кнопки», которые вы сейчас видете на экране: «Добро пожаловать!», «Содержание», «Гостевая кника». Не конструктивно, не правда ли? Увы! Это были мои первые шаги!
И наконец, самый информационно наполненный фрейм — «RIGHT». В момент загрузки сайта в нем показывается файл «welcome.htm» (Добро пожаловать), а потом…
Потом в эту область окна броузера будет загружаться HTML-файл, который «закажет» пользователь, щелкнув по пункту меню (ссылке) во фрейме «Menu».
Таким образом реализуется механизм управления навигации по сайту.
Причем при каждом щелчке по пункту меню, содержимое выводится в область фрейм «RIGHT». В коде HTML файла «leftmenu.htm» это организовано так:

...
<A  href="content.htm#метка_0"  target ="RIGHT" >Основы HTML</A><BR>
<A    href="content.htm#метка_2"  target ="RIGHT">Приемы создания макетов</A><BR>
 <A    href="content.htm#метка_3"  target ="RIGHT">Работа с HTML</A><BR> 
<A    href="content.htm#метка_4"  target ="RIGHT">Каскадные таблицы стилей</A><BR>
<A    href="content.htm#метка_5"  target ="RIGHT">Динамический HTML</A><BR>
<A href="content.htm#метка_6" target ="RIGHT">Дизайн Web-страницы</A><BR>
...

Заметили — добавился ещё один атрибут в теге ссылки target ?

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

Ссылки на фрейм имеют формат:

<a href="адрес_файла" target="имя_фрейма">ссылка</a>

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

Кроме имён, определяемых непосредственно нами, есть часть уже определённых, стандартных имен:

• _blank — открывает ссылку в новом окне(загружает содержимое страницы, заданной ссылкой, в новом пустом окне)
  
• _top — открывает ссылку на всё окно, если она находилась во фрейме. Другими словами, она разрушает структуру фрейма и загружает файл во всё окно.
  
• _parent — открывает ссылку в родительском окне (загружает содержимое страницы, заданной ссылкой, в окно, которое содержит ссылку).
• _self — загружает содержимое страницы, заданной ссылкой, в окно, игнорируя используемые фреймы.

При создании этого сайта в качестве имени фрейма было использовано общее имя названия окна на странице Интернет-страницы (файл ref_internet.htm), а именно:

...
<a href="http://w3.org/Style/CSS" target="_blank">http://w3.org/Style/CSS
</a>
...

Таким образом обеспечивается загрузка спецификации многоуровневых таблиц на сайте Консорциума W3C в новое окно.
Убедитесь сами!

1. Используя фрэймы, можно разбить Web-страницы на несколько окон с использованием полос прокрутки. Таким образом можно улучшить внешний вид и функциональность вашего сайта.
2. Каждый фрэйм имеет свой URI-адрес, что позволяет загружать его независимо от других фрэймов.
3. Каждый фрэйм имеет собственое имя (атрибут name), позволяющее переходить к нему из другого фрэйма.
4. Размер фрэйма может быть изменен пользователем прямо на экране при помощи мыши (если это не запрешено указанием специального атрибута noresize).
5. Можно разместить статическую информацию, которую необходимо постоянно показывать пользователю (логотип фирмы, набор управляющих кнопок, copyright), в одном статическом фрэйме.
6. Можно поместить в статическом фрэйме оглавление (меню, карту сайта) всех WEB-документов, содержащихся сайте, что облегчает пользователю поиск интересующей его информации.
7. Можно создавать окна результатов запросов, когда в одном фрэйме находится собственно запрос, а в другом результаты запроса.

1. Страницы сайта не индексируются обычными поисковыми системами, исключая первую страницу. Это происходит из-за того, что страница описания фреймов не содержит в себе ссылок вида <a href=»»> …</a> и поисковые роботы, естественно, не могут попасть на внутренние страницы.

---

Совет

Рекомендуется использовать теги <noframes> и </noframes> в установочной странице, а между ними помещать ссылки на другие страницы сайта. По этим ссылкам может пройтись поисковый робот и проиндексировать ваш сайт.

---

2. Если пользователь попадает не на первую страницу сайта, не существует «официального» способа перейти на первую страницу сайта — приходится вручную редактировать путь в адресной строке броузера.
3. Невозможно поставить закладку на внутреннюю страницу сайта, определить ее адрес — фреймы скрывают истинный адрес страницы.
   Правда, в этом случае существует выход — откройте ссылку в новом окне.
4. При неточностях в логике взаимодействия фреймов усложняется навигация по сайту.
5. При нажатии пользователям кнопки «обновить» во фрейм загружается HTML-файл, указанный в установочном файле источником HTML-кода. А если вы уже давно бродите по сайту, и вас совсем не интересует страница «Добро пожаловать»?
6. Существуют проблемы отображения страницы в разных версиях броузеров.

Совет

Продолжение следует!

html-exp.narod.ru