Плавающие фреймы

Плавающие фреймы

Разговор о фреймах будет неполным без упоминания плавающих фреймов. Так называется фрейм, который можно добавлять в любое место веб-страницы. Еще одно его название — встроенный фрейм, он называется так из-за своей особенности встраиваться прямо в тело веб-страницы. На рис. 13.4 приведен пример такого фрейма.

Рис. 13.4

Рис. 13.4. Плавающий фрейм на веб-странице

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

Создание плавающего фрейма происходит с помощью тега <iframe>, он имеет обязательный параметр src, указывающий на загружаемый во фрейм документ (листинг 13.10).

Листинг 13.10. Использование тега <iframe>

<!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=windows-1251">
  <title>Плавающий фрейм</title>
 </head>
 <body>
  <p><iframe src="rgb.html" width="300" height="120"></iframe></p>
 </body>
</html>

В данном примере ширина и высота фрейма устанавливается через параметры width и height. Сам загружаемый во фрейм файл называется rgb.html. Заметьте, что если содержимое не помещается целиком в отведенную область, появляются полосы прокрутки.

Еще одно удобство плавающих фреймов состоит в том, что в него можно загружать документы по ссылке. Для этого требуется задать имя фрейма через параметр name, а в теге <a> указать это же имя в параметре target (листинг 13.11).

Листинг 13.11. Загрузка документа во фрейм

<!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=windows-1251">
  <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="300"></iframe></p>
 </body>
</html>

В данном примере добавлено несколько ссылок, они открываются во фрейме с именем color.

Зверніть увагу на додаткові посилання

загрузка...

Зверніть увагу на додаткові посилання

Якщо вас цікавить...

Головний розділ

Сторінки, близькі за змістом