Создание сайта при помощи Front Page 2000. Урок пятый. Создание форм

Анастасия Кулакова, alex_kulakoff@pisem.net

Что такое формы

В повседневной жизни мы повсюду сталкиваемся с формами. Их приходится заполнять и в ОВИРе при получении загранпаспорта, и в сберкассе при оплате коммунальных услуг, даже избирательный бюллетень, по сути, тоже является формой. Все "бумажные" формы имеют однотипную структуру. Они состоят из вопросов, на которые вам надо ответить, и специально отведённых граф, куда следует вписать ответ. Иногда на формах есть специальные ячейки, в которых вы крестиком или галочкой можете ответить на один или несколько пунктов. Заполнив форму, вы отдаёте её служащему, кассиру, а бюллетень опускаете в урну.

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

Создание форм

Для того, чтобы создать форму без помощи FrontPage, вам потребуется знание HTML и различных тегов, необходимых для создания таблицы, например, тегов <FORM> или <INPUT>. FrontPage позволяет создавать формы при помощи набора команд из меню и ввода простейшей информации, знание HTML при создании форм совершенно не обязательно. Создать форму вы можете тремя различными способами: 

1. При помощи мастера Form Page (Страница с формой). Программа задаёт вам ряд вопросов о том, какой должна выглядеть форма. Затем, основываясь на ваших ответах, FrontPage создаёт форму, которую впоследствии можно при желании подкорректировать, так чтобы она полностью соответствовала вашим требованиям. 

2. При помощи шаблона страницы с формой. Эта работа несколько проще. Программа не задаёт вам никаких вопросов, а вместо этого создаёт готовую форму определённого типа, например, форму для гостевой книги. Такую форму вы также можете свободно корректировать в соответствии с вашими желаниями. 

3. Сконструировать её самостоятельно из стандартных элементов. Для этого сначала вы создаёте страницу, а затем помещаете на неё область формы. Внутри границы формы FrontPage создаёт 2 кнопки Submit (Отправить) и Reset (Сброс). Вам остаётся создать поля и подписи формы. Новую форму можно создать, просто поместив на страницу любое поле. 

Хотя формы, созданные во FrontPage будут работать только на Web - серверах, поддерживающих FrontPage Server Extensions, мы всё равно рассмотрим как их создавать и работать, поскольку знание этого может вам пригодиться в дальнейшей жизни. 

Типы элементов управления форм

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

Form (Форма) --------------Помещает форму на страницу. 
Text box (Текстовое поле) ---------------Поле для ввода текста. 
Check box (Флажок) -----------------Независимый переключатель, относящийся к какой-либо опции. Их можно отметить одновременно несколько штук. 
Drop-down menu (Меню со списком) --------------------Раскрывающееся меню. По сути, оно похоже на группу кнопок-переключателей - пользователь может выбрать только одну опцию из списка. 
Radio button (Переключатель)------------------- Пользователь может выбрать только одну кнопку из группы. 
Picture (Рисунок) --------------------Рисунок обладает всеми свойствами кнопки запуска. 
Label (Подпись) --------------------На ней можно щёлкнуть для активизации соответствующего поля ввода. 

Создание формы при помощи мастера

1. Выберите в меню File (Файл) пункт New(Создать), а затем команду Page (Страница). Откроется диалоговое окно New(Создание сайта). 

2. Щёлкните на значке Form Page Wizard (Мастер Страница с формой) и нажмите ОК. Откроется первое диалоговое окно мастера. 

3. Щёлкните по кнопке Next (Далее). Откроется второе диалоговое окно мастера. 

4. Нажмите кнопку Add (Добавить), чтобы определить тип информации, для ввода которой будет предназначена форма. Вы можете указать мастеру, для сбора какой именно информации предназначена форма, выбрав нужный тип в списке в диалоговом окне. 

5. В списке поля Select The Type Of Input To Collect For This Question (Выберите тип вводимой информации, которая послужит ответом на этот вопрос) щёлкните на пункте Contact Information(Контактная информация). В тестовом поле Edit The Prompt For This Question (Отредактируйте описание этого вопроса) удалите текст, находящийся там по умолчанию, и наберите:
Пожалуйста, расскажите о себе:
. Затем щёлкните по кнопке Next (Далее). Откроется следующее диалоговое окно, где можно будет выбрать параметры сбора информации. 

6. В диалоговом окне установите флажки Name (Имя), Organization (Организация), Work phone (Рабочий телефон), E-mail address (Адрес электронной почты), Web address (Адрес в Web) и нажмите по кнопке Next (Далее).

 7. Мастер форм предлагает выбрать типы вводимой информации. Нажмите кнопку Add (Добавить) и выберите One of several options (Один из многих). В тестовом поле Edit The Prompt For This Question (Отредактируйте описание этого вопроса) удалите текст, находящийся там по умолчанию. Затем щёлкните по кнопке Next (Далее). 

8. В появившемся диалоговом окне выберите опцию drop-down menu. В текстовом поле Enter the labels for the options, one on each line (введите параметры для выбора) наберите, нажимая после каждого слова клавишу Enter (Ввод) на клавиатуре:
Студент, Абитуриент, Другое.
В текстовом поле Enter the name of a variable to hold this answer (Введите название параметра по умолчанию) наберите Student. Обратите внимание, что в это поле текст можно вводить только на английском языке. 

9. Следующее диалоговое окно оставьте без изменений. 

10. Далее выберите опции: Save results to a web page (Сохранение результатов на странице), в поле Enter the base name of the results file (Введите имя файла результатов) введите имя formrslt и нажмите кнопку Next (Далее). 

11. В последнем окне нажмите Finish (Финиш). Мастер создаст и откроет вам рабочую страницу, которую вы можете отредактировать. 

Завершение создания формы

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

1. В меню File (Файл) выберите команду Save As (Сохранить как). Откроется диалоговое окно Save As (Сохранить как). 

2. В текстовом поле File Name (Имя файла) наберите Pogel.htm. 

3. Щёлкните по кнопке Change (изменить). Откроется диалоговое окно Set Page Title (Задайте заголовок страницы). 

4. В поле Page Title (Заголовок страницы) наберите: Форма запроса, щелкните на кнопке ОК, а затем - на кнопке Save (Сохранить). FrontPage сохранит созданную вами страницу с формой. 

5. Прокрутите страницу вниз, чтобы увидеть нижнюю часть формы. А затем снова прокрутите страницу до конца наверх. В нижней части формы FrontPage расположил две кнопки Submit Form (Отправить данные формы) и Reset Form (Сброс данных формы). 

Исправьте текст формы

1. Выделите заголовок New Page (Новая страница) и наберите Ваши отзывы. 

2. Удалите текст, расположенный прямо над границей формы (This is an explanation of the purpose of the form... - Здесь следует объяснение целей формы... ) и наберите следующее: "Ваши пожелания". 

3. На панели инструментов щелкните на кнопке Save (Сохранить). Все изменения будут сохранены. 

Создайте форму без мастера

1. На панели инструментов щелкните на кнопке New (Создать). FrontPage создаст чистую страницу и отобразит ее в режиме просмотра Раде (Страница). 

2. По середине первой строки наберите Ваши пожелания.

3. В меню Insert (Вставка) щелкните на пункте Form (Форма) и выберите команду Form (Форма). FrontPage создаст форму на текущей странице. 

4. В нижней части формы будут помещены кнопки Submit (Отправить) и Reset (Отменить). 

5. Нажмите клавишу Enter пять раз, а затем щелкните на строке под границей области формы. Так вы создадите свободное пространство, необходимое для размещения элементов формы. 

6. На панели инструментов щелкните на кнопке Save (Сохранить). В текстовом поле File Name (Имя файла) наберите Suggest. htm, а затем щелкните на кнопке Save (Сохранить). Все изменения будут сохранены. 

Модификация форм

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

Добавление поля со списком

1. Щелкните на самой верхней строке, расположенной внутри области формы, наберите: "Это мой (моё)" и нажмите [Enter]. 

2. В меню Insert (Вставка) щелкните на пункте Form (Форма), а затем выберите команду Drop-Down Menu (Меню со списком). FrontPage вставит меню со списком справа от только что набранного текста. 

3. Щелкните правой кнопкой мыши на меню со списком и в контекстном меню выберите команду Form Field Properties (Свойства поля формы). Откроется диалоговое окно Drop-Down Menu Properties (Свойства поля формы). 

4. Щелкните на кнопке Add (Добавить). Откроется диалоговое окно Add Choice (Добавьте элементы списка). В этом диалоговом окне вы сможете добавлять элементы к списку поля. 

5. В текстовом поле Choice (Элемент списка) наберите "Вопрос" и нажмите кнопку ОК. FrontPage добавит эту строку к списку меню. 

6. Таким же образом включите в меню пункты: "Предложение", "Замечание", "Интересная информация", "Другое". 

По умолчанию, меню со списком работают так же, как и кнопки - переключатели, т. е. В меню вы также можете выбрать только один элемент. Однако, меню со списком можно настроить по другому, так что пользователи смогут выбирать одновременно несколько элементов. Для этого необходимо щёлкнуть правой кнопкой мышки на меню со списком, выбрать команду Form Field Properties (Свойства поля формы) и в диалоговом окне Drop-Down Menu Properties (Свойства поля формы) включите опцию Yes (Да) возле пункта Allow Multiple Selection (Разрешить множественный выбор). 

Добавьте к форме пояснительный текст и поле ввода

1. Щелкните на самой верхней строке, расположенной внутри области формы, наберите: "Мы всегда будем рады получить ваш отклик!" по центру и нажмите клавишу [Enter]. 

2. Наберите "Что Вы хотите изменить на сайте, о чём спросить?" по левому краю и нажмите пробел. 

3. В меню Insert (Вставка) щелкните на пункте Form (Форма) и выберите команду Scrolling Text Box (Прокручиваемое текстовое окно). FrontPage поместит рядом с вопросом текстовое окно с полосами прокрутки. Посетители Web-сайта смогут набрать в этом поле текст любого объема. 

Отправка данных формы по электронной почте или в файл

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

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

Отправьте данные по электронной почте

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

1. Щелкните правой кнопкой мыши на любом свободном месте формы и в контекстном меню выберите команду Form Properties (Свойства формы). Откроется диалоговое окно Form Properties. 

2. В текстовом поле E-mail Address (Адрес электронной почты) наберите ваш адрес электронной почты. Если на этом шаге ВЫ щелкните на кнопке ОК, то данные формы будут отсылаться по электронной почте, и сохраняться в файле на Web-сервере. 

3. Щелкните в поле File Name (Имя файла), удалите текст, содержащийся в нем и щелкните на кнопке ОК. Откроется диалоговое окно, содержащее предупреждение о том, что ваш Web-сервер должен поддерживать возможность отправки данных по электронной почте. Вам будет задан вопрос, следует ли удалить адрес электронной почты из формы. 

4. Щелкните на кнопке No (Нет). После того, как Web-мастер или системный администратор настроят сервер должным образом, данные из формы можно будет передавать по электронной почте.

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

Сохраните данные формы в текстовом файле

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

1. Щелкните правой кнопкой мыши на пустом месте в области формы, затем в контекстном меню выберите команду Form Properties (Свойства формы). Откроется диалоговое окно Form Properties (Свойства формы). 

2. Удалите текст, находящийся в поле File Name (Имя файла). 

3. Наберите Suggestions. txt, удалите содержимое поля E-mail Address (Адрес электронной почты) и щелкните на кнопке Options (Параметры).

 4. Щелкните на стрелке поля File Format (Формат файла), выберите из списка тип Formatted Text (Форматированный текст) и два раза щелкните на кнопке ОК. Когда посетитель сайта щелкнет на кнопке Submit Form (Отправить данные формы), то данные будут сохранены в файле Suggestions. txt на Web-сервере, Если файл с таким именем не существует, он будет автоматически создан сразу же после того, как первый посетитель заполнит и отправит форму. 

5. На панели инструментов щелкните на кнопке Save (Сохранить). Все изменения будут сохранены. 

Упорядочивание страниц с запросами

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

1. Перейдите на панель Navigation (Навигация). 

2. В списке папок щёлкните на файле Pogel.htm и удерживая кнопку мышки нажатой перетащите иконку файла в окно навигации и поместите рядом со страницей содержание. 

3. Теперь аналогично перетащите файл Suggest.htm под страницу Форма запроса. 

4. Теперь дважды щёлкните на значке страницы Форма запроса и FrontPage отобразит её в режиме Page (Страница). Пока изменений никаких не произошло. Теперь необходимо включить эту страницу в общий стиль сайта. 

5. Щёлкните правой кнопкой мышки в любом месте странице и в контекстном меню выберите команду Theme (Тема). Откроется диалоговое окно Themes (Темы). 

6. Выберите тему Blank и нажмите кнопку ОК. 

7. Щёлкните правой кнопкой мышки в любом месте странице и в контекстном меню выберите команду Shared Borders (О ней подробно будем говорить далее). Установите флажки: All Pages, Top, Left, Bottom.

8. Теперь наша страница имеет общий стиль со всем сайтом, панель навигации. Для того, чтобы после ввода данных о себе посетители смогли рассказать о чём-либо или спросить необходимо направить их к той странице. 

9. Удалите кнопки Submit (Отправить) и Reset (Очистка) и на их месте наберите: "Далее -->" и установите ссылку на страницу Suggest. htm (как это делать вы уже умеете). 

10. Сохраните результаты. 

Проверьте работу формы

1. На панели инструментов щелкните на кнопке Preview in Browser (Просмотреть в браузере). FrontPage запустит Web-браузер, установленный на вашем компьютере, и отобразит в нем страницу с формой. 

2. В текстовом поле "Что Вы хотите изменить на сайте, о чём спросить?" наберите что-нибудь. 

3. Щелкните на кнопке Submit (Отправить). Web-браузер отобразит страницу, указав, что форма будет работать только после того, как Web-сайт будет опубликован на Web-сервере, совместимом с FrontPage. 

4. Щелкните на кнопке Close (Закрыть), расположенной в правом верхнем углу окна браузера. Web-браузер закроется и на экране снова появится окно программы FrontPage. После того, как вы опубликуете ваш Web-сайт на Web-сервере, совместимом с FrontPage, вы сможете проверить работу формы в действии. После того, как вы щелкните на кнопке Submit (Отправить), Web-сервер отобразит страницу с подтверждением. 

Создание гостевой книги

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

1. В меню File (Файл) щелкните на пункте New (Создать) и выберите команду Раде (Страница). Откроется диалоговое окно New (Создание страницы). 

2. Щелкните на значке Guest Book (Гостевая книга), а затем на кнопке ОК. FrontPage создаст страницу с гостевой книгой и отобразит ее в режиме просмотра Раде (Страница). Посетители Web-сайта смогут набрать свои комментарии в окне с полосами прокрутки, а затем, щелкнув на кнопке Submit Comments (Отправить комментарии), отправить их из Web-сервер. 

3. Выберите весь текст, расположенный над областью формы и нажмите клавишу [Enter]. FrontPage удалит со страницы текст примечания и поместит над формой пустую строку. 

4. Наберите "Будем рады получить Ваши комментарии по поводу сайта!" FrontPage поместит новый текст над областью формы. 

5. В качестве имени файла укажите gb.htm и щелкните на кнопке. FrontPage сохранит страницу с гостевой книгой. 

6. Перейдите на панель Navigation (Навигация). 

7. В списке папок щёлкните на файле gb.htm и удерживая кнопку мышки нажатой перетащите иконку файла в окно навигации и поместите рядом со страницей форма запроса. 

8. Сохраните результаты. 

Как вы уже, возможно, догадались, гостевая книга представляет собой просто специальную форму. По умолчанию данные, которые посетители Web-сайта вводят в поля гостевой книги, направляются в файл Guestlog.htm на Web-сервер, так что другие посетители, просмотрев страницу Guestlog.htm. смогут прочесть комментарии предыдущих посетителей сайта, оставивших свои сообщения в гостевой книге. Место сохранения данных гостевой книги вы можете изменить так же, как и для обычной формы. Для этого необходимо щелкнуть правой кнопкой мыши на свободном месте в области формы, в контекстном меню выбрать команду Form Properties (Свойства формы), а затем в диалоговом окне Form Properties (Свойства формы) указать новое место сохранения данных.

К следующему уроку добавьте на страницу содержания ещё две всплывающие кнопки, назвав их "Гостевая книга" и "Ваши отзывы". Сохраните все ваши страницы под новыми названиями, чтобы существовали, например, index.htm и index2.htm с одинаковым содержанием.

Продолжение следует...

Интернет-проект "От Анастасии", http://nasta.virtualave.net