Приводим фреймы в опрятный вид.В последнем нашем примере первое, что бросается в глаза, это целая куча полос прокруток, которые стоят где надо и не надо.. Давайте от них избавимся, ну можно и оставить кое где.. Делается это при помощи атрибута scrolling - тега <frame>, он может иметь одно из трёх значений:
Пример: <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 - показ полосы прокрутки
Всё вместе пишется так: <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> и данная надпись будет выводится на экран, в том случае если браузер не поддерживает фреймы. Вот так: <iframe src="primer.html" width="300" height="250" align ="left" scrolling="auto" frameborder="1">Извините, но Ваш браузер не поддерживает фреймы..</iframe>Полезные советы:
|
