1896
.pdf
Тег <NOFRAMES>
Данный тег используется, чтобы предусмотреть ситуацию, когда браузер не поддерживает фреймы. Необходимо вывести на экран предупреждающее сообщение или адресовать пользователя к другой странице, не содержащей фреймы. Приведем пример (рис. 93).
Текст программы в блокноте будет выглядеть следующим образом:
…
<FRAMESET COLS="197,*" BORDERCOLOR="RED">
<FRAME NAME="LEFT" SRC="menu.htm" SCROLLING="AUTO"> <FRAME NAME="RIGHT" SRC="heading.htm" SCROLLING="YES"> <NOFRAMES>
<P>Для просмотра данной страницы необходим браузер, поддерживающий фреймы.
<P>Вы можете просмотреть здесь
<A HREF="menu1.htm">упрощенную версию</A>страницы. </NOFRAMES>
</FRAMESET>
…
Рис. 93. Использование тега <NOFRAMES>
Структура фреймов
Необходимо создать следующую Web-страницу (рис. 94):
Рис. 94. Web-страница, организованная с помощью фреймов
В нашем примере окно браузера разбито на две части: левая часть является содержанием и представлена тремя гиперссылками, правая же часть окна содержит тему сайта и предназначена для отображения в нем файлов по гиперссылкам. Первоначально в окно браузера загружается index.htm – файл, организующий разделение окна на две области, а также определяющий файлы, которые необходимо загрузить в определенную область окна браузера. Всего создается шесть файлов: index.htm – файл, создающий фреймы; menu.htm – определяет левую область экрана; heading.htm – определяет правую область окна и три файла, относящиеся к гиперссылкам.
Рассмотрим создание данных файлов подробнее:
Файл index.htm
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Internet</TITLE></HEAD>
<FRAMESET COLS="197,*" BORDERCOLOR="gray">
<FRAME NAME="LEFT" SRC="menu.htm" SCROLLING="AUTO"> <FRAME NAME="RIGHT" SRC="heading.htm" SCROLLING="AUTO"> <NOFRAMES> <BODY>
<P> Для просмотра данной страницы необходим браузер, поддерживающий фреймы </BODY>
</NOFRAMES></FRAMESET>
</HTML>
Файл menu.htm
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Heading</TITLE></HEAD>
<BODY BGCOLOR="#000080" LINK="#FFFF66" VLINK="#99FF66" ALINK="#FFFFFF"><P ALIGN="CENTER">
<B><FONT COLOR="#FFFFFF" SIZE="6">РАЗДЕЛЫ</FONT> <P ALIGN="LEFT"><A HREF="internet.htm" TARGET="RIGHT">
Что такое Интернет</A>
<P ALIGN="LEFT"><A HREF="history.htm" TARGET="RIGHT">
История создания Интернета</A>
<P ALIGN="LEFT"><A HREF="mail.htm" TARGET="RIGHT">
Основные понятия среды Интернета</A>
<P ALIGN="LEFT"><A HREF="heading.htm" TARGET="RIGHT"> <IMG BORDER"0" SRC="h.gif"></A>
</FONT></B></BODY>
</HTML>
Замечание 1: обратите внимание на запись TARGET="RIGHT". При создании гиперссылок необходимо указывать имя (NAME=" ") фрейма, в котором должна быть отображена информация файла. Например, запись
<A HREF="internet.htm" TARGET="RIGHT">Что такое Интернет</A>
означает, что при активизации гиперссылки Что такое Интернет файл internet.htm будет отображаться в правой области экрана, так как фрейм с именем NAME="RIGHT" был определен <FRAME NAME="RIGHT" SRC="heading.htm" SCROLLING="AUTO"> в правой области окна браузера
(см. рис. 95).
Замечание 2: графический файл h.gif (изображение дома) является гиперссылкой на файл heading.htm.
Рис. 95. Web-страница, организованная с помощью фреймов
Файл heading.htm
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>W W W</TITLE></HEAD>
<BODY BGCOLOR="#66CCFF" TEXT="#0000FF"> <BR><BR><P ALIGN="CENTER">
<B><FONT SIZE="7" COLOR="#000066">
ИНТЕРНЕТ <P ALIGN="CENTER">И <P ALIGN="CENTER"> WORLD WIDE WEB</FONT></B></BODY>
</HTML>
Файлы internet.htm, mail.htm, history.htm – обыкновенные html-файлы,
содержащие информацию по разделам.
1.8.3. Атрибут TARGET
Рассмотрим на примерах значения атрибута TARGET.
1. TARGET="_blank"
Изменим файл menu.htm следующим образом:
…
<A HREF="internet.htm" TARGET="_blank">
Что такое Интернет</A>
…
При активизации гиперссылки Что такое Интернет файл internet.htm загрузится в новом окне браузера (рис. 96)
Рис. 96. Значение TARGET="_blank"
2. TARGET="_self"
Изменим файл menu.htm следующим образом:
…
<A HREF="internet.htm" TARGET="_self">Что такое Интернет</A>
…
При активизации гиперссылки Что такое Интернет файл internet.htm загрузится в окно, где расположена гиперссылка (рис. 97)
Рис. 97. Значение TARGET="_self"
3. TARGET="_parent"
Изменим файл menu.htm следующим образом:
…
<A HREF="internet.htm" TARGET="_parent">
Что такое Интернет</A>
…
При активизации гиперссылки Что такое Интернет файл internet.htm загрузится в родительское окно фрейма (рис. 98)
Рис. 98. Значение TARGET="_parent"
4. TARGET="_top"
Изменим файл menu.htm следующим образом:
…
<A HREF="internet.htm" TARGET="_top">Что такое Интернет</A>
…
При активизации гиперссылки Что такое Интернет файл internet.htm загрузится в родительское окно фрейма (рис. 99)
Рис. 99. Значение TARGET="_top"
Замечание: значения _blank, _self, _parent, top записываются малыми буквами и начинаются с символа «_».
Вложенные фреймы
Для более сложного разбиения окна браузера требуется создать вложенные фреймы. Пусть требуется разбить окно браузера следующим образом (рис. 100):
Рис. 100. Web-страница, организованная с помощью вложенных фреймов
Текст программы в блокноте будет выглядеть следующим образом:
<HTML><HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>WWW </TITLE></HEAD>
<FRAMESET COLS="25%,*" BORDERCOLOR="#000000" BORDER="8">
<FRAME SRC="f1.htm" NAME="LEFT"> <FRAMESET ROWS="100,*,200"> <FRAME SRC="f2.htm" NAME="RIGHT"> <FRAMESET COLS="*,25%">
<FRAME SRC="f3.htm" NAME="RIGHT2">
<FRAME SRC="f4.htm" NAME="RIGHT3"> </FRAMESET>
<FRAME SRC="f5.htm" NAME="RIGHT1" SCROLLING="YES"> </FRAMESET> <NOFRAMES> <BODY>
<P>Для просмотра данной страницы необходим браузер, поддерживающий фреймы
</BODY> </NOFRAMES> </FRAMESET></HTML>
Контрольные вопросы
1.Каким образом применяются фреймы на Web-страницах?
2.Какие теги используются для создания фреймов?
3.Для чего нужны теги <NOFRAMES>…</NOFRAMES> на Web-
странице?
4.Перечислите и охарактеризуйте возможности тега <FRAMESET>?
5.Перечислите и охарактеризуйте возможности тега <FRAME>?
6.Перечислите и охарактеризуйте значения атрибута TARGET.
Практические задания
1.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 101):
Рис. 101. Вид Web-страницы в окне браузера
2.Создайте HTML-документ, отображающий на экране браузера следующую информацию (рис. 102):
Рис. 102. Вид Web-страницы в окне браузера
Глава II
ВАРИАНТЫ ИНДИВИДУАЛЬНЫХ ЗАДАНИЙ
Задание
Создайте Web-сайт по предложенным ниже вариантам.
Указания к выполнению
1.Титульная страница организована с помощью вложенных фреймов (экран поделен на три области).
2.В каждую область загружается отдельная Web-страница, т. е. для титульного листа необходимо создать три страницы, содержащие: а) название Web-сайта;
б) четыре гиперссылки: три текстовых и одна графическая; в) графическое изображение;
г) ссылку MAILTO.
3.Фоны для страниц устанавливаются: а) для двух страниц – установка цвета;
б) для третьей страницы – использование фонового рисунка.
4.Объем Web-сайта должен составлять не менее 6 страниц: 3 страницы для организации титульного листа и 3 страницы с информацией по указанным гиперссылкам.
5.Отображение Web-страниц по гиперссылкам осуществляется в том окне, где находится тема Web-сайта.
6. Графическая гиперссылка |
возвращает Web-страницу с темой |
Web-сайта. |
|
7.Web-страницы, отображаемые по гиперссылкам, должны содержать: а) информацию по указанной теме; б) не менее одной таблицы;
в) два списка: нумерованный и маркированный; г) фон, задаваемый цветом или графическим изображением.
8.Литература для использования при создании Web-сайта приведена после вариантов.