 |
Лабораторная работа №7. « Инструментальные средства создания Web-страниц».
|
|
|
|
Программы Словарь Комплектующие Анкета
2. Сохранить их в файлах с именами: software.html, glossary.html, hardware.html anketa.html в каталоге сайта.
3. Чтобы ссылки были расположены по центру, необходимо вставить в свою страницу код, создающий панель навигации:
<P ALIGN= “center”>
[Программы]&ndsp [Словарь] &ndsp [Комплектующие]&ndsp[Анкета]
4. Теперь для каждой гиперссылки определить адрес перехода. Для этого используется контейнер гиперссылки <A> </A> с атрибутом HREF, значением
<A HREF=”URL”>Указатель гиперссылки </A>
Итак, вставьте в титульную страницу в блокноте следующие тэги:
<P ALIGN=”center”>
[<A HREF=”программы.html”>Программы</A>]  
[<A HREF=”Словарь.html”>Словарь</A>]  
[<A HREF=”Комплектующие.html”>Комплектующие</A>]  
[<A HREF=”Анкета.html”>Анкета</A>]  
</P>
5. Для записи ссылки на свою электронную почту можно добавить в юлокноте следующие строки
<ADDRESS>
<A HREF="mailto:[email protected]">E-mail:[email protected]</A>
</ADDRESS>
Задание 3. Создать списки на Web-странице.
Часто при размещении текста на Web-страницах удобно использовать списки в виде
· Нумерованных списков
· Маркированных списков
1. Для этого необходимо использовать следующие тэги:
<OL>
<LI> Системные программы
<LI> Прикладные программы
< UL >
< LI TYPE="square"> текстовые редакторы;
<LI> графические редакторы;
<LI> электронные таблицы;
<LI> система управления базами данных.
</UL>
<LI>Системы программирования
</OL>
2. Вставить в «Словарь»
<DL>
<DL> Процессор
<DD> Центральное устройство компьютера, производящее обработку информации в двоичном коде.
<DT> Оперативная память
<DD> Устройство, в котором хранятся программы и данные.
|
|
|
</DL>
Лабораторная работа №5. Создание формы для диалога на сайте.
Задания:
1. Создайте анкету
2. Создайте поле для записи пожеланий посетителя вашей страницы.
3. Выясните в анкете, кто из посетителей к какой группе относится, каке сервисы Интернета использует?
Для этого в файл «Анкета» вставить:
<FORM>
Пожалуйста, введите ваше имя: <BR>
<INPUT TYPE="text" NAME="name" SIZE=30> <BR>
E-mail: <BR>
<INPUT TYPE="text" NAME="e-mail" SIZE=30>
<BR>
</FORM>
Укажите, к какой группе пользователей вы себя относите: <BR>
<INPUT TYPE="radio" NAME="group" VALUE="schoolboy">учащийся<BR>
<INPUT TYPE="radio" NAME="group" VALUE="teacher">учитель<BR>
Какие из сервисов Интернета вы используете наиболее часто?:
< BR>
<INPUT TYPE="checkbox" NAME="group" VALUE="www">WWW<BR>
<INPUT TYPE="checkbox" NAME="group" VALUE="e-mail">e-mail<BR>
<INPUT TYPE="checkbox" NAME="group" VALUE="ftp">FTP<BR>
<SELECT NAME="browsers">
<OPTION SELECTED> Internet Explorer
<OPTION> Netscape Navigator
<OPTION> Opera
<OPTION> Neo Planet
</SELECT>
Какую ещё информацию вы хотели бы видеть на нашем сайте?
<BR>
<TEXTAREA NAME="resume" ROWS=4 COLS=30>
</TEXTAREA>
<BR>
Лабораторная работа №7. «Инструментальные средства создания Web-страниц».
Задание.1. Создать Web-страницу с анкетой для абитуриентов с использованием Web-редактора Front Page Express.
Задание 2. Создать интерактивные формы сайта «Статистичес-кий опрос», используя редактор Web-страницу Front Page Express.
Во FrontPage Express форма создается автоматически при добавлении на Web-страницу любого элемента формы. На странице редактора область формы выделяется пунктирным прямоугольником, внутри которого появляется первый элемент.
Добавляются элементы формы на страницу или с помощью команды меню ВставкаàПоле формы. или специальными кнопками на Панели инструментов полей формы:
Рис. 10. Панель инструментов полей формы
Для каждого размещенного на странице элемента формы необходимо настроить его свойства (задать значения атрибутам NAME, VALUE и др.). Для этого необходимо:
|
|
|
· выделить элемент формы
· ввести команду ПравкаàСвойства поля формы с помощью меню приложения или контекстного меню.
· В результате откроется специальное окно свойств элемента, в котором необходимо произвести установки значений.
| Cозданиe Web-страницы «Анкета абитуриента» |
| Запустить Web-редакторFront Page Express. |
| Разместить на форме четыре Текстовых поля для ввода фамилии, имени, отчества и возраста. |
Последовательно вызвать окно свойств полей и задать им названия (присвоить атрибуту NAME значения a1, a2, a3, a4).
Рис.11.
| Разместить на форме три Переключателя для определения наличия медали. Последовательно вызвать окно свойств переключателей и задать им одинаковое имя группы (присвоить атрибуту NAME значение a5) и значения (присвоить атрибуту VALUEзначения Золотая, Серебряная, Нет). Добавить четыре элемента типа Флажок для выбора предметов, по которым в аттестате стоит оценка «Отлично |
| ». Задать им одинаковое имя группы (присвоить атрибуту NAME значение a6) и значения (присвоить атрибуту VALUEзначения: Математика, Информатика, Физика, Химия). Добавить элемент Список. |
В окне свойств ввести его название (NAME=a7) и, последовательно щелкая по кнопке Добавить, ввести элементы списка (значения тэга OPTION). Добавить Многострочное текстовое поле для внесения произвольного послания от посетителя страницы. Ввести его название (NAME=a8) и установить размер (присвоить значения атрибутам ROWS и COLS).
Рис. 12
Поместить на форму кнопки Очистить и Отправить.
Установить для них тип кнопки (присвоить атрибуту TYPE значения 
reset и submit).
Рис.13.
Отправка и обработка данных из формы. После размещения на форме полей различных типов следует определить способ обработки введенных пользователем данных. Для этого необходимо присвоить значения атрибутам ACTION и METOD тэга <FORM>.
Значением атрибута ACTION является URL-адрес программы, которая будет обрабатывать данные из формы, а значениями атрибута METHOD являются либо get (по умолчанию), либо post, которые определяют форму пересылки данных.
<FORM ACTION="URL" METHOD="post">
|
|
|
Для обработки форм на сервере размещают специальные программы (такая программа, например, размещена на сайте клуба Web-мастеров по адресу www.webclub.ru).
В контекстном меню формы выбрать пункт Свойства формы…
В окне Свойства формы выбрать в раскрывающемся списке пункт Специальный сценарий ISAPI, NSAPI или CGI и щелкнуть по кнопке Настройка ...
Рис. 14
В появившемся окне Установки обработчика форм пользователя в поле Действие: вписать полный URL-адрес программы-обработчика на сайте Web-мастеров http://webclub.ru/cgi-bin/sendform.cgi
В раскрывающемся списке Метод: выбрать строку PO. Для того, чтобы программа-обработчик смогла прислать нам результат обработки анкеты по электронной почте, необходимо в форме указать свой адрес. Это делается с помощью скрытых полей:
В окне Свойства формы в разделе Скрытые поля нажать кнопку Добавить...
В окне Имя и значение в поле Название: ввести to (т.е. Кому), в поле Значение: ввести your_name@server_name (ваш адрес электронной почты).
Сохранить полученную Web-страницу в файле anketa.htm.
Теперь Web-страница с формой полностью готова и можно приступить к ее апробации. Для работы с программой-обработчиком данных из форм клуба Web-мастеров, необходимо заполнять форму в браузере.
рис.15.Запустить браузер и открыть Web-страницу с формой.
Заполнить анкету и щелкнуть по кнопке Отправить. (рис.16)
Программа-обработчик, обработав форму, пришлет письмо, содержащее имена элементов и выбранные значения.
Информация по каждому элементу располагается в отдельной строке, причем строки отсортированы не по порядку пунктов в анкете, а по алфавиту.
Рис.16.
Рис.17.
|
|
|
