Если опустить атрибуты heigh t и width в дескрипторе , браузеру при- дется определять размер ячейки по размеру изображения, которое он должен в

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

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

Глава 2. HTML-таблицы 12 1





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

и отобразить текстовое содержимое браузер сможет быстро, у посетителя сай —

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



ПРИМЕЧАНИЕ При указании размеров изображений следите за тем, чтобы значения атри- бутов heigh t и widt h соответствовали фактической ширине и высоте изображения, кото — рое браузер должен поместить в ячейку. Если указанные вами высота и/или ширина отлича- ются от размеров изображения, Web-браузер растянет (или сожмет) изображение, чтобы привести его размеры в соответствие со значениями атрибутов heigh t и width. В резуль — тате выведенное на экран изображение может исказиться.



Имитация фреймовой Web-страницы

с помощью таблицы

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

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

его содержимого. Один из способов организации содержимого наг Web-странице

— это использование фреймов, которые делят Web-страницу на несколько окон,

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

которая показана на рис. 2.27, имеет три фрейма.

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

Хотя фреймы — отличный инструмент для организации информации на Web —

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

122 Глава2. HTML-таблицы





Хотя таблицы не позволяют загружать в одном окне браузера несколько доку — ментов, с помощью таблиц можно создать видимость организации, получаемой при работе с фреймовыми Web-странцами. Например, приведенный ниже код создает таблицу, придающую Web-странице организованный вид фреймовой стра — ницы, как показано на рис. 2.28.



Глава 2. HTML-таблицы 123







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

Привлечение внимания посетителя

с помощью цвета фона ячеек

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

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

та и, следовательно, для притягивания их взглядов к отдельным областям Web — страницы. Цвет — мощное средство, с помощью которого можно завладеть вни —

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



Теперь предположим, что вы создаете документ, содержащий большое количе —

ство текста, и хотите, чтобы посетитель уделил особое внимание одному опреде- ленному абзацу. Создайте таблицу с множеством ячеек и поместите текст Web — страницы в одну из ячеек таблицы. Затем окрасьте ячейку слева от «важного» абзаца и, может быть, даже поместите в цветную ячейку какой-нибудь описа-

тельный текст, например, как показано на рис. 2.29.

124 Глава 2. HTML-таблицы





Изменение цвета фона ячейки таблицы, содержащей слова «Смотри сюда!» на желтый (за счет установки атрибута bgcolor в дескрипторе ячейки равным

»yellow») привлекает внимание посетителя к ячейке и делает акцент на фраг — менте текста в смежной ячейке.

Визуальное выравнивание содержимого Web-страницы

с помощью видимых границ таблицы

Выравнивая с помощью таблицы графику и текст, вы создаете организован — ную структуру страницы, что помогает глазам посетителя двигаться по документу

и повышает привлекательность компоновки страницы.

Глава 2, HTML-таблицы 12 5





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

Строка 1 содержит имя и фамилию сотрудника, строка 2 — фотографию со — трудника, строка 3 — должность, занимаемую им/ею в компании; строка 4 — его/ее почтовый адрес. Применение таблицы не только помогает организовать информацию на Web-странице, но, вдобавок к этому, использование атрибута border дает возможность еще более наглядно определить внешнюю границу таб — лицы и отделяет таблицу от прочей графики и текста на Web-странице.

Показанная на рис. 2.30 таблица создается при помощи следующего кода:



Когда вы отключаете атрибут border (border=M0″), ячейки таблицы сливают —

ся, так что отдельные ячейки таблицы ЁЫГЛЯДЯТ СПЛОШНЫМ целым. Использова — ние атрибута border визуально разделяет информацию на четко определенные информационные блоки, что существенно облегчает ее восприятие.





12 6 Глава 2. HTML-таблицы



Управление расстоянием между колонками

и шириной полей текста на Web-странице

При создании документов с помощью таких программ, как Microsoft Word, текстовый процессор позволяет управлять внешними полями по краям каждой страницы и расстоянием между колонками текста. К сожалению, язык HTML не предоставляет таких же возможностей при размещении текста на Web-странице. Однако помещение текстового содержимого в таблицу может в некотором роде сымитировать механизм управления внешними полями и расстоянием между ко — лонками, который имеется в текстовом процессоре.

Пусть, например, вы хотите создать Web-страницу, которая, будучи отображе —

на Web-браузером, напоминала бы созданный в текстовом процессоре документ» с

двумя колонками текста и соответствующим расстоянием между колонками (см.

рис. 2.31).



ПРАКТИКУМ

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

себе текст документа. . ^Ш

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



Глава 2. HTML-таблицы 127





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

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

между колонками и установите атрибут width в дескрипторе равным тре- буемой ширине поля или промежутка между колонками.



















Обработка HTML-форм

Дескрипторы и атрибуты, используемые для создания форм

Создание на форме однострочного поля ввода

Создание на форме многострочного поля ввода

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

Создание на форме флажков

Создание на форме переключателей

Проверка выбора группы переключателей перед передачей результатов формы

Создание на форме выпадающего списка (меню выбора)

Проверка выбора элемента списка перед передачей результатов формы Изменение элементов списка выбора на основании введенных посетителем данных

Передача всех значений списка выбора на Web-сервер с использованием скрытых полей

Создание на форме кнопки Reset

Предотвращение случайной очистки посетителем элементов формы

Создание на форме кнопки Submit

Замена стандартных кнопок Submit и Reset другими графическими изображениями

Отправка результатов формы по электронной почте без использования

CGI-сценария

Управление расположением элементов и текста формы с помощью

HTML-таблиц

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



Указание Web-браузеру выполнять функцию проверки данных формы с помощью атрибута onClick

Передача значений Web-серверу с помощью скрытых полей

Сокрытие ввода пользователя от просмотра в поле ввода пароля

Глава 3. HTML-формы 129



сли вы потратили некоторое время на путешествия по Web-сайтам в

Internet, вам наверняка доводилось заполнять определенное количество Web- форм. По сути дела, вы сталкиваетесь с формами (например, поисковыми машина-

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

крайней мере, одну форму, которая позволяет передавать данные администратору Web-сайта. Форма может быть простым экраном входа в систему, который запра — шивает имя пользователя и пароль для получения доступа к сайту, или предос — тавлять такие сложные пользовательские интерфейсы, как Hotmail, E*Trade, eBay, Yahoo и т. д. Так, например, на рис. 3.1 показана форма настройки учетной запи —

си пользователя и форма входа в систему на сайте http://www. hotmaii. com.

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

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

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

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

который проверяет, что пользователь заполнил все «обязательные» поля и что со —



13 0 Глава 3. HTML-формы





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

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

Несмотря на то что формы могут существенно отличаться по внешнему виду,

все они имеют несколько общих элементов. Формы состоят из одного или не — скольких полей ввода с надписями, флажков, переключателей или выпадающих меню, которые используются для ввода информации посетителями сайта. Кроме того, все формы содержат кнопку отправки Submit, на которую пользователь на — жимает для отправки результатов формы Web-серверу. Большинство форм (осо- бенно содержащих большое число полей ввода) также имеют кнопку сброса Reset, которая позволяет очистить все ранее введенные данные и начать ввод

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

Обработка HTML-форм

Самое сложное в понимании процесса обработки HTML-форм состоит в том,

чтобы понять «что где происходит». При просмотре посетителем Web-страницы,

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

у сервера. После передачи HTML-страницы сервером браузер обрабатывает

HTML-операторы и начинает выводить содержимое страницы на экран. Если при обработке странице браузер встретит дескриптор, требующий получения от сервера дополнительных данных, например, дескриптор , который исполь- зуется для описания графики, браузер посылает серверу запрос на передачу тре — буемого файла. Как показано на рис. 3.2, сервер и браузер продолжают это взаи- модействие типа «запрос/ответ» до тех пор, пока браузер не получит все файлы, необходимые для корректного отображения всего содержимого Web-страницы.

После отправки HTML-документа (включая все запрошенные браузером гра — фические изображения, анимацию, звуковые файлы и видеоклипы) работа Web —

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

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

Глава 3. HTML-формы 131







При работе с Web-страницей, содержащей форму, браузер и сервер для загруз — •

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

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

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

Как правило, при нажатии посетителем кнопки передачи (Submit) браузер за — пустит сценарий, который находится в том же HTML-файле, что и форма. Этот сценарий проверяет полноту введенных посетителем данных и в некоторых слу —

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

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

ке результатов форм.

Опять-таки, аки ранее, после передачи страницы формы браузеру Web-сервер

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

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

132 Глава 3. HTML-формы



Дескрипторы и атрибуты, используемые

для создания форм

Как уже упоминалось выше в этой главе, помимо текстовых полей, переклю —

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

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

«контейнер». Начальный и конечный дескрипторы таблицы ( ) используются для описания содержимого, которое должно быть помещено Web — браузером в таблицу. Аналогично, начальный и конечный дескрипторы формы (
) ограничивают содержимое, которое должно быть помещено Web-браузером в форму. Основное различие между формами и таблицами состо —

ит в том, что браузер в HTML-таблице просто выводит данные на экран, в то

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

Глава 3. HTML-формы 13 3





таблиц и несколько форм; тем не менее, несмотря на то, что можно организовать вложенные таблицы, нет никакой возможности внедрить одну форму в другую;)

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

Как показано в примере, дескрипторы