Правильная ссылка на эту страницу
http://az-design.ru/Projects/WebStat/WebSiteStore/01_006.shtml

Работа с фреймами

       Фреймы являются очень удобным способом разбиения окна на части. В результате меню будет видно всегда, независимо от размера статьи и положения ее на экране. При этом фреймы удобны для создания "резинового" дизайна.
       Не смотря на удобства при использовании фреймов возникают некоторые проблемы, которые необходимо учитывать:
       — файл Index не является информативным, он занимается разбивкой окна. Поэтому поисковик не знает к какой теме его отнести.
       — в результатах поиска указывается ссылка на отдельную страницу, которая не умеет делить страницу на фреймы. Использование промежуточных страниц, которые формируют фреймы, тоже решает не ситуацию.
       Решение есть при использовании встроенных JavaScript-ов. Но все по порядку?

       Основы работы с фреймами
       Пример фреймовой структуры для сайта az-design.ru
       Динамическая фреймовая структура для сайта az-design.ru
       Построение главного меню для сайта az-design.ru

Основы работы с фреймами

Использование тега <frameset> для создания фреймсодержащего документа

       Термин фреймсодержащий документ (frametset document) применяется к HTML-документам, в которых определен контейнер <frameset>...</frameset>. Этот контейнер имеет следующий вид:

<frameset [rows="rowspec" | cols="colspec"]>
<frame [ name="frameName" ]
       src="fileName|Url"
       [ marginwidth=w ]
       [ marginheight=h ]
       [ onLoad="JsCommand" ]
       [ scrolling=yes|no|auto ]
       [ noresize ]>
</frameset>

       Тег <frameset> означает, что текущий документ является фреймсодержащим, и при его интерпретации броузер создает необходимое количество фреймов. С помощью вложенных тегов <frame> задаются адреса документов, которые должны загружаться во фреймы. Значения атрибутов rows и cols определяют количество и размеры фреймов. Размеры можно указывапть как в процентах, так и в пикселях. Если после числового значения знак процента (%) отсутствует, это значит, что размер задан в пикселях. Значениями таких атрибутов являются строки, поэтому при определении размеров нескольких фреймов следует ввести несколько значений и разделить их запятыми. Размер фрейма может быть задан следующим образом:
       — в пикселях
       — в процентах
       — в трафаретных символах
       При указании размеров перечисленные способы можно комбинировать. При этом порядок следования атрибутов не имеет значения.

Размер фрейма в пикселях
       Если в качестве значения атрибута rows или cols задано только число, то размер фрейма указан в пикселях. Например, тег

<frameset rows="300,200">

       создает два горизонтальных фрейма высотой 300 и 200 пикселов. Такой способ определения размеров фреймов считается наименее привлекательным. На фреймсодержащий документ, ни JavaScript-программа не могут управлять размером главного окна браузера (хотя с помощью программ можно задавать размеры динамически создаваемых окон). Когда размер фреймов указан в пикселях, документ иногда становится непривлекательным, поскольку в этом случае невозможно предугадать реальный размер окна броузера.

Размер фрейма в процентах
       Для создания фреймов, размеры которых зависят от величины главного окна броузера, используются значения в диапазоне от 1 до 100%. При этом числовые значения, задаваемые в атрибутах rows и cols, должны заканчиваться знаком процента (%). Например, тег

<frameset rows="50%,50%">

       позволяет образовать два горизонтальных фрейма одинакового размера. Задавая размеры в процентах для нескольких фреймов, следите за тем, чтобы сумма всех размеров равнялась 100.

Размер фрейма в трафаретных символах
       В качестве трафаретных символов (wildcard) применяются символы звездочки (*). Трафаретные символы могут применяться сами по себе или в сочетании с определенными значениями. Напрример, если в значении атрибута rows или cols указан только символ звездочки (*), то броузер выделит для единственного фрейма всю рабочую облать окна. Ели наряду с трафаретными символом используется конкретное значение, то сначала создаются фреймы с явно заданными размерами, а затем оставшееся в окне место выделяется для остальных фреймов. В частности, с помощью тега

<frameset rows="70%,*">

       будет создано два фрейма: высота первого составит 70% высоты главного окна броузера, а для размещения второго будет выделена оставшаяся часть рабочей области (в данном случае 30%). Если перед символом звездочки (*) помещено число, то относительный размер соответствующего фрейма увеличивается в заданное число раз. Например, тег

<frameset rows=2*,*">

       создает два фрейма, первый из которых вдвое (2*) выше второго (*).
       Кроме того, фреймы могут быть вложены в друг друга, т.е. содержать фреймсодержащие документы. Эта возможность используется, когда нужно разбить отдельные документы на более мелкие части.

Другие атрибуты фрейма
       В качестве значения атрибута src тега <frame> применяются как имена локальных файлов, так и адреса URL. Таким образом, загрузка во фреймы локальных и сетевых документов обеспечивается благодаря именно этому атрибуту.
       Значения атрибутов marginwidth и marginheight соответствуют толщине рамки фрейма.
       Атрибут name тега <frame> служит для задания имени фрейма и использовать его необязательно. Если атрибут name для фрейма не определен, то обратиться к фрейму в JavaScript-программе можно только по его порядковому номеру, используемому в качестве индекса массива frames (индексы начинаются с нуля). Таким образом, выражение frames[0] ссылается на первый фрейм фремсодержащего документа, выражение frames[1] 0 на второй и т.д. Атрибут обработчика события onLoad позволяет задавать операторы языка JavaScript, которые выполняются при загрузке документа в текущий фрейм, т.е. при возникновения события Load.
       Значение атрибута scrolling определяет наличие во фрейме полос прокрутки. Параметр Auto указывает, что полоса прокрутки создается автоматически при необходимости.
       Если задать атрибут noresize, то размеры фрейма станут фиксированными, и пользователь не сможет изменить их с помощью мыши.
       Кроме того, следует помнить, что фреймсодержащие документы отличаются от обычных HTML-документов тем, что телом документа является контейнер <frameset>. Этот контейнер нельзя поместить в контейнер <body> и наоборот. Несмотря на то, что при подобных ошибках броузеры не выводят предупреждающих сообщений, документ, в котором допущена ошибка, отображается пустым. Поэтому фреймсодержащие документы HTML-документы вместо контейнера <body> содержит контейнер <frameset>.

Загрузка документа в определенный фрейм
       Для того чтобы при активизации гиперсвязи документ загружался в определенный фрейм, в теге <a href>, задающим гиперсвязь, используется атрибут target

<a href target="frame2" src="http://www.az-libr.ru">

документ с адресом URL http://www.az-libr.ru загружается во фрейм с именем "frame2".

Зарезервированное имя Описание
_blank Документ загружается в новое окно
_self Документ загружается в текущее окно или текущий фрейм
_parent Документ загружается в окно, являющееся родительским для текущего фрейма (если родительского окна не существует, документ загружается в текущее окно или текущий фрейм; в этом случае _parent означает то же, что и _self)
_top Документ загружается в окно верхнего уровня (если текущее окно не имеет родительского окна, _top эквивалентно _self)

 

Пример фремовой структуры для сайта az-design.ru

       В качестве примера разберем фреймовую структуру сайта az-design.ru

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
   <link rel="icon" href="favicon.ico" type="image/x-icon" />
   <META NAME="Description" CONTENT="ЗАО \"АЗет Дизайн\"">
   <TITLE>AZ Design Corp. - разработка надежных баз данных</TITLE>
</HEAD>
<FRAMESET ROWS="100,*" BORDER=0 FRAMEBORDER=0>
    <FRAMESET COLS="150,*" BORDER=0 FRAMEBORDER=0>
       <FRAME SRC="mn/Logo.htm"  BORDER=0 FRAMEBORDER=NO SCROLLING=NO
              noresize NAME="Logo" marginwidth=0 marginheight=0>
       <FRAMESET ROWS="61,*" BORDER=0 FRAMEBORDER=0>
           <FRAME SRC="mn/HdProject.shtml"  BORDER=0 FRAMEBORDER=NO SCROLLING=NO
                  noresize NAME="Title" marginwidth=0 marginheight=0>
           <FRAME SRC="mn/Project.shtml"  BORDER=0 FRAMEBORDER=NO SCROLLING=NO
                  noresize NAME="Menu" marginwidth=0 marginheight=0>
       </FRAMESET>
    </FRAMESET>
    <FRAMESET COLS="129,*" BORDER=0 FRAMEBORDER=0>
           <FRAME SRC="mn/Project/AzBook.shtml"  BORDER=0 FRAMEBORDER=NO SCROLLING=NO
                  noresize NAME="Navg" marginwidth=0 marginheight=0>
        <FRAME SRC="Project/AzBook/Index.shtml"  BORDER=0 FRAMEBORDER=NO SCROLLING=AUTO
               NAME="Work" marginwidth=0 marginheight=0>
    </FRAMESET>
</FRAMESET>
</HTML>

       Несмотря на то, что рабочий фрейм только один, фреймовая структура оказалась достаточно сложной. С чем это связано:
       Во-первых, у этого сайта меню имеет два уровня. То есть вверху выбирается раздел, а сбоку выбирается подраздел. Если оставить один уровень, то структура немного упростится.
       Во-вторых, хотелось разместить логотип, а в свободное место девиз, который должен быть "резиновый". Для чего идеально подходит flash-картинка.
       Таким образом сначала окно разбивается по горизонтали - 100 пикселей отводиться на область главного меню, а все что остается на рабочую область
       Из области меню выделяется зона логотипа и зона собственно меню, которая соответственно делится на фрейм "Title" - для девиза и фрейм "Menu" для меню.
       Нижний фрейм также делится на вертикальный фрейм "Navg" для бокового меню и главный рабочий фрейм "Work"
       При этом все фреймы кроме рабочего имеют атрибуты noresize и scrolling=no, что обеспечивает фиксированную разбивку окна и при этом "резиновый" дизайн. А атрибут у рабочего окна scrolling=auto обеспечивает автоматические полосы прокрутки.

Динамическая фремовая структура для сайта az-design.ru

       Стандартная фреймовая структура имеет ряд недостатков, о которых говорилось выше. Что нужно сделать, чтобы их избежать.
       Во-первых, нужно при загрузке страницы определить находится ли эта страница во фрейме "Work" и если это не так, то загрузить всю фреймовую структуру и текущую страницу загрузить во фрейм "Work"
       Во-вторых, нужно определить какое должно быть состояние меню для данной страницы. Для этого страница должна передать правильное состояние меню.
       Первая часть обеспечивается функцией fs(Dir,sub), которая проверяет загружается ли страница во фрейм "Work" и если это не так, то формирует новый путь для загрузки вида index.shtml?Dir?Sub?path. В результате броузер загружает новую страницу. Вызов этой функции оформлен в контейнере <head>

   <script language="JavaScript" src="../../opt/lib.js"></script>
   <script language="JavaScript">fs('Projects','AzBook');</script>

       первая строчка указывает, где находится библиотека функций, вторая строка вызывает саму функцию, указывая в качестве параметров главный каталог и подкаталог, что позволяет определить состояние обоих уровней меню.
       Вторая часть обеспечивается тем, что в самом файле index.shtml есть JavaScript-программа, которая анализирует переданные параметры и формирует правильный frameset:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
   <link rel="icon" href="favicon.ico" type="image/x-icon" />
   <META NAME="Description" CONTENT="ЗАО \"АЗет Дизайн\"">
   <TITLE>AZ Design Corp. - разработка надежных баз данных</TITLE>
</HEAD>
<script language="JavaScript">
<!--
var lct = location.href;
var indx = lct.indexOf("?",0);
if (indx==-1) {
  var newArray = new Array(3)
  newArray[0] = 'News';  // var dir
  newArray[1] = 'index'; // var sub
  newArray[2] = 'index'; // var path
}; 
if (indx > 0) {
  var prm = lct.substr(indx+1);
  var regexp = /&/;
  var newArray = prm.split(regexp);
};
var newCont = '<FRAMESET ROWS="100,*" BORDER=0 FRAMEBORDER=0>';
newCont += '    <FRAMESET COLS="150,*" BORDER=0 FRAMEBORDER=0>';
newCont += '       <FRAME SRC="mn/Logo.htm"  BORDER=0 FRAMEBORDER=NO SCROLLING=NO noresize NAME="Logo" marginwidth=0 marginheight=0>';
newCont += '       <FRAMESET ROWS="61,*" BORDER=0 FRAMEBORDER=0>';
newCont += '           <FRAME SRC="mn/Hd'+newArray[0]+'.shtml"  BORDER=0 FRAMEBORDER=NO SCROLLING=NO noresize NAME="Title" marginwidth=0 marginheight=0>';
newCont += '           <FRAME SRC="mn/'+newArray[0]+'.shtml"  BORDER=0 FRAMEBORDER=NO SCROLLING=NO noresize NAME="Menu" marginwidth=0 marginheight=0>';
newCont += '       </FRAMESET>';
newCont += '    </FRAMESET>';
newCont += '    <FRAMESET COLS="129,*" BORDER=0 FRAMEBORDER=0>';
newCont += '           <FRAME SRC="mn/'+newArray[0]+'/'+newArray[1]+'.shtml"  BORDER=0 FRAMEBORDER=NO SCROLLING=NO noresize NAME="Navg" marginwidth=0 marginheight=0>';
if (newArray[1]!='index') {
newCont += '        <FRAME SRC="'+newArray[0]+'/'+newArray[1]+'/'+newArray[2]+'.shtml"  BORDER=0 FRAMEBORDER=NO SCROLLING=AUTO NAME="Work" marginwidth=0 marginheight=0>';
};
if (newArray[1]=='index') {
newCont += '        <FRAME SRC="'+newArray[0]+'/'+newArray[2]+'.shtml"  BORDER=0 FRAMEBORDER=NO SCROLLING=AUTO NAME="Work" marginwidth=0 marginheight=0>';
};
newCont += '    </FRAMESET>';
newCont += '</FRAMESET>';
document.write(newCont);
document.close();
//-->
</script>
<noscript>
<BODY>
Сайт использует JavaScript и фреймы
</BODY>
</noscript>
</HTML>

       По сути в переменную lct записывается переданный броузеру путь к странице.
       В переменной indx сохраняется признак есть ли в пути параметры или нет. Если параметров нет, то массив заполняется значениями по умолчанию, если есть, то переданными параметрами.
       А дальше в строке newCont строится вся фреймовая структура, учитывая переданные ей параметры. И уже построенная строка передается в документ document.write(newCont);, который и отображается на экране.
       Таким образом, как бы не загружалась страница — из поисковой системы, из локального источника — все равно пользователь будет видеть полную картину меню, причем с правильным указанием, какие пункты были выбраны.

Построение главного меню для сайта az-design.ru

       Меню должно быть интерактивным, т.е. как-то реагировать на движение мыши и показывать что выбрано, а что нет. Для примера ниже приведен файл, формирующий меню на сайта az-design.ru при выбранном значении "Проекты"

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">
<HTML>
<HEAD>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
   <META NAME="Description" CONTENT="Menu">
   <TITLE>AZ Design Corp.</TITLE>
</HEAD>
<BODY  background="../img/bgmenu.gif">
<table ID="MenuTbl" border=0 cellspacing=0 cellpadding=0 width="100%">
<TBODY>
<tr>
<td align=left valign=middle height="41" width="140">
<a href="../index.shtml?News&index&index"
        onMouseOver="document.News.src='img/mnNewsFoc.png';"
        onMouseOut="document.News.src='img/mnNews.png';"
 target="_top">
<img src="img/mnNews.png" name="News" border=0 hspace=0 vspace=0></a></td>
<td align=center valign=middle height="41">
<a href="../index.shtml?About&index&index"
        onMouseOver="document.About.src='img/mnAboutFoc.png';"
        onMouseOut="document.About.src='img/mnAbout.png';"
 target="_top">
<img src="img/mnAbout.png" name="About" border=0 hspace=0 vspace=0></a></td>
<td align=center valign=middle height="41">
<a href="../index.shtml?Projects&index&index"  target="_top">
<img src="img/mnProjectsSel.png" name="Projects" border=0 hspace=0 vspace=0></a></td>
<td align=center valign=middle height="41">
<a href="../index.shtml?Support&index&index"
        onMouseOver="document.Support.src='img/mnSupportFoc.png';"
        onMouseOut="document.Support.src='img/mnSupport.png';"
 target="_top">
<img src="img/mnSupport.png" name="Support" border=0 hspace=0 vspace=0></a></td>
<td align=center valign=middle height="41">
<a href="../index.shtml?Forum&index&index"
         onMouseOver="document.Forum.src='img/mnForumFoc.png';"
         onMouseOut ="document.Forum.src='img/mnForum.png';"
 target="_top">
<img src="img/mnForum.png" name="Forum" border=0 hspace=0 vspace=0></a></td>
</tr>

</TBODY> </table> </BODY> </HTML>

       т.е. для каждой кнопки имеется три картинки - () без выделения, (Foc) выделение при прохождении мыши, (Sel) выделение при выборе пункта меню. Картинка выбирается по событиям onMouseOver (курсор над картинкой) и onMouseOut (курсор ушел от картинки), а также при при клике на гиперссылку.
       Такой файл создается для каждой кнопки меню с изменениями в тексте, касающимися этой кнопки.




<<< Пред. Оглавление
Начало раздела
След. >>>

Дата последнего изменения:
Thursday, 21-Aug-2014 09:10:56 MSK


Постоянный адрес статьи:
http://az-design.ru/Projects/WebStat/WebSiteStore/01_006.shtml