HTML
42. Плавающие фреймы.
Разговор о фреймах будет неполным без упоминания плавающих фреймов. Так называется фрейм, который можно добавлять в любое место веб-страницы. Еще одно его название — встроенный фрейм, он называется так из-за своей особенности встраиваться прямо в тело веб-страницы. Во фрейм можно загружать HTML-документ и прокручивать его содержимое независимо от остального материала на веб- странице. Размеры фрейма устанавливаются самостоятельно согласно дизайну сайта или собственных предпочтений. Создание плавающего фрейма происходит с помощью тега <iframe>, он имеет обязательный атрибут src, указывающий на загружаемый во фрейм документ. Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Плавающий фрейм</title>
</head>
<body>
<p><iframe src="hsb.html" width="300" height="120"></iframe></p>
</body>
</html>
В данном примере ширина и высота фрейма устанавливается через атрибуты width и height. Сам загружаемый во фрейм файл называется hsb.html. Заметьте, что если содержимое не помещается целиком в отведенную область, появляются полосы прокрутки. Еще одно удобство плавающих фреймов состоит в том, что в него можно загружать документы по ссылке. Для этого требуется задать имя фрейма через атрибут name, а в теге <a> указать это же имя в атрибуте target. Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Плавающий фрейм</title>
</head>
<body>
<p><a href="rgb.html" target="color">RGB</a> |
<a href="cmyk.html" target="color">CMYK</a> |
<a href="hsb.html" target="color">HSB</a></p>
<p><iframe src="model.html" name="color" width="100%" height="200"></iframe></p>
</body>
</html>
В данном примере добавлено несколько ссылок, они открываются во фрейме с именем color.
Внимание! Тег <iframe> проходит валидацию только при использовании переходного <!DOCTYPE> .
Вернуться к разделу
Вернуться к содержанию