Читать онлайн «Электронные издания». Страница 18

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

<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-ый – информация об учебном заведении и авторе электронного пособия (чтобы можно было посмотреть другие учебники на сайте http://uprint.spb.ru или по электронной почте связаться с автором), а во второй – файл оглавления (см. строка 6 исходного кода). В 3ем и 4-ом фреймах выводятся разделы 1-й и 2-й глав: в 3-ем фрейме выводится раздел 1.1. Точечная и векторная графика главы 1. Общее понятие о цифровой обработке изображений, а во фрейме 4 отображается раздел 2.1. Основные особенности пакета главы 2. Пакет растровой графики Photoshop. Таким образом, из одного фрейма (под номером 2, который можно назвать навигационным) с помощью указателей гиперссылок осуществляется управление информацией в двух других фреймах. Отметим, что специалисты по педагогике и психологии образования считают, что не следует отображать на экране более 3—4 фреймов, в противном случае ухудшается процесс восприятия информации с экрана. Несколько подробнее на этом мы остановимся в главе 9, а здесь приведем следующий вариант того же самого электронного учебного пособия, но с лаконичной двухфреймовой структурой. Исходный HTML-код для него:

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

<frame name="Навигация" target="main" scrolling="auto"

src="naviagation.htm" noresize>

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

</body> </noframes>

</frameset>

</html>

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

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

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

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

Из других замечаний можно указать, что звездочка (*) во второй строке исходного кода интерпретируется как "оставшаяся часть", вместо нее можно было написать 80% и ничего бы не изменилось. Еще раз хочется обратить внимание на особенности навигации при использовании фреймов иначе – на взаимодействие фреймов. Так как во фрейме "Навигация" в качестве значения параметра target указано "main" (cм. строка 3 исходного кода), то все ссылки из фрейма "Навигация" будут загружать документы во фрейм "main". Кнопка "Назад в оглавление" (изображение этой кнопки, используемой как указатель гиперссылки, содержится в документе navigation.htm) во фрейме "Навигация" играет ту же роль, что и изображение – указатель ссылки, использование которого было рассмотрено в разд. 2.5. Наконец, рисунки в этом учебнике выводятся в плавающих окнах, которые можно расположить так, как удобно пользователю. Пример вывода рисунка в плавающем окне в левой верхней части рабочего окна браузера показан на рис. 2.12.

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

2.8. HTML-формы

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

В языке HTML для задания форм используется тэги <FORM> (форма) и </FORM>. Этот контейнер размещается внутри тела HTML-документа, причем таких контейнеров может быть несколько, но вложений их один в другой не допускается. Тэг <FORM> может содержать несколько параметров, а именно: ACTION (действие, операция), METHOD (метод), ENCTYPE (медиа-тип, определяющий кодирование данных при передаче от браузера к серверу). Некоторые браузеры поддерживают и другие параметры, помимо перечисленных трех стандартных. Первый из параметров задает адрес (URL) CGIпрограммы, которая будет обрабатывать данные этой формы. Это единственный обязательный параметр тэга <FORM>.

Второй параметр METHOD определяет способ пересылки данных от браузера к Web-серверу, содержащихся в форме. Он принимает два возможных значения: GET (по умолчанию) и POST. Значение METHOD="POST" используется в случае необходимости пересылки на сервер определенного файла, который присоединяется к содержимому формы.

Параметр ENCTYPE определяет медиа-тип, используемый для кодирования и пересылки содержимого формы. Обычно его называют MIME-типом, где MIME – это аббревиатура, которая расшифровывается как Multipurpose Internet Mail Extension (многоцелевое расширение для интернет-почты). Именно кодирование в соответствии со стандартом MIME позволяет безошибочно пересылать файлы, присоединяемые к HTML-форме.

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

Тэг <SELECT> используется для организации компактной структуры для выбора одного варианта из нескольких, задаваемых в виде списка прокрутки. А тэг <TEXTAREA> создает внутри формы поле для ввода многострочного текста в виде прямоугольной области, снабженной при необходимости полосами прокрутки. Кратко рассмотрим использование всех этих тэгов.

Тэг <INPUT> содержит 2 обязательных параметра: TYPE, который задает тип поля ввода и NAME, с помощью которого имя переменной, соответствующей этому полю ввода передается CGI-программе.

Параметр TYPE может принимать несколько значений. Одно из этих значений TYPE="TEXT". В этом случае в форме создается узкая прямоугольная область (фрагмент строки) для ввода текста. Причем при этом значении параметра TYPE в тэге INPUT могут использоваться 3 дополнительных параметра, а именно: MAXLENGTH (наибольшая длина) = <число>, который определяет максимальное число вводимых символов, SIZE=<число>, задающий количество отображаемых в форме символов, и VALUE, который определяет значение текстового поля по умолчанию.