Приводим фреймы в опрятный вид.

В последнем нашем примере первое, что бросается в глаза, это целая куча полос прокруток, которые стоят где надо и не надо.. Давайте от них избавимся, ну можно и оставить кое где.. Делается это при помощи атрибута scrolling - тега <frame>, он может иметь одно из трёх значений:

· no- никогда не показывать полосу прокрутки,

· yes- всегда показывать,

· auto- показывать в том случае если она необходима.

Пример:

<html>
<head>
<title>фреймы</title>
</head>
<frameset cols="*,800,*">
<frame src="dekor.html" scrolling="no">
<frameset rows="120,*">
<frame src="logotype.html" scrolling="no">
<frameset cols="200,600">
<frame src="menu.html">
<frame src="text.html">
</frameset>
</frameset>
<frame src="dekor.html" scrolling="no">
</frameset>
</html>

Поля фреймов или иначе расстояние от границ фрейма до текста или картинки, как в нашем случае, задаются в пикселях при помощи атрибутов marginwidth и marginheight тега <frame>

Пример:

<html>
<head>
<title>фреймы</title>
</head>
<frameset cols="*,800,*">
<frame src="dekor.html" scrolling="no">
<frameset rows="120,*">
<frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0">
<frameset cols="200,600">
<frame src="menu.html">
<frame src="text.html" marginwidth="10" marginheight="10">
</frameset>
</frameset>
<frame src="dekor.html" scrolling="no">
</frameset>
</html>

Поговорим немного о рамках вокруг наших фреймов.

Если Вы обратили внимание, то в последнем примере наведя курсор на границу фрейма он, курсор то бишь, приобретает другой вид (захватить и переместить) и теперь эту границу можно перетащить в какую либо сторону удерживая левой кнопкой мыши. Иногда такая "мобильность" границ фреймов играет на руку веб-мастеру, но чаще всё же мешает.. Для того, чтобы запретить пользователю играться с размерами окон для тега <frame> придумали атрибут noresize

Пример:

<html>
<head>
<title>фреймы</title>
</head>
<frameset cols="*,800,*">
<frame src="dekor.html" scrolling="no" noresize>
<frameset rows="120,*">
<frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" noresize>
<frameset cols="200,600">
<frame src="menu.html" noresize>
<frame src="text.html" marginwidth="10" marginheight="10" noresize>
</frameset>
</frameset>
<frame src="dekor.html" scrolling="no" noresize>
</frameset>
</html>

А вот давно нам знакомый атрибут border задаёт ширину в пикселях этих самых рамок между фрёймами.. пишется он внутри тега <frameset>. Как и раньше значение border="0" вовсе избавит нас от рамок.

Пример:

<html>
<head>
<title>фреймы</title>
</head>
<frameset cols="*,800,*" border="0">
<frame src="dekor.html" scrolling="no" noresize>
<frameset rows="120,*" border="0">
<frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" noresize>
<frameset cols="200,600" border="0">
<frame src="menu.html" noresize>
<frame src="text.html" marginwidth="10" marginheight="10" noresize>
</frameset>
</frameset>
<frame src="dekor.html" scrolling="no" noresize>
</frameset>
</html>

Фреймы и ссылки.

Настало время оживить наш сайт ссылками, да вот беда, знакомая нам обыкновенная ссылка <a href="text1.html">Бобы в горшочке по-итальянски</a> откроет данный документ в том же фрейме где она и находится, в нашем случае непосредственно в фрейме с содержанием, а само содержание в момент перехода по этой ссылки уйдёт в небытие.. можете взглянуть на корявый пример.. кликнете в нём на любую ссылку.. Что бы впредь такого не происходило, необходимо указывать браузеру в каком фрейме следует открывать необходимый нам документ, ну если конечно Вам и в правду не нужно открывать его в этом же фрейме.

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

пишется так:

<frame src="text.html" name="osnovnoe"> имя можно придумать любое.. главное его не забыть..

А теперь в документе с ссылками (в нашем случае это файл menu.html)необходимо указать цель то есть собственно определить в каком окне стоит открывать тот или иной документ

Пишется так:

<a href="text1.html" target="osnovnoe">Бобы в горшочке по-итальянски</a>

Ну я думаю Вам уже не стоит объяснять, что прежде чем ссылаться на какие либо документы, их необходимо создать.. в моём случае файлы (рецепты) имеют имена text.html, text1.html, text2.html…

Посмотрите пример:

Файл index.html
<html>
<head>
<title>фреймы</title>
</head>
<frameset cols="*,800,*" border="0">
<frame src="dekor.html" scrolling="no" noresize>
<frameset rows="120,*" border="0">
<frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" noresize>
<frameset cols="200,600" border="0">
<frame src="menu.html" noresize>
<frame src="text.html" name="osnovnoe" marginwidth="10" marginheight="10" noresize>
</frameset>
</frameset>
<frame src="dekor.html" scrolling="no" noresize>
</frameset>
</html>

Файл menu.html
<html>
<head>
<title>фреймы</title>
</head>
<body bgcolor="#e8e8e8" background="fon1.jpg" link="#b40000" alink="#900000" vlink="#900000">
<font face="Monotype Corsiva" size="6"color="#ff0000">Меню:</font><hr>
<font face="Comic Sans MS" size="3">
<a href="text.html" target="osnovnoe">Суп из шампиньонов</a><hr>
<a href="text1.html" target="osnovnoe">Бобы в горшочке по-итальянски</a><hr>
<a href="text2.html" target="osnovnoe">Австралийский летний салат</a><hr>
... ... ...
</font>
</body>
</html>

Так же как и раньше документ можно открыть в отдельном окне. Напомню, пишется так:

<a href="text1.html" target="_blank">Бобы в горшочке по-итальянски</a>

Или же присвоив атрибуту target значение _top открыть его в этом же окне браузера, но на весь экран.. "обнулив" при этом всё что бы там не находилось.. пишется так:

<a href="text1.html" target="_top">Бобы в горшочке по-итальянски</a>

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

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

Иногда в страницу содержащую в себе не фреймовую структуру необходимо в отдельном окне вставить другой HTML документ или даже ряд таковых документов. Для выполнения этой цели существует тег <iframe> - так называемый плавающий фрейм.

Данный тег имеет ряд атрибутов:

src - обязательный атрибут, указывающий путь к открываемой странице
width - ширина плавающего фрейма в пикселях или процентах
height - высота плавающего фрейма

scrolling - показ полосы прокрутки

· no - никогда не показывать полосу прокрутки,

· yes - всегда показывать,

· auto - показывать в том случае если она необходима.

align - выравнивание пваюшего фрейма

· left - слева

· right - справа

· top - выше

· bottom - ниже

frameborder - наличие рамки вокруг плавающего фрейма

· 1 - включить рамку

· 0- выключить рамку

Всё вместе пишется так:

<iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1" ></iframe>

Пример документа с плавающим фреймом:

<html>
<head>
<title>Плавающий фрейм</title>
</head>
<body>
<center><h2>Плавающий фрейм</h2></center>
В эту страницу введён так называемый "плавающий фрейм".
В отдельном окне он открывает для показа другой документ html.
<br>
<iframe src="primer.html" width="250" height="250" align ="left" scrolling="auto" frameborder="1"></iframe>
<br>
… … …
<br>
</body>
</html>

Noframes

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

Теперь представьте, что Вы построили свой сайт с помощью фреймовой структуры и вот некоторые посетители, может быть сами не подозревая в чем проблема, пытаются открыть Ваш сайт, а их браузер выдает ошибку! Что они подумают о Вашем сайте? я думаю, что то типа: "Фу.. ерунда какая то.. больше сроду сюда не зайду!".

Для того что бы дать понять пользователю, что его браузер/настройки браузера не поддерживают фреймы существует тег <noframes>.

Тег <noframes> выводит текст, заключенный в него в том случае, если браузер пользователя не поддерживает фреймы или они принудительно выключены в его настройках. Если же фреймы поддерживаются браузером пользователя, то данный тег попросту игнорируется.

Пример:

<html>
<head>
<title>фреймы</title>
</head>
<frameset cols="*,800,*" border="0">
<noframes>Извините, но Ваш браузер не поддерживает фреймы..</noframes>
<frame src="dekor.html" scrolling="no" noresize>
<frameset rows="120,*" border="0">
<frame src="logotype.html" scrolling="no" marginwidth="0" marginheight="0" noresize>
<frameset cols="200,600" border="0">
<frame src="menu.html" noresize>
<frame src="text.html" marginwidth="10" marginheight="10" noresize>
</frameset>
</frameset>
<frame src="dekor.html" scrolling="no" noresize>
</frameset>
</html>

Результат примера будет заметен, если Ваш браузер и в правду не поддерживает фреймы (тут я надолго задумался.. :) если это так, то зачем вообще читать эту главу?) или же Вы в качестве эксперимента выключили поддержку фреймов в своём браузере.

Тег <noframes> должен быть расположен внутри тега <frameset>

С плавающим фреймом всё ещё более просто, достаточно написать нужный текст между <iframe> </iframe> и данная надпись будет выводится на экран, в том случае если браузер не поддерживает фреймы.

Вот так:

Полезные советы:

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

· Используйте тег <noframes>. Помните что если в Вашем браузере сайт работает и отображается так как Вы и задумывали то у других пользователей дела могут обстоять иначе!

<8 9 101112 13 14 >

Дата добавления: 2016-02-02; просмотров: 483;