Главная страница

Лабораторная работа №03. Лабораторная работа 3 Фреймы. Формы ввода данных Теоретические сведения Фреймы


Скачать 1.43 Mb.
НазваниеЛабораторная работа 3 Фреймы. Формы ввода данных Теоретические сведения Фреймы
Дата12.09.2022
Размер1.43 Mb.
Формат файлаdoc
Имя файлаЛабораторная работа №03.doc
ТипЛабораторная работа
#672998





2.6 Теги
, и

Для создания выделенного рамкой блока элементов пользовательского интерфейса служит контейнерный тег < fieldset >. В нем может находиться контейнерный тег <legend >, содержимое которого отображается в верхней части блока.

Тег < fieldset > не имеет атрибутов.

Тег < legend > имеет атрибуты:

align — горизонтальное выравнивание содержимого (left, right, center);

accesskey — определяет клавишу быстрого доступа к первому элементу пользовательского интерфейса;

tabindex — целое число, определяющее порядок перехода с помощью клавиши <Тав> к первому элементу пользовательского интерфейса. Установить размеры блока по своему усмотрению можно с помощью таблиц стилей.
Пример:



Выберите продукт







Обычно элементы пользовательского интерфейса сопровождаются поясняющими надписями. Это можно сделать, расположив текст надписи или с помощью тега < label > задающего расположение надписи рядом с элементом. Например:

Ваше имя <INPUT NAME=Name SIZE=35>

<br>
<label>Введите имя




Практическое задание

Задание 1.


На рабочем диске создать папку «Laba03». В блокноте (или аналогичном текстовом редакторе – «Notepad++» (см. папка «Дополнительный SOFT»)), создать WEB сайт заданного содержания. Структура сайта задается фреймами и таблицами (рисунок 1.).



Фрейм 1

Фрейм 2

Фрейм 3
Четные варианты


Фрейм 1

Фрейм 2

Фрейм 3
Нечетные варианты

Рисунок 1. ‑ Структура сайта
Содержимое фреймов (рисунок 2.).

Фрейм

Описание

Чем задается

Вид

Фрейм 1

Заголовок

Таблица

Логотип

Название




Фрейм 2

Панель навигации

Таблица

Главная

Форма

О Авторе




Фрейм 3

Вид окна для ссылок – «Главная»,

«О Авторе».

произвольно







Фрейм 3

Вид окна для ссылки – «Форма».

форма

Фрейм 4 Форма ввода данных



Фрейм 5 Информационная панель





Сайт должен содержать :

  1. Логотип – картинка;

  2. Заголовок – текст по смыслу формы;

  3. Панель навигации – для ссылок на внутренние страницы сайта;

  4. Главная – описание назначения формы ввода данных;

  5. О Авторе – информация о авторе сайте, фото, контактная информация;

  6. Форма ввода данных – форма для ввода данных в зависимости от варианта (таблица 1.), и содержать не менее 3 – различных элементов ввода данных, кнопки «отправить» и «очистить»;

  7. Информационная панель – краткая информация описательного характера для каждого поля формы. Ссылка располагается рядом с каждым информационным полем и открывается в фрейме №5.


Дополнительные требования к оформлению страниц:

  1. Дизайн продумать самостоятельно. Сайт должен содержать разнообразные элементы форматирования, изображения, шрифты и т.д.;

  2. Ширина, высота всех фреймов задается жестко. Возможно изменение высоты только для 5 фрейма;

  3. Метод передачи – GET, метод кодирования данных – application/x-www-form-urlencoded.



Требования к оформлению отчета:

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





- код задает 2 фрейма, первый с высотой 55px второй все оставшееся место экрана. Первый фрейм ссылается на страницу head.html, граница фрейма – не изменяемая.







Во второй фрейм вставлен фрейм с двумя колонками, шириной 25% от ширины экрана, и оставшимся свободным местом. Первый фрейм ссылается на страницу menu.html, граница фрейма – не изменяемая. Второму фрейму задано имя name="main">, ссылается на страницу frame_1.htm.
Таблица 1. – Варианты макетов страниц

Вариант

Описание

1

Цех, участок, Ф.И.О. Объем выполненной работы

2

УДК, Ф.И.О. автора, Наименование, Количество

3

Номер поезда, Наименование, Место отправления, Место прибытия, Категория (скорый.)

4

Организация, Ф.И.О., Год рождения, Занятое место

5

Страна, Площадь, Население, Континент, Столица

6

Марка автомобиля, Номер, Цвет, Год выпуска, Пробег

7

Порода собаки, Кличка, Отец, Мать, Дата рождения, ФИО хозяина

8

Вид овощей, Название сорта, Дата посадки, Дата уборки, Урожай

9

Дисциплина, Объем лекций ,Объем лабораторных, Вид контроля, Группа

10

Дата, Температура, Давление, Облачность, Направление ветра

11

Наименование, Фирма, Стоимость, Количество, Дата

12

Название группы, Страна, Альбом, Дата выпуска, Число продаж

13

Название вершины, Высота, Страна, Год покорения, Количество восхождений

14

Ф.И.О., Год рождения, Рост, Вес, Группа крови

15

Ф.И.О., Область деятельности, Год рождения, Страна, Число публикаций

Вопросы к защите


  1. Назначение фреймов.

  2. Задание структуры фреймов.

  3. задание внешнего вида фреймов.

  4. Формы. Назначение. Задание формы.

  5. Определение элементов управления формы — тег .

  6. Задание кнопок.

  7. Задание списков.

  8. Здание текстовых областей.







написать администратору сайта