close

Вход

Забыли?

вход по аккаунту

?

Лаб2а

код для вставкиСкачать
Министерство образования и науки Украины
Севастопольский национальный технический университет
кафедра Информационных систем
Лабораторная работа № 2
"Формы и фреймы в HTML"
Выполнил:
Ст. гр. И-41д Лынок А.Ю.
Проверила:
Тлуховская Н.П.
Севастополь 2013
1 ЦЕЛЬ РАБОТЫ
Изучить способы организации ввода данных пользователем в HTML, приобрести практические навыки реализации меню с использованием фреймов, а также форм ввода данных в HTML.
2 ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ
3.1. Модифицировать главную Web страницу персонального сайта (см. лабораторную работу №1), реализовав в ней фреймовую структуру в соответствии с вариантом задания (варианты заданий представлены в таблице 1):
Рисунок 1 - Варианты реализации фреймовой структуры главного окна
Фрейм меню должен содержать меню сайта, а в фрейме содержимого при выборе одной из ссылок в меню должны открываться соответствующие Web-страницы (в том числе и старая главная страница).
3.2. Создать новую Web страницу персонального сайта - "Контакт", позволяющую отправить сообщение на Ваш персональный почтовый ящик. Страница должна содержать форму ввода данных о пользователе-отправителе, поле ввода сообщения, кнопки "Отправить" и "Очистить форму". Состав данных о пользователе:
* Фамилия Имя Отчество (строка ввода);
* Пол (Radiobuttons)
* Возраст (выпадающее меню);
* E-mail(строка ввода);
Кнопка "Отправить" инициирует отправку сообщения на Ваш Е-mail, а нажатие на кнопку "Очистить форму" должно приводить к очистке всех полей данных.
3.3. Создать новую Web страницу персонального сайта - "Тест по дисциплине "...""(наименование дисциплины выбирается в соответствии с вариантом задания (варианты заданий представлены в таблице 1). Необходимо также реализовать гиперссылку на разработанный тест с соответствующей дисциплины страницы "Учеба" (см. Лабораторную работу №1).
Данная страница должна обеспечивать ввод данных пользователя и ответов пользователя на 3 тестовых вопроса по дисциплине (типы вопросов выбираются в соответствии с вариантом задания). Состав данных о пользователе:
* Фамилия Имя Отчество (строка ввода);
* Группа (список выбора с группировкой по курсам).
Форма также должна содержать кнопки "Отправить" (инициирует отправку теста на Ваш Е-mail), и "Очистить форму".
Примечание: Вопросы для теста и варианты ответов (в случае необходимости) составить самостоятельно, используя знания и конспект лекций по соответствующей дисциплине. Таблица 1 - Варианты заданий
№Тип фрей-маНаименование дисциплиныВопрос №1Вопрос №2Вопрос №319аФизикаTextareaRadio 3Select 3Обозначения: * Textarea - вопрос с ответом в виде произвольного текста; * Input - вопрос с ответом в виде строки текста либо числа;
* Radio 4 - вопрос с 4 вариантами ответа. Возможность выбора только одного варианта;
* Checkbox 3 - вопрос с 3 вариантами ответа. Возможность выбора нескольких вариантов;
* Select 5 - вопрос с 5 вариантами ответа в виде выпадающего меню;
* Select(OptGroup) 7 - вопрос с 7 вариантами ответа в виде выпадающего меню (варианты сгруппированы в группы);
3 ТЕКСТЫ РАЗРАБОТАННЫХ HTML-ДОКУМЕНТОВ
1. index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset=utf-8">
<title>Фреймы</title>
</head>
<frameset NORESIZE rows="5%,95%" frameborder="0" framespacing="0" scrolling="no">
<frame src="main.html" name="MENU">
<frame src="about.html" name="CONTENT">
</frameset>
</html>
2. main.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset=utf-8">
<title>Навигация по сайту</title>
</head> <div id="leftcol">
<body style="padding-left:130px" >
<a href="main2.html" target="CONTENT">Главная </a> &nbsp&nbsp
<a href="about.html" target="CONTENT">Обо мне</a> &nbsp&nbsp
<a href="int.html" target="CONTENT">Мои интересы</a> &nbsp&nbsp
<a href="stud.html" target="CONTENT">Учеба</a> &nbsp&nbsp
<a href="photo.html" target="CONTENT">Фотоальбом</a> &nbsp&nbsp
<a href="contact.html" target="CONTENT">Контакты</a> &nbsp&nbsp
<a href="test.html" target="CONTENT">Тест</a> </div>
</body>
</html>
3. contact.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<title>Обратная связь</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset=utf-8">
</HEAD>
<BODY >
<div id="container" >
<h4>Отправить письмо: </h4>
<FORM >
ФИО <INPUT NAME="FIO" TYPE= TEXT> <br>
Пол мужской<INPUT NAME="POL" TYPE= RADIO VALUE="Male"> <br>
Пол женский<INPUT NAME="POL" TYPE= RADIO VALUE="Female"> <br>
Ваш возвраст:
<SELECT NAME=AGE>
<OPTION value=0> меньше 15
<OPTION value=1> от 16 до 20
<OPTION value=2> от 21 до 30
<OPTION value=3> больше 30
</SELECT>
<br>
Группа:
<SELECT name="Groups">
<OPTGROUP label="4 курс">
<OPTION value="41">И-41
<OPTION value="42">И-42
<OPTION value="43">И-43
<OPTION value="44">И-44
</OPTGROUP>
<OPTGROUP LABEL="5 курс">
<OPTION value="51">И-51
<OPTION value="52">И-52
<OPTION value="53">И-53
<OPTION value="54">И-54
</OPTGROUP>
<OPTGROUP LABEL="Магистры">
<OPTION SELECTED value="MAG1">Maг-51
</OPTGROUP>
</SELECT>
<br>
E-mail: <INPUT NAME="mail" TYPE=TEXT MAXLENGTH=30 SIZE=30> <br>
Поумолчанию<INPUT NAME="RESET" TYPE= RESET > <br>
Отправить &nbsp&nbsp&nbsp&nbsp<INPUT NAME="SUBMIT" TYPE= SUBMIT >
</FORM>
</div>
</BODY>
</HTML>
4. test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<title>Обратная связь</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta charset=utf-8">
</HEAD>
<BODY >
<div id="container" >
<h4>Тест по физике: </h4>
<FORM >
ФИО <INPUT NAME="FIO" TYPE= TEXT SIZE="45"> <br>
Пол мужской<INPUT NAME="POL" TYPE= RADIO VALUE="Male"> <br>
Пол женский<INPUT NAME="POL" TYPE= RADIO VALUE="Female"> <br>
Группа:
<SELECT name="Groups">
<OPTGROUP label="4 курс">
<OPTION value="41">И-41
<OPTION value="42">И-42
<OPTION value="43">И-43
<OPTION value="44">И-44
</OPTGROUP>
<OPTGROUP LABEL="5 курс">
<OPTION value="51">И-51
<OPTION value="52">И-52
<OPTION value="53">И-53
<OPTION value="54">И-54
</OPTGROUP>
<OPTGROUP LABEL="Магистры">
<OPTION SELECTED value="MAG1">Maг-51
</OPTGROUP>
</SELECT>
<br> <br>
1. Какая единица времени является основной в СИ? <br>
<input NAME="ANSWER" TYPE=TEXT SIZE="35"> <br>
2. Какая единица длины является основной в СИ? <br>
1 мм &nbsp<input NAME="ANSW" TYPE=RADIO value="1"> <br>
1 см &nbsp<input NAME="ANSW2" TYPE=RADIO value="2"> <br>
1 м &nbsp &nbsp<input NAME="ANSW3" TYPE=RADIO value="3"> <br>
3. Что принимается за единицу скорости в СИ? <br>
<select name="answww" >
<option value="1">1 км/ч </option>
<option value="2">1 м/с </option>
<option value="3">1 см/с </option>
</select> <br>
Поумолчанию<INPUT NAME="RESET" TYPE= RESET > <br>
Отправить &nbsp&nbsp&nbsp&nbsp<INPUT NAME="SUBMIT" TYPE= SUBMIT >
</FORM>
</div>
</BODY>
</HTML>
ВЫВОДЫ:
В ходе лабораторной работы были приобретены практические навыки реализации Web-страниц c использованием гиперссылок, нумерованных и маркированных списков, графических элементов и таблиц на примере персонального сайта состоящего из 5-ти html страниц, 2 файлов со стилями.
Документ
Категория
Рефераты
Просмотров
69
Размер файла
28 Кб
Теги
лаб2а
1/--страниц
Пожаловаться на содержимое документа