ЛАБОРАТОРНАЯ РАБОТА 10 фреймы. Лабораторная работа 10 Тема работы Создание форм и фреймов в htmlдокументе

• Название: Лабораторная работа 10 Тема работы Создание форм и фреймов в htmlдокументе
• Дата: 23.12.2021
• Размер: 143 Kb.
• Имя файла: ЛАБОРАТОРНАЯ РАБОТА 10 фреймы.doc
• Тип: Лабораторная работа; #315234

ЛАБОРАТОРНАЯ РАБОТА №10

Тема работы: Создание форм и фреймов в HTML-документе.
Цель работы: Научиться создавать формы и формировать фреймы для более удобной и наглядной работы с сайтом.

Теоретическая часть: В HTML существует возможность разделить основное окно, в котором отображаются Web-странички, на несколько частей - фреймов. Фрейм, по сути, представляет собой окно, в которое загружается отдельная страничка. В результате - в окне браузера отображается сразу несколько страничек. Фреймы удобны при создании страниц, которые должны иметь как динамическое, так статическое содержимое. Например, узкий левый фрейм может содержать оглавление сайта, а широкий правый будет предназначен для вывода информации. Возможны также любые другие конфигурации.

Фрейм - подокно, в которое загружается отдельная страничка.

Разбиение окна браузера на фреймы реализуется следующим образом :

• 
  создаются отдельные html странички для каждого фрейма.
  
• 
  создается HTML-файл (обычно это первая страничка сервера по имени index.htm):
  

Обратите внимание на то, что тег BODY отсутствует, вместо него используется тег FRAMESET, содержащий описание внутренних фреймов:

Структура HTML-страницы с фреймами:







<FRAME>первый фреймFRAME>

<FRAME>второй фреймFRAME>

• 
  В документе index.htm указывается сколько документов откроется одновременно в окне браузера, сколько места будет занимать каждый, каким образом они будут располагаться: можно разделить экран на несколько вертикальных или несколько горизонтальных фреймов.
  

Например, в документе index.htm документы name.htm, menu.htm, content.htm могут быть расположены:



Атрибуты тега FRAMESET:

COLS - подразделяет экран на определенное количество вертикальных колонок.

ROWS - подразделяет экран на определенное количество горизонтальных колонок.

Размеры колонок перечисляются через запятую (сколько колонок, столько и размеров) и могут быть выражены:

- в пикселях,

- в процентах относительно размера окна,

- в относительных величинах.

Например, тэг создает сетку из 3 кадров, высота которых равна 100, 240 и 140 пикселей соответственно, создает 2 кадра с шириной 25 и 75 процентов от ширины окна браузера, а - 2 кадра с шириной 1/3 и 2/3 ширины окна браузера.

Эти способы можно использовать и совместно - например,   указывает оставить 128 пикселей слева под первый фрейм, а все остальное пространство - под второй. При определении обоих атрибутов rows и cols, например, получается сетка кадров.
BORDER="ширина" - указывает ширину обрамления всех рамок для всех кадров, в пискелах;

FRAMEBORDER=yes или FRAMEBORDER=no - включает или выключает отображение обрамления кадров. В случае yes рамка имеет трехмерную форму, иначе она невидима, то есть имеет цвет фона окна по умолчанию. Некоторые браузеры "понимают" эту опцию только в виде frameborder=1 или frameborder=0, поэтому обычно указывают оба способа;

FRAMESPACING="ширина" - указать ширину промежутка между смежными кадрами в пискелах. Не действует в Netscape Navigator.


Внутри тэга находятся описания отдельных кадров, каждое в собственном тэге , закрывать который не нужно. Число тэгов должно быть равно числу кадров, определенных в тэге , при этом считается, что кадры описываются слева направо и сверху вниз.

Атрибуты тэга :

SRC="url" указывает URL исходного документа для данного кадра;

Если этот атрибут отсутствует, то отображается пустой фрейм.

Пример. Создадим первый вариант:

"25%,*,25%"> ="name.htm"> ="menu.htm"> ="content.htm">

Пример. Создадим второй вариант:

"100,*,50%">

NAME="строка" указывает имя кадра. Это необходимо сделать, если предполагается ссылаться из одних кадров на другие;

SCROLLING="значение" управляет линейками прокрутки кадра. Значение может быть задано в виде yes (линейки есть всегда), no (никогда) или auto (если необходимо);

NORESIZE запрещает изменять размеры кадра. Опция NORESIZE, указанная для данного кадра, влияет также и на все кадры, смежные с ним;

FRAMEBORDER может указываться также внутри тэга , со всеми замечаниями, которые сделаны относительно нее. Указание этой опции в тэге отменяет указание, сделанное в тэге для данного кадра и всех, смежных с ним;

MAGRINHEIGHT="ширина" и MARGINWIDTH="ширина" задают размещение по верхней, нижней и боковым сторонам кадра областей свободного пространства, ширина которых указывается в пикселях.

После того, как тэг закрыт, можно использовать тэг ..., определяющий содержимое, которое будет выводиться браузерами, не поддерживающими кадры.

Для создания более сложных конфигураций кадров тэги могут вкладываться друг в друга - внутренний тэг может быть вложен вместо любого из тэгов .

Пример. Создадим третий вариант: сначала разделим окно на колонки, вторая колонка будет содержать в себе документ content.htm, а первую колонку мы разобьем на два ряда, и поместим в них документы name.htm и menu.htm.

="*,50%"> "100,*">

Пример документа с фреймами:



















<br /><br />Извините, Ваш браузер не поддерживает кадры!<br /><br />



Здесь верхний кадр высотой 40 пикселей может служить, например, для вывода рекламы и связан с файлом reclama.html. Остальная часть окна разбита на 2 колонки. Левая колонка имеет ширину 128 пикселей и может быть предназначена для вывода меню (документ menu.html). Третий кадр занимает основную часть окна и предназначен для вывода информации (файл content.html).

Для создания ссылки из одного кадра в другой достаточно указать в тэге ссылки опцию вида target="имя кадра". Например, для ссылки из кадра menu в кадр main достаточно написать в документе menu.html ссылку вида .... При щелчке по этой ссылке содержимое правого кадра, то есть, документ content.html, будет заменен на новый документ.

Для атрибута target существуют следующие значения:

_self - загрузка новой страницы в тот же кадр, откуда делается ссылка,

_parent - загрузить в родительский для данного кадр; если такого нет - результат действия аналогичен _self,

_top - загрузка новой страницы в полное окно,

_blank - загрузка новой страницы в новое окно браузера,

Можно задать атрибут target по умолчанию. Это удобно, если в фрейме содержится много ссылок, т.е. чтобы для каждой не добавлять атрибут target, нужно добавить тэг

<BASE TARGET="имя кадра" > между тэгами <HEAD> и HEAD>.

Например, для вышеописанного примера в файле menu.html в области <HEAD> и HEAD> нужно вставить тэг <BASE TARGET="main"> . Тогда все ссылки организованные в кадре menu будут открываться в кадре main.

ФОРМЫ

Формы являются наиболее популярным способом "обратной связи" с пользователем. С помощью HTML можно создавать как простые формы, предполагающие выбор одного из нескольких ответов, так и сложные формы для заказов или для того, чтобы получить от пользователей страницы какие-либо комментарии и пожелания.

Форма представляет собой несколько полей, где пользователь может ввести некоторую информацию, либо выбрать какую-то опцию. После того, как пользователь отправит информацию, она обрабатывается программой (скриптом), размещенной на сервере. Существует также возможность обрабатывать формы "на стороне клиента", встраивая в свои страницы скрипты, написанные на языках JavaScript и Visual Basic Script.

Форма открывается тагом

, имеющим несколько опций.

Опция action="url" указывает URL, который примет и обработает данные формы. Если эта опция не указана, данные отправляются по адресу страницы, на которой размещена форма.

Опция method="стиль" указывает метод передачи данных программе-обработчику формы. "Стиль" может принимать одно из двух значений:

• 
  значение get, используемое по умолчанию, предписывает посылать информацию формы вместе с URL,
  
• 
  значение post предписывает посылать информацию формы отдельно от URL. Значение post используется обычно в случае отправки данных формы по электронной почте или при необходимости передавать значительный объем информации.
  

Опция name="имя" указывает имя формы. Это необходимо, если требуется доступ к данным формы с помощью встроенного скрипта на JavaScript или Visual Basic Script, а также в том случае, если данные формы предназначены для отправки по электронной почте.

Опция enctype="кодирование" задает способ кодирования данных формы. В случае отправки данных как текста указывается в виде enctype="text/plain".

Примеры:

Заголовок формы, используемой на поисковой машине Яndex, имеет вид:


Заголовок формы, отправляющей информацию на адрес E-mail, может иметь вид:



Здесь форма имеет имя Q, в качестве action указана отправка сообщения по E-mail на адрес [e-mail] с темой "Internet-Test", опция enctype предписывает отправлять данные формы как текст, а опция onSubmit связывает отправку формы с функцией Validate(), написанной на Javascript. Этот прием широко используется для проверки корректности заполнения формы.

Внутри тага находятся поля формы.

Перечислим основные из них:

1. Таг предназначен для создания многострочного поля ввода.

...

Опции cols и rows указывают число строк и столбцов в поле, опция wrap указывает на режим автоматического  распределения текста в ячейке. Она может принимать одно из значений off (выключен), virtual (распределять текст по всей ячейке, но на сервер передавать как одну строку) или physical (распределять текст по всей ячейке и передавать на сервер так, как он отображается).

Опция name здесь и далее обозначает имя поля и предполагается обязательной. Текст, написанный в таге , становится его значением по умолчанию.<br /><br />2. <u>Список</u><br /><br />Таг <select name="имя" size="размер" multiple>...</select> определяет в форме <b>меню</b> с одним или несколькими вариантами выбора или <b>список</b> с полосой прокрутки. <br /><br />Если опция <b>size </b>указана в виде size="1", отображение элементов будет организовано в виде ниспадающего меню, в противном случае будет использован список прокрутки, включающий указанное число элементов. Опция <b>multiple</b>, <a href="/zamechaniya-detskij-sad-102--medsestra-sholpan-vladimirovna/index.html" title="Замечания детский сад №102 – медсестра Шолпан Владимировна">если она указана</a>, разрешает выбирать из списка более одного значения. Это можно сделать, например, выбирая элементы списка при нажатой клавише Ctrl.<br /><br />Внутри тага <select> размещаются <b>элементы</b> меню или списка, каждый - в своем таге <b><option></b>, имеющем общий вид <option value="значение" selected>текст</option><br /><br />Опция value указывает значение, возвращаемое программе обработки при выборе пользователем данной опции, опция selected указывает на элемент списка, выбранный по умолчанию. Внутри тага <option> пишется текст, видимый в меню или списке на экране.<br /><br />3. Сбора информации различными способами, включая <b>текстовые поля</b>, поля для ввода <b>пароля</b>, <b>переключатели</b>, <b>флажки</b>, <b>кнопки</b> для отправки данных и очистки формы.<br /><br />Таг <input>, в отличие от <textarea> и <select>, не должен закрываться.<br /><br />А) <input type="text" name="строка" maxlength="максимальный размер"  size="число символов" value="строка"> Создает <u><b>поле ввода</b></u>. Опция maxlength ограничивает максимальную длину вводимого текста, а опция size показывает максимальное количество отображаемых символов. Опция value указывает исходное значение поля ввода.<br /><br />Б) <u>Текстовое поле <b>с защитой</b></u> вводимых символов (то есть, с заменой их на звездочки, как принято при вводе паролей) можно создать, если заменить опцию type="text"  на type="password". Остальные опции поля ввода пароля - те же самые.<br /><br />В) <input type="checkbox" name="строка" value="строка" checked> <br /><br /><u>Создает <b>флажок</b>.</u> Опция value определяет значение, возвращаемое программе обработки при выборе пользователем флажка, опция checked, если она указана, делает флажок выбранным по умолчанию.<br /><br />Г) <input type="radio" name="имя" value="строка" checked><br /><br /><u>Создает <b>радиокнопку</b>.</u> Радиокнопки можно группировать, задавая одно и то же значение опции name. Опции value и checked имеют те же значения, что и у флажка.<br /><br />Д) <input type="reset" value="строка"> <br /><br />Создает <u>кнопку <b>для очистки формы</b></u>. Значение опции value позволяет указать надпись для кнопки. После очистки все элементы формы принимают значения, которые они имели по умолчанию.<br /><br /><input type="submit" value="строка"><br /><br />Е) Создает <u>кнопку <b>для отправки данных</b></u> формы приложению-обработчику. Опция value позволяет указать надпись на кнопке.<br /><br />Для создания произвольной кнопки вместо reset или submit указывается значение button. В основном это требуется при написании скриптов, работающих на стороне клиента. Например, кнопка, созданная тагом <INPUT TYPE="button" VALUE="Вывести" onClick="Look()"> подписана словом "Вывести", а при нажатии на нее вызывает функцию Look(), написанную на JavaScript.<br /><br />Пример разработки формы:<br /><br />Начало формы<br /><br />Ваше имя: <img src="315234_html_7069a32937dd266e.gif" name="object1" align="bottom" width="215" height="24"/> <br /><br />Ваш пол: <img src="315234_html_5f3197ff73a1ba86.gif" name="object2" align="bottom" width="27" height="24"/> Мужской<br /><br /><img src="315234_html_cc618b79fc2236b7.gif" name="object3" align="bottom" width="27" height="24"/> Женский<br /><form name="WW-Standard"> <br />На каком курсе Вы учитесь? <select name="DefaultOcxName3" ></option> </select><br /><br />Какие языки программирования Вы знаете?<br /><br /><img src="315234_html_c20de5b39e622684.gif" name="object4" align="bottom" width="27" height="24"/> Паскаль<br /><br /><img src="315234_html_9ba87da0a0b68d68.gif" name="object5" align="bottom" width="27" height="24"/> Си<br /><br /><img src="315234_html_9ba87da0a0b68d68.gif" name="object6" align="bottom" width="27" height="24"/> Ассемблер<br /><br />Напишите несколько слов о себе:<br /><br /><input type="text" name="DefaultOcxName7" size="32" ><br /></form> <br /><img src="315234_html_1c4749d62b038b4b.gif" name="object7" align="bottom" width="115" height="30"/> <img src="315234_html_27959580d8e80557.gif" name="object8" align="bottom" width="104" height="30"/> <br /><br />Конец формы<br /><br />Эта форма имеет следующий HTML-код:<br /><br /><form method="post" action="mailto:[e-mail]?subject=Information"><br /><br /><br />Ваше имя: <input name="name" type="text" maxlength="40" size="40" value=""><br /><br />Ваш пол: <input type="radio" name="pol" value="male">Мужской<br /><br /><input type="radio" name="pol" value="female">Женский<br /><br />На каком курсе Вы учитесь? <select name="curs" size="1"><br /><br /><option value="1" selected>Первый</option><br /><br /><option value="2">Второй</option><br /><br /><option value="3">Третий</option><br /><br /><option value="4">Четвертый</option><br /><br /><option value="5">Пятый</option><br /><br /></select><br /><br />Какие языки программирования Вы знаете?<br /><br /><input type="checkbox" name="pascal" value="yes" checked>Паскаль<br /><br /><input type="checkbox" name="c" value="yes">Си<br /><br /><input type="checkbox" name="asm" value="yes">Ассемблер<br /><br />Напишите несколько слов о себе:<br /><br /><br /><textarea name="about" rows="6" cols="60" wrap="off">

Эта форма пытается отправить данные по указанному в заголовке адресу электронной почты, используя тему письма "Information". Дальнейшие события зависят от того, установлена ли на машине пользователя почтовая программа-клиент. Если да, то информация будет отправлена, причем данные из полей формы придут в виде строк текста name=value, например, информация о курсе в виде curs=1. Если на машине нет программы электронной почты, Windows предупредит об этом.

Обратите внимание, что для лучшего выравнивания данных часть формы заключена в таг
, а в части, находящейся вне тага
, использованы стандартные для HTML способы форматирования текста, например, таг абзаца.
Задание для самостоятельного выполнения.

По результатам Л.р. №6 - Л.р. №9 Вы должны имееть:

1. 
   Страницу о себе, где используются возможности форматирования HTML – first.html;
   
2. 
   Страницу c графикой и списками – graphic.html;
   
3. 
   Страницу с таблицей – tab.html;
   
4. 
   Страницу с содержанием всего сайта, в которой должны быть установлены ссылки на соответствующие документы – links.html.
   

Создайте документ index.html, содержащий 2 вертикально расположенных фрейма. Левый фрейм (узкий)   предназначен для вывода меню, правый (широкий) - для вывода содержимого документов, на которые Вы ссылаетесь из меню. Размеры фреймов должны быть изменяемы. Оставьте небольшое свободное пространство между фреймами.

Создайте в левом фрейме меню для навигации по всем страницам Вашего сайта. В левом фрейме должен быть загружен файл links.html, в правом файл first.html. Ссылки из левого фрейма должны открываться в правом фрейме. Проверьте работу документа с фреймами и покажите результат преподавателю.

Создайте на одной из страниц несколько форм с отправкой данных на адрес вашей электронной почты. Необходимо, чтобы были использованы всевозможные способы сбора информации, а именно текстовые поля, радиокнопки, флажки и т.д.

Загрузите Ваш сайт на один из серверов, предоставляющих бесплатный web-хостинг, например www.narod.ru. Результат тоже покажите преподавателю.