поддержка
проекта:
разместите на своей странице нашу кнопку!И мы
разместим на нашей странице Вашу кнопку или ссылку. Заявку прислать на
e-mail
код нашей кнопки:
Копии рисунков были выполнены с плохим расширением, т.к. что не
обессудьте (как говорится моей вины здесь нет, вся ответственность лежит
на том кто сканировал), а я только, где мог ошибки исправил. В
дальнейшем, сделаю копии рисунков и диалоговых окон в хорошем
разрешении.
В предыдущих главах мы рассматривали, как донести до пользователя
информацию, содержащуюся на страницах Web-узла В настоящей главе вы
узнаете, каким образом получить информацию от пользователей. Теперь в
центре нашего внимания — формы, эффективное средство сбора введенной
пользователем информации. Использование форм
Формы можно сравнить с бланками и анкетами они содержат поля для
заполнения, списки для выбора одного из элементов и т.д. Преимущества
электронных форм перед печатными документами, заполняемыми вручную,
состоят в том, что их легко модифицировать и они удобочитаемы (не
приходится ломать голову над неразборчивым почерком) Важным моментом
является определение структуры формы. Уделите максимум внимания этому
вопросу, если хотите, чтобы пользователи заполняли ваши формы охотно и
правильно Основные требования, предъявляемые к формам.
• простота,
• краткость,
• понятные инструкции по заполнению формы.
Для разработки форм Frontpage предоставляет набор средств, которые
доступны как на панели инструментов Forms, так и в подменю Form меню
Insert Проектирование формы осуществляется также с помощью мастера форм
(Form Page Wizard) Создание формы с помощью мастера форм
Приступая к созданию формы, вы должны решить, какие вопросы необходимо
задать пользователю и какие элементы нужно включить в форму, чтобы он
мог ответить на них Попробуем создать анкету для потенциальных
участников проекта Сначала мы сгенерируем форму посредством мастера, а
затем модифицируем полученный результат Подобно остальным мастерам,
мастер формы задает ряд вопросов и генерирует форму на основе полученных
ответов. Построение формы мастером осуществляется следующим образом:
1. Запустите Frontpage.
2. Создайте одностраничный Web-узел и присвойте ему имя Forms. Откройте
домашнюю страницу в режиме просмотра Page.
3. Откройте меню File и активизируйте команду Page подменю New. На
вкладке General выберите пиктограмму Form Page Wizard (мастер формы) и
щелкните на кнопке ОК. В результате появится первое диалоговое окно
мастера, содержащее сведения о типах и функциях форм, которые можно
создать посредством данного мастера. Ознакомившись с этой информацией,
щелкните на кнопке Next.
4. Во втором окне мастера следует указать URL-адрес и заголовок
страницы. Введите такие данные: заголовок — Project Team Questionnaire*,
URL — Project.htm. В завершение щелкните на кнопке Next.
5. Следующее окно содержит список вопросов (или заданий), которые
адресованы пользователям вашего Web-узла и будут приведены в форме.
Изначально это окно является пустым. Вопросы (или задания) мастер
включает в форму и связывает с ними соответствующий набор полей.
Щелкните на кнопке Add, чтобы загрузить следующее окно. В этом окне
следует выбрать тему, по которой будет задан вопрос или дано задание, а
затем сформулировать сам вопрос (рис. 7.1)
Рис. 7.1. Выбор темы и ввод вопроса, включаемого в форму
Далее при выполнении упражнений вы будете вводить предложения на
английском языке (в тексте книги они снабжены переводом). Дело в том,
что в мастере форм предусмотрено создание полей с названиями на
английском языке. При этом имеется возможность создать ряд опций и
переключателей с русскими названиями. Однако в результате будет получена
двуязычная форма. В дальнейшем все названия элементов формы можно
изменить вручную, переведя на русский язык. — Прим. ред.
6. В верхней части этого диалогового окна расположен список тем, а в
нижней — поле для ввода вопроса. В списке тем выберите пункт contact
information (информация для контактов). При выборе темы в области
Description выводится описание полей, которые будут включены в форму.
Текущий вопрос (или задание) отображается в нижней части окна, где вы
можете изменить его. Согласитесь с установками по умолчанию и щелкните
на кнопке Next.
7. Загрузится следующее диалоговое окно. В нем осуществляется выбор
полей, которые будут помещены в форму. В диалоговом окне, изображенном
на рис. 7.2, представлен набор опций и переключателей, соответствующих
выбранной на этапе 6 теме. От их состояния зависит набор полей, которые
будут включены в форму. Форма, в которую пользователь вводит информацию
для дальнейших контактов с ним, должна содержать поля с его именем.
Количество таких полей варьируется от одного до трех. При выборе
переключателя Full создается одно поле, при выборе переключателя
First,Last — два, а при активизации переключателя First, Last,Middle —
три поля. Указанные поля не создаются, если выключена опция Name
(перечисленные переключатели в этом случае недоступны). По умолчанию
установлены опция Name и переключатель First, Last. He изменяйте эти
установки. Активизируйте опции Postal Address (почтовый адрес) и Home
Phone (домашний телефон). В нижней части окна выводится название группы
переменных. По умолчанию она имеет название Contact (не изменяйте его).
Щелкните на кнопке Next.
Рис. 7.2. Опции для определения набора полей формы при выборе темы
contact information
8. Снова откроется диалоговое окно, описанное на этапе 5. Руководствуясь
пунктами 5-7, добавьте в список вопросы по темам account information
(расчетная информация) и personal information (персональная информация).
Измените установки, соответствующие теме account information. Установите
переключатель As First And Last Names Fields, вследствие чего в форме
будут созданы два поля для ввода имени пользователя. Переключатели As
First And Last Names Fields и Single Fields доступны только в том
случае, если установлена оппия Usemame (имя пользователя). С остальными
установками по умолчанию следует согласиться. В набор опций и
переключателей, соответствующих теме personal information, мы внесем
единственное изменение — выключим опцию Name (с нашей точки зрения, не
имеет смысла повторно создавать поля для ввода имени). Примечание
Форму, сгенерированную мастером, можно модифицировать, выполняя операции
добавления, удаления и т.д.
9. Добавим еще несколько вопросов в список. В первую очередь добавим
вопрос с несколькими вариантами ответов (one or several options).
Измените предлагаемое по умолчанию задание. Для этого вместо текста,
расположенного в поле в нижней части окна, введите следующее
предложение:
Choose the city where you want to be located (Выберите город, в котором
вы хотите работать). Выполните щелчок на кнопке Next. Загрузитсч
диалоговое окно. В его верхней части находится поле, в которое надлежит
ввести три строки:
New York. Austin и San Francisco (после ввода каждой строки нажимайте
клавишу [Enter]). Эти три названия будут использованы в форме в качестве
вариантов ответа на поставленный вопрос. Активизируйте переключатель
Radio Buttons (по умолчанию устанорлек переключатель Drop-down Menu). В
результате в форме будут созданы три переключа-еля. В качестве названия
каждого переключателя используется значение из соответствующей строки (в
нашем случае — New York, Austin и San Francisco). Введите имя группы
переменных — Location. Щелкните на кнопке Next.
10. Активизируйте кнопку Add. выберите тему Any Of Several Options
(любая из нескольких опций) и введите такое указание:
Select two areas you want to be associated with (Выберите два этапа, в
реализации которых вы бы хотели принимать участие). Щелкните на кнопке
Next и в загрузившемся диалоговом окне введите пять строк: Initial
design (разработка первоначального плана);
Detail plan (разработка подробного плана), Project management
(управление проектом), Plan implementation (реализация плана),
Evaluation (подведение итогов)
Для группы переменных задайте имя — Preferred areas В завершение
щелкните на кнопке Next
11. Выполните щелчок на кнопке Add, выберите тему Date и введите
указание следующего характера Enter the date you are available
(Укажите период, в течение которого вы хотели бы заниматься
проектом)
Щелкните HI кнопке Next. Формат даты, предложенный по умолчанию, менять
не следует Для ipym-ы переменных задайте имя — Availability В завершение
щелкните Hci кнопке Next
12. Щелкните на кнопке Add, выделите тему Paragraph и введите следующий
вопрос Why do you want to be on this project? (Почему вас
заинтересовал данный проект). Щелкните на кнопке Next. Введите имя
переменной — Why Снова выполните щелчок на кнопке Next. Диалоговое окно
с готовым списком вопросов представлено на рис 7.3.
Рис 7.3. Готовыи список вопросов
13. Внимательно изучите пункты своей "анкеты". Не хотите ли вы изменить
их содержание или порядок следования? Намного удобнее сделать это до
завершения создания формы. Выберите в списке шестой пункт (просьба о
вводе даты). Выполните два щелчка на кнопке Move Up. В результате этот
пункт переместится на четвертую позицию в списке. Теперь просьба о вводе
даты предшествует вопросу о городе. Если, с вашей точки зрения, один из
пунктов нужно отредактировать, выберите его, а затем щелкните на кнопке
Modify. Если вас все устраивает, нажмите кнопку Next, чтобы продолжить
создание формы.
14. В загрузившемся диалоговом окне определяется вид формы на экране.
Согласитесь с параметрами, заданными по умолчанию: As Normal Paragraph
(как обычный абзац). No Table Of Contents (без оглавления) и Use Tables
To Align Form Fields (использовать таблицы для выравнивания полей
формы). Щелкните на кнопке Next.
15. Теперь нужно указать, как сохранять данные, введенные в формы
пользователем. Установите переключатель Save Results To A Text File
(сохранение результатов в текстовом файле). В поле, расположенное под
группой переключателей, введите имя файла, в котором будут сохранены
введенные пользователем данные, — Proj ans. Щелкните на кнопках Next.
Появится окно с сообщением о том, что введены все ответы, необходимые
мастеру для создания формы. Щелкните на кнопке Finish. В результате
будет создана страница с формой. На рис. 7.4 в режиме просмотра Page
показана форма, сгенерированная мастером.
Рис. 7.4. Форма, созданная мастером
16 Выполните щелчок на кнопке Save панели инструментов или активизируйте
команду Save меню File. В диалоговом окне Save As не изменяйте имя файла
Web-страницы, заданное на этапе 4. Щелкните на кнопке ОК. Примечание
Если данные, введенные в поля формы, сохранены в текстовом файле, их
легко импортировать в базу данных или в электронную таблицу. В этом
случае в качестве разделителей рекомендуется использовать такие знаки,
как запятая, пробел или табулятор (вероятно, наилучший вариант). Для
выравнивания элементов формы можно использовать как таблицу, так и стиль
абзаца Formatted. В прошлом для этой цели чаще применялся стиль
Formatted по следующим соображениям: во-первых, стиль Formatted —
единственный стиль, позволяющий вводить последовательности пробелов, а
во-вторых, во многих броузерах отсутствовали средства поддержки таблиц.
Поскольку в настоящее время большинство броузеров поддерживает таблицы.
данный метод выравнивания элементов формы является предпочтительным. При
использовании таблицы намного легче выравнивать надписи и поля в форме,
а также можно применять любой доступный шрифт. Просмотр и редактирование формы
Внимательно изучив форму, созданную мастером, вы, скорее всего, придете
к заключению, что это — не окончательный вариант. Потребуется внести ряд
изменений, например создать введение, в котором раскрываются задачи
формы. Введение может быть сформулировано следующим образом:
"Информация из этой формы будет использоваться при формировании группы
по работе над проектом. Если вы хотите стать членом этой группы,
пожалуйста, заполните форму". Редактирование надписей в форме Давайте будем придерживаться следующего соглашения: элементы
формы, в которые можно ввести текст, будем называть полями формы, или
полями, а текст, соответствующий полю, — надписью. Измените
надпись рядом с каждым полем. Это может привести к изменению ширины
столбца. На следующем рисунке к первой надписи добавлены слова & middle,
вследствие чего ширина столбца изменилась. Щелкните на кнопке Undo,
чтобы восстановить исходное состояние формы.
Примечание
Если при выравнивании элементов формы использовался стиль Formatted,
возможно, после изменения одной из надписей вам придется выравнивать
элементы формы вручную. В случае применения таблицы выравнивание
выполняется автоматически. Изменение способа выравнивания Изменение способа выравнивания надписи (по горизонтали и по
вертикали) осуществляется в диалоговом окне Cell Properties. Чтобы
изменить выравнивание всех надписей или полей за один раз, перед
открытием диалогового окна выделите целый столбец. В случае применения
стиля Formatted выравнивание изменяют, добавляя или удаляя пробелы. Предостережение
Если надписи или поля формы выровнены посредством стиля Formatted, то
после присвоения другого стиля некоторой надписи могут быть утеряны все
пробелы, вследствие чего нарушится выравнивание поля. Чтобы исправить
это, воспользуйтесь кнопкой Undo. Удаление поля
Для удаления поля и его надписи достаточно выделить строку в таблице и
нажать клавишу [Del]. Поля и надписи можно удалять и по отдельности.
Изменение свойств поля
Щелкните правой кнопкой мыши на поле (не на надписи) и в контекстном
меню активизируйте команду Form Field Properties (свойства поля формы).
В результате откроется диалоговое окно Text Box Properties.
В окне свойств поля формы можно выполнить следующие установки:
•изменить имя поля (но не надпись, которая отображается на странице
Web-узла);
•указать, какое значение должно отображаться в поле по умолчанию (это
целесообразно в том случае, если большинство людей, заполняющих форму,
имеют некоторый общий признак, например живут в одном городе);
• установить защиту поля паролем, что позволяет скрыть содержимое поля;
• установить порядок, в котором полям будет передаваться фокус ввода при
использовании клавиши [Tab] (данная возможность поддерживается не всеми
броузерами);
• задать ширину поля, которую также можно изменить, перетягивая границу
поля, как показано ниже.
Максимальное количество символов, которое можно ввести в поле, не
зависит от ширины поля. Значение этого параметра изменяется в диалоговом
окне Form Field Validation. Щелкните правой кнопкой мыши на поле формы и
в контекстном меню активизируйте команду Form Field Validation.
Загрузится диалоговое окно, изображенное на рис. 7.5. В поле Мах Length
(максимальная длина) этого окна указывается максимальное количество
символов, которое можно ввести в поле формы. Если длина строки введенных
символов превышает ширину поля, текст будет прокручиваться. О назначении
других элементов диалогового окна Text Box Validation вы узнаете
позднее. Сейчас закройте все диалоговые окна.
Рис. 7.5. Диалоговое окно Text Box Validation
Изменение местоположения поля
В созданной мастером форме таблица, используемая для выравнивания
надписей и полей, содержит два столбца. В ячейках каждой строки
расположены надпись и соответствующее поле. Чтобы разместить в одной
строке более одного поля, следует разделить ячейки.
1. Уменьшите ширину поля State/Province (но не надписи) приблизительно
до трети от первоначального размера, перетащив влево правый маркер
управления размером.
2. Установите курсор в ячейке и выделите ее с помощью команды Select
Cell меню Table.
3. Щелкните правой кнопкой мыши на выделенной ячейке и в контекстном
меню активизируйте команду Split Cells (разделить ячейки). По умолчанию
задано разделение ячейки по вертикали (Split Cells Into Columns).
Предложенный вариант нам подходит. Введите значение 3 в поле Number Of
Columns (количество столбцов) и щелкните на кнопке ОК.
4. В новые ячейки перенесите надпись Zip/Postal code и соответствующее
поле.
5. Щелкните правой кнопкой мыши на ячейке, в которой находится надпись
Zip/Postal code. В контекстном меню активизируйте команду Cell
Properties, чтобы открыть диалоговое окно свойств ячейки.
6. Задайте выравнивание по горизонтали и по правому краю (в поле списка
Horizontal Alignment выберите элемент Right). Щелкните на кнопке ОК.
Поля в вашей форме должны быть размещены так, как показано ниже.
7. Удалите образовавшуюся пустую строку посредством команды Delete Cells
меню Table.
Проверка корректности введенной информации
Во многих случаях на данные, вводимые в поля формы, требуется наложить
определенные ограничения. Ограничения могут носить следую щий характер:
в поле можно вводить данные только определенного типа (например, числа,
но не буквы), поле обязательно должно быть заполнено и т.д. Проверить
соблюдение ограничений пользователем можно двумя способами. Первый —
проверка введенных данных на Web-сервере, второй — проверка данных
броузером на компьютере пользователя (проверка сервером и проверка
клиентом). Недостаток первого способа заключается в следующем. Данные из
полей формы нужно отправить на Web-сервер, проверить и вернуть
пользователю в случае обнаружения ошибок. Это сопряжено с большими
затратами времени и повышением требований к ресурсам Web-сервера. При
использовании второго способа ускоряется темп
проверки, и данные из полей формы передаются на Web-сервер только в том
случае, если проверка закончилась успешно.
Примечание
Fron/Page генерирует сценарии на языках JavaScript и VBScript.
Для Web-узла, загруженного в Frontpage, язык сценариев определяется в окне Frontpage
Web Settings (в поле списка Language на вкладке Advanced), которое открывается при активизации команды Web Settings меню Tools в Frontpage. После
установки ограничений для поля формы в диалоговом окне Form Field
Validation Frontpage генерирует сценарии на установленном языке. Эти
сценарии выполняются броузером для проверки соблюдения ограничений.
Критерии проверки для поля ввода и поля списка определяются в
диалоговом окне Text Box Validation (рис. 7.5).
Таблица 7.1. Элементы диалогового окна Text Box Validation
Элемент
Описание
Display Name
Содержит имя поля формы (но не надпись). Это имя отображается в окне сообщения об ошибке
Data Type
В этом поле списка указывается тип данных, которые можно вводить в поле формы. Возможны следующие варианты: No Constraints (без ограничений) — данные любого типа; Text — символы алфавита, цифры и табуляторы; Integer — числа без десятичных знаков (допускается ввод символов "," и "-", например 1-2 или 1,2); Number —числа с десятичными знаками
Text Format
Четыре опции, расположенные в этой области окна, доступны только в том случае, если в поле списка Data Type выбран пункт Text. С помощью этих опций определяют, какие символы текстового типа можно вводить в поле формы: Letters — разрешен ввод букв
Numeric Format
В эту область входят две группы переключателей — Decimal (два переключателя) и Grouping (три переключателя). Переключатели первой группы позволяют выбрать символ для разделения разрядов числа (запятая или точка) и отменить его использование. С помощью переключателей второй группы указывают символы для разделения целой и дробной части числа. Нельзя использовать один и тот же
символ для разделения разрядов и целой и дробной частей. Описанные группы переключателей доступны только в том случае, если в поле списка Data Type выбран пункт Number
Data Length
Данная область содержит опцию Required и два поля ввода. Если указанная опция установлена, накладывается следующее ограничение ~ заполнение поля обязательно. В полях Min Length и Мах Length
указывается минимальное и максимальное количество символов в поле формы
Data Value
В данной области определяются критерии проверки
вводимых данных. Значение, введенное в поле Value, используется для сравнения. Содержимое каждого поля можно проверять по следующим критериям: Less Than (меньше чем). Greater Than (больше чем). Less Than Or Equal To (меньше или равно). Greater Than Or Equal To (больше или равно). Equal To (равно), Not Equal To (не равно)
Можно задать, чтобы выбор переключателя в форме был обязательным Это
осуществляется в диалоговом окне Radio Button Validation В дгом окне
необходимо установить опцию Data Requned В поле ввода Display Name
следует задать имя, которое будет выведено в окне сообщения об ошибке,
если таковая возникнет
Поля списков имеют дополнительную опцию проверки — Disallow First Choice
(запретить первый пункт) Если она установлена, нельзя выбрать первый
пункт в поле списка Это позволяет сдеяать первым пунктом списка
инструкцию или замечание
Для таких элементов формы, как опции и кнопки, проверка не проводится
Ниже изображено диалоговое окно с сообщением о необходимости ввести
данные в поле First Name Это сообщение выдается в брокере, ее
пользователь оставил пустым поле формы, ввод данных в которое является
обязательным, и активизировал передачу данных на Web-узел На этапе
проектирования формы для этого поля было определено, что оно не может
оставаться пустым (в области Data Length диалогового окна Text Box
Validation установлена опция Required) Если поле Display Name
диалогового окна Text Box Validation не заполнять, в окне сообщения об
ошибке будет выведено имя поля формы, указанное в поле Name диалогового
окна Text Box Properties
Сделайте так, чтобы ввод информации в поля формы First Name и Last Name
стал обязательным. Для этого выполните следующие действия.
1. Щелкните правой кнопкой мыши на поле формы First Name и выберите в
контекстном меню команду Form Field Validation.
2. В диалоговом окне Text Box Validation введите в поле Display Name
TCKCI First Name. Установите опцию Required и щелкните на кнопке ОК.
3. Повторите этапы 1 и 2 для поля формы Last Name (в этом случае в поле
Display Name введите текст Last Name).
4. Сохраните страницу и откройте ее в своем Web-броузере. Не вводя
какую-либо информацию, щелкните на кнопке Submit. Отобразится окно с
сообщением об ошибке, показанное на предыдущем рисунке.
5. Щелкните на кнопке ОК, чтобы закрыть окно с сообщением об ошибке, и
введите текст в поле формы First Name. Еще раз щелкните на кнопке Submit.
Теперь отобразится окно с сообщением о том, что требуется ввести
значение в поле Last Name.
6. Щелкните на кнопке ОК, чтобы закрыть это окно. В завершение закройте
броузер. Изменение свойств формы
Форма представляет собой группу элементов, которые на странице в
Frontpage ограничены пунктирной рамкой. Присвоение значений свойствам
формы выполняется в диалоговом окне Form Properties (рис. 7.6). Чтобы
открыть это окно, щелкните правой кнопкой мыши на форме вне области,
занимаемой элементами. В контекстном меню активизируйте команду Form
Properties. В загрузившемся окне можно выполнить следующие установки:
• Выбрать в области What To Do With Form Results? (что делать с
результатами формы?) вариант обработки данных, переданных с компьютера
клиента на Web-узел. Возможны следующие варианты: сохранить полученные
данные в файле, переслать по электронной почте, передать для дальнейшей
обработки в ASP- или CGI-сценарий, поместить в дискуссионную или
регистрационную форму.
• Задать имя формы.
• Указать, в каком кадре должна отображаться форма.
• При выполнении щелчка на кнопке Options открывается диалоговое окно
Options For Saving Results Of Form, изображенное на рис. 7.7. На вкладке
File Results можно указать имя и формат файла, в котором вы хотите
сохранить полученные данные; определить, включать или не включать имена
полей формы в этот файл, а также помещать ли данные, переданные
последними, в конец файла (если задано, что файл должен иметь текстовый
формат, данные всегда помещаются в конец файла); определить имя и формат
второго файла, в котором следует сохранить полученные данные.
Рис. 7.6. Диалоговое окно Form Properties
Рис. 7.7. Диалоговое окно Options For Saving Results Of form
В результате выполнения щелчка на кнопке Advanced, расположенной в
диалоговом окне Form Properties, открывается диалоговое окно Advanced
Form Properties. С помощью этого окна можно добавить в форму скрытые
поля. Скрытые поля не отображаются в форме и используются для внутренних
нужд программы. Скрытые поля обычно применяются, если на Web-узле
используются сценарии.
При активизации кнопки Add или Modify открывается диалоговое окно Name/Value
Pair, в котором осуществляется ввод или модификация имени и значения
поля формы. Кнопка Remove служит для удаления скрытого поля. На
приведенном ниже рисунке в диалоговом окне Name/Value Pair для поля
формы заданы имя Source и значение Project Team.
Элементы в нижней части формы, изображенной на рис. 7.4, различаются по
типу, что показано на рис. 7.8. Установки в окне свойств специфичны для
каждого типа элементов.
Кратко опишем элементы формы каждого типа.
• Изображенная на рисунке форма содержит группу переключателей.
Напоминаем, что в одной группе можно выбрать только один переключатель.
В группе опций можно активизировать несколько элементов.
• Поле с полосами прокрутки. Одна строка такого поля может содержать до
35 символов (значение свойства Width In Characters равно 35). Количество
видимых на экране строк —- 5 (значение свойства Number Of Lines равно
5). В броузере полоса прокрутки в таком поле становится доступной лишь в
том случае, если в поле введено более пяти строк текста.
Рис 7.8 Различные элементы формы
• Кнопки. Форма из нашего примера содержит две кнопки различных типов.
Кнопка Submit Form (тип Submit) служит для передачи введенных в форму
данных на Web-узел. Кнопка Reset Form (тип Reset) предназначена для
удаления данных из полей формы. Выбор типа осуществляется в диалоговом
окне. Примечание
Наряду с указанными существует еще один тип кнопок, — Normal
(поддерживается в стандарте HTML 4.0). Кнопки этого типа применяются в
клиентских сценариях (при щелчке на этой кнопке обработка данного
события происходит в самом HTML-документе на клиентском компьютере) Если
форма, которую необходимо создать, во многом сходна с формой, которую
может создать мастер, воспользуйтесь помощью мастера. Таким образом вы
сэкономите время, так каквам останется лишь внести небольшие изменения в
автоматически сгенерированную форму. Мастер также выполняет необходимые
установки для обработки введенных в форму данных.
Создание форм вручную
Мы подробно рассмотрели процесс создания формы с помощью мастера.
Однако, разработав свой Web-узел, вы, вероятно, захотите использовать на
нем формы, которые значительно отличаются от предоставляемых Frontpage.
Этой теме и посвящена следующая часть главы. Вы научитесь создавать
формы вручную. При этом мы будем работать с панелью инструментов Forms
(назначение кнопок данной панели описано в таблице 7.2). Чтобы
отобразить данную панель, активизируйте команду Forms подменю Toolbars
меню View.
Таблица 7.2. Кнопки панели инструментов Forms.
Форму, которую мы создадим в приведенном примере, можно сгенерировать и
посредством мастера, но мы все операции выполним "вручную", поскольку
нашей целью является изучение именно этого способа создания
форм. Кроме того, для выравнивания элементов и надписей мы будем
использовать стиль Formatted, а это отличается от того, что сделал бы
мастер
1. Выполните щелчок на кнопке New панели инструментов Standard. Будет
создана пустая страница.
2. Откройте диалоговое окно Page Properties и введите заголовок страницы
— Literature Request. Щелкните на кнопке ОК, чтобы закрыть диалоговое
окно.
3. В верхней части новой страницы введите текст LITERATURE REQUEST и
выровняйте его по центру. Присвойте данному абзацу стиль Heading 1.
4. Вставьте горизонтальную линию при помощи команды Horizontal Line меню
Insert.
5. Установите курсор в строке под горизонтальной линией. На панели
инструментов Forms нажмите кнопку One-Line Text Box. В результате будет
соэдана форма (на экране —- область страницы, ограниченная пунктирной
линией), содержащая одно поле и две кнопки (Submit и Reset).
6. Расположите кнопки в отдельной строке. Для этого установите курсор
слева от кнопки Submit и нажмите клавишу [Enter].
7. Щелкните правой кнопкой мыши на поле и выберите в контекстном меню
команду Form Field Properties. Откроется диалоговое окно Text Box
Properties. Присвойте полю имя First и установите для ширины значение
25. Значения остальных свойств не изменяйте. В завершение щелкните на
кнопке ОК.
8. Установите курсор слева от поля. В поле списка Change Style панели
инструментов Format выберите стиль Formatted. Слева от поля введите
текст First Name: и вставьте пробел между надписью и полем.
9. Установите курсор справа от поля, вставьте два пробела, введите
надпись Last Name:, вставьте пробел и создайте второе поле. В окне
свойств второго поля укажите имя (Last) и ширину (25). Расположите
курсор в конце строки и нажмите комбинацию клавиш [Shift+Enter], чтобы
создать новую строку в пределах формы.
10. В новой строке введите текст Company:. Вставьте четыре пробела и
создайте новое поле с такими параметрами: имя — Company, ширина —63.
Нажмите комбинацию клавиш [Shift+ Enter]. (Я установил для ширины такое
значение, при котором на моем экране вторая строка эквивалентна первой.
У вас ситуация может быть иной. При желании можете изменить ширину
поля).
11. В новой строке введите надпись Address:. Вставьте четыре пробела и
создайте новое поле. Установите для него такие параметры: имя — Addressi,
ширина — 25.
12. В конце строки вставьте два пробела и введите надпись Address2:.
Вставьте пробел и создайте новое поле с такими параметрами: имя —
Address2, ширина — 25. Установите курсор в конце строки и создайте новую
строку, нажав комбинацию клавиш [Shift+Enter].
13. В новой строке введите надпись City:. Вставьте семь пробелов и
создайте новое поле (имя — City, ширина — 25). Нажмите клавишу со
стрелкой впрово и вставьте два пробела. Введите надпись State:, вставьте
пробел и создайте новое поле с такими параметрами: имя — State, ширина —
9. Свойству Initial Value присвойте значение WA (когда страница с формой
будет загружена в броузер, значение WA отобразится в этом поле). Нажмите
клавишу со стрелкой вправо и вставьте два пробела. Введите надпись Zip:,
вставьте пробел и создайте новое поле (имя — Zip, ширина —12). Нажмите
клавишу со стрелкой вправо, а затем — комбинацию клавиш [Shift+Enter].
14. В новой строке введите надпись Phone:, вставьте шесть пробелов и
создайте новое поле с такими параметрами: имя — Phone, ширина — 25.
Нажмите клавишу со стрелкой вправо, вставьте два пробела, введите
надпись E-mail:, вставьте четыре пробела и создайте новое поле (имя —
Phone, ширина — 25). Нажмите клавишу со стрелкой вправо, а затем —
комбинацию клавиш [Shift+Enter].
15. Создаваемая нами форма содержит элементы только одного типа — поля.
Теперь мы добавим в нее опцию. Щелкните на кнопке Check Box панели
инструментов Forms. Откройте окно свойств этого элемента. В поле Name
введите значение Literature. Согласитесь с остальными установками,
выполненными по умолчанию, и щелкните на кнопке ОК. Нажмитеклавишу со
стрелкой вправо, но не вставляйте пробел. Введите следующее предложение:
Click here if you wish literature. (Выберите, если хотите иметь
литературу.) Вставьте шесть пробелов.
16. Введите надпись Which products?, вставьте пробел и щелкните на
кнопке Drop-Down Menu (панель инструментов Forms). В результате в форме
появится поле списка. В диалоговом окне Drop-Down Menu Properties
введите в поле Name значение Lit_Products. Теперь вы добавите в поле
списка Lit_Products пункты, которые будут предоставлены пользователю на
выбор при отображении формы в броузере. Щелкните на кнопке Add, чтобы
открыть диалоговое окно Add Choice. В поле Choice введите пункт Portable
model и установите переключатель Selected в области Initial State
(см. ниже).
17. Щелкните на кнопке ОК. в диалоговом окне Add Choice, чтобы закрыть
его. В списке, состоящем из множества столбцов, диалогового окна
Drop-Down Menu Properties появится пункт Portable model. Добавьте в этот
список еще два пункта — Desktop model и Floor model. В обоих случаях не
изменяйте установки по умолчанию в области Initial State диалогового
окна Add Choice (по умолчанию установлен переключатель Not Selected). В
области Allow Multiple Selections (позволить множественный выбор)
диалогового окна Drop-Down Menu Properties активизируйте переключатель
Yes. Диалоговое окно Drop-Down Menu Properties с соответствующими
установками показано на рис- 7.9.
18. Щелкните на кнопке OK в диалоговом окне Drop-Down Menu Properties.
Выделите надпись What products? и соответствующее ей поле списка.
Нажмите комбинацию клавиш [Ctrl+C], чтобы скопировать их в буфер обмена.
Переместите курсор в конец строки и нажмите комбинацию клавиш [Shift+Enter].
Рис. 7.9. Диалоговое окно Drop-Down Menu Properties
19. В новой строке вставьте опцию. В окне свойств присвойте ей имя Use.
Остальные установки, принятые по умолчанию, не изменяйте. Щелкните на
кнопке ОК. Нажмите клавишу со стрелкой вправо и введите следующее
предложение: Click here if you use our product.
(Выберите, если вы используете наши продукты.) Вставьте пять
пробелов. Нажмите комбинацию клавиш [Ctri+V], чтобы поместить на
страницу содержимое буфера обмена (надпись Which products? и поле
списка). Щелкните правой кнопкой мыши на поле списка и в контекстном
меню активизируйте команду Form Field Properties. В поле Name
диалогового окна Drop-Down Menu Properties удалите имеющийся текст и
введите Use_products. Щелкните на кнопке ОК. Переместите курсор в конец
строки и нажмите комбинацию клавиш [Shift+Enter].
20. В новой строке вставьте опцию. В окне свойств присвойте ей имя Plan.
Остальные установки, выполненные по умолчанию, не изменяйте. Щелкните на
кнопке ОК. Нажмите клавишу со стрелкой вправо и введите следующее
предложение: Click here if planing our products. (Выберите, если вы
планируете использовать наши продукты.)
Вставьте четыре пробела и нажмите комбинацию клавиш [Ctrl+V], чтобы
поместить на страницу содержимое буфера обмена (надпись Which pro-
ducts? и поле списка).
21. Щелкните два раза на поле списка и в загрузившемся диалоговом окне
Form Field Properties установите значение Plan_Products для свойства
Name и щелкните на кнопке ОК. Переместите курсор в конец строки и
нажмите комбинацию клавиш [Shift+ Enter].
22. В новой строке введите такое предложение: What is your company
size ? (Сколько человек работает в вашей компании?) Вставьте три
пробела. Теперь мы добавим в форму переключатель. Для этого щелкните на
кнопке Radio Button, расположенной на панели инструментов Forms.
Загрузите окно свойств переключателя (см. ниже). В поле Group Name
введите значение Size (имя группы, к которой относится переключатель), а
в поле Value — Less than 50 (значение свойства Value идентифицирует
переключатель в группе). Не изменяйте установки по умолчанию в области
Initial State (активизирован переключатель Not Selected). Щелкните на
кнопке ОК.
23. Нажмите клавишу со стрелкой вправо и введите следующий текст:
Less than 50 (меньше 50) Вставьте три пробела и создайте еще один
переключатель. Откройте окно свойств переключателя и в поле Group Name
введите значение Size, а в поле Value — 50 to 500. Закройте окно
свойств. Не изменяйте установки по умолчанию в области Initial State.
Нажмите клавишу со стрелкой
вправо и введите такой текст: 50 to 500 (от 50 до 500)
Вставьте три пробела и создайте еще один переключатель. Откройте окно
свойств переключателя и в поле Group Name введите значение Size, а в
поле Value — Over 500. Закройте окно свойств. Не изменяйте установки по
умолчанию в области Initial State. Нажмите клавишу со стрелкой
вправо и введите следующий текст: Over 500 (свыше 500) Нажмите
комбинацию клавиш [Shift+Enter].
24. Введите такое предложение:
Please give us any comments you wish: (Пожалуйста, введите ваши
комментарии) Вставьте в форму поле с полосами прокрутки. Для этого
активизируйте кнопку Scrolling Text Box, расположенную на панели
инструментов Forms. Откройте окно свойств этого элемента и в поле Name
введите значение Comments, а в поле Width In Characters — 36. Щелкните
на кнопке ОК.
25. Щелкните правой кнопкой мыши на кнопке Submit и выберите в
контекстном меню команду Form Field Properties. Откроется диалоговое
окно Push Button Properties. В поле Name введите значение Submit, а в
поле Value/Label — Submit Form (эта надпись будет отображена на кнопке).
Убедитесь, что в области Button Type активизирован переключатель Submit
(установка по умолчанию). Щелкните на кнопке ОК.
Примечание
Для добавления кнопок в форму предназначена кнопка Push Button панели
инструментов Form.
26. Щелкните правой кнопкой мыши на кнопке Reset и откройте диалоговое
окно Push Button Properties. В области Button Type активизируйте
переключатель Reset. Присвойте кнопке имя Reset. В поле Value/Label
введите значение Reset Form. Щелкните на кнопке ОК. Сохраните страницу,
на которой находится форма. В диалоговом окне Save As введите имя файла
страницы (Literature.htm). Страница будет сохранена в корневой папке
Web-узла. Окончательный вариант формы показан на рис 7.10.
Рис 7.10. Форма создана вручную
27. Теперь мы изменим некоторые установки для обработки введенной в
форму информации. Щелкните правой кнопкой мыши на форме и в контекстном
меню активизируйте команду Form Properties. В одноименном диалоговом
окне, в области What To Do With Form Results, no умолчанию установлен
переключатель Send To.
28. В поле File Name введите _Private/Literate.txt (данные, переданные
из формы на Web-узел, будут сохранены в файле Literate.txt, находящемся
в папке узла _Private). Щелкните на кнопке Options. Загрузится
диалоговое окно Options For Saving Results Of Form. На вкладке File
Results выберите в поле списка File Format значение Text Database Using
Tab As A Separator (текст базы данных с табулятором в качестве
разделителя).Выключите опцию Include Field Names. Перейдите на вкладку
Saved Fields и в области Additional Information To Save
(дополнительная информация
для сохранения) установите опции Date и User Name. Щелкните на кнопке ОК
в окнах Options For Saving Results Of Form и Form Properties. В области
окна Date and Time (дата и время) в поле списка Time Format (формат
представления времени) выберите третий пункт в списке. Не изменяйте
выбранный по умолчанию формат представления даты в поле списка Date
Format (по умолчанию установлен полный формат представления даты).
Сохраните еще раз страницу с формой, поскольку работа по ее созданию
завершена. Примечание
Благодаря режиму редактирования страниц WYSIWYG вы можете сразу
определить, как выглядит форма, которую вы создаете, и изменить ее в
случае необходимости.
Одна из целей данного примера — продемонстрировать целесообразность
применения мастера, который позволяет избежать многих рутинных процедур,
например выравнивания элементов формы. Таким образом, формы со сложной
структурой рекомендуется создавать с помощью мастера, а
затеммодифицировать. Создание ссылок на страницах Web-узла Forms В данный момент Web-узел Forms содержит три
страницы: чистую страницу Home Page, страницу Project Team Questionnaire,
сгенерированную мастером, и страницу Literature Request с формой,
созданной вручную.
Следующий этап создания полноценного Web-узла — установление связей
между страницами. Разместим на домашней странице две ссылки на страницы
с формами. Выполните следующие действия.
1. В режиме просмотра Page откройте меню Windows и выберите пункт
Default, htm. В верхней части страницы введите текст FORMS EXAM-PLES.
Присвойте этому абзацу стиль Heading 1 и нажмите клавишу [Enter].
2. В следующей строке введите слова Form Page Wizard и присвойте этому
абзацу стиль Heading 4. Выделите эти три слова и щелкните на кнопке
Hyperlink панели инструментов. В диалоговом окне Create Hyperlink
выберите страницу Literature Request (Literature.htm) и щелкните на
кнопке ОК. Установите курсор в конце строки. Нажмите клавишу [Enter].
3. В новой строке введите слова Custom Form и присвойте этому абзацу
стиль Heading 4. Создайте ссылку на страницу Literature Request, включив
в нее текст Custom Form. Теперь на домашней странице созданы две ссылки
(рис. 7.11). Сохраните домашнюю страницу. На странице Project Team
Questionnaire создайте ссылку на домашнюю страницу, включив в нее текст
Home. Такую же ссылку создайте на странице Literature Request.
Сохраните обе страницы.
Рис. 7.11. Домашняя страница Web-узла Forms в режиме просмотра Page
4. Откройте броузер и загрузите Web-узел Forms. Щелкните на ссылке Form
Page Wizard. В результате в броузере будет загружена страница Project
Team Questionnaire, He заполняйте форму и нажмите кнопку Submit Form.
Появится сообщение о необходимости ввода данных в поле First Name.
5. Заполните форму и снова нажмите кнопку Submit Form. В броузере будет
загружена страница подтверждения (эта страница создается Frontpage
автоматически), содержащая введенные вами данные (рис. 7.12). Щелкните
на ссылке Return To The Form в нижней части страницы подтвеждения, чтобы
вернутся на страницу Project Team Questionnaire. На этой странице
щелкните на ссылке Ноте, чтобы вернуться на домашнюю
страницу
Рис 7.12 Страница подтверждения, созданная Frontpage
6. Щелкните на ссылке Custom Form. В броузере загрузится страница
Literature Request. Заполните форму на этой странице и щелкните на
кнопке Submit Form. В броузере отобразится страница подтверждения,
содержащая введенные вами данные. Закройте броузер. Примечание
Обратите внимание, что при отображении в броузере нарушилась композиция
формы. Таким образом, выравнивание элементов формы, выполненное ранее в
Frontpage (рис. 7 10), не воспроизводится в броузере должным образом
(рис. 7.13). В различных броузерах элементы формы выравниваются
по-разному Пользователь может повлиять на выравнивание элементов формы в
броузере, выбирая различные шрифты. Если для выравнивания элементов
использовать таблицу, внешний вид формы значительно улучшится.
Рис. 7.13. Композиция формы Literature Request нарушена при отображении
в броузере Internet Explorer 5.0
7. Откройте файл, в котором сохранены данные, переданные из формы на
странице Project Team Questionnaire. Мы определили, что эти данные будут
сохранены в файле Proj_ans.txt, который находится в корневой папке
Web-узла. Откройте этот файл в редакторе Notepad.
8. Вы можете импортировать данный файл в базу данных или в электронную
Рис. 7.14. Данные из формы Project Questionnaire представлены в
Microsoft Access и Microsoft Excel
9. Закройте редактор Notepad и остальные приложения. Frontpage
предоставляет не только мощный инструмент для создания формы, но и
средства для обработки данных, переданных из формы на Web-узел. Вы
можете использовать свои методы обработки полученных данных, поскольку
стандартных средств во многих случаях не хватает для решения задач.