Создание веб-страницы с фреймами

Создания веб-страниц с фреймами выполняется в два этапа:

1) задание фреймовой структуры;

2) подготовка содержимого фреймов.

На первом этапе выполняется маркетирование фреймов контейнером <frameset>, в старт-теге которого применяют атрибуты:

· rows – для организации фреймов горизонтальной ориентации;

· cols – для организации фреймов вертикальной ориентации.

Значения атрибутов имеют формат массива, элементы которого отделяются друг от друга запятыми с необязательным пробелом после них. Сколько в массиве введено элементов, столько будет в окне браузера образовано фреймов. Значения элементов, в свою очередь, задают размеры этих фреймов в окне браузера. Для указания размеров используются абсолютные, в пикселях или в процентах, значения. Используется также относительные значения – символ звездочка (*) – занять под фрейм оставшуюся часть экрана. Далее в теле контейнера <frameset> следует разместить ровно столько тегов <frame>, сколько было указано в атрибутах rows и cols. Причем фреймы следует располагать сразу после старт-тега <frameset>.

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

· name – имя фрейма; является обязательным атрибутом для фрейма, в который будут загружаться несколько веб-страниц, при этом каждая новая страница при загрузке будет отменять предыдущую. Такой фрейм принято называть целевым, а ссылку на него сопровождают атрибутом target;

· marginwidth – задает поля в левой и правой частях фрейма. По умолчанию атрибут равен 6;

· marginheight – задает поля в верхней и нижней частях фрейма;

· scrolling – задает полосы прокрутки. Значение scrolling=yes означает, что в фрейме всегда будут полосы прокрутки. Значение scrolling=no убирает из фрейма полосы прокрутки, даже. когда они необходимы. Значение scrolling=auto принимается по умолчанию – браузер их устанавливает или снимает по своему усмотрению;

· noresize – запрещает пользователю перемещать границу фрейма;

· src – обязательный атрибут: задает URL начальной страницы, загружаемой в файл.

В следующем примере экран браузера разбивается на два вертикальных фрейма. Левый фрейм занимает 25% экрана. В нем размещается страница index.html, в которой размещены ссылки на документы, предоставляющие примеры, рассмотренные выше. Правый фрейм, занимающий оставшуюся часть экрана, содержит начальную страницу main.html, в которой указывается, как выполнять просмотр примеров.

Пример 20. Простая фреймовая структура.

1. Страница Пример1_20.html формирует фреймовую структуру:

<html>

<head>

<title>Пример фреймов</title>

</head>

</frameset>

</html>

2. Страница index.html, загружаемая в фрейм, расположенный слева в окне браузера. Содержит ссылки на страницы, содержащие описание примеров:

<?xml version="1.0" encoding="windows-1251"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Ссылки на примеры</title>

</head>

<body>

<h1>Примеры</h1>

<a href="Пример1_1.html" target="main">Пример1</a>.

<a href="Пример 1_2.html" target="main">Пример2</a>.

<a href="Пример 1_3.html" target="main">Пример3</a>.

<a href="Пример1_4.html" target="main">Рисунок1</a>.

<a href="Пример1_5.html" target="main">Пример4</a>.

<a href="Пример1_6.html" target="main">Пример5</a>.

<a href="Пример1_7.html" target="main">Пример6</a>.

<a href="Пример1_8.html" target="main">Пример7</a>.

<a href="Пример1_9.html" target="main">Пример8</a>.

<a href="Пример1_10Главная.html" target="main">Пример9</a>.

<a href="../xhtml1/Изображение.html" target="main">Пример10</a>.

<a href="Пример1_11.html" target="main">Пример11</a>.

<a href="Пример1_12.html" target="main">Пример12</a>.

<a href="Пример1_13.html" target="main">Пример13</a>.

<a href="Пример1_14.html" target="main">Пример14</a>.

<a href="Пример1_15.html" target="main">Пример15</a>.

<a href="Пример1_16.html" target="main">Пример16</a>.

<a href="Пример1_17.html" target="main">Пример17</a>.

<a href="Пример1_18.html" target="main">Пример18</a>.

<a href="Пример1_19.html" target="main">Пример19</a>.

</body>

</html>

3. Страница main.html содержит начальную страницу для фрейма, расположенного справа в окне браузера.

<?xml version="1.0" encoding="windows-1251"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head> <title>Инструкция</title> </head>

<body>

<h1>Примеры технологии HTML</h1>

<h2>Для загрузки документа выполните щелчок на соответствующей ссылке в левой части экрана</h2>

</body>

</html>

Рисунок 21. Фреймовая структура веб-страницы

Литература

1 Храмцов, П.Б. Основы Web-технологгий: учебное пособие / П.Б. Храмцов, С.А. Брик, А.М. Русак, А.И. Сурин. – М.: Интернет-Университет Информационных технологий; БИНОМ. Лаборатория знаний, 2007. – 374

2 Ломов, А.Ю. HTML, CSS, скрипты: практика создания сайтов / А.Ю. Ломов. – СПб.:БХВ-Петербург, 2007. – 416 с.

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями: