Задание на самоподготовку
1. Проработать последовательность операций по технике создания карт-изображений, а также по осуществлению связи между HTML-документами.
_________________________
_________________________
_________________________
_________________________
ЛАБОРАТОРНАЯ РАБОТА № 7
Создание Web-страниц с фреймами
Цель: обучить созданию web-страниц, содержащих фреймы.
Время выполнения: два академических часа.
Форма занятия: лабораторная работа.
Задание № 1. Разветвлённая фреймовая структура
Запустите программу Блокнот и осуществите ввод следующего HTML кода:
<HTML>
<HEAD>
<TITLE>Пример разветвленной фреймовой структуры </TITLE>
</HEAD>
<FRAMESET COLS="30%, 70%" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">
<FRAME NAME="left" SRC="left.html" SCROLLING="yes" MARGINWIDTH="10" MARGINHEIGHT="10">
<FRAMESET ROWS="*, 2*" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">
<FRAME NAME="top" SRC="top.html"> <FRAME NAME="bottom" SRC="bottom.html">
</FRAMESET>
</HTML>
Теперь сохраните код под любым именем, не забыв присвоить файлу расширение html или htm. Откройте файл в браузере и ознакомьтесь с результатом.
▲ Пример описывает фреймовую структуру, состоящую из двух вертикальных и двух горизонтальных фреймов.
Конструкция
<FRAMESET COLS="30%, 70%" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">
показывает, что окно браузера поделено на две части: 30% и 70%, соответственно. Следующий за ней тег <FRAME> задает свойства левого фрейма.
Правый фрейм разбит еще на два фрейма, на этот раз горизонтальных, для чего дается отдельная конструкция:
<FRAMESET ROWS="*, 2*" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0">
После этого посредством тега <FRAME> дается описание двух упомянутых горизонтальных фреймов.
Задание № 2. Файл верхнего фрейма "menu.html"
Запустите программу Блокнот и осуществите ввод следующего HTML кода:
<HTML>
<BODY BGCOLOR="red" TEXT="black" LINK="blue" LINK="срщсщдфеу" VLINK="blue">
<H3>Ссылки верхнего фрейма</H3>
<HR>
<FONT FACE="Tahoma" SIZE="2">
<UL TYPE="square">
<LI> <A HREF="text.html" TARGET="left">Файл с текстом в левом нижнем фрейме</А>
<LI> <A HREF="text.html" TARGET="right">Файл с текстом в правом нижнем фрейме</А>
<LI> <A HREF="text.html" TARGET="menu">Фaйл с текстом в верхнем фрейме</А>
<LI> <A HREF="text.html" TARGET="_top">Файл с текстом в полном окне</А>
<LI> <A HREF="text.html" TARGET="_blank:">Фaйл с текстом в новом окне</А>
<LI> <A HREF="text.html" TARGET="_self">Файл с текстом в текущем фрейме</А>
</OL>
</FONT>
</BODY>
</HTML>
▲ Первая ссылка откроется в левом нижнем фрейме по причине указания конструкции TARGET="left" ("left" в данном случае – это внутреннее имя данного фрейма).
Вторая ссылка откроется в правом нижнем фрейме (указано внутреннее имя фрейма "right") .
Третья ссылка будет открыта в этом же окне, так как "menu" – это имя текущего фрейма, из которого открываются гиперссылки.
Четвертая ссылка откроется в полном окне браузера (конструкция "top").
Пятая ссылка будет открыта в отдельном новом окне поверх фреймовой структуры (действие "_blank").
Наконец, последняя ссылка откроется в текущем фрейме (аналогично действию TARGET "menu").
Задание на самоподготовку
1.Проработать последовательность операций по технике создания фреймов.
_________________________
_________________________
_________________________
_________________________
_________________________
_________________________
_________________________
_________________________
_________________________
_________________________
_________________________
ЛАБОРАТОРНАЯ РАБОТА № 8
Создание пользовательских форм
Цель: обучить созданию web-страниц, содержащих пользовательские формы.
Время выполнения: два академических часа.
Форма занятия: лабораторная работа.
Задание № 1. Варианты использования элемента текстовой
Запустите программу Блокнот и осуществите ввод следующего HTML кода:
<HEAD>
<ТIТLЕ>Варианты использования элемента текстовой строки</ТIТLЕ>
</HEAD>
BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue">
<H3>Пожалуйста, сообщите свои данные:</НЗ>
<FORM NAME="mail" ACTION="/cgi-bin/mail.cgi" METHOD="post"> Ваше имя:<ВR>
<INPUT TYPE="text" SIZE="20" MAXLENGTH="50" NAME="name"> <BR><BR>
Ваш E-mail:<BR>
<INPUT TYPE-text" SIZE="30" MAXLENGTH="35" NAME="email"> <BR><BR>
Ваш сайт:<ВR>
<INPUTTYPE="text" SIZE="40" MAXLENGTH="60" NAME=="www" > <BR><BR>
Комментарий:<ВR>
<INPUT TYPE="text" SIZE="50" MAXLENGTH="100" NAME="comment" VALUE="Краткий комментарий (не более 100 символов)">
</FORM>
</BODY>
</HTML>
Теперь сохраните код под любым именем, не забыв присвоить файлу расширение html или htm. Откройте файл в браузере и результатом должно послужить следующее:
