Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
Практическая работа № 9
Тема: «Создание фреймовой структуры HTML-страницы»
Время выполнения: 2 часа
Цель работы: формирование практических умений исполь зования фреймов при создании HTML-страниц
Содержание и ход выполнения работы
Теоретические сведения
Фреймы используются для разделения окна браузера на не сколько областей, в каждую из которых загружается отдельный HTML-документ.
В файле с фреймами не указываются теги <BODY> </BODY>.
Фреймовая структура создается следующим образом:
<FRAMESET> РАЗБИВКА НА ФРЕЙМЫ
<FRAME> ОПРЕДЕЛЕНИЕ ФРЕЙМА
<FRAME> ОПРЕДЕЛЕНИЕ ФРЕЙМА
…
<NOFRAMES> </NOFRAMES>
</FRAMESET>
Контейнер <NOFRAMES> </NOFRAMES> обеспечивает альтернативную информацию для браузеров, не работающих с фреймами.
Атрибуты тега <FRAMESET> приведены в табл. 1.
|
Атрибут |
Назначение |
|
ROWS |
Определяет количество и размеры горизонтальных фреймов к окне браузера |
|
COLS |
Определяет количество и размеры вертикальных фреймов в окне браузера |
|
FRAMEBORDER |
Определяет наличие рамок у содержащихся внутри FRAMESET фреймов |
|
BORDER |
Ширина рамок фреймовой структуры |
|
BORDERCOLOR |
Цвет рамок фреймовой структуры |
Атрибуты тега <FRAME> приведены в табл. 2.
|
Атрибут |
Назначение |
|
SRC |
Указывает адрес HTML-файла, загружаемого в дан ный фрейм |
|
NAME |
Определяет имя фрейма |
|
MARGINWI |
Определяет ширину левого и правого |
|
MARGINHEI |
Определяет ширину верхнего и нижнего |
|
SCROLLING |
Определяет наличие полос прокрутки |
|
NORESIZE |
Не позволяет изменять размеры фрейма |
|
FRAMEBORDER |
Определяет наличие рамок у фрейма |
Фреймы могут быть вложенными друг в друга.
Рассмотрим пример создания вложенных фреймов. Созда дим три HTML-документа header.html, menu.html и info.html, каждый из которых будет отображаться в отдельном фрейме.
Листинг документа header.html:
<HTML>
<HEAD> <TITLE> header.html </TITLE> </HEAD>
<BODY>
<H1>Использование фреймов в HTML</H1>
</BODY>
</HTML>
Листинг документа menu.html:
<HTML>
<HEAD> <TITLE> memu.html </TITLE> </HEAD>
<BODY>
<UL>
<LI>Ter FRAMESET<BR>
<LI>Ter FRAME<BR>
</UL>
</BODY>
</HTML
Листинг документа info.html:
<HTHL>
<HEAD> <TITLE> info.html </TITLE> </HEAD>
<BODY>
<BR><BRXBR>
<CENTER> <IXB>
Фреймы используются для разделения окна
браузера на несколько областей, в каждую из
которых загружается отдельный HTML-документ.
</ВХ/I> </CENTER>
</BODY>
</HTML>
В документе main.html определим фреймовую структуру:
<HTML>
<HEAD> <TITLE> Фреймы </TITLE> </HEAD>
<FRAMESET ROWS="30%,70%"> <FRAME SRC=" header.html" >
<FRAMESET COLS="30%,70%"> <FRAME SRC="menu.html"> <FRAME SRC= "info.html">
</FRAMESET>
</FRAMESET>
<NOFRAMES>
Ваш браузер не показывает фреймы.
</NOFRAMES>
</HTML>
Внешний вид документа main.html представлен на рис. 7.2
Изменим документ menu.html. преобразуем элементы спи ска в ссылки на соответствующие документы frame.html и frameset.html;
<HTHL>
<HEAD> <TITLE> menu.html </TITLE> </HEAD>
<BODY>
<BR>
<UL>
<LI><A href="frameset.html" target="information">Ter FRAMESET</A><br>
<LI><A href="frame.html" target="information">Тег FRAME</A> <br>
</UL>
</BODY>
</HTML>
Листинг документа frame.html:
<html>
<head>
<title> frame.html</title>
</head>
<body>
<h3>Атрибуты тега <b>FRAME</b></h3>
</body>
</html>
Листинг документа frameset.html:
<html>
<head>
<title> frameset.html</title>
</head>
<body>
<h3>Атрибуты тега <b>FRAMESET</b></h3>
</body>
</html>
В этом случае при выборе одной из ссылок соответствую щий документ будет загружен в левый нижний фрейм, т. е. за менит документ menu.html.
Чтобы определить окно, в которое будет загружаться доку мент, необходимо выполнить следующие действия:
Определим имя information для правого нижнего фрейма. Измененный документ main.html представлен ниже:
<html>
<head>
<title> Фреймы</title>
<frameset rows="30%,70%">
<frame src="../files/134/header.html">
<frameset rows="30%,70%">
<frame src="../files/134/menu.html">
<frame src="../files/134/info.html" name="information">
</frameset>
</frameset>
<noframes>
Ваш браузер не показывает фреймы
</noframes>
</html>
Изменим описание ссылок в документе menu.html.
<UL>
<LI><A href="frameset.html" target="information">Ter FRAMESET</A><br>
<LI><A href="frame.html" target="information">Тег FRAME</A> <br>
</UL>
Значением атрибута TARGET может быть одно из неявных имен фреймов. В HTML зарезервированы четыре неявных имени, начинающихся с символа подчеркивания
(табл. 3).
Таблица 3
|
Неявное имя |
Назначение |
|
_blank |
Загружает документ в новое окно |
|
_self |
Загружает документ в текущее окно (установлено по умолчанию) |
|
_parent |
Загружает документ в окно родительской фреймовой структуры |
|
_top |
Загружает документ в окно фреймовой структуры верхнего |
Если в гиперссылке не указан атрибут TARGET, то документ загружается в текущий фрейм.
Встроенные фреймы
Встроенные фреймы позволяют, не разбивая окно браузера на части, включать в один HTML-документ окно с другим HTML-документом. Используемый для этого элемент IFRAME имеет те же атрибуты, что и элемент FRAME (кроме NORESIZE) и еще три специфических:
|
ALIGN |
Управляет выравниванием встроенного фрейма относительно окружающего текста. Возможные значения left, center, right |
|
HEIGHT |
Задает высоту встроенного фрейма (в пикселях или процентах) |
|
WIDTH |
Задает высоту фрейма (в пикселях или процентах) |
Пример:
<BODY>
<IFRAME name=”IF” width=”50%” height=”50%” align=right>
</IFRAME>
<A href="FIRST.html" target="IF">Первый документ</A> <BR>
<A href="SECOND.html" target="IF">Второй документ</A>
</body>
Порядок выполнения работы
Задание 1:
при выборе Ссылки 1 в правый фрейм;
при выборе Ссылки 2 в текущий фрейм;
при выборе Ссылки 3 в новое окно;
при выборе Ссылки 4 в текущее окно браузера, заменяя фреймовую структуру.
Рис. 4. Фреймовая структура документа Lab9.html
Рис. 5. Документ new.html
Задание 2:
Создайте HTML-страницу с использованием встроенного фрейма. Расположение встроенного фрейма задайте самостоятельно.
Задание 3:
Используя атрибут target="…", сделать во фреймах гиперссылки, по нажатию на которые, в эти же или в другие фреймы произойдет загрузка других страниц.
Контрольные вопросы:
1. Для чего используются фреймы?
2. Какой тег используется для определения фреймовой структуры?
3. Какой тег используется для определения конкретного фрейма?
4. Возможно ли использование тега <BODY> в документах, определяющих фреймовую структуру? Какие могут быть последствия?
5. Перечислите атрибуты тега <FRAME> и укажите их назначение.
6. Перечислите атрибуты тега <FRAMESET> и укажите их назначение.
7. Какой атрибут тега <A> используется для указания окна, в которое необходимо загружать документ?
8. Перечислите известные вам неявные имена фреймов.
Преподаватель: __________О.В.Парфянович
PAGE \* MERGEFORMAT 1