Iframe и Frame — что это такое и как лучше использовать фреймы в Html. Как вставить в HTML iframe: пример использования Использование фреймов

Термин «фрейм» пришел к нам из английского языка. В переводе это слово означает «рамка» и представляет собой отдельную область окна. По своей структуре такой участок является полностью законченным HTML-документом.

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

История технологии

Сегодня можно констатировать, что решение об отходе от работы с фреймовой технологией окончательно принято. На сайте https://www.w3.org/TR/html5-diff/#obsolete-elements четко указано, что обычные теги для создания такой структуры frame, frameset и noframes являются устаревшими. В качестве аргумента приводятся данные о том, что использование такой структуры отрицательно отражается на юзабилити сайтов и их доступности в сети.

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

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

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

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

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

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

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

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

Возможные недостатки

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

  • Неудовлетворительное юзабилити. Сегодня доля пользователей мобильных устройств и планшетов с небольшим разрешением экрана растет и уже превышает число тех, кто посещает сайты со стационарных компьютеров и ноутбуков. И здесь применение фреймов создает серьезные проблемы с адаптивностью страниц при их отображении на различных устройствах. Эта проблема на сегодня практические не имеет решения.
  • Ухудшение доступности сайта для различных программ. Увеличение количества дополнительных программ (например, экранные дикторы) выявляет гораздо худшую доступность информации для считывания.
  • Неверное отображение страниц. Часто верстка страниц с такой структурой выглядит в браузерах некорректно с точки зрения дизайна. И это связано с особенностями технологии. С точки зрения SEO использование фреймов в html-верстке страницы весьма нежелательно.
  • Наличие единого адреса для всей структуры. В результате внутренние страницы такого сайта невозможно добавить в закладки. Это приводит к неудобствам в работе пользователей.
  • Некорректная индексация поисковиками. Наличие на сайте нескольких полноценных документов, из которых формируется одна страница, заметно затрудняет работу поисковых систем. Это приводит к существенным ошибкам при индексации. Как следствие - неправильное определение тематики и адресов страниц, выпадение критически важного контента из индексации.
  • Непрестижность. Это довольно необычный недостаток для ресурсов в сети. И все же нужно сказать, что факт устаревания верстки сайтов на фреймах приводит к тому, что авторы и владельцы таких ресурсов считаются ретроградами. Но есть отдельные исключения. Даже современные сайты, в которых размещаются чаты, обычно используют работу с фреймами.
  • Индексирование фреймов поисковиками

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

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

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

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

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

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

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

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

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

    Особенности продвижения сайтов во фреймах

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

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

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

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

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

    Рис. 8.1. Три документа в одном окне


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

    Прокручивать содержимое одних фреймов независимо от содержимого других.

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

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

    8.2. Создание набора фреймов

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

    Пример 8.1. Файл с описанием фреймов

    Сайт с фреймами

    Здесь можно увидеть два новых HTML?элемента: FRAMESET и FRAME. Первый из них используется для разбиения окна браузера или окна родительского фрейма на отдельные фреймы. Элемент FRAMESET задается парными тегами и . При разбиении окна на фреймы используются следующие атрибуты элемента FRAMESET:

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

    Rows – список значений высоты создаваемых фреймов (значения аналогичны значениям атрибута cols).

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

    Между тегами и должны содержаться либо описания каждого фрейма с использованием HTML?элемента FRAME, либо определения вложенных фреймов. Рассмотрим сначала описание фреймов при помощи элемента FRAME. Этот HTML?элемент задается при помощи одиночного тега . Ниже приведены его атрибуты, используемые чаще всего:

    Name – задает имя фрейма, позволяя использовать его в качестве целевого фрейма в гиперссылках;

    Src – URI документа, содержимое которого отображается в окне фрейма;

    Noresize – булев атрибут, блокирует возможность изменения размера окна фрейма;

    Scrolling – позволяет показать или убрать полосы прокрутки в окне фрейма, может принимать значения yes (показать полосы прокрутки), no (не отображать полосы прокрутки) или auto (используется по умолчанию: показать полосы прокрутки только в том случае, если содержимое не умещается в окне фрейма);

    Frameborder – указывает, должен ли браузер показывать рамку окна фрейма, может принимать значения 1 (рамка показывается, как на рис. 8.1, используется по умолчанию) или 0 (рамка не показывается);

    Marginheight – задает расстояние между границами и содержимым фрейма по вертикали.

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

    Здесь создается внешний набор из двух фреймов, занимающих всю высоту окна браузера. При этом в левом фрейме внешнего набора создается еще один набор фреймов. Нужно заметить, что блок … аналогичен одному элементу FRAME (описывает содержимое одного фрейма из внешнего набора). Анализируя приведенный выше фрагмент, можно однозначно сказать, что левый фрейм внешнего набора разбивается, а в правый фрейм загружается содержимое документа page3.html.

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

    8.3. Новые возможности гиперссылок

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

    Целевой фрейм отдельных гиперссылок

    Для указания целевого фрейма каждой гиперссылки, то есть фрейма, в котором будет показано содержимое открываемого по ссылке HTML?документа, используется атрибут target. Значением этого атрибута может быть либо имя нужного фрейма (значений атрибута name этого фрейма), либо одно из следующих предопределенных строковых значений:

    Blank – открыть документ в новом окне;

    Self – открыть документ в том же окне, где находится гиперссылка;

    Parent – открыть документ в окне родительского фрейма (аналогично _self, если фрейм, в котором находится гиперссылка, не имеет родителя);

    Top – заменить содержимое окна браузера содержимым открываемого документа, отменяя все созданные ранее фреймы.

    Атрибут target поддерживается для всех HTML?элементов, позволяющих создавать гиперссылки: A, LINK, AREA.

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

    Документ с описанием набора фреймов будет иметь имя index.html. Его содержимое приведено в примере 8.2.

    Пример 8.2. Файл с описанием набора фреймов

    Новый сайт с фреймами

    В приведенном выше примере имя назначено только одному фрейму (правому нижнему). Именно в этом фрейме и будет отображаться содержимое документов.

    В файле links.html находится документ с гиперссылками на файлы примеров (в него также добавлена ссылка на стартовую страницу). Предполагается, что файлы примеров расположены в папке Examples. Ниже приводится содержимое файла links.html (обратите внимание на задание значения атрибута target гиперссылок) (пример 8.3).

    Пример 8.3. Файл с гиперссылками

    Текст главы

    Пример 7.1

    Пример 7.2

    Пример 7.3

    Пример 7.4

    Пример 7.5

    Пример 7.6

    Пример 7.7

    Пример 7.8

    Пример 7.9

    Пример 7.10

    В файле title.html помещен заголовок сайта (вместе с гипотетическим логотипом), который показывается в соответствующем фрейме (пример 8.4).

    Пример 8.4. Файл для фрейма с заголовком сайта

    Заголовок сайта

    7. Таблицы

    Как можно увидеть из приведенного текста HTML?документа (см. пример 8.4), для достижения приемлемого расположения рисунка?логотипа пришлось прибегнуть к использованию таблицы.

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

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


    Рис. 8.2. Сайт, созданный с использованием фреймов

    Целевой фрейм по умолчанию

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

    Для задания целевого фрейма по умолчанию используется HTML?элемент BASE (одиночный тег ). Атрибуту target этого элемента присваивается имя фрейма, используемого по умолчанию. Если элемент BASE используется, то он должен быть помещен в заголовке (HEAD) HTML?документа.

    С учетом сказанного пример 8.3 можно переписать следующим образом (пример 8.5).

    Пример 8.5. Использование целевого фрейма по умолчанию

    Текст главы

    Пример 7.1

    Пример 7.2

    Пример 7.3

    Пример 7.4

    Пример 7.5

    Пример 7.6

    Пример 7.7

    Пример 7.8

    Пример 7.9

    Пример 7.10

    8.4. Элемент NOFRAMES

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

    Если важно, чтобы при просмотре сайта, использующего фреймы, пользователь хоть что?то увидел, то следует использовать HTML?элемент NOFRAMES. Этот элемент задается парными тегами и . Он помещается в один файл с описанием набора фреймов.

    Между тегами элемента NOFRAMES помещается HTML?текст, который браузер показывает в том случае, если он не поддерживает фреймы (или если пользователь отключил в браузере поддержку фреймов). Если браузер в состоянии показать фреймы, то текст между тегами элемента NOFRAMES игнорируется. Текст между тегами и можно форматировать точно так же, как если бы он находился между тегами и .

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

    Пример 8.6. Использование элемента NOFRAMES

    Новый сайт с фреймами

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

    сюда.

    8.5. Плавающие фреймы

    Кроме обычных фреймов, рассмотренных ранее, HTML допускает использование так называемых плавающих фреймов. Плавающие фреймы выглядят точно так же, как и внедренные HTML?документы: показываются браузером в окне, расположенном прямо в тексте (рис. 8.3).


    Рис. 8.3. Внешний вид плавающего фрейма


    Для создания плавающих фреймов используется HTML?элемент IFRAME (задается при помощи парных тегов и ). Настройка плавающего фрейма осуществляется при помощи следующих атрибутов:

    Src – URI HTML?документа, отображаемого в окне фрейма;

    Frameborder – режим отображения границы фрейма, может принимать значения 0 (не показывать границу) или 1 (показывать границу);

    Scrolling – режим отображения полос прокрутки содержимого фрейма, может принимать значения no (не показывать полосы прокрутки), yes (показывать полосы прокрутки) или auto (используется по умолчанию, показывать полосы прокрутки, только если содержимое не помещается);

    Marginwidth – задает расстояние между границами фрейма и его содержимым по горизонтали (в пикселах);

    Marginheight – задает расстояние между границами и содержимым фрейма по вертикали;

    Align – задает положение плавающего фрейма в тексте, может принимать значения left, right и center;

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

    Height – задает высоту окна плавающего фрейма.

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

    В качестве примера использования элемента IFRAME ниже приведен текст HTML?документа, внешний вид которого показан на рис. 8.3 (пример 8.7).

    Пример 8.7. Документ с плавающим фреймом

    Пример страницы с плавающим фреймом

    Плавающий фрейм выглядит следующим образом:

    Ваш браузер не поддерживает "плавающие" фреймы. Для просмотра содержимого документа start.html нажмите

    сюда

    8.6. Замена фреймов внедренными HTML-документами

    Если по каким?то причинам у вас нет возможности использовать фреймы, но все же хочется сохранить интерфейс сайта в том же виде, каким он был бы при использовании фреймов, можно прибегнуть к использованию HTML?элемента OBJECT. Взгляните на текст примера 8.8. Здесь для создания аналога плавающего фрейма, показанного на рис. 8.3, используется элемент OBJECT.

    Пример 8.8. Замена плавающего фрейма элементом

    Замена плавающего фрейма внедренным HTML-документом

    Внедренный HTML-документ выглядит так:

    Ваш браузер не поддерживает внедрение объектов. Для просмотра содержимого документа start.html нажмите

    сюда

    Результат внедрения в HTML?документ еще одного HTML?документа приведен на рис. 8.4. Как видите, внедрение объекта по виду практически не отличается от добавления плавающего фрейма.


    Рис. 8.4. Внедренный документ в роли плавающего фрейма


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

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

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

    Обычные фреймы на данный момент считаются устаревшей технологией и не поддерживаются в HTML5. Не используйте обычные фреймы в своих проектах! В HTML5 тегов frame , frameset и noframes уже просто нет, вместо них предусмотрен один единственный тег iframe (встроенный или плавающий фрейм).

    Тег

    Тег - заменяет тег и используется для разделения экрана. Имеет закрывающий тег.

    Атрибуты
  • COLS . Делит экран по вертикали. Принимает значения в пикселях, в процентах или просто *. Значение * говорит о том, что конкретный столбец будет занимать всю остальную часть экрана
  • ROWS . Делит экран по горизонтали. Принимает значения в пикселях, в процентах или просто *. Значение * говорит о том, что конкретная строка будет занимать всю остальную часть экрана
  • FRAMEBORDER . Определяет наличие рамок, т.е. границ фреймов. Принимает значения "yes" или "no".
  • BORDER . Определяет ширину рамки в пикселях.
  • BORDERCOLOR . Определяет цвет рамок. По умолчанию (если используется стандартная цветовая схема системы Windows) границы фреймов имеют тусклый, серый оттенок. Но при желании можно выбрать любой другой цвет. При определении цвета можно выбрать как его название, так и числовой эквивалент в системе RGB. Например, BLUE или #0000FF.

    В отдельном теге имеет смысл использовать только один из атрибутов – COLS или ROWS. Это означает, что фреймовая структура будет состоять или только из столбцов, или только из строк. Чтобы создать строки внутри столбцов или столбцы внутри строк, вам потребуется вложенные контейнеры ….

    Пример






    Результат:

    Обратите внимание также на различие в порядке нумерации фреймов.

    Тег

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

    Атрибуты
  • SRC . Определяет URL, связанный с конкретным фреймом.
  • MARGINWIDTH . Определяет расстояние между содержимым фрейма и его границами справа и слева.
  • MARGINHEIGHT . Определяет расстояние между содержимым фрейма и его границами сверху и снизу.
  • SCROLLING . Определяет присутствие в окне фрейма полосы прокрутки. Может принимать значения "yes", "no" и "auto"(по умолчанию).
  • NORESIZE . Определяет границы фрейма как "жестко закрепленные" и не позволяет пользователю изменить размеры окна фрейма. Причем фиксируются размеры всех фреймов, имеющих с закрепленным общую границу.
  • FRAMEBORDER , BORDER , BORDERCOLOR . Эти атрибуты связаны с рамками и аналогичны таким же в теге .
  • NAME . Определяет имя окна фрейма. Единственный атрибут, не влияющий на внешний вид фрейма. Позволяет контролировать процесс загрузки фреймов. Если окно фрейма имеет уникальное имя, то к нему можно непосредственно обратиться из других фреймов. Присваивая имена окнам фреймов, надо помнить об одном ограничении: имя не должно начинаться с символа подчеркивания "_", иначе оно будет игнорироваться. Так как с этого символа начинаются некоторые служебные имена. Пример




    Использование тега A для загрузки во фрейм Атрибуты
  • HREF . Определяет URL или имя нового документа, который вы хотите загрузить в определенное окно фрейма.
  • TARGET . Определяет имя фрейма, в который будет загружен новый документ. Это имя должно быть присвоено фрейму атрибутом NAME в теге .

    В следующем примере экран разбивается на две вертикальные области. В меньшей левой части находится оглавление, а в правую будут загружаться все остальные HTML-документы. В файле оглавления находятся простые текстовые гиперссылки на соответствующие разделы. Чтобы все работало, необходимо создать HTML-документы в файлах cosm.htm, eat.htm, perf.htm, massage.htm и manic.htm.

    Пример Оглавление
    • Товары
      • Косметика
      • Пищевые добавки
      • Парфюмерия
    • Услуги
      • Массаж
      • Маникюр
    Здравствуйте! Тег

    Тег избавит вас от необходимости повторять атрибут TARGET в каждой отдельной гиперссылки, если все они указывают на одно и то же окно фрейма. Для этого надо поместить тег с атрибутом TARGET в контейнер ….

    Использование тега даст возможность уменьшить размер файла оглавления left.htm предыдущего примера.

    Пример Оглавление
    • Товары
      • Косметика
      • Пищевые добавки
      • Парфюмерия
    • Услуги
      • Массаж
      • Маникюр

    Атрибут TARGET каждой конкретной ссылки замещает одноименный атрибут тега .

    Пример Оглавление
    • Товары
      • Косметика
      • Пищевые добавки
      • Парфюмерия
    • Услуги
      • Массаж
      • Маникюр
    Здесь товары! Здесь услуги! Специальные эффекты, получаемые с помощью атрибута TARGET

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

  • TARGET=”_blank” . Документ загружается в новое окно броузера.
  • TARGET=”_self” . Документ загружается в текущее окно.
  • TARGET=”_parent” . Документ загружается в родительский фрейм. Обычно это фрейм, стоящий в контейнере … перед текущим. Если родительского фрейма нет, то значение "_parent" становится тождественным "_self".
  • TARGET=”_top” . Документ загружается в самый верхний фрейм.

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

    Тег

    В HTML 4.0 появились плавающие (или встроенные) фреймы. С помощью тега можно поместить один фрейм в обычный HTML-документ. Причем контейнер … здесь не нужен.

    Закрывающий тег обязателен!

    Атрибуты
  • ALING . Определяет вид выравнивания. Принимает значения "left", "center", "right".
  • HEIGHT . Определяет высоту фрейма в пикселях
  • WIDTH . Определяет ширину фрейма в пикселях.
  • SRC, MARGINWIDTH, MARGINHEIGHT, SCROLLING, FRAMEBORDER, BORDER, BORDERCOLOR, NAME . Аналогичны рассмотренным ранее.
  • vspase . Устанавливает поля сверху и снизу с наружи от iframe
  • hspase . Устанавливает поля сбоков с наружи от iframe
  • marginwidth . Определяет величину отступов по левому и правому краям внутрь iframe-а; должно быть равно или больше 1.
  • marginheight . Определяет величину отступов по верхнему и нижнему краям внутрь iframe-а; должно быть равно или больше 1.
  • scrolling . Указывает будет-ли выводится линейка прокрутки в iframe; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.
  • title . Текст всплывающей подсказки. Тег

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

    Ваш браузер не поддерживает плавающие фреймы!

    Как загрузить фрейм без дополнительных файлов?

    Чтобы загрузить фрейм без использования внешних файлов, необходимо положить в переменную HTML-код фрейма, а затем в качестве SRC тега указать "javascript:parent.имя переменной ".

    var varFrame = " HTML-код "; ...

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

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

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

    ...

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

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

    Есть несколько решений этой проблемы

    Ранее бал рассмотрен пример фреймовой структуры. Будем рассматривать различные способы решения этой проблемы именно на нём.

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

    Возможны три случая:

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

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

    Реализация решения возможна как на стороне клиента, так и на стороне сервера. Основной недостаток реализации на стороне клиента очевиден - зависимость от возможностей и настроек клиента. Например, на компьютере пользователя запрещено выполнение скриптов. Второй вариант не будет работать, если на сервере нет поддержки PHP .

    JavaScript-решение.

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

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

    Создадим файл frame.js :

    If (window.name != "main") { window.name="root"; document.write(""); document.write(""); document.write(""); document.write(""); }

    Вначале мы проверяем название окна, в который загружается страница: if (window.name != "main") . Если имя окна и название фрейма не совпадают, значит надо создать фреймовую структуру. Это делается динамически с использованием метода write объекта document .

    К каждой странице сайта подключаем файл frame.js . Теперь страницы сайта будут иметь такую структуру:

    ... ...

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

    PHP-решение

    При таком подходе сайт станет доступным большему числу посетителей.

    Проверять окружение страницы будем по другому (не так, как при использовании JavaScript ). Загрузку документа во фрейм будем выполнять с параметром frames=yes . При открытии страницы проверяем этот параметр, и в случае необходимости динамически создаём фреймовую структуру. Ниже приведён код, который за это отвечает.

    Помещаем код в файл frames.php . Теперь необходимо подключить его к каждой странице сайта. Ниже приведён пример такой страницы.

    frames ...

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


    .

    Сферы применения фреймов

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

    Выбор фреймовой структуры отображения информации на WWW оправдан в следующих случаях:

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

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

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

    На рис. 5.1 показана одна из HTML-страниц агентства "Финмаркет", специализирующегося на предоставлении информации с финансовых и фондовых рынков России.

    Рис. 5.1. Типичный Web-документ с фреймовой структурой

    На этой странице окно браузера разбивается на три фрейма. Нижняя часть окна занимает 20% высоты всего окна и содержит постоянную информацию, которая в данном случае представляет собой графическое меню, позволяющее в любой момент обратиться к наиболее важным разделам. Этот фрейм не может изменять своих размеров по командам пользователя и не имеет полос прокрутки. Верхняя часть окна (составляющая 80% высоты) разделена по горизонтали на два фрейма. Левый фрейм содержит оглавление документов, которые могут быть просмотрены пользователем. Правый фрейм, занимающий большую часть окна просмотра, предназначен для отображения самих документов. При первоначальной загрузке эти два фрейма делят окно браузера по горизонтали в соотношении 15% на 85%. Это соотношение может изменяться пользователем при просмотре, что позволяет выбрать оптимальные размеры фреймов с учетом содержимого загруженных документов. Каждый из этих фреймов имеет свою полосу прокрутки, обеспечивающую возможность просмотра всего содержимого фрейма вне зависимости от размера самого фрейма, всего окна браузера и используемых шрифтов. При выборе любой ссылки в левом фрейме соответствующий документ будет загружен в правый фрейм. Такая структура позволяет одновременно видеть на экране и оглавление документов, и содержимое выбранного документа.

    Приведем без пояснений фрагмент HTML-кода, по которому построен документ с данной структурой:

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

    В интернете можно найти сайт электронного издания популярного в Санкт-Петербурге адресно-телефонного справочника "Весь Петербург".

    Электронная версия справочника доступна по адресу http://www.allpetersburg.ru и позволяет находить нужные сведения по запросам пользователя. Данная страница документа также имеет фреймовую структуру и состоит из двух фреймов, причем первый из них имеет ширину 100 пикселов, а второй занимает всю оставшуюся ширину окна просмотра. Фрейм, расположенный с левой стороны, используется для графического меню, постоянно присутствующего на экране, а также содержит логотип компании "Nevalink". Второй фрейм содержит документ, который в данном случае представляет собой форму для запроса пользователя. Структура этой страницы определена следующим HTML-кодом:

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

    Совет

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

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

    Существуют также страницы, которые с виду построена аналогично предыдущим. Для примера можно взять страницу очень популярного во всем мире сборника программных продуктов, предназначенных в основном для работы с Интернетом. Адрес сервера http://www.tucows.com . Заметим, что имя сервера определила аббревиатура, полученная от сокращения полного названия сборника - The Ultimate Collection of Winsock Software. Поскольку сокращение tucows оказалось созвучным словосочетанию two cows (две коровы), то на страницах сервера сплошь и рядом встречается изображение коров, а рейтинг программных продуктов оценивается в количестве мычаний ("Моо") и графически изображается в виде ряда из соответствующего числа коров. Большинство страниц сервера построено однотипно - в левой части окна приводится список доступных разделов, а в правой части - перечень программных продуктов выбранного раздела. На первый взгляд структура документа должна иметь примерно такой же вид, как и в предыдущих примерах. Однако в этом документе фреймы не используются! Данная страница построена при помощи таблицы, которая состоит всего лишь из одной строки с двумя ячейками. Таблица не имеет обрамления и лишь преследует цель форматирования страницы. Впечатление разделения экрана на две части по вертикали создано путем использования фонового графического изображения, содержащего вертикальную линию, а вовсе не сеткой таблицы. В этом можно убедиться, если выполнять просмотр страницы без загрузки изображений. Использование таблицы здесь, видимо, обусловлено соображениями большей доступности документов, поскольку фреймы позволяют отображать не все браузеры.

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

    Сравнение приведенных примеров показывает, что использование таблиц и фреймов может иногда быть взаимозаменяемым и определяется пожеланиями разработчиков. Заметим, что часто при взгляде на страницу с отображенным на ней документом невозможно определить, как она построена. Конечному пользователю знание внутренней структуры документа не требуется, однако при разработке собственных Web-страниц ознакомление с исходным кодом существующих документов было бы крайне полезно. В первом примере (см. рис. 5.1) фреймовая структура документа сразу же видна - наличие двух вертикальных полос прокрутки уже определяет присутствие отдельных фреймов. Последующие два примера внешне очень схожи, причем невозможно определить, что первый из них построен с помощью фреймов, а второй - с помощью таблиц. Отличия будут проявляться только при работе с ними. В примере адресно-телефонного справочникапри прокрутке документа левая часть окна будет оставаться на месте, что возможно только при наличии фреймовой структуры. В следующем примере (сборника программных продуктов) при прокрутке будет смещаться все содержимое окна.

    Посмотреть структуру документа при работе с браузером Netscape можно воспользовавшись пунктом Page Info (в версиях 3.x браузера Netscape этот пункт меню назывался Document Info) меню View (рис. 5.2 ).

    Рис. 5.2 . Меню View браузера Netscape

    Кроме того, всегда можно ознакомиться с исходным HTML-кодом всего документа, воспользовавшись пунктом Page Source меню View (или пунктом View Frame Source контекстного меню, вызываемого правой кнопкой мыши, для просмотра HTML-кода документа, загруженного в выбранный фрейм).

    Совет

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

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

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

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

    Правила описания фреймов

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

    Давайте для начала рассмотрим полный HTML-код, создающий документ с фреймами средней сложности:

    Этот пример создает страницу с фреймами, показанную на рис. 5.3 . Как вы видите, этот HTML-код определяет четыре фрейма. Верхний фрейм занимает всю ширину страницы и содержит заголовок. Далее идут два центральных фрейма, один из которых расположен с левой стороны и занимает 25 процентов от ширины экрана, а второй занимает оставшееся место. Последний, четвертый фрейм занимает нижнюю четверть экрана. В каждый из фреймов загружается отдельный HTML-документ, имя которого определяется параметром SRC.

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


    Рис. 5.3 . Результат отображения браузером Netscape HTML-документа с фреймами, приведенного в примере

    Тэг

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

    Совет

    Так как для страниц с фреймами не применяется раздел BODY, то нет возможности задать фоновое изображение и цвет фона для всей страницы в целом. Напомним, что эти установки определяются параметрами BACKGROUND и BGCOLOR, записываемыми в тэге BODY. Однако это не мешает в каждый фрейм загружать документы, имеющие свои параметры фона.

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

    Тэг имеет два параметра: ROWS (строки) и COLS (столбцы) и записывается в следующем виде:

    .

    Примечание

    Некоторые браузеры разрешают использовать дополнительные параметры тега

    Можно определить значения для ROWS или COLS, или обоих вместе. Необходимо определить, по меньшей мере, два значения хотя бы одного из этих параметров. Если другой параметр опущен, то его значение принимается равным 100%.

    Совет

    Если в тэге определено только одно значение для ROWS и COLS, то этот тег будет считаться ошибочным и браузер проигнорирует его. Другими словами, нельзя определить , состоящий только из одного фрейма.

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

    определяет набор трех фреймов. Эти значения представляют собой абсолютные значения в пикселах. Другими словами, первый фрейм (первая строка) имеет высоту 100 пикселов, второй - 240 и последний - 140 пикселов.

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

    .

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

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

    .

    Звездочка (*) используется для пропорционального деления пространства. Каждая звездочка представляет собой одну часть целого. Складывая все значения чисел, стоящих у звездочек (если число опущено, то подразумевается единица), получим знаменатель дроби. В этом примере первый столбец займет 1/6 часть от общей ширины окна, второй столбец - 2/6 (или 1/3), а последний - 3/6 (или 1/2).

    Помните, что числовое значение без каких-либо символов определяет абсолютное число пикселов для строки или колонки. Значение со знаком процента (%) определяет долю от общей ширины (для COLS) или высоты (для ROWS) от окна просмотра, а значение со звездочкой (*) задает пропорциональное распределение оставшегося пространства.

    Приведем пример, использующий все три варианта задания значений:

    .

    В этом примере первый столбец будет иметь ширину 100 пикселов. Второй столбец займет 25 процентов от всей ширины окна просмотра, третий столбец - 1/3 оставшегося пространства и, наконец, последний столбец - 2/3. Абсолютные значения рекомендуется назначать первыми по порядку слева направо. За ними следуют процентные значения от общего размера пространства. В заключение записываются значения, определяющие пропорциональное разбиение оставшегося пространства.

    Совет

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

    Если используется тег , в котором заданы значения и COLS, и ROWS, то будет создана сетка из фреймов. Например:

    Эта строка HTML-кода создает сетку фреймов с тремя строками и двумя столбцами. Первая и последняя строки занимают 1/4 высоты каждая, а средняя строка - половину. Первый столбец занимает 2/3 ширины, а второй - 1/3.

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

    Примечание

    В некоторых источниках по языку HTML указывается, что параметры COLS и ROWS тега являются взаимоисключающими. Однако и Netscape, и Microsoft Internet Explorer допускают их совместное использование.

    Тэг

    Тэг определяет одиночный фрейм. Он должен располагаться внутри пары тегов и . Например:

    Обратите внимание, что тег не является контейнером и в отличие от не имеет завершающего тэга. Все определение одиночного фрейма выполняется одной строчкой HTML-кода.

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

    Тэг имеет шесть параметров: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING и NORESIZE.

    Примечание

    Некоторые браузеры разрешают использовать ряд дополнительных параметров тега . Обзор возможностей браузеров Netscape и Microsoft Internet Explorer дается в конце главы.

    Приведем запись тега со всеми параметрами:

    На практике в тэге редко используются одновременно все параметры.

    Наиболее важный параметр - SRC (сокращение от слова source). Довольно часто в тэге задается единственный параметр SRC. Например:

    .

    Значение параметра SRC определяет URL-адрес документа, который будет загружен изначально в данный фрейм. Обычно в качестве такого адреса записывается имя HTML-файла, расположенного в том же самом каталоге, что и основной документ. Тогда строка определения фрейма будет выглядеть, например, так:

    .

    Обратите внимание, что любой HTML-файл, заданный в описании фрейма, должен быть полным HTML-документом, а не фрагментом. Это означает, что документ должен иметь теги HTML, HEAD, BODY и т. д.

    Конечно, в качестве значения SRC может быть задан любой допустимый URL-адрес. Если, например, фрейм используется для отображения изображения в формате GIF, которое располагается на сервере издательства данной книги, то следует записать:

    .

    Совет

    He задавайте в документе, описывающем структуру фреймов, никакого содержания.

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

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

    .

    Такая запись создает фрейм с именем "Frame_1", на который может быть выполнена ссылка. Например:

    Щелкните здесь для загрузки

    документа other.htm во фрейм с именем Frame_1.

    Обратите внимание на параметр TARGET, который ссылается на имя фрейма. Если для фрейма не задано имя, то будет создан фрейм без имени, и не будет возможности использовать ссылки на него из другого фрейма. Имена фреймов должны начинаться с алфавитно-цифрового символа.

    Параметры MARGINWIDTH и MARGINHEIGHT дают возможность устанавливать ширину полей фрейма. Записывается это следующим образом:

    MARGINWIDTH="value",

    где "value" - абсолютное значение в пикселах. Например:

    Данный фрейм имеет поля сверху и снизу по 5 пикселов, а слева и справа - по 7 пикселов. Не забудьте, что здесь идет речь о полях, а не о рамках. Параметры MARGINWIDTH и MARGINHEIGHT определяют пространство внутри фрей-ма, в пределах которого не будет располагаться никакая информация. Минимально допустимое значение этих параметров равно единице.

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

    .

    Параметр SCROLLING может принимать три значения: YES, NO или AUTO. Значение AUTO действует так же, как и в случае отсутствия параметра SCROLLING. Значение YES вызывает появление полос прокрутки вне зависимости от необходимости этого, a NO - запрещает их появление. Например:

    .

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

    .

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

    Тэг

    Возможность работы с фреймами не предполагалась ни в стандарте HTML 3.0, ни в HTML 3.2. Здесь до последнего времени складывалась достаточно типичная ситуация, когда реально используемые возможности активно применяются на многих WWW-страницах, однако не являются частью стандарта. Это означало, что браузеры вполне законно могли игнорировать фреймы. С появлением стандарта HTML 4.0 ситуация изменилась - теперь поддержка фреймовых структур закреплена стандартом. Заметим, что большинство современных браузеров распознавали фреймы и до появления HTML 4.O. Тем не менее, необходимо предоставлять информацию пользователям, применяющим браузеры без поддержки фреймов. Для таких браузеров можно предусмотреть альтернативную информацию, которая записывается между парой тегов и . Это выглядит следующим образом:

    весь HTML-документ

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

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

    Особенности описания фреймовых структур

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

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

    параметр опущен, то фрейм не будет создан, хотя место под него будет оставлено. Например, запись типа вполне логична и могла бы определять фрейм с именем "В", в который исходно не загружается никакой документ. Однако из-за отсутствия параметра SRC фрейм с таким именем не будет существовать, поэтому дальнейшие попытки загрузить в него какой-либо документ останутся безрезультатными, а место в окне, отведенное под данный фрейм, будет пустовать. Более того, некоторые браузеры (например, Microsoft Internet Explorer версии 3 для Windows З.хх) при попытке загрузки документа в такой фрейм выдадут сообщение об ошибке и завершат работу.

    Обязательность задания параметра SRC не поддается логическому объяснению, поэтому лучше всего просто принять к сведению этот факт. Тогда даже при отсутствии документа, который необходимо загружать в данный фрейм с самого начала, следует в параметре SRC задать имя какого-либо файла. Например, такой файл можно назвать empty.htm (empty - пустой), содержимым которого будет являться минимально возможный корректный HTML-документ, а именно:

    Можно сократить данный документ до двух тэгов: , что также будет верным HTML-документом. Идя по пути максимального сокращения размеров "пустого" документа, можно ограничиться файлом, размер которого равен одному байту, в котором хранится символ пробела (или любой другой неотображаемый символ). Этот файл не будет корректным HTML-документом, но не вызовет нареканий со стороны большинства браузеров. Дальнейшее сокращение размера такого файла до нуля не оправдано, так как при его загрузке браузером Netscape будет выдаваться предупреждающее сообщение (рис. 5.4 ) о том, что документ не содержит данных.

    Рис. 5.4 . Предупреждающее сообщение при загрузке файла нулевой длины

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

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

    Рис. 5.5 . Предупреждающее сообщение при попытке загрузки несуществующего файла

    Совет

    Создайте файл с именем empty.htm, размер которого равен одному байту, содержащий символ пробела. Примите за правило при записи тега всегда указывать SRC=empty.htm, если сразу невозможно указать имя конкретного файла.

    Примеры фреймов

    В этом разделе представлены некоторые типичные примеры определений фреймов.

    Возвратимся к примеру, который приведен в начале данного раздела (рис. 5.3 ). Этот пример использует вложенную структуру . Внешний тег создает три строки высотой, соответственно, в 25, 50 и 25 процентов от общей высоты окна просмотра:

    .

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

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

    Этот тег определяет два столбца, на которые разбивается средняя строка экрана. Строка, в которой располагаются эти два столбца, занимает 50 процентов высоты экрана, что определено во внешнем тэге . Левый столбец использует 25 процентов от ширины экрана, в то время как правый столбец занимает оставшиеся 75 процентов ширины.

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

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

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

    Вернемся к примеру и заменим вложенный на отдельный . Естественно, потребуется два HTML-файла вместо одного, так как вложенный теперь будет располагаться в отдельном документе. Приведем содержимое первого (внешнего) файла:

    Ваш браузер не может отображать фреймы

    Второй файл с именем frameset.htm содержит следующий код:

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

    Примечание

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

    Совет

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

    Приведем пример создания регулярной прямоугольной сетки фреймов:

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


    Рис. 5.6 . Сетка фреймов 2 на 3

    Заметим также, что сумма значений процентов в параметре COLS равна не 100, а только 90 процентов. В этом нет ничего страшного, так как браузер автоматически пропорционально изменит ширину колонок, чтобы ликвидировать это противоречие.

    Особенности навигации при использовании фреймов

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

    Браузер Netscape версий 3.x и 4.x при нажатии кнопки Back возвращает обратно документ в тот фрейм, действия с которым производились последним. Те же действия будут произведены в случае, если будет выбран пункт Back при вызове контекстного меню в любом из фреймов. Напомним, что контекстное меню вызывается нажатием правой кнопки мыши. Таким образом, независимо от того, в каком из фреймов было вызвано контекстное меню, при нажатии кнопки Back будет выполнена отмена последней операции, даже если она была произведена в другом фрейме.

    Браузер Netscape версии 2.x работал совершенно по-другому. Контекстное меню содержит команду Back in Frame, выполнение которой возвращает документ в текущий фрейм, а не выполняет отмену последней операции.

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

    Взаимодействие между фреймами

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

    Взаимодействие между фреймами заключается в возможности загрузки документов в выбранный фрейм по командам из другого фрейма. Для этой цели используется параметр TARGET тега . Данный параметр определяет имя фрейма или окна браузера, в которое будет загружаться документ, на который указывает данная ссылка. По умолчанию при отсутствии параметра TARGET документ загружается в текущий фрейм (или окно). Это умолчание может быть изменено заданием тега с нужным значением параметра TARGET. Задание имени фрейма, в который осуществляется загрузка по умолчанию, очень удобно для тех случаев, когда большое количество ссылок должно направлять документы в определенный фрейм. Типичная ситуация с оглавлением в одном фрейме, ссылки из которого загружают соответствующие документы в смежный фрейм, была показана в начале данной главы (рис. 5.1). Для этого примера в разделе файла с именем LIST.htm целесообразно записать следующую строчку: . В противном случае для каждой ссылки пришлось бы указывать параметр TARGET.

    Имена фреймов должны начинаться с латинской буквы или цифры. В качестве имени может задаваться имя существующего окна или фрейма, а может указываться новое имя, под которым будет открыто новое окно. Имеется четыре зарезервированных имени, при задании которых выполняются специальные действия. Эти имена начинаются с символа подчеркивания (_): "_blank", "_self", "_parent" и "_top". Любое другое имя, начинающееся с символа "подчеркивание", недопустимо.

    TARGET="_blank" - обеспечивает загрузку документа в новое окно. Это окно не будет иметь имени, а следовательно, в него невозможно будет загрузить другой документ.

    TARGET="_self" - загрузка документа будет произведена в текущий фрейм (или окно). Такую запись следует использовать для обхода умолчания, заданного тэгом .

    TARGET="_top" - вызывает загрузку документа в полное окно. Если документ уже располагается в полном окне, то данное значение действует так же, как "_self".

    TARGET="_parent" - вызывает загрузку документа в область, занимаемую фреймом-родителем текущего фрейма. При отсутствии фрейма-родителя данное значение параметра действует так же, как "_top" .

    Примечание

    В ряде источников по языку HTML ошибочно утверждается, что при отсутствии родителя у фрейма значение "_parent" эквивалентно "_self". Такое утверждение не всегда корректно.

    Предупреждение

    Зарезервированные имена фреймов "_blank", "_self", "_parent" и "_top" должны записываться строчными латинскими буквами. Заметим, что такая требовательность присуща только Netscape. Браузер Microsoft Internet Explorer правильно распознает зарезервированные имена, записанные на любом регистре.

    Приведем примеры взаимодействия между фреймами и отдельными окнами браузера. Рассмотрим следующий HTML-код:

    Использование фреймов

    В этом HTML-документе дается описание структуры, состоящей из трех фреймов с именами "А", "B " и "C ". Имена фреймов потребуются в дальнейшем для организации ссылок между фреймами. Заметим, что на фрейм с именем "А" в данном примере ссылок не будет, поэтому он мог быть оставлен без имени вообще. При загрузке приведенного выше документа в браузер во фреймах будет отображена информация, содержащаяся в файлах, определяемых параметром SRC. Во фрейм "А" попадет содержимое файла frame_a.htm, а остальные два фрейма получат данные из файла empty.htm, который не имеет отображаемых данных. Еще раз напомним, что HTML-документ, описывающий структуру фреймов, не имеет раздела .

    Приведем текст файла с именем frame_a.htm:

    Документ для фрейма A

    D

    4. Загрузка документа в новое окно

    5. Загрузка документа в полное окно

    6. Загрузка документа в текущий фрейм

    Этот документ является полным HTML-документом, имеющий разделы и и, в свою очередь, имеет ссылки на файл с именем test.htm, располагающийся в том же самом каталоге, что и файл frame_a.htm.

    Текст файла test.htm крайне прост:

    Тестовый документ

    Текст тестового документа

    Файл frame_a.htm, содержимое которого загрузилось во фрейм "А", имеет шесть ссылок на один и тот же файл test.htm с различным значением параметра TARGET.

    Рассмотрим действия, которые будут происходить при реализации этих ссылок. Первая ссылка со значением TARGET="B" будет загружать файл test.htm во фрейм с именем "в". Заметим, что после реализации любой из шести ссылок браузер Netscape автоматически окрасит в другой цвет все шесть, так как они указывают на один и тот же файл. Microsoft Internet Explorer отмечает только действительно реализованные ссылки.

    Вторая ссылка выполнит те же действия для фрейма "C". Изначально во фреймах "B" и "C" ничего нет (точнее загружено содержимое пустого файла empty.htm). Реализация первой и второй ссылок заполнит эти фреймы.

    Третья ссылка со значением TARGET=MD" приведет к образованию нового окна браузера с именем "D" и загрузке в него файла test.htm. Заметим, что форма записи этой ссылки ничем не отличается от первых двух. Различие состоит в том, что в первых двух случаях ссылки были даны на существующие фреймы, имена которых были определены в файле со структурой фреймов, а в данном случае ссылка дана на несуществующий объект. Если данная ссылка будет выполнена хотя бы один раз, то окно с именем "D" будет образовано и повторный переход по ссылке лишь перезагрузит данные в существующее теперь окно "D". Конечно, пользователь может в любой момент его закрыть и вновь образовать выбором данной ссылки. На рис. 5.7 показана ситуация после того, как первые три ссылки были реализованы. Напомним, что расположение и размеры окон на экране определяются пользователем.

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

    Пятая ссылка со значением TARGET="_top" загрузит документ в полное окно вместо всей фреймовой структуры. При таком значении параметра TARGET новое окно не образуется. Возврат к фреймовой структуре возможен нажатием кнопки Back.

    Примечание

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

    Совет

    Напомним, что названия загружаемых документов задаются тэгом . Если документ загружен в полное окно, то его название выдается в самой верхней части окна браузера. Если же документ загружается во фрейм, то его название нигде не отображается, а в верхней части окна по-прежнему будет располагаться название документа, содержащего описание фреймовой структуры документа. Поэтому названия документов, предназначенных для просмотра во фреймах, не имеют большого значения. Например, на рис. 5.7 один и тот же документ загружен во фреймы "в" и "С", а также в отдельное окно с именем "D", при этом название документа видно только в окне "D". Тем не менее, вряд ли стоит рекомендовать опускать названия документов, загружаемых во фреймы, так они могут появиться, например, в списке закладок (Bookmarks) при создании закладки на документ, расположенный во фрейме или списке просмотренных документов.

    Рассмотрим еще один интересный пример организации взаимодействия между фреймами и окнами браузера. Пусть имеется текст основного загружаемого HTML-документа:

    Использование имен окон

    Документа, имеющего фреймовую структуру, в новое окно

    Использование фреймов

    Обратите внимание, что если основной документ является стандартным HTML-документом, то загружаемый по ссылке из основного документа файл frame.htm содержит структуру фреймов и в свою очередь ссылается на файл empty.htm.

    После загрузки основного документа окно браузера будет иметь вид, показанный на рис. 5.8 (левое окно). Весь документ состоит из двух ссылок. Выполним переход по первой ссылке. Будет образовано новое окно с именем "D", в котором появится текст файла test.htm (рис. 5.8 , правое окно). Повторение этой ссылки будет лишь перезагружать данные в окне "D".


    Рис. 5.8. Пример окон взаимодействующих фреймов

    Выполним переход по второй ссылке. Образуется новое окно без имени, в которое загрузится файл frame.htm, определяющий два фрейма с именами "С" и "D" (рис. 5.8, нижнее окно). В обоих фреймах ничего нет (точнее загружен пустой документ empty.htm). Обратим внимание, что теперь имеется открытое окно с именем "D" и окно с фреймами, один из которых также имеет имя "D". Выполним снова переход по первой ссылке. В отличие от первого случая загрузка данных будет осуществляться не в окно "D", а во фрейм с именем "D". Результат всех описанных действий показан на рис. 5.8.

    Примечание

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

    Если же изменить порядок действий, т. е. сначала выполнить вторую ссылку, а затем первую, то окно с именем "D" вообще не появится! Это произойдет потому, что после реализации второй ссылки образуется фрейм с именем "D" и для первой ссылки не будет нужды открывать новое окно.

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

    Совет

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

    Предупреждение

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

    Примеры более сложного взаимодействия между фреймами

    Выше были рассмотрены достаточно простые типовые примеры взаимодействия между фреймами. Были рассмотрены задачи создания новых окон, замены содержимого отдельных фреймов, а также выдачи документа в полное окно с разрушением всей структуры фреймов. Даны примеры использования задаваемых имен фреймов, а также зарезервированных имен "_blank", "_self" и "_top". Использование последнего зарезервированного имени "_parent" более сложно и будет описано ниже.

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

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

    Попробуем расширить постановку задачи. Пусть необходимо отображать на экране содержимое достаточно большого документа, состоящего из глав, разделенных на разделы. Типичным примером служит техническая литература по какой-либо тематике. Опишем желаемое представление такого документа на экране. Разобьем экран на три фрейма, в одном из которых будет располагаться список глав книги, во втором - перечень разделов выбранной главы, а в третьем - текст выбранного раздела. При выборе ссылки во втором фрейме должно меняться содержимое третьего фрейма. Реализация этого требования тривиальна. При выборе ссылки в первом фрейме должно одновременно изменяться содержимое как второго, так и третьего фрейма. На первый взгляд реализация этой задачи на языке HTML невозможна (без применения программирования на языке JavaScript или др.), так как при выполнении ссылки загружается только один документ, а не два или более. Тем не менее, решение данной задачи вполне возможно.

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

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

    Пример взаимодействия между фреймами

    Созданный файл с вложенной структурой имеет имя 1_2.htm и содержит следующий код:

    1-2

    На первый взгляд совершенно ничего не изменилось. В обоих случаях имеется три фрейма, в которые загружаются документы left.htm, 1.htm и 2.htm соответственно. Однако при взаимодействии фреймов различие проявится. Если в первом случае ни у одного из фреймов нет фрейма-родителя, то во втором случае для двух фреймов родительским будет фрейм с именем "Two_Frames". Поэтому если в любом из двух фреймов применить ссылку со значением параметра TARGET, равным "_parent", то результат будет различным для первого и второго случая. Для первого случая реализация такой ссылки приведет к загрузке документа в полное окно с замещением существующей структуры фреймов. Здесь проявляется свойство значения "_parent", которое при отсутствии фрейма-родителя действует как "_top". Во втором случае будет замещен фрейм с именем "Two_Frames", который занимает правую половину экрана и по существу состоит из двух фреймов.

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

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

    Левый фрейм

    документов в двух фреймах, расположенных в правой части окна.

    Выберите вариант расположения документов:

    Вариант 1-2

    Вариант 2-1

    2-1

    Заметим, что текст файлов 1_2.htm и 2_1.htm отличаются только порядком ссылок на файлы 1.htm и 2.htm.

    Рассмотрим теперь построение документа, загруженного в левый фрейм. В нем имеется две ссылки с параметром TARGET="Two_Frames". Реализация любой из этих ссылок создает на месте расположения фрейма "Two_Frames" (это правая половина экрана) два фрейма с загрузкой документов 1.htm и 2.htm в том или ином порядке. Таким образом при выборе варианта 1-2 в верхний правый фрейм загружается документ 1.htm, а в нижний правый - 2.htm. При выборе варианта 2-1 порядок документов меняется. В итоге поочередный выбор вариантов создает впечатление того, что документы в двух фреймах меняются местами. Именно такого эффекта мы и стремились достичь (рис. 5.9).

    Содержимое документов 1.htm и 2.htm для описанного примера не имеет значения. Тем не менее, для примера, вместо тривиальных документов создадим документы со ссылками, реализующими те же действия.

    Текст файла 1.htm:

    Документ 1

    Документ 1

    Вариант 1 -2

    Вариант 2-1

    Файл 2.htm отличается от 1.htm только заголовком.

    Здесь имеются две ссылки со значением TARGET="_parent", которые обращены к родительскому фрейму. Эти ссылки могли бы быть записаны и с явным указанием имени фрейма-родителя, т. е. TARGET="Two_Frames", однако использование неявного указания имени обычно более удобно. Например, если из левого фрейма (документ left.htm) исключить ссылки, то можно было бы опустить имя фрейма "Two_Frames", заданное при описании основной фреймовой структуры. При этом был бы создан фрейм без имени, но ссылки из документов 1.htm и 2.htm со значением TARGET="_parent" по-прежнему работали бы правильно.

    Совет

    По возможности используйте неявное указание имен фреймов. Например, " parent"," top"," self" вместо задания конкретных имен.


    Рис. 5.9. Окна взаимодействующих фреймов с эффектом смены загружаемых документов

    Различие между фреймами и окнами браузера

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

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

    Совет

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

    Работе с окнами свойственны и другие недостатки. Создание каждого окна требует немало памяти. По существу в Netscape каждое окно представляет собой еще одну копию браузера и снабжено полным набором кнопок и меню. Та же ситуация характерна и для Microsoft Internet Explorer.

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

    Во многих популярных Windows-приложениях существует понятие окна с документом (document window). В качестве примера можно привести текстовый процессор Microsoft Word или программу работы с графическими изображениями Paint Shop Pro и многие другие. В каждом из таких приложений допустимо одновременное использование нескольких окон с данными и, как правило, существует меню Window, в котором приводится список окон и дается возможность переключения между ними. Образование нового окна в таких приложениях обычно происходит при открытии существующего файла или создании нового. Однако в этих программах при создании нового окна не образуется новая работающая задача.

    В Netscape также имеется меню Window, в котором приводится список существующих окон. (В версиях Netscape 4.x эта возможность предоставляется пунктом Window меню Communicator.) Вернемся к рис. 5.8. В этом примере одновременно открыто три окна, каждое из которых по существу является отдельным браузером. Однако для пользователя все они являются окнами одного браузера, которые могут взаимодействовать друг с другом. В любом из этих окон можно открыть меню Window и увидеть список трех окон. На рис. 5.10 показана ситуация, когда это сделано для нижнего окна.


    Рис. 5.10. Открытие окон фреймов в браузере Netscape

    Каждое из окон может быть закрыто отдельно (командой Close из меню File). Для завершения работы с браузером в любом из окон можно открыть меню File и выполнить пункт Exit (рис. 5.11).

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

    Каждое окно браузера может иметь свои установки (правда не все). Посмотрите на рис. 5.11. Открыто два окна, одно из которых разбито на три фрейма. В два из трех фреймов, а также в отдельное окно загружен один и тот же документ. Возможность независимой настройки параметров каждого окна позволяет по-разному отобразить один и тот же документ. В приведенном примере размер шрифта документа в одном окне больше, чем в другом. Такой эффект достигнут установкой различных кодировок каждого из окон (пункт Document Encoding меню Options или пункт Character Set меню View для версии 4.x), причем обе кодировки используют один и тот же шрифт, но разного размера. Изменение же любого пункта меню General Preferences воздействует на все окна.


    Рис. 5.11. Завершение работы с браузером Netscape

    Рис. 5.12. Предупреждение о закрытии окон в браузере Netscape

    Дополнительные возможности браузеров

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

    Возможности браузера Netscape

    Браузер Netscape, начиная с версии 3.0, позволяет использовать три дополнительных параметра: BORDER, FRAMEBORDER и BORDERCOLOR. Параметр BORDER применяется только в тэге . Значение параметра BORDER определяет толщину рамок между фреймами в пикселах.

    Параметр FRAMEBORDER может применяться как в тэге , так и в тэге и определяет наличие рамки между фреймов. Этот параметр может принимать значение Yes или NO. Если параметр записан в тэге , то его действие распространяется на все фреймы этой группы. Для отдельного фрейма значение может быть переопределено. По умолчанию принимается значение Yes.

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

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

    Приведем пример:

    Первая строка этого HTML-кода задает три фрейма, между которыми оставлено место под рамку толщиной 10 пикселов (рис. 5.13).


    Рис. 5.13. Прорисовка рамок между фреймами в браузере Netscape

    Между окнами фреймов "А" и "в" рамка не прорисовывается благодаря значению NO параметра FRAMEBORDER, тем не менее для рамки определен красный цвет (red). Для последнего фрейма "с" значение FRAMEBORDER задано равным Yes и переопределяет значение, установленное в первой строке. Поэтому между фреймами с именами "в" и "С" все-таки будет нарисована рамка красного цвета и толщиной 10 пикселов.

    Примечание

    Если рамки между фреймами не прорисовываются, то браузер Netscape не позволит изменять размеры фреймов путем перетаскивания рамок мышью даже при отсутствии параметра NORESIZE. Для Microsoft Internet Explorer ситуация иная.

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


    Рис. 5.14. Полосы прокрутки во фрейме без рамок

    Возможности браузера Microsoft Internet Explorer

    Браузер Microsoft Internet Explorer разрешает использовать параметр FRAMEBORDER для тех же целей, как было описано выше, но не позволяет задавать цвет и толщину рамок. Однако в качестве значения параметра FRAMEBORDER допустимо использовать только числовое значение "О" для отмены прорисовки рамки или отличное от нуля числовое значение для прорисовки рамки.

    Различие в правилах задания значений параметра FRAMEBORDER для разных браузеров весьма неприятно. Попробуйте, например, задать FRAMEBORDER=Yes. Такая запись верна для Netscape, а для Microsoft Internet Explorer приведет к отсутствию рамки. Предыдущий пример (рис. 5.13) при просмотре в Microsoft Internet Explorer будет представлен без рамки.

    Совет

    Можно рекомендовать всегда записывать значение параметра FRAMEBORDER в числовом виде, например, FRAMEBORDER=0. Это соответствует правилам записи параметра для Microsoft Internet Explorer, но нарушает правила для Netscape (хотя и верно воспринимается последним).

    Примечание

    Если рамки между фреймами не прорисовываются, то браузер Microsoft Internet Explorer (в отличие от Netscape) при отсутствии параметра NORESIZE позволит "наощупь" изменять размеры фреймов путем перетаскивания рамок мышью. Поймать место, где должна находиться рамка, можно по изменению формы указателя мыши.

    Браузер Microsoft Internet Explorer разрешает использовать дополнительный параметр FRAMESPACING, записываемый в тэге , значение которого определяет количество пикселов между фреймами, оставляемое пустыми.

    Приведем пример, результат отображения которого приводится на рис. 5.15.

    Изменение расстояния между фреймами


    Рис. 5.15. Пустое пространство между фреймами в Microsoft Internet Explorer

    Примечание

    К сожалению, во многих описаниях языка HTML ошибочно указывается, что параметр FRAMESPACING должен использоваться в тэге . Microsoft Internet Explorer допускает использование этого параметра только в тэге .

    Плавающие фреймы

    Браузер Microsoft Internet Explorer разрешает использовать уникальный тег , который реализует концепцию плавающих фреймов. В отличие от обычных фреймов описание плавающих фреймов может встречаться в тексте обычного HTML-документа. Браузеры, не поддерживающие тег , вместо фрейма будут отображать любую информацию, записанную между и . В ТЭГС применяются точно такие же п арамет ры, как и в тэге описания обычных фреймов . Единственным исключением является параметр NORESIZE, применение которого бессмысленно, так как размер плавающих фреймов в любом случае не может быть изменен пользователем при просмотре документа.

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

    Приведем пример использования плавающих фреймов:

    Использование плавающих фреймов

    Пример использования концепции плавающих фреймов

    Ваш браузер не позволяет отображать плавающие фреймы

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

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

    Фрейм справа от данного текста размещен на странице с помощью специального тега . При создании фрейма было указано выравнивание вправо.

    Результат отображения данного примера браузером Microsoft Internet Explorer показан на рис. 5.16. Браузеры, не поддерживающие концепцию плавающих фреймов, для данного примера вместо отображения содержимого документа float.htm выдадут текст "Ваш браузер не позволяет отображать плавающие фреймы".


    Рис. 5.16. Плавающий фрейм в Microsoft Internet Explorer

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

    Совет

    В настоящий момент применение плавающих фреймов ограничивается единственным браузером - Microsoft Internet Explorer версии 3.0 и выше. Следует помнить, что пользователи других браузеров (в частности, Netscape) не смогут увидеть содержимого плавающих фреймов.

    Средства создания документов, содержащих фреймы

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

    Редактор фреймов FrameGang

    Одним из таких редакторов является утилита FrameGang, разработанная австралийской фирмой Sausage Software, которая более известна своим популярным HTML-редактором HotDog.

    Информацию об этом программном продукте можно получить по адресу http://www.sausage.com , а также из сборника программных продуктов для Интернета (по адресу http://www.tucows.com или любому другому из нескольких десятков серверов-зеркал, разбросанных по всему миру).

    Утилита FrameGang является дополнением к любому HTML-редактору или обычному текстовому редактору, работающему в среде Windows, которая позволяет визуально сконструировать необходимую структуру фреймов и затем сгенерировать соответствующий HTML-код. Получаемый HTML-код через буфер обмена Windows (Clipboard) может быть передан в HTML-редактор. Программа FrameGang позволит быстро построить нужную фреймовую структуру.

    Рассмотрим возможности программы. После установки данной программы в Windows и ее запуска предлагается выбрать одну из двух возможных структур фреймов первого (верхнего) уровня - поколонное расположение фреймов (Columns) или построчное (Rows), а также определить их количество. В дальнейшем каждый из фреймов первого уровня может при необходимости быть разбит на несколько фреймов второго уровня. Большее количество уровней фреймов не предусмотрено, однако это не является существенным ограничением, так как на практике редко используется более двух уровней.

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

    Заметим, что смешные картинки во фреймах не несут смысловой нагрузки и служат лишь для заполнения пустого пространства. Их прорисовка может быть отменена в меню Options. Также отметим, что само название фирмы-производителя (sausage - сосиски) и название некоторых ее программных продуктов (HotDog - в переводе не нуждается) определило стиль интерфейса данного пакета - во многих пунктах меню встречается изображение сосисок.

    После определения структуры фреймов следует задать их размеры. Это выполняется простым перемещением границ фреймов мышью так же, как это делается для изменения размеров окон системы Windows. Установленные размеры для текущего фрейма отображаются в процентах в окнах с названиями Width и Height. При необходимости задать размеры фреймов не в процентах, а в пикселах или относительных единицах, следует изменить получаемый HTML-код вручную вне программы FrameGang.

    Далее для каждого фрейма нужно задать его имя (Name), которое может быть опущено, URL-адрес документа, загружаемого в данный фрейм изначально (Frame URL), а также выбрать значение параметра изменяемости размеров фрейма (Resizeable Frame Border) и параметра прокрутки содержимого фрейма (Frame Scrolling).

    В любой момент можно посмотреть создаваемую фреймовую структуры в выбранном внешнем браузере, не выходя из программы FrameGang. Для этого служит кнопка Preview. Задание имени браузера производится в меню Options. После задания всех параметров следует сгенерировать HTML-код, соответствующий выбранной структуре фреймов, который будет записан в буфер обмена Windows (кнопка HTML Compile). Полученный код может быть вставлен из буфера обмена в нужное место HTML-файла при работе в любом редакторе.

    Кнопки сохранения (Save) и открытия (Open) файла позволяют сохранять и считывать файл только в специальной кодировке, свойственной программе FrameGang и не предназначенной для иного использования.

    Ниже представлен HTML-код, сгенерированный программой FrameGang для описанного примера:

    Для получения корректного HTML-документа полученный код достаточно заключить между тэгами и . Можно добавить раздел заголовка документа , в котором определить нужные данные, например, название документа (напомним, что название документа записывается между тэгами и ). Заметим, что современные браузеры могут правильно работать даже при отсутствии некоторых необходимых тэгов. Если приведенный выше HTML-код сохранить в виде файла с соответствующим расширением даже без добавления каких-либо тэгов, то и Netscape Navigator, и Microsoft Internet Explorer смогут правильно отобразить данный документ.

    Программа FrameGang позволяет визуально проектировать фреймы, достаточна удобна и проста в эксплуатации, однако не лишена отдельных недостатков. В частности, нет возможности уточнить размеры фреймов, записывая нужные числа в окнах Width и Height, так как в них лишь отображаются размеры, устанавливаемые при перемещении границ фреймов мышью. Не задаются общепринятые параметры фреймов MARGINWIDTH и MARGINHEIGHT. Нет возможности записи файла в текстовом формате на диск, что не дает возможности воспользоваться данной программой автономно.

    Редактор фреймов Frame-It

    Еще одним специализированным редактором фреймов является программа Frame-It, информацию о которой можно получить по адресу:

    http://www.iinet.net.au/~bwh/frame-it.html

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

    Для каждого фрейма задаются все необходимые параметры путем заполнения соответствующих полей. В отличие от предыдущей программы здесь предусмотрено задание значений параметров MARGINWIDTH и MARGINHEIGHT. Кроме того, введен флажок Invisible Frame Borders, установка которого обеспечивает генерацию следующего фрагмента кода:

    FRAMEBORDER="NO" BORDER="0" FRAMESPACING="0".

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

    Для определенного примера будет сгенерирован следующий код:

    с фреймовой структурой

    Если в данном примере сбросить флажок Invisible Frame Borders, то генерируемый код значительно изменится:

    scrolling=auto noresize>

    scrolling=auto noresize>

    scrolling=auto noresize>

    scrolling=auto noresize>

    scrolling=auto noresize>

    Ваш браузер не может показывать документы

    с фреймовой структурой

    Информация об использовании фреймов на WWW

    Для получения информации о фреймах можно обратиться к следующим адресам на WWW:

    http://www.spunwebs.com/sites2c/frmtutor.html

    http://union.ncsa.uiuc.edu/HyperNews/get/www/html/guides.html

    http://cox.asu.edu/Trial/faq/webfaqs/frame/

    http://www.netlingo.com/more/framestarget.html

    http://www.aubg.bg/beast/students/raduluc/teach/fr/

    http://www.as.net/frame/

    http://www.cqi.com/~pmurphey/instruction/

    http://www.iwaynet.net/~rtyler/htmltutorial/frames.html

    http://edbo.com/frames/

    http://bela.fei.tuke.sk/netscape/frames/

    http://www.newbie.net/frames/2ed/rnenu.htmtfcontents

    http://infoserver.etI.vt.edu/coe/COE_Students/laughon/frame.html

    http://www.htmlhelp.com/frames/syntax/

    http://www.woodhill.co.uk/html/

    http://www.htmlhelp.com/design/frames/

    Похожие публикации