Электронные издания, Вуль Владимир Абрамович

Электронные издания

на обложку

Вуль Владимир Абрамович

Шрифт:

Показанный ниже рис. 2.9 иллюстрирует отображение в браузере HTML-документа, в теле которого содержится приведенный выше контейнер <TABLE> и </TABLE> со всем его содержимым. По сравнению с таблицей, показанной на рис. 2.8, здесь с помощью тэга <CAPTION> добавлен тематический заголовок, выровненный по центру таблицы. В таблице хорошо видны рамки ячеек и рамка вокруг таблицы в целом. В ячейке "Заголовок 1" объединены 2 строки, а в ячейке "Заголовок 2" – два столбца, что соответствует исходному HTML-коду. В третьей строке, как это часто делают для длинных узких таблиц, указаны номера колонок, что позволяет при переносе на следующую полосу не повторять заголовка целиком. Отметим, что используя параметры ROWSPAN и COLSPAN можно составить многоуровневые заголовки таблиц любой степени сложности.

Рис. 2.9. Пример отображения сложной таблицы в составе HTML-документа

2.7.

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

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

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

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

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

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

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

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

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

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

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

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

.....

<A href="#" TARGET="main_frame">Основной

документ</A>

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

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

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

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

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

</FRAMESET></FRAMESET>

</FRAMESET>

</HTML>

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

Рис. 2.10. Пример отображения документа с 5-фреймовой структурой

Если пронумеровать расположенные на экране фреймы, присвоив им номера с 1-го по 5-ый (верхний – 1, левый для 2-ой строки – 2, верхний правый для 2-ой строки – 3, нижний правый для 2-ой строки – 4, нижний – 5), то можно заметить, что содержание 1, 2 и 5 фреймов не изменяется: в 1ый постоянно загружен HTML-файл, отображающий заголовок документа (см. строка 4 исходного кода), в 5-ый – информация об учебном заведении и авторе электронного пособия (чтобы можно было посмотреть другие учебники на сайтеили по электронной почте связаться с автором), а во второй – файл оглавления (см. строка 6 исходного кода). В 3ем и 4-ом фреймах выводятся разделы 1-й и 2-й глав: в 3-ем фрейме выводится раздел 1.1. Точечная и векторная графика главы 1. Общее понятие о цифровой обработке изображений, а во фрейме 4 отображается раздел 2.1. Основные особенности пакета главы 2. Пакет растровой графики Photoshop. Таким образом, из одного фрейма (под номером 2, который можно назвать навигационным) с помощью указателей гиперссылок осуществляется управление информацией в двух других фреймах. Отметим, что специалисты по педагогике и психологии образования считают, что не следует отображать на экране более 3—4 фреймов, в противном случае ухудшается процесс восприятия информации с экрана. Несколько подробнее на этом мы остановимся в главе 9, а здесь приведем следующий вариант того же самого электронного учебного пособия, но с лаконичной двухфреймовой структурой. Исходный HTML-код для него: