Статьи » Дизайн » Web-Design » Подгрузка меню для сайта с фреймами

Фреймы в HTML позволяют авторам представлять документы в нескольких разделах, которые могут быть независимыми или вложенными окнами. Например, в одном окне может располагаться меню для управления сайтом, а в другом отдельные страницы, перемещаться между которыми можно с помощью меню. Для задания фреймов необходимо как минимум три HTML документа: два первых - документы, загружаемые в разные фреймы, а третий - документ, в котором сказано, что окно браузера необходимо разбить на 2 фрейма и подгрузить в эти фреймы 2 HTML документа. Итак, что должен содержать этот документ? Вот примет простейшего HTML документа:



Как видно из примера, этот документ не должен иметь тега . Сами фреймы задаются тегами , причем в одном HTML документе может быть несколько тегов . В нашем случае в теге указано, что нужно создать два вертикальных фрейма, причем первый должен иметь ширину 200 точек, а второй - все, что осталось (cols=200,*), ширину фреймов можно также задавать в долях и в процентах, например, cols="20%,80%" означает, что будут созданы 2 вертикальных фрейма с шириной 20 и 80 процентов от ширины экрана, также можно создавать и горизонтальные фреймы, если вместо cols указать rows. Параметр frameBorder задает ширину границы между фреймами, параметр frameSpacing - ширину пустого пространства между ними. С помощью тегов можно задавать имя подгружаемых файлов (параметр srс), параметр scrolling отвечает за появление полос прокрутки, если размеры HTML документа превышают размеры фрейма, в нашем случае полосы прокрутки у первого фрейма отсутствуют.

Теперь, когда мы научились загружать различные HTML документы во фреймы, можно заняться управлением содержимым одного фрейма из другого. Такая задача может встать при необходимости сделать меню управления сайтом. Чтобы при нажатии на ссылку в одном фрейме загружался документ в другой фрейм, необходимо в теге параметр target сделать равным имени фрейма, в который необходимо загрузить HTML документ. В нашем случае если сделать ссылку в фрейме menu: doc, то при нажатии на эту ссылку документ doc.htm будет загружаться в фрейм site.

Многие Web-мастера очень плохо относятся к фреймам. Я же связался с фреймами для того, чтобы меню сайта не загружалось заново при переходе на каждую страницу. Однако у этой медали есть и другая сторона: Вам когда-нибудь встречались HTML документы, на которых полностью отсутствуют ссылки на другие страницы? Если встречались, то я готов поспорить, что эти документы должны были подгружаться во фрейм, а все ссылки должны быть расположены на панели управления сайтом. Но пользователь, который зайдет на эту страницу, не будет разбираться и уйдет с нее, а Ваш сайт будет зарабатывать плохую репутацию. Как пользователь вообще выходит на такие страницы? Здесь все просто - через поисковую систему.

Но и у этой проблемы есть решения.

Конечно, здесь средствами самого языка HTML не обойтись, а придется как минимум использовать JavaScript, а то и PERL (можно PHP или CGI-приложение, написанное на чем угодно).

1. Первое, что нужно сделать - проверить, есть ли фрейм панели управления сайтом. Если есть, то ничего делать не надо.

2. Если фрейма нет, то необходимо изменить код данной страницы или вместо данной загрузить новую.

Проверку на наличие фреймов можно осуществлять в javascript:

<script language="JavaScript">
<!--
function prow ()
{
if (parent.frames.length==0)
{
location.href="http://www.zahodi-ka.ru/doc_.htm";
}
};
prow();
//-->
</script>

Эта процедура запускается при начале загрузки HTML документа, иногда пользователь может не понять, в чем дело (настолько быстро осуществляется переход на новый документ). Если параметр "parent.frames.length" имеет значение 0, то родительский фрейм и, следовательно фрейм с меню отсутствуют и должен загружаться другой HTML документ. Если при загрузке документа doc.htm процедура не обнаружит фрейма с меню (если в doc.htm содержится эта процедура), то URL текущего документа изменится на http://www.zahodi-ka.ru/doc_.htm, то есть будет загружаться doc_.htm. В нашем случае в doc_.htm содержится следующий код:

<html>
<head>
</head>
<FRAMESET frameBorder=0 frameSpacing=0 cols=200,*>
<FRAME name="panel" src="menu.htm" scrolling=no>
<FRAME name="site" src="ИМЯ_ДОКУМЕНТА.htm" noresize>
</FRAMESET>
</html>

Итак все работает, только есть один недостаток: для каждого HTML документа должен быть такой документ, в котором содержалась бы информация о загрузке первого в отдельный фрейм.

Здесь легко усмотреть закономерность: все эти дополнительные HTML документы должны быть одинаковые и похожие на вышеприведенный код, только различаться параметром ИМЯ_ДОКУМЕНТА. Значит вывод таких документов можно поручить скрипту, а ИМЯ_ДОКУМЕНТА можно сообщать в качестве параметра. Код новой процедуры будет тот же самый, только отличаться новым URL, теперь будет не загружаться новый документ, а подаваться запрос к CGI (PHP и т.д.): document.URL="http://www.zahodi-ka.ru/zagruzka.pl?a= ИМЯ_ДОКУМЕНТА". В таком случае будет запущен скрипт zagruzka.pl, а в качестве параметра будет передано ИМЯ_ДОКУМЕНТА. Этот скрипт пишите кто на чем умеет (я, например, на PERL). Если ты ни на чем не умеешь, пиши на PERL:

#!/usr/bin/perl

$str=$ENV{'QUERY_STRING'};
#записываем в переменную $str ИМЯ_ДОКУМЕНТА

$c="\"";
print "Content-Type: text/html\n\n";
print "<html><head></head><FRAMESET frameBorder=0 frameSpacing=0 cols=200,*>\n";
print "<FRAME name=menu src=".$c."http://www.zahodi-ka.ru/menu.htm".$c." noresize>\n";
print "<FRAME name=site src=".$c."http://www.zahodi-ka.ru/".$str.$c." noresize>\n";
print "</FRAMESET></html>\n";

Пример работы данного скрипта смотрите на сайте http://www.zahodi-ka.ru: запишите в строке браузера путь к компьютерной барахолке: http://www.zahodi-ka.ru/baraholka/komp/baraholka.pl и смотрите, что произойдет. Должно загрузиться меню и страничка компьютерной барахолки.

Вот и все, работает; все, что Вам осталось сделать - заменить в этих примерах URL'ы на свои.