- •СОДЕРЖАНИЕ
- •ВВЕДЕНИЕ
- •1.1. Типовое задание
- •1.2. Контрольные вопросы
- •1.3. Контрольные задания
- •2.1. Типовое задание
- •2.2. Контрольные вопросы
- •2.3. Контрольные задания
- •3.1. Типовое задание
- •3.2. Контрольные вопросы
- •3.3. Контрольные задания
- •4.1. Типовое задание
- •4.2. Контрольные вопросы
- •4.3. Контрольные задания
- •5.1. Типовое задание
- •5.2. Контрольные вопросы
- •5.3. Контрольные задания
- •6.1. Типовое задание
- •6.2. Контрольные вопросы
- •6.3. Контрольные задания
- •7.1. Типовое задание
- •7.2. Контрольные вопросы
- •7.3. Контрольные задания
- •8.1. Типовое задание
- •8.2. Контрольные вопросы
- •8.3. Контрольные задания
- •9.1. Типовое задание
- •9.2. Контрольные вопросы
- •9.3. Контрольные задания
- •10.1. Типовое задание
- •10.2. Контрольные вопросы
- •10.3. Контрольные задания
- •11.1. Типовое задание
- •11.2. Контрольные вопросы
- •11.3. Контрольные задания
- •12.1. Типовое задание
- •12.2. Контрольные вопросы
- •12.3. Контрольные задания
- •13.1 Типовое задание
- •13.2. Контрольные вопросы
- •13.3. Контрольные задания
- •14.1. Типовое задание
- •14.2. Контрольные вопросы
- •14.3. Контрольные задания
- •15.1. Типовое задание
- •15.2. Контрольные вопросы
- •15.3. Контрольные задания
- •16.1. Типовое задание
- •16.2. Контрольные вопросы
- •16.3. Контрольные задания
- •17.1. Типовое задание
- •17.2. Контрольные вопросы
- •17.3. Контрольное задание
- •ЛИТЕРАТУРА
- •ПРИЛОЖЕНИЯ
</FORM>
</body>
</html>
12.1. Типовое задание
Пример 1. Проанализируйте представленный ниже код HTML и определите технологию построения управляющих элементов сложной формы:
<html> |
|
|
<head> |
|
|
<style type="text/css"> |
|
|
.caption { |
|
|
margin: 0px 15%; |
/* Отступы сверху и сбоку от текста */ |
|
padding-bottom: 4px; |
|
/* Поле под текстом */ |
color: yellow; |
|
/* Цвет символов */ |
TEXTAREA { |
|
|
background: white; |
|
/* Цвет фона под текстом*/ |
color: blue; |
/* Цвет символов */ |
|
padding: 5px; |
|
/* Рамка вокруг поля*/ |
border: 1px solid black; |
|
/* Рамка вокруг поля*/ |
width: 50%; |
/* Ширина поля в процентах */ |
|
.radiobutton{ |
|
|
background: green; |
|
/* Цвет маркера*/ |
color: red; |
|
/* Цвет фона под переключателем*/ |
border: 1 px dashed black; |
/* Параметры рамки */ |
|
margin: 2px; |
|
/* Отступы вокруг элемента*/ |
.col{ |
|
|
background: green; |
|
/* Цвет маркера*/ |
color: red; |
|
/* Цвет фона под переключателем*/ |
border: 1 px solid black; |
|
/* Параметры рамки */ |
margin-right: 7px; |
|
/* Отступы вокруг элемента*/ |
} |
|
|
</style> |
|
|
</head>
<body>
<table width=70% border=3 cellpadding=4 cellspacing=0 bgcolor="lime" align=center>
<p class=caption> ПРИМЕР ФОРМЫ </p> <FORM action="..." method="post">
<tr>
142
<Td><Label for="imyal">Имя: </label></Td>
<Td><Input type="text" id="imyal" maxlength=25 class=textfield></Td> </tr>
<tr>
<Td><Label for="familiyal"> Фамилия: </label></Td>
<Td><Input type="text" id="familiyal" maxlength=25 class=textfield></Td> </tr>
<Tr>
<Td><Label for="e-mail 1">e-mail: </label></Td>
<Td><Input type="text" id="e-mail" maxlength=25 class=textfield></Td> </tr>
<Tr>
<Td>Cтрана проживания:</Td> <Td> <Select> <Option>Англия </option> <Option>Беларусь </option> <Option>Германия </option >
<Option> Франция </option> </select></Td> </tr>
<Tr>
<Td>Научный работник:</Td> <Td>
<p><Input class="col" type="checkbox" name= "F001" га1ие="Да">Да <Input class="col" type="checkbox" name="F001" value="Hem">Hem</Td> </tr>
<Tr> <Td>noл:</Td> <Td>
<Input class="radiobutton" type="radio" name= "poll" value ="Male"> M <Input class="radiobutton" type="radio" name="poll" value="Female"> Ж</Td> </tr>
<Tr>
<Td>Дополнительная информация:</Td> <Td><Textarea rows=6 cols=40> </textarea></Td>
</tr>
<Tr>
<Td align="bottom">
<Input align="bottom" type="submit" value="send"> <Input type="reset" value="reset"></Td></tr>
143
</form>
</table>
</body>
</html>
12.2.Контрольные вопросы
1.Понятие и виды управляющих элементов.
2.Использование графических изображений в управляющих элементах.
3.Создание и форматирование кнопок с помощью стилей.
4.Опишите технологию построения управляющих элементов сложной
формы.
12.3.Контрольные задания
Создайте формы в соответствии с вариантами из лабораторной работы
№ 11.
144
Лабораторная работа № 1 3
ОРГАНИЗАЦИЯ ФРЕЙМОВ
Цель работы: приобрести опыт создания фреймовой структуры документа.
Методические указания
Технология фреймов позволяет разделить Web-страницы на отдельные области.
Фрейм − область гипертекстового документа со своими полосами прокрутки.
Для создания страниц с фреймами необходимо обязательное построение двух групп HTML-файлов. К первой группе относятся документы содержания (content), которые обеспечивают заполнение информацией каждой области страницы. Ко второй группе относят документы-раскладки (layout), которые применяются для разделения Web-страницы на области.
Разделение Web-страницы на области (фреймы) определенных типов осуществляется в документах-раскладках с помощью тегов <Frameset > </frameset > и внутреннего тега <Frame>.
В теге <Frameset > за горизонтальное деление экрана отвечает атрибут rows, а за вертикальное деление - атрибут cols. Значение этих атрибутов выражается в пикселах, процентах или с помощью * для обозначения оставшейся части экрана.
Пример 1. Разделить область просмотра по вертикали в отношении два к
трем.
cols = 40%, 60%
Пример 2. Разделить область просмотра, в которой верхняя горизонтальная область имеет размер 100 пикселей, 40% доступного пространства под среднюю область, а все остальное – под нижнюю.
rows= 100, 40%, *
Внутри тега <Frameset> </frameset> устанавливается тег <Frame>,
145