3. Задание на лабораторную работу
Создать две следующие формы:
1.Форму платежного поручения, предусмотрев в ней поля для ввода следующей информации:
номер платежного поручения;
дата платежного поручения;
наименование плательщика;
платежные реквизиты плательщика;
наименование получателя;
платежные реквизиты получателя;
сумма платежа;
назначение платежа;
НДС.
В спроектированной форме предусмотреть наличие всех возможных типов полей ввода. Заполненная форма должна отправляться по почтовому адресу stud_name@stud_bank.ru используя метод POST.
2. Форму запроса поисковой системы примерно следующего вида:
В спроектированной форме предусмотреть наличие всех возможных типов полей ввода. Заполненная форма должна отправляться на сервер intbel.bupk.ru используя метод GET.
4. Содержание отчета
Отчет должен содержать:
1. Название работы.
2. Ф.И.О. и группу студента, выполнившего работу.
3. Цель работы.
4. Задание.
5. Распечатки HTML кодов созданных форм.
6. Твердые копии экрана, демонстрирующие спроектированные формы.
7. Выводы по работе.
5. Контрольные вопросы
1. Какой тэг открывает описание формы на HTML?
2. Какой атрибут присваивает форме символическое имя?
3. Как задается URL программы обработки запроса?
4.Как задается метод оформления запроса и какие методы оформления запросов используются?
5. чем отличаются методы GET и POST?
6. Какой тэг используется для задания простого элемента ввода внутри FORM?
7. Для чего используется атрибут TYPE= и какие он может принимать значения?
8. Для чего используется атрибут NAME= и какие он может принимать значения?
9. Какие значения может принимать атрибут VALUE=?
10.Какой тэг задает поле ввода?
11.Какие атрибуты может иметь тэг SELECT?
12.Как формы можно вложить друг в друга?
Лабораторная работа № 8 Многооконные документы (Frames)
1. Цель работы
Приобретение основных навыков по созданию и редактированию многооконных документов HTML.
2. Основные положения
Фреймы (frames) - это прямоугольные области на Web-странице, в которых демонстрируются другие страницы или изображения.
Фреймы или окна позволяют:
· каждому окну присвоить индивидуальный URL, благодаря чему в него может загружаться информация независимо от других окон (рамок) на странице;
· каждому окну присвоить ИМЯ, позволяющее ссылаться на него из других URL;
· динамически изменять размер при изменении пользователем размеров окна. (Что, в принципе, может быть запрещено, для уверенности в постоянстве размера окна.)
Эти свойства многооконных документов (фреймов) позволяют использовать следующие возможности:
· те элементы, которые клиент должен бы всегда видеть, такие как управляющие линейки и заголовки, могут быть помещены в статическое индивидуальное окно. Когда клиент рассматривает документы через "динамические" окна, содержимое статического окна остается постоянным при смене содержимого в "динамических";
· очень удобно использовать фреймы для оглавления. Одно окно содержит оглавление, ссылки из которого результат отображается в другом окне;
· благодаря фреймам становится возможным посылать запросы и получать результаты на одной и той же странице, если сделать одно окно для формы запроса, а второе для результата.
Создание простого многооконного документа
Прежде, чем создавать многооконный документ необходимо определить, как вы собираетесь использовать рабочее поле просмотрщика. Фреймы разделяют рабочее поле (окно- window) просмотрщика на две (или более) независимых части, в каждую из которых загружаются различные документы. В простом случае мы делим окно либо по столбцам (вдоль) либо по строкам (поперек) на две части (два окна).
Для создания простейшего многооконного документа (из двух окон) необходимо иметь как минимум три HTML страницы: две - которые будут показывать в окнах и третью (головную), которая создает эти окна. Эту, третью, страницу, содержащую информацию о составляющих страницы фреймов называют часто фреймсет (frameset).
В случае если мы делим окно просмотрщика по строкам на два подокна, то мы должны создать две HTML страницы, row1.html и row2.html, первая из которых будет показывать в верхней части (в верхнем окне), а вторая - в нижней.
Далее создаем еще оду HTML страницу, определяющую способ разбиения рабочего поля:
<HTML>
<FRAMESET ROWS="20%, *">
<FRAME SRC="row1.html">
<FRAME SRC="row2.html">
</FRAMESET>
</HTML>.
В результате окно просмотрщика будет разделено поперек (по строкам) на две части, на верхнее окно будет отведено 20% рабочего поля, а на нижнее оставшееся часть (80%). В верхнее окно будет загружена страницы row1.html, а в нижнее - страница row2.html.
Для того, что бы разделить рабочее поле вдоль (по столбцам) на две части, нужно использовать вместо атрибута ROWS атрибут COLS в команде FRAMESET:
<FRAMESET COLS="20%, *">.
В задании размеров подокон можно использовать абсолютные и относительные (как в приведенном выше примере) значения.
· Задание относительных размеров в процентах от рабочего поля просмотрщика:
<FRAMESET COLS="20%, *">.
· Задание абсолютных размеров в пикселях (pixels).
Например, задание размера верхнего подокна величиной в 200 pixels:
ROWS="200, *".
Символ "*" используется для обозначения "всего того, что осталось".
· Задание "n*", где n целое число означает n-ю часть от рабочего поля.
Например, ROWS="*, 2*" определяет два окна: первое занимает 1/3, а второе 2/3 от высоты рабочего поля; или ROWS="100, 2*, *" создает 3 окна: первое величиной в 100 pixels, второе - 2/3 от оставшегося пространства, и третье - все, что осталось (1/3).
Задание размеров окна в пикселях рекомендуется для размещения в этом окне картинок фиксированного размера для организации навигационного меню. Для размещения текстовых окон лучше использовать относительные размеры. Это связано с тем, что сервер принципиально не знает реальных размеров окна просмотрщика у клиента.
Имена окон
При наличии фреймов (или нескольких информационно связанных окон просмотрщика) каждому из открытых окон должно быть присвоено собственное имя.
Каждое окно является независимым браузером, и имена используются для установления связей между разными окнами и определения окна, куда будет загружена новая страница.
Вы имеете возможность, указав соответствующее имя окна, загрузить новую страницу одно окно по ссылке из другого.
Имя присваивается окну одним из трех способов:
1. Документ может содержать необязательный МЕТА-параметр, модифицирующий заголовок HTTP ответа сервера. Это поле может быть включено в заголовок HTTP ответа из документа при помощи команды META или непосредственно генерироваться сервером (если ваш сервер поддерживает эту спецификацию, к сожалению просмотрщики даже 4-х версий не обрабатывают данное поле команды META):
Window-target: window_name
Данный параметр заставит документ загрузиться в окно с названием window_name, или создать такое окно, если оно не существует.
2. Ссылка на документ может содержать указание (на языке HTML), присваивающее ссылке window_name. Документ, загруженный по такой ссылке, ведет себя так же как имеющий в заголовке поле Window-target, описанный в 1-м методе.
3. Окно, созданное внутри набора фреймов (FRAMESET) может быть поименовано при помощи атрибута NAME команды FRAME.
Таким образом, при использовании фреймов для задания имени окна используется атрибут NAME в команде FRAME, например:
<HTML>
<FRAMESET ROWS="20%, *">
<FRAME NAME="first" SRC="row1.html">
<FRAME NAME="second" SRC="row2.html">
</FRAMESET>
</HTML>.
Если в документе row1.html будет вызвана ссылка на документ newpage.html следующим образом:
<A HREF="newpage.html"
TARGET="second">Click here to see
"newpage.html".
</A>,
то документ newpage.html откроется во втором окне, которое имеет имя NAME="second".
Существует несколько стандартных имен окон задаваемых атрибутом TARGET к команде <A>:
TARGET="_top" |
Загрузить документ в основном окне просмотрщика (при этом ликвидируются все установки фреймов). |
TARGET="_blank" |
Открыть новое окно просмотрщика и в него загрузить документ. Эта команда работает и в отсутствии фреймов. |
TARGET="_self" |
Загрузить документа в то же самое окно, откуда он был вызван (работает по умолчанию). |
TARGET="_parent" |
Загрузить документа в "родительское" окно по отношению к текущему (см. ниже). |
Дополнительные параметры
Следующие атрибуты устанавливают возможности для клиента изменения размеров окна и прокрутки текста:
· NORESIZE - клиенту запрещается изменять размеры окна. Имеет смысл устанавливать, когда окно содержит картинки. Например: <FRAME SRC="row1.html" NORESIZE>;
· SCROLLING=yes|no - клиенту запрещена прокрутка текста в данном окне (по умолчанию установлено SCROLLING=yes). Например:
<FRAME SRC="row1.html" SCROLLING=NO>;
· 3-D рамки (border).По умолчанию команда FRAMESET рисует 3-D рамку (borders) между окнами (frames). Это можно отменить, используя атрибут FRAMEBORDER. Например:
<FRAMESET ROWS="20%, *" FRAMEBORDER=0 FRAMESPACING=0>.
Окна будут создаваться без рамок и без отступов (FRAMESPACING) от границ окон.
Сложные окна
Более сложные многооконные документы, наподобие показанного на рис. 8.1, создаются при помощи комбинации соответствующих команд FRAMESET.
Рис. 8.1. Многооконный документ
Например, мы хотим создать многооконный документ, содержащий вверху несменяемый заголовок (его лучше всего задать картинкой), далее слева навигационное меню и справа два содержательных окна. Для этого необходимо выполнить следующую последовательность операций.
1. Создаем FRAMESET, который делит поперек рабочее поле на окно для заголовка и окно для меню и содержания:
<HTML>
<FRAMESET ROWS="10%, *">.
2. Загружаем в вернее окно заголовок:
<FRAME SRC="head.html">.
3. Разбиваем по вертикали нижнее окно на два окна: левое для меню, правое для содержания и загружаем в левое окно файл с меню:
<FRAMESET COLS="20%,*">
<FRAME SRC="menu.htm" NAME="menu">
4. Делим правую часть на два подокна и загружаем в них соответствующие документы с содержанием:
<FRAMESET ROWS="40%,*">
<FRAME SRC="index.html" NAME="index">
<FRAME SRC="main.html" NAME="main">
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>.
Отношение родительского окна ("_parent") - переход на ступеньку вверх при разбиении рабочего поля, определяется следующим образом: если вызов документа происходит из окон "index" или "main", то родительским окном считается вся правая часть документа, если из окна "menu", то вся нижняя часть документа, при этом разбиение на окна нижнего уровня пропадает.
Если вы желаете присвоить имена промежуточным окнам разбиения (например, правому окну), то в этом случае нужно в правое окно загрузить файл right.html с разбиением FRAMESET:
<FRAMESET COLS="20%,*">
<FRAME SRC="menu.htm" NAME="menu">
<FRAME SRC="right.html" NAME="right">
</FRAMESET>
</FRAMESET>
</HTML>.
Файл right.html:
<HTML>
<FRAMESET ROWS="40%,*">
<FRAME SRC="index.html" NAME="index">
<FRAME SRC="main.html" NAME="main">
</FRAMESET>
</HTML>.
В этом случае окно "right" будет родительским по отношению к окнам "index" и "main".
Браузеры не поддерживающие фреймы
Что делать с клиентами, которые используют просмотрщики (браузеры) не поддерживающие фреймы - "лучше всего гнать таких клиентов из сети".
В худшем случае приходится предусматривать работу сервера с этими клиентами, создавая дополнительный документ для них, используя команду NOFRAMES:
<HTML>
<FRAMESET ROWS="20%, *">
<FRAME SRC="row1.html">
<FRAME SRC="row2.html">
</FRAMESET>
<NOFRAMES>
Welcome to page!
</NOFRAMES>
</HTML>.
Замечания:
Вложенные фреймы.
Команда (ТЭГ) FRAMESET может быть вложенным. FRAME может содержать документ, являющийся в свою очередь FRAMESET. Более того, FRAMESET должен быть вложенными, особенно когда связь в одном окне должна перезагружать несколько других окон.
Бесконечные рекурсии.
Можно создать FRAMESET, который будет бесконечно рекурсивно загружать один и тот же FRAMESET до тех пор, пока не кончится память.
Посмотрите на этот пример:
<HTML>
<FRAMESET rows="50%,50%">
<FRAME src=parents_url>
<FRAME>
</FRAMESET>.
Очевидно, что он нехорош, но против подобного имеется защита. Любое окно, которое пытается использовать URL такой же, как у любого из родителей, считается вовсе не имеющим URL (и обычно становится пустым).
3. Задание на лабораторную работу
1. Создать два HTML файла (name1.html и name2.html) следующего содержания
· name1.html:
Лабораторная работа №8
студента гр. _____ __________________
Многооконные документы (Frames)
Примечание Текст должен быть на цветном фоне
Цвета AQUA, BLACK, BLUE, FUCHSIA GRAY, GREEN, LIME, MAROON NAVY, OLIVE, PURPLE, RED SILVER, TEAL, WHITE, YELLOW
· name2.html:
Приобретение основных навыков по созданию и
редактированию многооконных документов HTML.
Примечание Текст должен быть на цветном фоне
2. Создать следующие HTML страницы, определяющие способ разбиения рабочего поля.
· в файле r1.html разбиение должно быть поперек и на верхнее поле должно быть отведено 30% рабочего поля браузера;
· в файле r2.html разбиение должно быть вдоль ( по столбцам) и на правое поле должно быть отведено 300 pixel рабочего поля браузера;
3. Создать HTML файл name3.html следующего содержания:
name3.html - Содержание документа.
4. Создать HTML страницу r3.html, определяющую следующий способ разбиения рабочего поля.
name1.html (15%поля) |
|
name3.html |
name2.html (4 части из 5 ширины рабочего поля)
|
5. В файл name2.html вставить фрагмент произвольного текста размером 2-3 страницы. Во вставленном тексте выделить Введение и два раздела. Отформатировать (выделить) заголовки разделов.
6. После Введения вставить в виде списка гиперссылки на остальные два раздела.
7. Создать два HTML файла name4.html и name5.html, содержащих различные фрагменты произвольного текста размером 1-2 страницы.
8. В файл name3.html вставить гиперссылки на файлы name4.html и name5.html таким образом, чтобы файл name4.html открывался в окне name3.html, а файл name5.html открывался в окне name2.html.
9. В файл name3.html добавить гиперссылки на произвольные файлы form1.html и form2.html таким образом, чтобы файл form1.html открывался в основном окне браузера, а файл form2.html открывался в новом окне браузера.
10.Продемонстрировать преподавателю результаты работы.