АКМА. Каталог веб-разработчика. 
Поиск на сайте
 
Искать на:  Яndex   Rambler   Апорт   Google
ГлавнаяСтатьиСсылкиJavaScriptПоиск
ТехнологииВеб-графикаВеб-дизайнРаскрутка сайта

Фреймы: синтаксис, достоинства и недостатки.

Исмаилов Андрей

 версия для печати
 

«Нелинейность информационного пространства сайта иногда находит свое видимое выражение в использовании фреймов — перегородок внутри окна броузера, позволяющих в образующихся «форточках» показывать несколько HTML-файлов одновременно». [1]
Каждый фрейм имеет свое имя, размер и отображает только один документ имеющий свой URL.

Синтаксис.

Синтаксис документа, использующего фреймы, не содержит тега <BODY>, а описывает только фреймы и имеет следующий вид: [2]

<HTML>
 <HEAD>
 …
 </HEAD>

   <FRAMESET
   COLS="columnWidthList"
   ROWS="rowHeightList"
   FRAMEBORDER ="YES | NO"
   BORDER="pixWidth"
   BORDERCOLOR="color"
   ONBLUR="JScode"
   ONFOCUS="JScode"
   ONLOAD="JScode"
   ONUNLOAD="JScode">

      <FRAME
      SRC="url"
      NAME="frameName"
      MARGINWIDTH="marginWidth"
      MARGINHEIGHT="marginHeight"
      SCROLLING="YES | NO | AUTO"
      FRAMEBORDER ="YES | NO"
      BORDERCOLOR="color"
      NORESIZE>

      <FRAME
      SRC="url1"
      NAME="frameName1"
      …>

   </FRAMESET>

   <NOFRAMES>
   Текст…
   </NOFRAMES>

</HTML>
 

Описание.

Тег <FRAMESET> определяет количество и структуру фреймов, составляющих страницу, имеет следующие атрибуты:
  • COLS="columnWidthList" — задает количество горизонтальных фреймов и их размер.
    • columnWidthList — позволяет задать размер в процентах от размера окна браузера или зафиксировать размеры в пикселах. Так как размер окна браузера величина непостоянная (зависит от расширения экрана пользователя), то хотя бы один фрейм должен быть нефиксированного размера. Возможные значения в процентах от 1% до 100%. Числовое значение можно заменить символом — «* ». Например, «50,* » — будет создано два фрейма, один с фиксированным размером 50 пикселей, а оставшееся пространство будет занимать второй фрейм, «50%,* »будет создано два равных по размеру фрейма, «2*,* » — первый фрейм 2/3 от размера окна браузера, второй 1/3.
  • ROWS="rowHeightList" — задает количество вертикальных фреймов и их размер.
    • rowHeightList — аналогичен «columnWidthList»
  • FRAMEBORDER="YES | NO" — задает наличие или отсутствие границы между фреймами.
    • YES — граница между фреймами присутствует.
    • NO — граница между фреймами отсутствует.
  • BORDER="pixWidth" — определяет ширину границы между фреймами.
  • BORDERCOLOR="color" — задает цвет границы между фреймами именованными цветами или в Hex RGB. Например, BORDERCOLOR="black" или BORDERCOLOR="#000000", граница будет иметь черный цвет.
  • ONBLUR="JScode" — запускает JavaScript код, когда окно с фреймами теряет фокус.
  • ONFOCUS="JScode" — запускает JavaScript код, когда окно с фреймами получает фокус.
  • ONLOAD="JScode" — запускает JavaScript код после открытия окно с фреймами.
  • ONUNLOAD="JScode" — запускает JavaScript код после закрытия окна с фреймами.
Тег <FRAME> описывает фрейм. Атрибуты тега:
  • SCR="url" — URL документа, который будет отображен в данном фрейме.
  • NAME="frameName" — задает имя фрейма. Данный атрибут необходим для управления содержимым одного фрейма из другого. Управление осуществляется при помощи специального атрибута TARGET="windowsName". Например, имеется два фрейма первый с именем «Name» содержит меню (ссылки) и второй с именем «Name1». Для того, чтобы открыть ссылку из первого фрейма во втором, необходимо для всех тегов гиперссылки <А>, окна «Name», задать атрибут TARGET="Name1" — <A HREF="url" TARGET="Name1">Links</A>.
    Стандартные имена атрибута TARGET:
    • TARGET="_blank" — загружает документ в новое неименованное окно.
    • TARGET="_self" — загружает документ в то же окно, содержащее кликнутую ссылку.
    • TARGET="_parent" — загружает документ в окно — непосредственного родителя текущего FRAMESET.
    • TARGET="_top" — загружает документ в полное окно. Действует также как «_self » если документ уже в полном окне. Полезно для разбивания вложенных FRAME произвольной глубины.
  • MARGINWIDTH="marginWidth" — горизонтальный отступ между фреймом и его границей. Значение «marginWidth» указывается в пикселах.
  • MARGINHEIGHT="marginHeight" — вертикальный отступ между фреймом и его границей. Значение «marginHeight» указывается в пикселах.
  • SCROLLING="YES | NO | AUTO" — определяет наличие или отсутствие полос прокрутки у данного фрейма.
    • YES — полосы прокрутки будут в любом случае присутствовать у фрейма.
    • NO — отключает полосы прокрутки.
    • AUTO — включает полосы прокрутки только при их необходимости, если информация в окне выходит за его рамки (режим по умолчанию).
  • BORDERCOLOR="color" — задает цвет границы между фреймами именованными цветами или в Hex RGB. Например, BORDERCOLOR="black" или BORDERCOLOR="#000000", граница будет иметь черный цвет.
  • FRAMEBORDER ="YES | NO" — определяет наличие или отсутствие границы для данного фрейма.
    • YES — граница присутствует.
    • NO — граница отсутствует.
  • NORESIZE — позволяет создавать фреймы фиксированного размера. При этом пользователь уже не сможет изменить размер фрейма или прокрутить информацию в нем.
Внутри тэгов <NOFRAMES> и </NOFRAMES> находится текст, который увидят пользователи браузеров не поддерживающих фреймы. Браузеры с поддержкой фреймов игнорируют данный тег.
 

Примеры.

Рассмотрим наиболее используемые варианты деления окна на фреймы.

    Пример 1     <FRAMESET COLS="50%,*">
       <FRAME SRC="A.htm">
       <FRAME SRC="B.htm">
    </FRAMESET>
     
    Пример 2     <FRAMESET ROWS="50%,*">
       <FRAME SRC="A.htm">
       <FRAME SRC="B.htm">
    </FRAMESET>
     
    Пример 3     <FRAMESET COLS="50%,*">
       <FRAME SRC="A.htm">
       <FRAMESET ROWS="50%,*">
         <FRAME SRC="B.htm">
         <FRAME SRC="C.htm">
       </FRAMESET>
    </FRAMESET>
     
    Пример 4     <FRAMESET COLS="50%,*">
       <FRAMESET ROWS="50%,*">
         <FRAME SRC="A.htm">
         <FRAME SRC="B.htm">
       </FRAMESET>
         <FRAME SRC="C.htm">
    </FRAMESET>
     
    Пример 5     <FRAMESET ROWS="50%,*">
       <FRAME SRC="A.htm">
       <FRAMESET COLS="50%,*">
         <FRAME SRC="B.htm">
         <FRAME SRC="C.htm">
       </FRAMESET>
    </FRAMESET>
     
    Пример 6     <FRAMESET ROWS="50%,*">
       <FRAMESET COLS="50%,*">
         <FRAME SRC="A.htm">
         <FRAME SRC="B.htm">
       </FRAMESET>
         <FRAME SRC="C.htm">
    </FRAMESET>
     
    Пример 7     <FRAMESET ROWS="50%,*" COLS="50%,*">
       <FRAME SRC="A.htm">
       <FRAME SRC="B.htm">
       <FRAME SRC="C.htm">
       <FRAME SRC="D.htm">
    </FRAMESET>
     
    Пример 8     <FRAMESET ROWS="33%,33%,*">
       <FRAME SRC="A.htm">
       <FRAMESET COLS="50%,*">
         <FRAME SRC="B.htm">
         <FRAME SRC="C.htm">
       </FRAMESET>
         <FRAME SRC="D.htm">
    </FRAMESET>

Самый простой способ реализации документа с фреймами — это воспользоваться встроенными функциями HTML-редакторов. Например, в HomeSite 4.5 выбрав на панели инструментов кнопку «Frames», а затем «Frame wizard» на первом этапе определяем структуру документа с фреймами. Кнопками «Col+» и «Col-» задаем горизонтальное деление на фреймы, «Row+» и «Row-» — вертикальное деление. На втором этапе выбераем фрейм щелчком мышки и определяем для него атрибуты: «Name» — имя фрейма, «Source URL» — адрес документа, «Height» — вертикальный отступ между фреймом и границей, «Width» — горизонтальный отступ, «Scrolling» — наличие или отсутствие полосы прокрутки, «Border» — ширина границы между фреймами, «No Resize» — выберите данный пункт, если хотите, чтобы фрейм был фиксированного размера. Задав значения атрибутов для всех фреймов, нажимаем кнопку «Finish». Редактор соответственно введенным вами значениям составит код. Остается только, при необходимости, добавить недостающие атрибуты и проверить их значения.
 

Достоинства, недостатки и возможные пути их решения.

Давно уже ведутся споры о целесообразности использования фреймов, о их преимуществах и недостатках. Вот что пишет Дмитрий Кирсанов : «Сайты с фреймами имеют три основных преимущества. Во-первых, фреймы дают некоторую экономию в объеме пересылаемых пользователю файлов, так как при переходе по ссылке заменяется содержимое только одного фрейма (впрочем, почти того же эффекта можно добиться и без всяких фреймов, просто подключая на всех страницах, одни и те же графические файлы). Во-вторых, при этом появляется возможность проматывать материал только одного фрейма, имея перед глазами неподвижное содержимое остальных фреймов. И в-третьих, в сложных по визуальной структуре композициях фреймы дают дизайнеру возможность с гарантией контролировать величину полей и жестко привязывать материал не только к левому и верхнему краю окна, но и к правому и нижнему. На этом достоинства фреймов заканчиваются и начинаются их недостатки.

Введение фреймов резко ограничивает переносимость HTML-документа и делает его недоступным для многих поисковых роботов. Страницы с фреймами выглядят громоздко, их интерфейс не всегда интуитивно понятен — многих подсознательно раздражает то, что щелчок мышью в одной точке экрана вызывает изменение совсем в другом месте. Фреймы приводят к неоднозначности в адресации, так как при переходах по ссылкам и загрузке новых документов в отдельные фреймы адрес текущего корневого документа, отображаемый в строке URL броузера, не меняется; из-за этого, встречаясь с фреймами, многие подсистемы броузера (к примеру, меню со списком посещенных адресов) вынуждены действовать не слишком логично. Наконец, из некоторых сайтов с фреймами бывает не так-то просто выбраться на свежий воздух — после перехода по ссылке, ведущей за пределы сайта, страница чужого сайта загружается иногда не на чистый лист пустого экрана, а в том же фрейме, в котором стояла ссылка» [1].

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

Частично решить эту проблему можно несколькими способами. Во-первых, на всех информационных страницах делать ссылку, например — «Главная», на корневой документ. Второй способ предполагает использование JavaScript. Скрипт при открытии страницы, на весь экран, выдаст текст — «Данную страницу лучше смотреть с управляющим фреймом». Фраза «управляющим фреймом» является ссылкой на корневой документ:

<SCRIPT LANGUAGE="JavaScript">
  <!--
    if (self.parent.frames.length == 0)
    document.writeln("Данную страницу лучше смотреть с
    <a href=\"index.htm\">управляющим фреймом</a>");
  //-->
</SCRIPT>

А этот скрипт перебросит пользователя на корневой документ index.htm без предупреждения:

<SCRIPT LANGUAGE="JavaScript">
  <!--
    if (self.parent.frames.length == 0)
    self.parent.location="index.htm";
  //-->
</SCRIPT>
 

«Встраиваемый» фрейм.

«Встраиваемый» фрейм реализуются тегом <IFRAME>. Он был введен в Internet Explorer начиная с версии 4.0. Данный тег формирует один фрейм, в том месте документа, где он прописан.
 

Синтаксис.

<IFRAME
SRC="url"
NAME="frameName"
WIDTH="windowsWidth"
HEIGHT="windowsHeight"
FRAMEBORDER="YES | NO"
SCROLLING="YES | NO | AUTO"
MARGINWIDTH="marginWidth"
MARGINHEIGHT="marginHeight"
VSPACE="verticalMargin"
HSPACE="horizMargin"
ONBLUR="JScode"
ONFOCUS="JScode"
ONLOAD="JScode"
ONUNLOAD="JScode">

    Текст…

</IFRAME>

  • SCR="url" — URL документа или графического элемента, который будет отображен в данном фрейме.
  • NAME="frameName" — задает имя фрейма.
  • WIDTH="windowsWidth" — определяет ширину фрейма.
    • windowsWidth — позволяет задать размер в процентах от размера окна браузера или зафиксировать размер в пикселах.
  • HEIGHT="windowsHeight" — определяет высоту фрейма.
    • windowsHeight — аналогично «windowsWidth».
  • FRAMEBORDER ="YES | NO" — задает наличие или отсутствие границы для данного фрейма.
    • YES — граница присутствует.
    • NO — граница отсутствует.
  • SCROLLING="YES | NO | AUTO" — определяет наличие или отсутствие полос прокрутки у фрейма.
    • YES — полосы прокрутки будут в любом случае присутствовать у фрейма.
    • NO — отключает полосы прокрутки.
    • AUTO — включает полосы прокрутки только при их необходимости, если информация в окне выходит за его рамки (режим по умолчанию).
  • MARGINWIDTH="marginWidth" — горизонтальный отступ между границей фрейма и документом (графическим элементом). Значение «marginWidth» указывается в пикселах.
  • MARGINHEIGHT="marginHeight" — вертикальный отступ между границей фрейма и документом (графическим элементом). Значение «marginHeight» указывается в пикселах.
  • HSPACE="horizMargin" — ширина незаполненного пространства непосредственно слева и справа от фрейма в пикселях.
  • VSPACE="verticalMargin" — высота незаполненного пространства выше и ниже фрейма в пикселях.
  • ONBLUR="JScode" — запускает JavaScript код, когда окно с фреймами теряет фокус.
  • ONFOCUS="JScode" — запускает JavaScript код, когда окно с фреймами получает фокус.
  • ONLOAD="JScode" — запускает JavaScript код после открытия окно с фреймами.
  • ONUNLOAD="JScode" — запускает JavaScript код после закрытия окна с фреймами.
Между тегами <IFRAME> и </IFRAME> находится текст, который увидят пользователи браузеров отличных от Internet Explorer 4.0.
 

Достоинства, недостатки.

Отличительная особенность «встраиваемого» фрейма возможность его позиционирования в документе. Кроме того, во «встраиваемый» фрейм можно загружать не только текстовые документы, но и отдельные графические элементы.
Главным и пожалуй единственным недостатком «встраиваемого» фрейма является отсутствие поддержки, данной технологии, в Netscape Navigator.

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

Литература.

1. Кирсанов Д. «Веб-дизайн: книга Дмитрия Кирсанова» — СПб:Символ-Плюс, 1999-376с.:цв.ил.
2. «HTML Tag Reference» — © 1997 Netscape Communications Corporation.

 

ГлавнаяСтатьиСсылкиJavaScriptПоиск
Новости  |  Карта сайта
Редакция от: 
Copyright ©1999—2003 «Art&Fact»ВверхE-mail: artefact@udm.net
Hosted by uCoz