Создание веб-страниц с помощью фреймов:ИнфоБлог

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

А на рисунке в одном окне браузера четыре кадра - верхний горизонтальный (где расположено название работы «Все о капусте», а под ним три вертикальных - левый, с оглавлением для профессии «Овощевод», правый с оглавлением для профессии «Повар».

Содержимое каждого пункта меню выводится в средний вертикальный кадр.

Фреймовая структура данного веб-документа задается так:

</frameset>

Параметр cols задает, что экран разбивается на вертикальные колонки; если нужно разбить по горизонтали, пишется rows.

rows = ="110,*"- это ширина первой строки в пикселях (может быть задана и в процентах), звездочка означает, что вторая строка займет всю остальную площадь экрана (здесь тоже можно вписать число или процент).

cols="20%,*,20%" – здесь ширина крайних колонок 20% от ширины экрана, остальную часть занимает средняя колонка.

В каждом из тегов FRAME прописано, какой файл в него следует грузить.

Сначала разбивается экран на два горизонтальных кадра, а потом нижний кадр необходимо разделить еще раз на три вертикальных кадра.

Путем вложения кадров одного в другой можно добиться еще более сложного разбиения экрана на части. Другой вопрос, надо ли это делать.

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

<html>

<head>

<title>Главная</title>

</head>

</frameset>

<body>

</body>

</html>

У тега frameset есть несколько важных атрибутов.

Толщиной рамки вокруг каждого кадра управляет атрибут border. При border = 0 рамок не будет.

Цветом рамки управляет атрибут bordercolor. В случае вложенных кадров

у каждого может быть рамка своего цвета.

Для каждого из тегов frame, а значит, отдельно для каждого кадра можно задать параметр noresize, который запрещает пользователю мышкой менять размеры кадра, а также scrolling, который может запретить появление полосы прокрутки.

При scrolling -no лифтов нет, при scrolling -yes они есть всегда, а при scrolling - auto - появляются только тогда, когда они нужны.

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

Метку вводим в теге frame примерно так же, как при создании гиперссылки вводили ее в теге А - с помощью атрибута name:

Html-код для этой страницы имеет вид:

<html>

<head>

<title>Содержание</title>

<base target="текст">

</head>

<body>

<p><div align="center"><strong><h3>СОДЕРЖАНИЕ</h3></strong></div></p>

<tr>

<td><a href="lecheb.html"><strong>Лечебные свойства капусты</strong></a></td>

</tr>

<tr>

<td> <a href="foto.html"><strong>Виды капусты:</strong></a>

<li><a href="beloc.html">белокочанная капуста</a></li>

<li><a href="brys.html">брюссельская капуста</a></li>

<li><a href="broc.html">брокколи</a></li>

<li><a href="cwet.html">цветная капуста</a></li>

<li><a href="kolr.html">кольраби</a></li>

<li><a href="krasn.html">краснокочанная капуста</a></li>

<li><a href="list.html">листовая капуста</a></li>

<li><a href="pec.html">пекинская капуста</a></li>

<li><a href="saw.html">савойская капуста</a></li>

</ul></td>

</tr>

<tr>

<td><a href="shran.html"><strong>Хранение капусты</strong></a></td>

</tr>

<tr>

<td><a href="pererab.html"><strong>Переработка капусты</strong></a>

<li><a href="kwash.html">квашение капусты</a></li>

<li><a href="marin.html">маринование капусты</a></li>

<li><a href="zamor.html">замораживание капусты</a></li>

<li><a href="sush.html">сушка капусты</a></li>

</ul></td>

</tr>

<tr>

<td><strong><font size="+1"color="#008000">Тестирование</font></strong>

<li><a href="материалы/Капуста.mdb">Капуста</a></li>

<li><a href="wopr.html">Вопросы</a></li>

</ul></td>

</tr>

</table>

</body>

</html>

Html-код для этой страницы имеет вид:

<html>

<head>

<title>Блюда</title>

<base target="текст">

</head>

<body>

<table>

<tr>

<td><strong><font size="+1" color="#008000">Блюда из капусты</font>:</strong>

<li><a href="Блюда/bbeloc.html">белокочанная капуста</a></li>

<li><a href="Блюда/bbrys.html">брюссельская капуста</a></li>

<li><a href="Блюда/bbroc.html">брокколи</a></li>

<li><a href="Блюда/bcwet.html">цветная капуста</a></li>

<li><a href="Блюда/bkolr.html">кольраби</a></li>

<li><a href="Блюда/bkrasn.html">краснокочанная капуста</a></li>

<li><a href="Блюда/bpec.html">пекинская капуста</a></li>

<li><a href="Блюда/bsaw.html">савойская капуста</a></li>

</ul</td>

</tr>

<tr>

<td><font size="+1" color="#008000"><strong>Приложения</strong></font>

<li><a href="Блюда/shci.html">Приготовление щей</a></li>

<li><a href="Блюда/tuch.html">Тушение овощей</a></li>

<li><a href="Блюда/shim.html">Состав капусты</a></li>

<li><a href="материалы/Украшение.rar">Украшения из капусты</a></li>

<li><a href="liter.html"><em>Литература</em></a></li>

</ul></td>

</td>

</tr>

<tr>

<td><strong><font size="+1"color="#008000">Тестирование</font></strong>

<li><a href="материалы/Нарезка овощей.mdb">Нарезка овощей</a></li>

</ul></td>

</tr>

</table>

</body>

</html>

И последнее, загружаем рисунок в верхнюю строку браузера

<head>

<base target="_self">

</head>

<tr>

</tr>

</table>

</body>

ИнфоБлог

Страницы

среда, 15 ноября 2017 г.

Создание веб-страниц с помощью фреймов

Комментариев нет :

Отправить комментарий

Номер страницы

Общее·количество·просмотров·страницы

Страницы

среда, 15 ноября 2017 г.

Создание веб-страниц с помощью фреймов

Комментариев нет :

Отправить комментарий

Номер страницы

Общее·количество·просмотров·страницы

среда, 15 ноября 2017 г.