Фреймы

Цель работы: формирование умений создания HTML-документов с помощью фреймов.

Теория

Для формирования HTML-документов, содержащих кадры (фреймы) используются два тега: <frameset> и <frame>.

Тег <frameset> задает количество и исходные размеры столбцов и строк кадров. Горизонтальное деление экрана задается при помощи атрибута row, вертикальное - атрибута cols. Значения атрибутов могут быть выражены в процентах или пикселах.

Внутри тега <frameset> должны быть ссылки на все документы, входящие в состав сложной страницы. Делается это с помощью тега <frame>.

Создадим Web-страницу с двумя вертикальными фреймами. Левый кадр - оглавление, правый - целевой кадр, в который выводится содержимое всех ссылок левого фрейма. В левый кадр выводится файл frame2.htm, в правый - frame1.htm. Ниже приведен исходный код документа.

<HTML>
    <HEAD>
        <TITLE>Пример фреймов</TITLE>
    </HEAD>
    <frameset cols="30%,*">
    <frame name="toc" src="frame2.htm">
    <frame name="main" src="frame1.htm">
    </frameset>
</HTML>

В теге <frame> указывается атрибут name, присваивающий имя кадру. Он необходим для указания целевого кадра для вывода содержимого гиперссылок. Чтобы документ, полученный по гиперссылке, загружался в поименованный кадр, в теге определения гиперссылок задается атрибут target:

<A HREF=”URL документа” target=”имя кадра”

Ниже приводится упрощенный исходный код документа frame2.htm, в котором вывод всех документов по ссылкам определен в кадр с именем main, т.е. правый фрейм исходного документа frame.htm.

<HTML>
    <HEAD>
        <TITLE>Файл frame2.htm</TITLE>
    </HEAD>
    <BODY >
        <A HREF="file.htm" target="main"> Поиск файлов</A>
        <A HREF="index.htm" target="main"> Автоматические индексы</A>
        <A HREF="tema.htm" target="main"> Тематические каталоги </A>
    </BODY>
</HTML>

Задание

Создать страницу ссылок на ресурсы сети, обязательно с использованием фреймов. Имена файлов должны иметь маленькие латинские буквы!
В левом фрейме создать рубрики, оформить созданные ссылки в виде списка (тег <UL>)

Поисковые системы
Каталоги
Литература

В правом фрейме соответственно создать ссылки с названием и кратким описанием ресурсов. Для поисковых систем, ссылки оформить в виде таблицы из двух колонок и нескольких строк. В левой колонке поместить рисунки-логотипы поисковых систем, в правой - гиперссылки на эти системы. (ссылки http://www.yandex.ru/, http://www.rambler.ru/, http://www.aport.ru/, http://www.google.com/, http://www.filesearch.ru/).

Пример:

- для каталогов, оформить созданные ссылки в виде нумерованного списка, (ссылки http://www.list.ru/, http://www.rambler.ru/);
- для литературы, оформить созданные ссылки в виде нумерованного списка, ссылки разложить по рубрикам, например: библиотеки, техническая литература, стандарты. (ссылки http://www.citforum.ru/, http://www.lib.ru/, http://www.w3.org/, http://pyramidin.narod.ru/html401/index.htm).

1. Сделать ссылку на эту страницу с главной страницы.

2. Разместить файлы на сервере и просмотреть в браузере, проверить работоспособность всех ссылок.

3. В исходном коде страницы укажите, в виде комментариев, для чего предназначена каждая группа тегов (каждый открывавший тег) и их свойства (атрибуты).