ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб сайтов под "ключ".

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

Разработка сайтов под ключ

Веб-услуги

Обучающие программы для веб-разработчиков

Веб-ресурсы

Фреймы. Разделение окна веб-браузера на несколько областей

Фреймы. Разделение окна веб-браузера на несколько областей

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

Разделение окна веб-браузера на несколько областей

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

Создадим веб-страницу с такой структурой. Для этого создадим 5 файлов:

  • 93.html — заголовок веб-страницы;
  • 94.html — панель навигации;
  • 95.html — содержание 1 главы;
  • 96.html — содержание 2 главы;
  • 97.html — HTML-документ описывающий фреймовую структуру.
HTML-документ, содержащий заголовок (93.html)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Заголовок</title>
</head>

<body bgcolor="#CCFFFF">
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle">
<h1>Заголовок</h1>
</td>
</tr>
</table>
</body>
</html>
HTML-документ, содержащий панель навигации (94.html)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Панель навигации</title>
</head>

<body bgcolor="#CCFFFF">
<br>
<h3 align="center">Оглавление</h3>
<ul type="disc">
<li><a href="95.html">Глава1</a></li>
<li><a href="96.html">Глава2</a></li>
</ul>
</body>
</html>
HTML-документ содержащий основное содержание главы1 (95.html)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Глава1</title>
</head>

<body bgcolor="#CCFFFF">
<br>
<h3 align="center">Глава1</h3>
<p>Содержание главы1</p>
</body>
</html>
HTML-документ содержащий основное содержание главы2 (96.html)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Глава2</title>
</head>

<body bgcolor="#CCFFFF">
<br>
<h3 align="center">Глава2</h3>
<p>Содержание главы2</p>
</body>
</html>
HTML-документ , описывающий фреймовую структуру (97.html)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример использования фреймов</title>
</head>

<frameset rows="100, *">
<frame src="93.html" scrolling="no">
<frameset cols="20%, 80%" >
<frame src="94.html">
<frame src="95.html" name="charter">
</frameset>
</frameset>
<noframes>
Ваш веб-браузер не отражает фреймы
</noframes>
</html>

Все созданные файлы сохраним в одной папке. Откроем файл 97.html.

В окне веб-браузера это будет выглядеть ТАК.

Окно разделено на три прямоугольные области. В верхней части окна находится заголовок. В нижней — расположена панель навигации (слева) и основная часть документа (справа). При переходе по ссылкам содержимое основной части меняется, а остальные остаются неизменными. Если теперь посмотреть HTML-код документа (Вид > Просмотр HTML-кода), то мы увидим только код структуры веб-страницы, не исходный код каждого из HTML-документов. Иными словами, будет отображен исходный код файла 97.html. Чтобы увидеть исходный код заголовка (файл 93.html), необходимо правой кнопкой мыши щелкнуть внутри области, содержащей заголовок. В появившемся контекстном меню нужно выбрать пункт Просмотр HTML-кода. Чтобы посмотреть исходный код файла 94.html, необходимо правой кнопкой мыши щелкнуть по области, содержащей оглавление и т.д.

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

Структура HTML-документа, содержащего фреймы

Структура HTML-документа с фреймами отличается от обычной структуры.

Структура HTML-документа с фреймами
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Заголовок страницы</title>
</head>

<frameset rows="100, *">
<frame>
<frameset cols="20%, 80%" >
<frame>
<frame>
</frameset>
</frameset>
<noframes>
Ваш веб-браузер не отражает фреймы
</noframes>
</html>

Как и в обычном HTML-документе, весь код расположен между тегами <html> и </html>, а в разделе <head> и </head> располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами отсутствует раздел <body>, отсутствует содержимое страницы, а присутствуют только теги, служащие для определения фреймовой структуры. Иными словами, документ с фреймами не может содержать раздела <body> и наоборот, обычный HTML-документ не может содержать фреймовую структуру.

Вместо тега <body> применяется парный тег <frameset>, описывающий фреймовую структуру. Каждое отдельное окно описывается тегом <frame>. Если веб-браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <noframes> и </noframes>. Рассмотрим эти теги подробно.

Описание фреймовой структуры

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

  • rows — описывает разбиение на строки;

  • <frameset rows="100, *">

  • cols — описывает разбиение на столбцы;

  • <frameset cols="20%, 80%">

    В качестве значений параметров rows и cols указываются размеры фреймов. Должно быть указано как минимум два значения. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или процентах:

    cols="20%, 80%"

    Кроме того, в качестве ширины или высоты может быть указана звездочка (*), которая означает, что под фрейм нужно отвести все оставшееся пространство:

    rows="100, *"

  • border — задает толщину границы между фреймами в пикселах;

  • <frameset rows="100, *" border = "2">

  • bordercolor — указывает цвет границы между фреймами;

  • <frameset rows="100, *" bordercolor = "red">

  • frameborder —включает или отключает показ границы между фреймами. Он может принимать одно из двух значений:
    • yes — граница отображается (значение по умолчанию);

    • <frameset rows="100, *" frameborder = "yes">

    • no — граница не отображается;

    • <frameset rows="100, *" frameborder = "no">

  • framespacing — определяет расстояние между фреймами в пикселах;

  • <frameset rows="100, *" framespacing = "2">

Описание отдельных областей

Тег <frame> описывает одиночный фрейм и не имеет закрывающего тега. Он располагается между тегами <frameset> и </frameset> и имеет следующие параметры:

  • src — определяет URL-адрес документа, который должен быть загружен во фрейм. Может быть указан абсолютный или относительный URL-адрес;

  • <frame src="95.html ">

  • name — задает уникальное имя фрейма;

  • <frame src="95.html" name="charter">

  • scrolling — запрещает или разрешает отображение полос прокрутки во фрейме. Этот параметр может принимать следующие значения:
    • auto — полосы отображаются, только если содержимое не помещается во фрейме (значение по умолчанию);

    • <frame src="95.html" name="charter" scrolling ="auto">

    • yes — полосы отображаются в любом случае;

    • <frame src="95.html" name="charter" scrolling ="yes">

    • no — полосы не отображаются в любом случае;

    • <frame src="95.html" name="charter" scrolling ="no">

  • marginwidth — задает расстояние в пикселах между границей фрейма и его содержимым по горизонтали;

  • <frame src="95.html" name="charter" marginwidth = "5">

  • marginheight — указывает расстояние в пикселах между границей фрейма и его содержимым по вертикали;

  • <frame src="95.html" name="charter" marginwidth = "5" marginheight ="5">

  • bordercolor — определяет цвет границы между фреймами;

  • <frame src="95.html" name="charter" bordercolor = "red">

  • frameborder —включает или отключает показ границы между фреймами. Может принимать одно из двух значений:
    • yes — граница отображается (по умолчанию);

    • <frame src="95.html" name="charter" frameborder = "yes">

    • no — граница не отображается;

    • <frame src="95.html" name="charter" frameborder = "no">

  • noresize — отключает возможность изменения размеров фрейма пользователем. По умолчанию любой пользователь может изменить размер фрейма путем перемещения границы. Добавляется этот параметр так:

  • <frame src="95.html" name="charter" scrolling ="no" noresize>

Тег noframes

Если веб-браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами <noframes> и </noframes>. В противном случае содержимое этих тегов будет проигнорировано.

Пример:

<noframes>

Ваш веб-браузер не отражает фреймы

</noframes>

Загрузка документа в определенный фрейм

Для загрузки документа в определенный фрейм существует параметр target тега <a>. В параметре target указывается имя фрейма (которое задается с помощью параметра name тега <frame>) или одно из зарегистрированных значений:

  • _blank — документ будет загружен в новом окне веб-браузера;

  • <a href = "filel.html" target = "_blank">Текст ссылки</a>

  • _self — документ будет загружен в тот фрейм, где находится гиперссылка;

  • <a href = "filel.html" target = "_self">Текст ссылки</a>

  • _top — документ будет загружен поверх всех фреймов;

  • <a href = "filel.html" target = "_top">Текст ссылки</a>

  • _parent — документ будет загружен в окне, являющемся родительским по отношению к текущему фрейму;

  • <a href = "filel.html" target = "_parent">Текст ссылки</a>

Если нужно загрузить документ во фрейм с именем charter, то ссылка будет такой:

<a href = "filel.html" target = "charter">Текст ссылки</a>

Тег iframe. Добавление фрейма в обычный документ

С помощью парного тега <iframe> можно вставлять фреймы в обычный HTML-документ. Если тег <iframe> не поддерживается, то будет выведен текст между тегами <iframe> и </iframe>. Иногда такие фреймы называют плавающими. Тег <iframe> имеет следующие параметры:

  • src —определяет URL-адрес документа, который должен быть загружен во фрейм. Может быть указан абсолютный или относительный URL-адрес;

  • <iframe srs = "http//sevidi.ru/html/htmtest/90.html">

    <iframe src = "html11.php">

    Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Пример применения плавающих фреймов</title>
    </head>

    <body>
    <iframe src = "html10.php ">
    </body>
    </html>

    В окне веб-браузера это будет выглядеть ТАК.

  • name — задает уникальное имя фрейма;

  • <iframe src = "htmpage10.php " name="charter">

  • scrolling — разрешает или запрещает отображение полос прокрутки во фрейме. Может принимать следующие значения:
    • auto — полосы отображаются, только если содержимое не помещается во фрейме (значение по умолчанию);

    • <iframe src = "htmpage10.php " name="charter" scrolling = "auto">

    • yes — полосы отображаются в любом случае;

    • <iframe src = "htmpage10.php " name="charter" scrolling = "yes">

    • no — полосы не отображаются в любом случае;

    • <iframe src = "htmpage10.php " name="charter" scrolling = "no ">

  • marginwidth и marginheight — определяют расстояние по горизонтали и по вертикали между границей фрейма и его содержимым (в пикселах);

  • <iframe src = "htmpage10.php " name="charter" marginwidth = "5" marginheight = "5">

  • frameborder — включает или отключает показ границ фрейма. Параметр может принимать одно из значений:
    • yes (или 1) — граница отображается;

    • <iframe src = "htmpage10.php " name="charter" frameborder = "yes">

    • no (или 0) — граница не отображается;

    • <iframe src = "htmpage10.php " name="charter" frameborder = "no">

  • border — определяет толщину границы фрейма в пикселах при условии, что параметр frameborder явно задан;

  • <iframe src = "htmpage10.php " name="charter" frameborder = "yes" border= "2">

  • width и height — задают ширину и высоту фрейма;

  • <iframe src = "htmpage10.php " name="charter" width ="200" height ="200">

  • vspace и hspace — задают расстояние от фрейма до текста страницы по вертикали и горизонтали соответственно;

  • <iframe src = "htmpage10.php " name="charter" vspace = "5" hspace = "10">

  • align — определяет выравнивание фрейма. Может принимать следующие значения:
    • left — фрейм выравнивается по левому краю, текст обтекает фрейм справа;

    • <iframe src = "htmpage10.php " name="charter" align ="left">

    • right — фрейм выравнивается по правому краю, текст обтекает фрейм слева;

    • <iframe src = "htmpage10.php " name="charter" align ="right">

    • center — фрейм выравнивается по центру;

    • <iframe src = "htmpage10.php " name="charter" align ="center">

Пример:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Пример применения плавающих фреймов</title>
</head>

<body>
<h1 align="center">Название документа</h1>
<br>
<iframe src="../html11.php" name="chapter" width="900" height="300" align="right"scrolling="auto">
Ваш браузер не отображает фреймы
</iframe>
<h2>Оглавление</h2>
<ul>
<li><a href="../html10.php" target="chapter">Таблицы</a></li>
<li><a href="../html11.php" target="chapter">Разметка страницы</a></li>
</ul>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

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

Очень часто тег <iframe> используется в ходе сетей обмена баннерами и коде рекламных сетей. В других целях использование тега очень ограниченно из-за отсутствия поддержки большинством веб-браузеров.

Комментарии(0)

Для добавления комментариев надо войти в систему и авторизоваться
Комментирование статей доступно только для зарегистрированных пользователей:Зарегистрироваться