24 фрейма

Фреймовая структура электронного издания

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

Фреймовая структура целесообразна для применения в следующих случаях:

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

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

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

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

Принципиальное отличие HTML-кода, задающего фреймовую структуру, состоит в том, что вместо тега <BODY> в нем используется тег-контейнер <FRANESET>, параметры которого и определяют разбиение площади окна браузера на отдельные участки или области. Для этого у тега <FRAMESET> используется два параметра: ROWS и COLS. Параметр ROWS делит окно браузера на горизонтальные полосы, a COLS — на вертикальные. Размеры этих полос могут устанавливаться в абсолютных единицах — пикселах и в относительных — процентах или пропорциональных единицах. Первые два способа задания уже рассматривались ранее и не требуют дополнительных комментариев, третий же способ использует количество звездочек (*), каждая из которых представляет одну часть целого, величина этой части в данном случае определяется как высота окна браузера, деленная на суммарное количество звездочек под знаком параметра ROW. Все три способа деления окна на полосы иллюстрируется приведенными ниже примерами:

<FRAMESET ROWS=’10%,80%,10%’>

<FRAMESET ROWS=’60,480,60′>

<FRAMESET ROWS=’*,8*,*’>.

Все три варианта с тегом <FRAMESET> описывают деление экрана на три горизонтальные полосы, из которых верхняя и нижняя одинаковой ширины, а средняя в восемь раз шире каждой из них. Аналогичным образом описывается и деление на вертикальные полосы с помощью параметра COLS. Для параметров ROWS и COLS возможен и смешанный вариант задания значений, когда используются два или даже все три способа одновременно. Например:

<FRAMESET COLS=’70,4*,*,15%’>.

Тег задает деление окна на четыре колонки, первая из которых имеет ширину в 70 пикселов, последняя — 15% от ширины окна, ширина третьей колонки составляет 1/5, а второй — 4/5 от оставшейся части ширины окна.

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

контейнеры. Практически же такие конструкции используются крайне редко. Тег <FRAME> размещается внутри контейнера <FRAMESET> и </FRAMESET>, причем количество тегов <FRAME> внутри этого контейнера должно в точности совпасть с число отдельных фреймов, т. е. каждый фрейм должен быть описан своим тегом <FRAME>. Тег <FRAME> содержит шесть параметров, а именно: SRC, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING и NORESIZE.

Наиболее важный из перечисленных параметров SRC определяет URL или адрес документа, который изначально загружается в данный фрейм. Обычно это HTML-документ, содержащий и заголовочную часть, и тело. Параметр NAME позволяет присвоить этому фрейму уникальное (не повторяющееся) имя, которое может использоваться для адреса циикданному фрейму. В теге <А>, который рассматривался в § 2.5, для адресации к фреймам используется специальный пара метр TARGET, значением которого является имя соответствующего фрейма. Проиллюстрируем сказанное примером:

<FRAME SRC=’maintenance.htm’ NAME=’main_frame’>

<A HREF=’main_doc.htm’ TAR6ET=’main_frame’> Основной документ </A>.

В представленном примере в основной фрейм (имя этого фрейма — main_f rame) исходно был загружен документ maintenance.htm, т. е. оглавление электронного издания. Если же подвести указатель мыши к словам «Основной документ», которые являются указателем ссылки, и щелкнуть левой кнопкой, то в этот фрейм будет загружен новый документ под названием main_doc.htm, который находится в том же самом каталоге и представляет собой содержательную часть данного издания. Таким образом, присвоение фрейму определенного имени позволяет в дальнейшем загружать в него документы.

Параметры MARGINWIDTH и MARGINHEIGHT тега <FRAME> позволяют установить ширину полей фрейма по ширине и высоте. Отметим, что левое и правое поле имеют одинаковую ширину. То же самое можно сказать и про верхнее и нижнее поля. Значение этих параметров задается в абсолютных единицах- пикселах. Под полями здесь подразумевается свободное пространство, где не могут присутствовать иллюстрации и текст (как и в печатном издании). Минимальное значение этих параметров, устанавливаемое по умолчанию, равно 1 пикселу.

Если содержимое фрейма не помещается в отведенной части окна браузера, для него будутавтоматически создаваться полосы прокрутки по нужной координате. Для управления этим процессом служит параметр SCROLLING, который может принимать одно из трех допустимых значений: Yes, No и Auto. Последнее значение устанавливается по умолчанию. Значение No запрещает создание полос прокрутки, a Yes приводит к обязательному их созданию, независимо оттого, нужны они или нет.

Обычно пользователь может самостоятельно изменять размеры фреймов, точно так же, как и размеры окна браузера, где они размещаются. При таких операциях может нарушаться оптимальное соотношение между размерами фреймов и ухудшаться восприятие информации с экрана компьютера. Для того, чтобы предотвратить эти действия пользователя, служит параметр NORESIZE. Для этого параметра не предусмотрено каких-либо значений, но само его использование в описании одного из фреймов запрещает не только изменение размера этого фрейма, но и любого смежного с ним. Приведем несколько примеров изданий с использованием фреймовых структур. Первый пример задает структуру из пяти фреймов, которая образуется в результате деления окна браузера на три горизонтальные полосы, средняя из которых делится еще и на две колонки. Ширина нижней полосы, как следует из строки 3 HTML-кода, составляет 50 пикселов, а верхней — восьмую часть от высоты оставшейся области окна браузера. Средняя полоса разделена на узкую полоску слева и вчетверо более широкую оставшуюся часть (см. строка 5 HTML-кода). Наконец, эта оставшаяся часть поделена пополам по горизонтали (см.строка 7 HTML-кода).

<HTML><HEAD><TITLE>Цифровая обработка изображений</TITLE>

<МЕТА NAME=’Author’ СОNTENT=’В.А.Вуль’></HEAD>

<FRAMESET ROWS=’*,7*,50′>

<FRAME SRC=’zag.html’scrolling=’no’>

<FRAMESET COLS=’20%,80%’>

<FRAME SRC=’ogl.html’>

<FRAMESET ROWS=’*,*’>

<FRAME SRC=’lg.html’ NAME=’gl’>

<FRAME SRC=’2g.html’ NAME=’g2′>

<FRAME SRC=’inf.html’ scrolling=’no’>

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

Если пронумеровать расположенные на экране фреймы, присвоив им номера с 1-го по 5-й, то можно заметить, что содержание 1-го, 2-го и 5-го фреймов не изменяется: в 1-й постоянно загружен HTML-файл, отображающий заголовок документа (см. строка 4 исходного кода), в 5-й — информация об учебном заведении и авторе электронного пособия (чтобы можно было посмотреть другие учебнике на сайте uprint.spb.ru или по электронной почте связаться с автором), а во второй — файл оглавления (см. строка б исходного кода). В 3-м и 4-м фреймах выводятся параграфы 1-й и 2-й глав: в 3-м фрейме выводится § 1.1, ссылка на который во фрейме 2 выделена другим цветом как уже использованная, а во фрейме 4 отображается § 2.1. Таким образом, из одного фрейма с помощью ссылок осуществляется управление информацией в двух других фреймах.

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

<html><head><title>Учебник по графике</title></head>

<frameset cols=’20%,*’>

<frame пате=’Навигация’ target=’main’ scrolling=’auto’ src=’naviagation.htm’ noresize>

<frame name=’main’ src=’content.htm’ target=’main’><noframes><body><р>Ваш браузер не поддерживает фреймы </р></body></noframes></frameset></html>.

Соответствующая этому коду структура электронного учебника представлена на рис. 2.11 . На рис. 2.11 отсутствуют фреймы заголовка и общей информации, а содержательная часть представлена в одном фрейме вместо двух. Каждый читатель может сам оценить, какая структура ему больше нравится, и попытаться сформулировать причины этого. Здесь первый фрейм назван «Навигация» (см. строка 3 исходного кода), а второй — «main», т. е. главный (см. строка 5 исходного кода). При начальной загрузке в главном фрейме выводится оглавление, так как во фрейме «Навигация» названия разделов даны в сокращенной форме, чтобы уменьшить протяженность этого фрейма по вертикали.

Основная адресация производится из фрейма «Навигация», но ссылки работают и из оглавления в главном фрейме. Для возврата в оглавление во фрейме «Навигация» есть специальная кнопка «Назад в оглавление». Во фреймах сделан фоновый рисунок, улучшающий дизайн издания. Размеры фреймов нельзя изменить (см. строка 4 в исходном коде).

Из других отличий отметим вставку в исходный код строк б и 7 для того случая, когда браузер пользователя не поддерживает фреймовой структуры. В этом случае будет выдано сообщение «Ваш браузер не поддерживает фреймы», так как тег-контейнер <NOFRAMES> содержит внутри контейнер <BODY> и </BODY>, распознаваемый всеми без исключения браузерами, в результате чего они выводят в окне содержимое этого контейнера. При отсутствии этих двух контейнеров такой браузер выдал бы сообщение об ошибке или же, что еще хуже, не вывел бы ничего в своем окне. Тег-контейнер <NOFRAMES> предусмотрен специально для такого случая.

Из других замечаний можно указать, что звездочка (*) во второй строке исходного кода интерпретируется как «оставшаяся часть», вместо нее можно было бы написать 80% — и ничего бы не изменилось. Еще раз хочется обратить внимание на особенности навигации при использовании фреймов иначе — на взаимодействие фреймов. В ссвязистем, что во фрейме «Навигация» в качестве значения параметра «TARGET» указано «main» (см. строка 3 исходного кода), то все ссылки из фрейма «Навигация» будут загружать документы во фрейм «main». Кнопка во фрейме «Навигация» играетту же роль, что и изображение — указатель ссылки. Наконец, рисунки в этом учебнике выводятся в плавающих окнах, которые можно расположить так, как удобно пользователю. Пример вывода рисунка в плавающем окне в левой верхней части окна браузера показан на рис. 2.12 .