Главная страница Содержание Учебник по Html Словарь тегов Гостевая книга Напиши мне

Фреймы.

Ступенька 24 - "Создаём горизонтальные фреймы".

Чтобы браузер показал одновременно несколько документов, надо создать специальный фрейм-документ. В нем необходимо указать, сколько документов откроется в одном окне браузера, сколько места будет занимать каждый, каким образом они будут располагаться относительно друг друга.

Т.к. первый документ на сайте, который показывается посетителю это index.html, то его необходимо сделать фрейм-документом. Фрейм задаётся тэгом <frameset></frameset>. Создадим документ index.html:

    <html>
    <head>
    <title>Хождение по фреймам</title>
    <frameset></frameset>
    </head>
    </html>
Как вы видете, в данном примере фрейм-документа нет тэга body, обязательного для других случаев.

Прежде всего необходимо решить по какому принципу вы будете размещать свои документы, и какие документы будут показыны посетителю одновременно. Предлагаю классический вариант - logo.html, menu1.html, content.html - в этих документах будут находиться логотип фирмы, меню и информация соответственно.

Создадим эти три файла. С начало сделаем файл logo.html

    <html>
    <head>
    <title>Логотип</title>
    <body BACKGROUND="foil.jpg">
    <center>
    <img src="computer.gif" border="0">
    </center>
    </body>
    </head>
    </html> посмотреть
Затем сделаем файл menu1.html
    <html>
    <head>
    <title>Меню</title>
    <body LINK="#00FFFF" VLINK="#FFFFFF" ALINK="#FF0000" BACKGROUND="fon.jpg">
    <center>
    <a href="p1.html"> Пример 1</a>
    <a href="p2.html"> Пример 2</a>
    <a href="p10.html"> Пример 3</a>
    </center>
    </body>
    </head>
    </html> посмотреть
Теперь создадим последний файл в нашем примере content.html
    <html>
    <head>
    <title>Пример</title>
    <body TEXT="#FFFF00" BACKGROUND="fon.jpg">
    <center>
    Выбирете любой пример
    </center>
    </body>
    </head>
    </html> посмотреть
Расположить эти три файла мы можем по-разному. Вот вам для наглядности четыре варианта из множества возможных:

При помощи фреймов мы делим браузер на несколько окон заданного размера, в которых помещаем независимые друг от друга документы. Это позволяет оставлять некоторую информацию видимой, в то время как другая информация прокручивается или заменяется (так, например, мы будем постоянно видеть в одном окне документ с меню, в другом – документ с логотипом, а в третьем окне при нажатии на ссылки в документе меню у нас будут загружаться разные документы с текстом, картинками и прочим).

Т.к. документы, которые мы размещаем во фреймах независимые, то, соответственно, каждый документ может содержать в себе что угодно (и текст, и картинки, и таблицы).

Итак, сначала создадим горизонтальный фрейм:

    <html>
    <head>
    <title>Хождение по фреймам</title>
    <frameset rows="100,*,150">
    <frame src="logo.html">
    <frame src="content.html">
    <frame src="menu1.html">
    </frameset>
    </head>
    </html> (посмотреть)
Давайте разберемся, что и для чего. При помощи атрибута rows тэга <frameset></frameset> мы указали, что наши фреймы будут расположены горизонтально (рядами). В значении атрибута rows мы прописали высоту каждого фрейма (rows="100,*,150"). Высота первого фрейма - 100 пикселов, третьего - 150, а второй занимает все оставшееся пространство по высоте (это мы указали значком *).

Тэг frame сообщает браузеру, какие же документы у нас будут загружены во фреймах. В нашем случае: в первом фрейме будет загружен - logo.html (документ с логотипом), второй фрейм займет документ с непосредственным содержанием (content.html), а третий - меню.

Обратимся к нашему примеру. Нажмите на любую из ссылок. Документ, на который ведет ссылка, откроется в том же фрейме, в котором располагается документ с меню. А нам нужно, чтобы он открылся во фрейме с основным содержанием, а меню осталось в нетронутом виде. Чтобы это сделать необходимо воспользоваться атрибутом name для тэга <frameset></frameset> который задает уникальное имя для фрейма.

Имя фрейма может быть в дальнейшем использовано для ссылки на него из других документов (фреймов), с помощью атрибута target для тэга <a></a> следующим оброзом <a target="имя_фрейма"></a>

Сначало сделаем для каждой ссылки в файле меню укажем параметр target="window-1", где window-1 - это имя фрейма, в котором у нас располагается документ с основным содержанием (content.html), а затем в нашем примере фрейма зададим уникальное имя для фрейма который содержит документ content.html.

    <html>
    <head>
    <title>Меню</title>
    <body LINK="#00FFFF" VLINK="#FFFFFF" ALINK="#FF0000" BACKGROUND="fon.jpg">
    <center>
    <a href="p1.html" target="window-1"> Пример 1</a>
    <a href="p2.html" target="window-1"> Пример 2</a>
    <a href="p10.html" target="window-1"> Пример 3</a>
    </center>
    </body>
    </head>
    </html> (посмотреть)
    <html>
    <head>
    <title>Хождение по фреймам</title>
    <frameset rows="100,*,150">
    <frame src="logo.html">
    <frame src="content.html" name="window-1">
    <frame src="menu.html">
    </frameset>
    </head>
    </html> (посмотреть)
Теперь, все ссылки открываются в нужном нам фрейме, а меню никуда не исчезает.

Бывают ситуации, когда нам нужно, чтобы открываемый документ открылся во все окно, для этого надо параметру target задать значение _top: <a href="project.html" target="_top">Мой пример</a>

Страница с вашим примером откроется в полное окно, закрыв остальные кадры (фреймы).

[ Назад: Ступенька 23-ая ] [ Далее: Ступенька 25-ая ]