Контрольная работа: Создания интерактивных WEB - страниц для получения информации в сети Интернет с использованием форм, заполняемых пользователем
Нацеливание гиперссылок на фреймы позволяет постоянно иметь в одном фрейме их неменяющийся список, а вызываемые документы загружать в другие фреймы. Первоначально, во фреймы, предназначенные для вывода содержимого документов, вызываемых по гиперссылкам, можно загружать любые HTML –документы (не несущие никакой принципиальной информации), а затем содержимое документов, вызываемых по гиперссылкам.
Простейший пример формирования фреймовой схемы и определения ее содержимого (однако являющийся законченным HTML -документом) имеет следующий синтаксис:
<HTML>
<HEAD>
<TITLE> ФРЕЙМЫ < /TITLE>
< /HEAD>
<FRAMESET COLS = 50%, 50%”>
<FRAME SRC = Logo1.htm” NAME = “NUMBER 1”>
<FRAME SRC = Logo2.htm” NAME = “NUMBER 2”>
< /FRAMESET>
< /HTML>
2.8 Размещение и реализация изображения в виде карты
Как мы уже знаем, в HTML-документ можно включать изображения, которые считываются программой просмотра из файлов в одном из графических форматов. Ранее (раздел 2.5) было сказано, что всё изображение целиком можно сделать якорем гиперссылки. Однако, подчас возникает вполне естественное желание сделать различные части одного изображения гиперссылками на различные документы. Представим себе, например, документ с изображением электронной схемы прибора, более подробные сведения об элементах которого пользователь может немедленно получать, щелкая мышью на соответствующих участках чертежа. HTML предлагает для этого следующий способ: добавив к флагу <IMG ...> специальный атрибут ISMAP и/или USEMAP, вы можете "сказать" программе просмотра, что данное изображение является картой (Maps, Clickable Images, Imagemaps). Реакция на щелчок мыши на изображении-карте будет различной в зависимости от координат курсора мыши в момент щелчка.
Старый стандарт HTML 2.0 определял только атрибут ISMAP, который предусматривает обработку "щелчка на карте" на WWW-сервере при помощи CGI-запросов, аналогичных применяемым для обработки заполняемых форм. При таком способе обработки координатных запросов читатель WWW-документа должен щелкнуть на интересующей его точке и дождаться отклика сервера, прежде чем он получит возможность хотя бы узнать, соответствует данная точка какой-нибудь гиперссылке, или нет.
Альтернативу описанному выше механизму обработки "щелчков на карте" сервером составляет предложенный в версии HTML 3.0 механизм обработки клиентом, то есть, самой программой просмотра. Карты такого рода определяются при помощи атрибута USEMAP. Описание областей изображения, ассоциированных с различными гиперссылками, помещается в HTML-файл, как показано в нижеследующем примере. Представим себе несложную радиосхему, состоящую из трех диодов и двух резисторов. Картинку с радиосхемой мы поместили в файл mapex.gif, а описание функций каждого из элементов схемы - в файлы diode1.html, diode2.html, diode3.html, res1.html и res2.html (содержание этих файлов здесь не приводится). Мы хотим, чтобы читатель, щелкая на изображении того или иного элемента, загружал соответствующий документ с описанием данного элемента
3 Ход выполнения работы
Задание: вар №2;
предметная
область: социологический опрос;
схема фрейма:
элементы управления: кнопка (submit), текстовое окно (textarea)
3.1Создание загрузочного файла
Сначала был создан загрузочный файл, который является главной страничкой сервера и имеет имя index.html. В этом файле заданы размеры, количество и атрибуты фреймов.
<HTML>
<TITLE>Социологический опрос</TITLE> <FRAMESET rows="30%,*" >
<FRAMESET cols="33%,33%,*" >
<FRAME src="frame/2.html" name="2_page" scrolling="auto" noresize>
<FRAME src="frame/3.html" name="3_page" scrolling="no" noresize>
<FRAME src="frame/4.html" name="4_page" scrolling="auto" noresize>
</FRAMESET>
<FRAME src="frame/1.html" name="1_page" scrolling="auto" >
3.2 Создание файлов для каждого фрейма
Затем уже будем создавать файлы для каждого из фреймов. Исходя и варианта задания, у нас их четыре. (1.html, 2.html,3.html,4.html) и два вспомогательных файла (2.html, 4.html) на которые ссылаются соответственно файлы 2.html и 4.html.
Приведем их содержание ниже:
Файл 1.html. В нём записан текст формы
<html>
<head>
<title>Социологический опрос</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#cffed8">
<FORM method="post" enctype="text/plain" id="soc_que" action="mailto:brusinov-s-e@rambler.ru">
<TABLE id="tabl" border="0" bordercolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="5">
<TR>
<TD align="center" colspan="3"> <h2>Заполните, пожалуйста, анкету:</h2></TD>
</TR>
<TR>
<TD width="40%" >Фамилия:</TD>
<TD width="5%" bgcolor="#FFFFFF" ></TD>
<TD width="50%"><INPUT type="text" size="40" maxlength="100" name="fam" ></TD>
</TR>
<TR>
<TD width="40%" >Имя:</TD>
<TD width="5%" bgcolor="#FFFFFF" ></TD>
<TD width="50%"><INPUT type="text" size="20" maxlength="100" name="nam" ></TD>
</TR>
<TR>
<TD width="40%" >Отчество:</TD>
<TD width="5%" bgcolor="#FFFFFF" ></TD>
<TD width="50%"><INPUT type="text" size="40" maxlength="100" name="lname" ></TD>
</TR>
<TR>
<TD width="40%">Пол:</TD>
<TD width="5%" bgcolor="#FFFFFF" ></TD>
<TD width="50%">
<INPUT type="radio" name="m_f" value="male" checked onClick="document.bgColor='#3399FF'">Мужской
<INPUT type="radio" name="m_f" value="female" onClick="document.bgColor='#FFCCFF'">Женский
</TD>
</TR>
<TR>
<TD width="40%">Возраст:</TD>
<TD width="5%" bgcolor="#FFFFFF" ></TD>
<TD width="50%">
<SELECT name="age">
<OPTION selected value="10">Менее 20
<OPTION selected value="20">20-30
<OPTION selected value="30">30-50
<OPTION selected value="50">Более 50
</SELECT>
</TD>
</TR>
<TR>
<TD colspan="3" bgcolor="#FFFFFF" height="30"></TD>
</TR>
<TR>
<TD width="40%" >Страна:</TD>
<TD width="5%" bgcolor="#FFFFFF" ></TD>
<TD width="50%"><INPUT type="text" size="20" maxlength="100" name="country" ></TD>
</TR>
<TR>
<TD width="40%" >Город:</TD>
<TD width="5%" bgcolor="#FFFFFF" ></TD>
<TD width="50%"><INPUT type="text" size="20" maxlength="100" name="town" ></TD>
</TR>
<TR>
<TD width="40%" >Дом:</TD>
<TD width="5%" bgcolor="#FFFFFF" ></TD>
<TD width="50%"><INPUT type="text" size="20" maxlength="100" name="house" ></TD>
</TR>
<TR>
<TD colspan="3" bgcolor="#FFFFFF" height="30"></TD>
</TR>
<TR>
<TD width="40%" >Место работы:</TD>
<TD width="5%" bgcolor="#FFFFFF" ></TD>
<TD width="50%"><INPUT type="text" size="40" maxlength="100" name="work" ></TD>
</TR>
<TR>
<TD width="40%" >Ваше социальное положение(должность):</TD>
<TD width="5%" bgcolor="#FFFFFF" ></TD>
<TD width="50%"><INPUT type="text" size="40" maxlength="100" name="post" ></TD>
</TR>
<TR>
<TD width="40%">Ваша заработная плата:</TD>
<TD width="5%" bgcolor="#FFFFFF" ></TD>
<TD width="50%">
<SELECT name="wages">
<OPTION selected value="100">Менее 200
<OPTION selected value="200">200-500
<OPTION selected value="500">500-1500
<OPTION selected value="1500">Более 1500
</SELECT>
</TD>
</TR>
<TR>
<TD colspan="3" bgcolor="#FFFFFF" height="30"></TD>
</TR>
<TR>
<TD width="40%" >Ваши увлечения:</TD>
<TD width="5%" bgcolor="#FFFFFF" ></TD>
<TD width="50%">
<INPUT name="hobby1" type="checkbox" value="Спорт">Спорт
<INPUT name="hobby2" type="checkbox" value="Туризм">Туризм
<INPUT name="hobby3" type="checkbox" value="Искуство">Искуство
<INPUT name="hobby4" type="checkbox" value="Музыка">Музыка
<INPUT name="hobby5" type="checkbox" value="Техника">Техника
</TD>
</TR>
<TR>
<TD colspan="3" bgcolor="#FFFFFF" height="30"></TD>
</TR>
<TR>
<TD width="40%">Ваши комментарии:</TD>
<TD width="5%" bgcolor="#FFFFFF" ></TD>
<TD width="50%">
<textarea name="IsItBad" cols="67"> Запишите, устраивает ли вас ваше социальное положение,если нет, то почему?
</textarea>
</TD>
</TR>
<TR bgcolor="#FFFFFF">
<TD width="40%" > <INPUT type="reset" value="Очистить анкету" title="нажмите сюда чтобы очистить поля формы" onClick="document.bgColor='#3399FF'"></TD>
<TD width="5%" ></TD>
<TD width="50%" align="right"> <INPUT type="submit" value="Отправить анкету" title="нажмите сюда чтобы отправить данные" ></TD>
</TR>
</TABLE>
</FORM>
</body>
</html>
Файл 2.html:
<html>
<head>
</head>
<BODY BGCOLOR="#CFFED8">
<A HREF="2.1.html" TARGET="2_page">"Чем
обусловлена необходимость в опросе"</A>
</BODY>
</html>
Файл 2.1.html.
</head>
<body>
<BODY BGCOLOR="#CFFED8">
<FONT COLOR="#FF0000">
<kbd>
<p>Каждый из нас в той или иной степени
соприкасается …………(текст пропущен)…стране и в
других странах) . </p>
</kbd>
</FONT>
</body>
</html>
Файл 3.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
</head>
<BODY BGCOLOR="#CFFED8">
<kbd><FONT COLOR="red"><MARQUEE style="font-size:
24pt; color: #00000">Помогите провести социологический опрос. Просто заполните анкету, приведенную ниже.Опрос поможет дать
оценку социальной обстановке в стране. Предоставленные Вами данные абсолютно конфиденциальны
и разглашению не подлежат. Благодарим за сотрудничество.</MARQUEE>
</FONT></kbd>
</BODY>
</html>
Файл 4.html: <html>
<html>
<head>
<title>Содержание</title>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
</head>
<BODY BGCOLOR="#CFFED8">
<A HREF="4.1.html" TARGET="4_page">"Каким образом происходит опрос"</A>
</BODY>
</html>
Файл 4.1.html:
<html>
<head>
<title>Как происходит опрос</title>
</head>
<body>
<BODY BGCOLOR="#CFFED8">
<FONT COLOR="#FF0000">
<kbd>
Всё очень……(текст пропущен)……… картотеку.
</p>
</kbd>
</FONT>
</body>
</
4 Выводы
Входе выполнения контрольной работы были
изучены возможности интерактивных WEB страниц, была разработана активная форма
для передачи данных в сеть Internet в соответствии с вариантом задания.
