8.3 Организация переходов по фреймам - HTML - Каталог статей

8.3 Организация переходов по фреймам

Урок №8: Фреймы

Прежде, чем организовывать переходы по фреймам и обеспечивать их взаимодействие, создадим более-менее сложную фреймовую структуру.

Вложенные фреймы

На рисунке представлена типичная фреймовая труктура, в которой верхняя строка является заголовком сайта, левый столбец содержит ссылки, а правый - основной контент. Обычно фрейм с основным содержанием является единственным прокручиваемым, в то время как другие два фрейма статически размещены в окне броузера. Файлы-источники для фреймов называются header.html, links.html и content.html соответственно.

Если бы требовалось организвать таблицу такой структуры, то пришлось бы объединять ячейки в первой строке. При работе с фреймами используется противоположный подход - последовательное деление ячеек то по горизонтали, то по вертикали. Из иллюстрации видно, что структура представляет собой две строки, вторая из которых поделена на два столбца.

Фреймовая структура из двух строк может быть представлена следующим образом:

<html>
 <head>
 <title>Заголовок</title>
 </head>
 <frameset rows="10%,*">
 <frame  src="адрес первого файла" />
 <frame  src="адрес второго файла" />
 </frameset>
</html>

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

<html>
 <head>
 <title>Заголовок</title>
 </head>
 <frameset rows="10%,*">
 <frame  src="header.html" />
 <frameset cols="150,*">
 <frame  src="links.html" />
 <frame  src="content.html" />
 </frameset>
 </frameset>
</html>

Указывая значения атрибута src, не забывайте, что фреймы внедряются в документ слева направо и сверху вниз.

Вывод: При использовании вложенных фреймов на место составного фрейма вставляется еще один контейнер <frameset>, который, в свою очередь, содержит нужные фреймы или новые теги <frameset>.

Организация переходов по фреймам

Теперь можно заполнять файлы header.html, links.html и content.html осмысленным содержимым. Например, предполагается, что файл links.html содержит ссылки. У ссылок, открывающихся из фреймов, есть особенность: они открываются в том же фрейме, где были размещены.

После нажатия на ссылку "Медвежонок" фотография откроется в том же фрейме ->

Как же сделать так, чтобы ссылки открывались в правом фрейме? Для этого нужно каждому фрейму присвоить имя, то есть значение атрибута name. А в ссылке указать атрибут target со значнием, равным имени целевого фрейма (т.е. фрейма, в котором должна открыться ссылка).

Изменим в документе фреймовой структуры девятую строчку на следующее:

<frame  src="content.html" name="photos" />

Тогда в файле links.html ссылка на фотографию примет вид:

<a href="адрес фото" target="photos">
Медвежонок
</a>

Атрибут ссылки target кроме имен фреймов может принимать несколько зарезервированных значений: "_blank", "_self", "_parent" и "_top".

Ссылка <а href="адрес файла" target="_blank">ссылка</a>
открывает файл в новом окне.
Ссылка <а href="адрес файла" target="_self">ссылка</a>
открывает файл в текущем фрейме и окне. Это вариант по умолчанию.
Ссылка <а href="адрес файла" target="_parent">ссылка</a>
открывает файл в области, занимаемой родительским фреймом. (То есть на уровень выше по иерархии)
Ссылка <а href="адрес файла" target="_top">ссылка</a>
открывает файл в верхнем фрейме данного окна, то есть на месте всей фреймовой структуры. Этот прием позволяет пользователю покинуть фреймовую структуру без создания нового окна.

Категория: HTML | Добавил: slava (18.07.2009)

Просмотров: 3381 | Рейтинг: 3.0/1

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]