Вам нужно авторизоваться. Забыли пароль? Регистрация Январь вт. 06 2009 г. в 11:13
Навигация
Поиск
Рассылка



Отписаться
Экспорт новостей

rss2.0

Наш баннер
Мы будем рады видеть нашу кнопку по интернету:

Reset-me electronics - статьи о моддинге и наворотах ПК.

Партнёры
Статьи

Нужно ли использовать фреймы?

Автор: Kot
Источник: reset-me.wcps.ru
Добавлено: 2005-06-28 22:39:09

Для начала давайте решим, для чего используются фреймы. Они появились ещё во второй версии Netscape Navigator-а и предназначались для облегчения навигации при создании страничек (так тогда казалось).

Техника использования фреймов заключается в том, что все окно броузера делится на несколько областей, в каждую из которых можно загрузить независимую страничку. Кроме этого, был введён механизм, позволяющий управлять любой страничкой из любого окна. Например, можно в одном окне организовать меню сайта, а в другом показывать его содержимое. Причём, щелчок по ссылке в окне меню открывал страничку совсем в другом окне. Такое построение сайта встречается чаще всего, но ничто не мешает нам сделать не два фрейма, а, например, 3, 4, 5 и т.д. Но пока не будем торопиться с обсуждением механизма работы фреймов, а поговорим об их недостатках и уместности применения.

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

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

  • в случае попадания не на первую страничку сайта не существует "официального" способа перейти на первую страничку сайта - приходится вручную редактировать путь в адресной строке броузера;

  • ввиду того, что фреймовая структура сайта придаёт ему достаточно узнаваемый вид, большинство подобных страничек выглядит достаточно однообразно;

  • невозможно поставить закладку на внутреннюю страничку сайта. А это уже серьёзно! Представьте, что Вы наткнулись на очень интересную статью и желаете, например, поместить ссылку в свою коллекцию или послать другу её адрес. Так вот, ни то, ни другое Вы сделать не сможете - фреймы скрывают истинный адрес странички. Ради справедливости нужно сказать, что этот адрес всё-же можно узнать, открывая ссылку в новом окне;

  • проблемы отображения странички в разных версиях броузеров. От этого уже никуда не уйти и это предложение можно автоматически добавлять практически к любым расширениям HTML.

В каких случаях уместно применять фреймы?

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

Тем не менее, в каких случаях оправданно их применение?

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

Но есть один удачный способ применения фреймов - создание системы помощи для сложных сайтов. В этом случае очень удобно открывать новое окно, где уже и используется фреймовая структура. Это очень похоже на встроенную систему помощи Windows.

Механизм работы фреймов

Если всё-же решено применять фреймы, то давайте разберёмся с тем, как правильно писать HTML-код и работать с ними.

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

index.htm - страничка-контейнер



Frame page







<br> <p>Ваш броузер не поддерживает фреймы, пожалуйста, обновите его.</p><br>

И сразу напишем код для страничек, входящих в фреймовую структуру:

left.htm - страничка, содержащая меню



Menu page




topic #1

topic #2

topic #3

topic #4



right.htm - страничка, в которой будут отображаться основные статьи сайта



Content page




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




Как можно заметить, страничка-контейнер отличается от обычной лишь тем, что вместо тега мы используем тег , в котором непосредственно и определяются фреймы. Но сам по себе он описывает лишь количество и размеры фреймов и не описывает странички, входящие во фрейм. Это можно сделать при помощи тега . Давайте-ка подробнее разберём наш пример:




В параметре тега мы определяем, что страничка будет разделена по-вертикали и состоять из двух колонок (если нам нужно разделить окно по-горизонтали, то тогда вместо параметра cols нужно применять параметр rows).

В принципе, колонок может быть и больше, чем две. Их количество определяется значением параметра cols (rows), которое представляет собой цифры и знаки, разделённые запятыми. Каждое значение определяет ширину колонки. Ширина, как, впрочем, и высота, может задаваться в процентах, пикселах и при помощи знака звёздочки, обозначающей - "всё оставшееся пространство". Вот примеры определения фреймов:

- 2 колонки, одна из которых имеет фиксированную ширину в 200 пикселей;

- 3 строчки, высоты которых определены в процентах от высоты окна броузера;

- то же самое, что и предыдущая строчка, но записанная при помощи звёздочек. Цифра перед звёздочкой указывает количество повторов. Ширина одной звёздочки определяется как среднее арифметическое между всеми звёздочками в строке с учетом коэффициентов перед ними.

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

  • src - URL странички, которая будет помещена во фрейм;
  • name - имя странички, по которому к ней можно будет обращаться;
  • scrolling, noresize, ... - параметры, управляющие поведением фрейма, - возможностью изменять пользователем ширину фрейма и управлять появлением полосы прокрутки в случае, если содержимое странички не помещается на экране.

Обратите внимание на параметр name - он является очень важным и позволяет нам манипулировать с фреймом. Как же это осуществляется? Внимательно рассмотрим файл left.htm, в котором содержится наше меню. В самом файле нет ничего необычного, а вот в написании ссылок на странички есть. Если присмотреться, то можно заметить, что добавился ещё один параметр target="content" - вот именно он и отвечает за то, в каком окне будет загружаться файл по ссылке:

topic #1

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

Кроме имён, определяемых непосредственно нами, есть часть уже определённых, и наиболее важные из них следующие:

  • _blank - открывает ссылку в новом окне;
  • _top - открывает ссылку на всё окно, если она находилась во фрейме. Другими словами, она разрушает структуру фрейма и загружает файл во всё окно;
  • _parent - открывает ссылку в родительском окне.

До сих пор в качестве элементов контейнера мы использовали простые теги , но мы также можем использовать и контейнер . В этом случае мы получаем т.н. вложенные фреймы. Вот пример:







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

В общем случае можно использовать сколько угодно фреймов (в пределах разумного, конечно).

Небольшое замечание. В принципе, в качестве источника фрейма может быть указана не HTML-страничка, а рисунок в формате GIF или JPEG, но применение такого механизма считается дурным тоном.

Теперь о подводных камешках. Самый большой из них следующий - Netscape Navigator неточно соблюдает ширину фрейма в    пикселах и может принимать лишь некие кратные шаги. Поэтому в случае, если возникла такая проблема, нужно просто подкорректировать ширину фрейма под стандарты Netscape.

Кстати, рамку фрейма можно убрать, указав параметр frameborder=0.

И ещё одно! Для броузеров, которые не понимают фреймов, есть специальный тег </i>. Как раз он и определяет, что увидит пользователь с броузером, который не поддерживает фреймов. Обычно в этом месте либо размещают надпись, подобную той, что написал я, либо указывают список основных разделов сайта, чтобы человек всё-же смог просмотреть странички.</p> <br> <br> <!--основной текст--></p><center> <a href=http://reset-me.net.ru/catalog/tema/5/1.html> Оглавление</a> &nbsp; | &nbsp;<a href=#index>?? ????</a></center> <br><script language=javascript type=text/javascript> <!-- function JScheckForm(html){ if (html.per1.value == "") { Mess('Пожалуйста укажите Комментарий','per1'); return false;} if (html.vote_key.value == "") { Mess('Пожалуйста укажите Key','vote_key'); return false;} if (html.per3.value == "") { Mess('Пожалуйста укажите Ваш E-Mail','per3'); return false;} if (html.per2.value == "") { Mess('Пожалуйста укажите Nik','per2'); return false;} function Mess (mms,str){ html.elements[str].focus () ; alert (mms) ; } bbstyle(-1); return true; } --> </script> <script language="JavaScript"> <!-- if(document.getElementById&&!document.all){ns6=1;}else{ns6=0;} var agtbrw=navigator.userAgent.toLowerCase(); var operaaa=(agtbrw.indexOf('opera')!=-1); var head="display:''"; var folder=''; function expandit(curobj,hide){ if(document.getElementById(curobj)){ folder=document.getElementById(curobj).style; }else{ if(ns6==1||operaaa==true){ folder=curobj.nextSibling.nextSibling.style; }else{ folder=document.all[curobj.sourceIndex+1].style; } } if (folder.display=="none"){folder.display="";}else{folder.display="none";} if(document.getElementById(hide)){ hidden=document.getElementById(hide).style; if (hidden.display=="none"){hidden.display="";}else{hidden.display="none";} } } //--> </script> <a name='add_comment'></a><br> <div class='blockTitle'><a onclick='expandit("hide")' style='cursor : hand;'>Добавить Комментарий</a></div> <div style='display:none' id=hide> <TABLE width='400' border='0' cellspacing='1' align='center'> <form action="http://reset-me.net.ru/comment/add.html" method=post name=form onsubmit="return JScheckForm(this)"> <TR class=even><TD>Nik:</TD><TD><input type='text' name='per2' value=''></TD></TR> <TR class=odd><TD>Ваш E-Mail:</TD><TD><input type='text' name='per3' value=''></TD></TR> <TR class=even><TD colspan=2>Комментарий:</TD></TR> <TR><TD colspan=2><textarea name="per1" cols="65" rows="8" style="width: 100%;"></textarea></TD></TR> <TR class=even><TD colspan=2>HTML-теги Вырезаются!!!</TD></TR> <TR class=odd><TD colspan=2> <script language='JavaScript' type='text/javascript'> <!-- function reload () { var rndval = new Date().getTime(); document.getElementById('dle-captcha').innerHTML = '<a onclick="reload(); return false;" style="cursor: pointer;"><img id="key_img" src="/php/images.php?rndval=' + rndval + '" border="0" alt=""></a>'; }; function test_captcha (v_key) { var key_filter = /^([a-zA-Z0-9])+$/; if (v_key.value!='' && !key_filter.test(v_key.value)) { alert('a-z0-9'); v_key.focus();} } --> </script> <TABLE cellSpacing=1 cellPadding=3 width='100%' border=0><tr> <td>* Введите защитный код из символов, отображенных в виде изображения.<br><small>Если вы не можете прочитать код с изображения, нажмите на изображение для генерации нового вида кода.</small></td> <td>&nbsp;</td><td align=right><span id="dle-captcha"><a onclick="reload(); return false;" style="cursor: pointer;"><img id="key_img" src="/php/images.php" border="0" alt=""></a></span></td><td> <input type="text" name="vote_key" size="6" maxlength="6" onkeyup="test_captcha(this);" id="vote_key"> </td> </tr> </TABLE> </TD></TR> <TR class=even><TD> </TD><TD> <input type='hidden' name='per4' value="23"> <input type='hidden' name='per5' value="&fla=stat&cat_id=5&nums=23"> <input type='hidden' name='mod' value="catalog"> <input type='hidden' name='ncomment' value=""> <input type='hidden' name='tbl' value=""> <input type='submit' value="Добавить"></TD></TR> </form></table></div></div> </fieldset> <!-- End center-center blocks loop --> </td> </tr> </table> <!-- End display center blocks --> <div id="content"> Тема страницы:<center><h1>Статьи о сайтостроении Нужно ли использовать фреймы? Сайт о моддинге компьютера, электронных штучках и разных наворотах. На нашем сайте собраны статьи, схемы, картинки, на тему моддинг PC, электронные схемы для самостоятельной сборки, подробные описания, фото. Статьи вэб мастерам. Статьи 2009-01-06 11_13_53</h1></center> <span id="begunAdsSpan2"></span> <script type="text/javascript"> var begun_auto_colors = new Array(); var begun_auto_fonts_size = new Array(); var begun_auto_pad = 111505940; <!-- идентификатор площадки --> var begun_auto_limit = 6; <!-- число объявлений выводимых на площадке --> var begun_auto_width = '350'; <!-- ширина блока объявлений --> begun_auto_colors[0] = '#0000CC'; <!-- цвет ссылки объявлений --> begun_auto_colors[1] = '#000000'; <!-- цвет текста объявлений --> begun_auto_colors[2] = '#00CC00'; <!-- цвет домена объявлений --> begun_auto_colors[3] = '#e5e8ee'; <!-- цвет фона блока объявлений --> begun_auto_fonts_size[0] = '11pt'; <!-- р-мер шрифта ссылки объявлений --> begun_auto_fonts_size[1] = '10pt'; <!-- р-мер шрифта текста объявления --> begun_auto_fonts_size[2] = '10pt'; <!-- р-мер шрифта домена объявления --> begun_auto_fonts_size[3] = '8pt'; <!-- р-мер шрифта заглушки --> var begun_block_type = 'Vertical'; <!-- тип блока --> <!-- код для отображения нескольких блоков на странице --> begun_multispan = 1; window.begun_spans = new Array( {'span_id':'begunAdsSpan1','limit':3,'width':500}, {'span_id':'begunAdsSpan2','limit':3,'width':500} ) </script> <script src="http://autocontext.begun.ru/autocontext.js" language="javascript"></script> <!-- код для подсчета показов объявлений --> <script src="http://zorkabiz.ru/js/search.js" language="javascript"></script> </div> </td> <td id="rightcolumn"> <!-- Start right blocks loop --> <!-- БЛОК r --> <div class="blockTitle"> <span class=menu>Статьи</span> </div> <div class="blockContent"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <TBODY> <tr><td id="mainmenu"><small><a class="menuMain" href=http://reset-me.net.ru/catalog/tema/1.html title="">Моддинг. (навороты для компьютера) [17]</a> <a class="menuMain" href=http://reset-me.net.ru/catalog/tema/2.html title="">Аудио [11]</a> <a class="menuMain" href=http://reset-me.net.ru/catalog/tema/3.html title="">Шпионские штуки [7]</a> <a class="menuMain" href=http://reset-me.net.ru/catalog/tema/4.html title="">Схемы для PC [12]</a> <a class="menuTop" href=http://reset-me.net.ru/catalog/tema/5.html title=""><b>Статьи о сайтостроении</b> [22]</a> <a class="menuMain" href=http://reset-me.net.ru/catalog/tema/6.html title="">NOT FOR USE [5]</a> <a class="menuMain" href=http://reset-me.net.ru/catalog/tema/7.html title="">Распиновки (распайки) [7]</a> <a class="menuMain" href=http://reset-me.net.ru/catalog/tema/8.html title="">Всё об IRC [8]</a> </small></td></tr></TBODY></TABLE></div> <!-- КОНЕЦ БЛОК --><!-- БЛОК r --> <div class="blockTitle"> <span class=menu>Статьи о сайтостроении</span> </div> <div class="blockContent"> <table border="0" cellpadding="0" cellspacing="0"> <TBODY> <tr><td id="mainmenu"><small><a class=menuMain href="http://reset-me.net.ru/catalog/stat/5/1/34.html" title="Скрипт добавки новостей на ваш сайт через собственный web-интерфейс.">Скрипт добавки новостей н</a> <a class=menuMain href="http://reset-me.net.ru/catalog/stat/5/1/33.html" title="Построение баннера на основе Js документа.">Построение баннера на осн</a> <a class=menuMain href="http://reset-me.net.ru/catalog/stat/5/1/32.html" title="Разблокировка правой кнопки мыши на заблокированном сайте">Разблокировка правой кноп</a> <a class=menuMain href="http://reset-me.net.ru/catalog/stat/5/1/31.html" title="Музыкальная ссылка">Музыкальная ссылка</a> <a class=menuMain href="http://reset-me.net.ru/catalog/stat/5/1/30.html" title="Установка индивидуального курсора на сайт">Установка индивидуального</a> <a class=menuMain href="http://reset-me.net.ru/catalog/stat/5/1/29.html" title="Создаем собственный интернет магазин">Создаем собственный интер</a> <a class=menuMain href="http://reset-me.net.ru/catalog/stat/5/1/28.html" title="Создаем статистику на подобие HotLog">Создаем статистику на под</a> <a class=menuMain href="http://reset-me.net.ru/catalog/stat/5/1/27.html" title="Фильтр матерных слов для Гостевой Книги">Фильтр матерных слов для </a> <a class=menuMain href="http://reset-me.net.ru/catalog/stat/5/1/26.html" title="Установка связи с вашими посетителями">Установка связи с вашими </a> <a class=menuMain href="http://reset-me.net.ru/catalog/stat/5/1/25.html" title="Немного о WAP">Немного о WAP</a> <a class=menuMain href="http://reset-me.net.ru/catalog/stat/5/1/24.html" title="Музыка на вашем сайте">Музыка на вашем сайте</a> <a class=menuTop href="http://reset-me.net.ru/catalog/stat/5/1/23.html" title="Нужно ли использовать фреймы?">Нужно ли использовать фре</a> <a class=menuMain href="http://reset-me.net.ru/catalog/stat/5/1/21.html" title="Некоторые функции JS документов">Некоторые функции JS доку</a> <a class=menuMain href="http://reset-me.net.ru/catalog/stat/5/1/20.html" title="Создание собственного сайта">Создание собственного сай</a> <a class=menuMain href="http://reset-me.net.ru/catalog/stat/5/1/19.html" title="Привлечение посетителей на ваш сайт">Привлечение посетителей н</a> </small></td></tr></TBODY></TABLE></div> <!-- КОНЕЦ БЛОК --><!-- БЛОК r --> <div class="blockTitle"> <span class=menu>Вход</span></div> <div class="blockContent"> <form action="/aut.php" method="post"> <input type=hidden name=actions value=add> Логин: <br> <input type="text" name="logines" size="10"><br> Пароль: <br> <input type="password" name="passwdr" size="10"><br> <input type="submit" value="Вход"><br> <input name="tosave" type="checkbox" value=1> Запомнить меня </form>Вам нужно авторизоваться.<br> <a href=/index.php?nma=user&fla=pass>Забыли пароль?</a><br> <a href=/index.php?nma=user&fla=reg>Регистрация</a><br></div> <!-- КОНЕЦ БЛОК --><!-- БЛОК r --> <div class="blockTitle"> <span class=menu>На сайте</span></div> <div class="blockContent"> Гостей: 5<br>Пользователей: 0<br><br><br></div> <!-- КОНЕЦ БЛОК --><!-- БЛОК r --> <div class="blockTitle"> <span class=menu>10 статей</span></div> <div class="blockContent"> • <a href=/index.php?nma=catalog&fla=stat&cat_id=1&page=1&nums=102>Интересное о процессорах</a><br>• <a href=/index.php?nma=catalog&fla=stat&cat_id=3&page=1&nums=101>Опыты с высоковольтным генератором</a><br>• <a href=/index.php?nma=catalog&fla=stat&cat_id=1&page=1&nums=98>Делаем неоновую лампу сами</a><br>• <a href=/index.php?nma=catalog&fla=stat&cat_id=1&page=1&nums=97>Упраляй своим путером на расстоянии! (альтернативный вариант)</a><br>• <a href=/index.php?nma=catalog&fla=stat&cat_id=1&page=1&nums=95>Светодиодный индикатор Winamp</a><br>• <a href=/index.php?nma=catalog&fla=stat&cat_id=2&page=1&nums=94>МР3 плеер</a><br>• <a href=/index.php?nma=catalog&fla=stat&cat_id=2&page=1&nums=93>МР3 плеер</a><br>• <a href=/index.php?nma=catalog&fla=stat&cat_id=2&page=1&nums=92>МР3 плеер</a><br>• <a href=/index.php?nma=catalog&fla=stat&cat_id=2&page=1&nums=91>MP3 плеер</a><br>• <a href=/index.php?nma=catalog&fla=stat&cat_id=2&page=1&nums=89>MP3 плеер</a><br></div> <!-- КОНЕЦ БЛОК --><!-- БЛОК r --> <div class="blockTitle"> <span class=menu>10 файлов</span></div> <div class="blockContent"> • <a href="http://reset-me.net.ru/downloads/index/5/1/19/id/2/5/45.html" title='Расчёты- Резисторы'>Резисторы</a><br> • <a href="http://reset-me.net.ru/downloads/index/5/1/19/id/2/10/44.html" title='Акустика- JBL-SpeakerShop'>JBL-SpeakerShop</a><br> • <a href="http://reset-me.net.ru/downloads/index/5/1/19/id/2/10/43.html" title='Акустика- Tone Stack Calculator'>Tone Stack Calculator</a><br> • <a href="http://reset-me.net.ru/downloads/index/5/1/19/id/2/10/42.html" title='Акустика- Coils-Eng&Rus'>Coils-Eng&Rus</a><br> • <a href="http://reset-me.net.ru/downloads/index/5/1/19/id/2/10/41.html" title='Акустика- Passive Crossovers'>Passive Crossovers</a><br> • <a href="http://reset-me.net.ru/downloads/index/5/1/19/id/2/10/40.html" title='Акустика- Transfor'>Transfor</a><br> • <a href="http://reset-me.net.ru/downloads/index/5/1/19/id/2/10/39.html" title='Акустика- PowerPort'>PowerPort</a><br> • <a href="http://reset-me.net.ru/downloads/index/5/1/19/id/2/10/38.html" title='Акустика- Speaker 6'>Speaker 6</a><br> • <a href="http://reset-me.net.ru/downloads/index/5/1/19/id/2/10/37.html" title='Акустика- BlauBox'>BlauBox</a><br> • <a href="http://reset-me.net.ru/downloads/index/5/1/19/id/2/10/36.html" title='Акустика- WinSpeakerz 2.1 Demo'>WinSpeakerz 2.1 Demo</a><br> </div> <!-- КОНЕЦ БЛОК --><br> <span class=menu>Реклама</span> <br> </td></tr></table> </div> <!-- КОНЕЦ БЛОК --> <!-- End right blocks loop --> </td> </tr> </table> <table cellspacing="0" cellpadding="0"> <tr id="footerbar"> <td>Работает под управлением <a href="http://wcps.ru">WebCodePortalSystem <small>v. 5.1</small></a></td> </tr> </table> <div class="resultMsg">Перепечатка материалов приветствуется при прямой ссылке на www.reset-me.net.ru<br>Copyright © 2005-2007 Reset-me electronics </div> </body> </html><p style="font-size: 10px;" align=center>Страница сгенерирована за <b>0.287</b> сек..</p>