Как работают фреймы
На первый взгляд, фреймы— это нечто сложное, но их легче понять, если провести аналогию с ячейками таблицы. Расположениефреймовна экране и ячеек в таблице задается почти одинаково: теги и атрибуты работают так же, как их табличные "родственники". Однако, хотя аналогия между единичнымфреймомна странице и ячейкой таблицы верна, нужно помнить, что есть и отличия. Содержимое ячейки задано в коде HTML-страницы с таблицей. Текст или графика, составляющие содержимое таблицы, фактически вводятся на той же странице HTML, что и тег или атрибут, описывающие таблицу. Напротив, экран сфреймамиописывается в НТМL-странице, в контейнереFRAMESET. Содержимое жефрейма— это отдельная HTML-страница, которая может находиться где угодно: в другом каталоге, на локальном сервере или на удаленном узле где-то в сети. Фреймоваяструктураопределяет только способ организации экрана сфреймамии указывает, где находится начальное содержимое каждогофрейма. Для всехфреймовзадаются URL, описывающие местонахождение их данных. Как правило, на странице с фреймовойструктуройсодержимогофреймовнет. Такая страница обычно невелика — она описывает только кадровуюструктуруэкрана. Когда документ загружается вофрейм, вы можете щелкать мышкой на ссылке в этом документе, чтобы увидеть связанные документы в других кадрах, заданных во фреймовойструктуре.
Создание простой страницы с фреймами
Построим страницу с двумя фреймами. Зададим слевафреймоглавления с заголовками статей, а справа поместим страницу с самими статьями. Сделаем так, что когда пользователь щелкает мышкой на ссылке в той части экрана, где находится оглавление, сама статья появляется в правомфрейме. Это основной, наиболее распространенный способ использованияфреймов.
Задание фреймовой структуры
Для начала мы должны представить себе общий вид страницы – где расположить фреймыи какого они будут размера. Затем можно подумать об их содержании. Ниже приводится код простой фреймовойструктурыс использованием тега<FRAMESET>. Обратите внимание: страница с фреймовойструктуройне содержит тега<ВОDY>.(открыть)
<HTML>
<HEAD>
<TITLE>Пример фреймов</TITLE>
</HEAD>
<FRAMESET COLS="25%, 75%">
<FRAME SRC="menu.html">
<FRAME SRC="main.html" NAME="main">
</FRAMESET>
</HTML>
Рис.
7.1.
Вот и весь код, необходимый для того, чтобы задать фреймовую структуру. В результате мы получили экран, разделенный на два окна. Левое окно занимает 25% экрана и содержит страницу с названиемmenu.html. Окно справа займет 75% экрана и содержит файлmain.html. Пока у нас их нет, так что вы увидите страницу с двумя пустымифреймами. Прежде чем она появится, нам придется пару раз щелкнуть мышкой в ответ на сообщения об ошибках, потому что браузер будет пытаться найти несуществующие страницы. Заметьте, что правую страницу мы назвали "main" (<главная>) с помощью строки:
<FRAME SRC="main.html" NAMЕ="main">
Это означает, что фреймпод именемmainбудет содержать страницуmain.html. Заметим, что поскольку мы не собираемся показывать в левомфрейменикаких страниц, кромеmenu.html, нам не нужно его называть.
Подготовка содержимого фрейма
Теперь загрузим фреймыс содержимым. Зададим страницуmenu.htmlв левомфрейме, где мы собираемся щелкать мышью, переключаясь между двумя страницами в правомфрейме.menu.html— это обычная НТМL-страница, построенная как оглавление. На самом деле мы можем взять готовую страницу с оглавлением и использовать ее. Имейте в виду, что этотфреймузкий и высокий, так что страница, которая будет в него загружаться, должна быть спроектирована соответствующим образом. Теперь мы должны определить, где будут появляться другие страницы при щелчке мышкой на ссылке. Поскольку мы хотим, чтобы они отображались в правомфрейме, добавим атрибутТАRGET(TARGЕТ="main") в тег ссылки. Это означает, что, когда пользователь щелкает на ссылке, вызываемая страница появляется вфреймеmain. Мы отображаем все страницы вфреймеmain, поэтому давайте добавим атрибутТАRGЕТ="main"во все теги ссылок в оглавлении. Если мы не определим атрибутТАRGЕТ, то страница появится там, где мы щелкнули мышкой, — в левомфрейме.