Последний отзыв
Очень интересная!
По всем вопросам обращайтесь на: info@litportal.ru
(©) 2003-2024.
✖
Электронные издания
Настройки чтения
Размер шрифта
Высота строк
Поля
Обычно пользователь может самостоятельно изменять размеры фреймов, так же точно, как и размеры окна браузера, где они размещаются. При таких операциях может нарушаться оптимальное соотношение между размерами фреймов и ухудшаться восприятие информации с экрана компьютера. Для того, чтобы предотвратить эти действия пользователя служит параметр NORESIZE. Для этого параметра не предусмотрено каких-либо значений, но само его использование в описании одного из фреймов запрещает не только изменение размера этого фрейма, но и любого смежного с ним. Приведем несколько примеров с использованием фреймовых структур. Первый пример задает структуру из 5-ти фреймов, которая образуется в результате деления окна браузера на 3 горизонтальные полосы, средняя из которых делится еще и на 2 колонки. Ширина нижней полосы, как следует из 3-й строки HTML-кода, составляет 50 пикселов, а верхней – составляет восьмую часть от высоты оставшейся области окна браузера. Средняя полоса разделена на узкую полоску слева и вчетверо более широкую оставшуюся часть (см. 5-я строка HTML-кода). Наконец, эта оставшаяся часть поделена пополам по горизонтали (см. 7-ая строка HTML-кода).
<HTML> <HEAD> <TITLE>Цифровая обработка изображений</TITLE>
<META NAME="Author" CONTENT="В. А. Вуль"> </HEAD>
<FRAMESET ROWS="*,7*,50">
<FRAME SRC="zag.html" scrolling="no">
<FRAMESET COLS="20%,80%">
<FRAME SRC="ogl.html">
<FRAMESET ROWS="*,*">
<FRAME SRC="1g.html" NAME="g1">
<FRAME SRC="2g.html" NAME="g2">
</FRAMESET></FRAMESET>
<FRAME SRC="inf.html" scrolling="no">
</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>
<frameset cols="20%,*">
<frame name="Навигация" target="main" scrolling="auto"
src="naviagation.htm" noresize>
<frame name="main" src="content.htm" target="main">
<noframes> <body> <p>Ваш браузер не поддерживает фреймы</p>
</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, который определяет значение текстового поля по умолчанию.
Другой вариант текстового поля – это TYPE="PASSWORD" (пароль). В этом случае вводимые символы отображаются в форме звездочками. Однако, реальная безопасность передаваемого пароля не обеспечивается, так как на сервер эта строка передается в незашифрованном виде, то есть открыто.
Еще одно значение TYPE="FILE", причем в этом случае одновременно с полем для ввода текста (имени локального, то есть размещенного на компьютере клиента, файла) в форме создается кнопка с подписью BROWSE (просмотр). Файл, выбираемый в процессе просмотра (локальный адрес его может быть сразу введен в поле), подсоединяется к содержимому формы при ее пересылке на сервер. Для корректного выполнения этой операции должны быть правильно заданы параметры формы: METHOD="POST" и ENCTYPE="MULTIPART/FORM-DATA". В противном случае вместо содержимого файла на сервер будет передано только его имя.
Значение TYPE="CHECKBOX" (переключатель) создает поле ввода одного символа–флажка или переключателя типа "включено" либо "выключено". Такие поля могут объединяться в группы путем задания для всех одного имени (NAME). Используется параметр VALUE, который передает на сервер выбранные переключатели. Может присутствовать также параметр CHECKED (установленное значение, обычно по умолчанию), указывающий, что определенное значение соответствующего элемента является выбранным по умолчанию.
Значение TYPE="RADIO" (селективная кнопка, зависимый переключатель) определяет структуру, подобную многопозиционному переключателю, то есть набор из нескольких выключателей (иначе радиокнопок), один (и только один) из которых включен в любой отрезок времени. Каждый выключатель оформлен в виде круга, внутри которого при его выборе появляется точка. Здесь строковая переменная VALUE передает на сервер значение выбранной кнопки, а параметр CHECKED устанавливает значение по умолчанию.
Значение параметра TYPE="RESET" (сброс, возврат в исходное состояние) или же "SUBMIT" (запустить, инициализировать выполнение) соответственно отменяет все введенные в форму значения или же пересылает содержимое формы на сервер. В обоих случаях в форме отображаются кнопки с соответствующими надписями. Надписи на кнопках можно русифицировать, задав значение параметра VALUE равным Отмена или же OK (Пересылка) соответственно. Возможно использование значения параметра TYPE="IMAGE". В этом случае создается графическое изображение, аналогичное кнопке SUBMIT. Адрес изображения задается стандартным параметром SRC=<URL файла-изображения>, а способ выравнивания – значением параметра ALIGN.
Иногда вместо тэга INPUT используется контейнер <SELECT> и </SELECT>, который позволяет организовать выбор значений в пределах спискового окна. Это обеспечивает экономию пространства формы. Пример контейнера:
<SELECT NAME="имя поля" SIZE=[число видимых элементов списка] >
<OPTION VALUE="значение 1-го элемента"> значение элемента
Последний отзыв
Очень интересная!