- •Лабораторная работа №8. Организация html-документов с помощью фреймов
- •Элемент frameset для создания web-страницы с фреймами. Шаблон элемента frameset
- •Создание горизонтальных областей с помощью атрибута rows в открывающем теге элемента frameset
- •Пример html-файла документа раскладки для создания web-страницы с фреймами в трех областях: двух вертикальных и верхней горизонтальной
- •Элемент noframes
- •Организация переходов по фреймам. Атрибут элемента гиперссылки target.
- •Задание к лабораторной работе
Пример html-файла документа раскладки для создания web-страницы с фреймами в трех областях: двух вертикальных и верхней горизонтальной
<HTML>
<HEAD>
<TITLE>WEB-страница с тремя фреймами. </TITLE>
</HEAD>
<FRAMESET rows="20%, 80%">
<FRAME name="top" src="frame1.html" noresize>
<FRAMESET cols="30%, *">
<FRAME name="left" src="frame2.html" noresize>
<FRAME name="right" src="frame3.html"
scrolling="yes"
marginheight=5 marginwidth=3>
</FRAMESET>
</FRAMESET>
</HTML>
При сложном делении экрана на области, когда одновременно есть горизонтальные и вертикальные фреймы, создается вложенный элемент <FRAMESET>.
Элемент noframes
Этот элемент используется для того случая, когда браузер не поддерживает фреймы. На экран выводится предупреждающее сообщение или адрес версии страницы без фреймов. Фрагмент листинга с элементом NOFRAMES.
<HTML>
<HEAD>
<TITLE> WEB-страница с фреймами. </TITLE>
<FRAMESET cols="50%, 50%">
<FRAME name="left" src="frame1.html" noresize>
<FRAME name="right" src="frame2.html scrolling="yes"
marginheight=10 marginwidth=10>
<NOFRAMES>
<P>Для просмотра этой страницы необходим браузер,
поддерживающий фреймы</P>
<P>Щелкните для просмотра<A href="File.html>
версию страницы без фреймов</A>
</P>
</NOFRAMES>
</FRAMESET>
</HTML>
Организация переходов по фреймам. Атрибут элемента гиперссылки target.
HTML-файл документа раскладки основной страницы Index.html
<HTML>
<HEAD>
<TITLE>WEB-страница с двумя вертикальными фреймами.</TITLE>
</HEAD>
<FRAMESET cols="25%, 75%" frameborder=1 framespacing=5>
<FRAME name="contents" src="leftdoc.html" noresize >
<FRAME name="inform" src="rightdoc1.html" scrolling="yes"
marginheight=10 marginwidth=10 >
</FRAMESET>
</HTML>
Документы содержания для заполнения левой и правой областей:
HTML-файл документа содержания левой области leftdoc.html
<HTML>
<HEAD>
<TITLE>Левый фрейм</TITLE>
</HEAD>
<BODY link="blue" vlink="green" alink="red">
<H3>Содержание</H3>
<HR>
<A target="inform" href="rightdoc1.html">Глава 1</A><BR>
<A target="inform" href="rightdoc2.html">Глава 2</A>
</BODY >
</HTML>
HTML-файл 1го документа содержания правой области rightdoc1.html
<HTML>
<HEAD>
<TITLE>Правый фрейм</TITLE>
</HEAD>
<BODY link="blue" vlink="green" alink="red">
<H1>Глава 1</H1>
<H2>Введение. Понятие о фреймах.<H2>
<P align="justify">
Фреймы - это области, которые создаются в окне браузера для
одновременного просмотра нескольких документов.
Последние версии браузеров поддерживают фреймы
в обязательном порядке.
<HR>
<A href="rightdoc2.html">Следующая глава</A>
</BODY >
</HTML>
HTML-файл 2годокумента содержания правой области rightdoc2.html
<HTML>
<HEAD>
<TITLE>Правый фрейм</TITLE>
</HEAD>
<BODY link="blue" vlink="green" alink="red">
<H1>Глава 2</H1>
<H2>Структура WEB-страницы с фреймами.
Документы раскладки. Документы содержания. <H2>
<P align="justify">
При создании страницы с фреймами разрабатывается несколько
HTML-файлов, которые отличаются по своему назначению.
Документ (файл) раскладки определяет
структуру окна, то есть количество и вид областей, на которые
разделено окно. Необходимое количество областей и их вид
(горизонтальные или вертикальные или комбинация)
определяется разработчиком WEB-страницы.
Документы (файлы) содержания предназначены
для заполнения информацией каждой из областей.
<HR>
<A href="rightdoc1.html">Предыдущая глава</A>
</BODY >
</HTML>
Документ раскладки основной страницы: файл Index.html задает размеры областей вертикального деления экрана и указывает документы содержания этих областей: файл leftdoc.html для левой области и файл rightdoc1.html для правой области.
В левом фрейме с именем name="contents" помещается оглавление всего документа: файл leftdoc.html, который выполняет функцию меню. Меню представляет собой набор ссылок, с помощью которых можно выбрать страницу для правого фрейма. В примере их две, но можно использовать любое количество. Правому фрейму присвоено имя name="inform". Страницы, показываемые внутри правого фрейма могут быть разными, а имя области остается постоянным и используется в ссылках левого фрейма с помощью атрибута target элемента гиперссылки A.
Использование гиперссылки с атрибутом target, значение которого равно имени правого фрейма, позволяет при активизации ссылки в меню левого фрейма загружать необходимую страницу в правый фрейм.
Таким образом, элемент гиперссылки с использованием атрибута target имеет шаблон:
<A target="Имя фрейма" href="Имя файла.html">"Текст пункта меню"</A>
Для перемещения по страницам документа используются два независимых способа:
При помощи ссылок в меню левого фрейма.
При помощи ссылок в документах содержания правой области: файлах rightdoc1.html и rightdoc2.html.
Для перехода на следующую или предыдущую страницу внутри текущего фрейма (второй способ) атрибут target в гиперссылках документов содержания правой области не указывается. Он действует по умолчанию.