Как создать свой сайт - Создание фрэймов

Создание фреймов в документах HTML

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

Рассмотрим следующий пример HTML-страницы, используещей фрэймы:

<HTML>
<HEAD>
  <TITLE>Страница с двумя вертикальными фреймами</TITLE>
</HEAD>
<FRAMESET cols="30%,70%" frameborder="yes"  framespacing="1">
<FRAME name="MenuFrame" src="MainMenu.html"> 
<FRAME name="MainFrame" src="Text1.html">
</FRAMESET> 
</HTML>

Здесь присутствует объявление двух фреймов, которые будут располагаться вертикальными полосами и занимать соответственно 30 и 70 процентов рабочей области. Тэг <FRAMESET> имеет следующие атрибуты:

cols="..." - задает вертикальное расположение полос фреймов
rows="..." - задает горизонтальное расположение полос фреймов
borlercolor="..." - задает цвет рамки, которая разделяет отдельные фреймы;
frameborder="..." - указывает броузеру, отображать ли рамку у фреймов или нет;
border="..." — определяет ширину рамки между фрэймами.
framespacing="..." - определяет расстояние между фрэймами.

Определение документа, изначально загружаемого при открытии этого файла, задается атрибутом тега <FRAME> src="...", при этом необходимо указать параметр name= "...". Сам же документ является обыкновенной HTML-страницей.

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

Файл "MainMenu.html" будет иметь следующую структуру:

<HEAD>
<BASE TARGET=MainFrame>
   <TITLE></TITLE>
</HEAD>
<BODY>
<CENTER><H3>Первый Frame</H3></CENTER>
<P>
<A href="Text1.html">
Первая страничка второго фрэйма
</A>
<P>
<A href="Text2.html">
Вторая страничка второго фрэйма
</A>
</BODY>
</HTML>

Для того, чтобы ссылки из первого фрэйма открывались во втором фрэйме необходимо использовать тэг <BASE TARGET>, указывающий в каком окне необходимо открыть документы, ссылки на которые используются в данном документе.

Контейнеры <FRAMESET> и <BODY> являются взаимоисключающими. Это означает, что если в документе присутствуют оба указанных тега, то броузер игнорирует контейнер <FRAMESET> и отображает информацию, заключенную в контейнер <BODY>.

Файл "Text1.html" будет иметь следующий код:

<HEAD>
   <TITLE>Второй Frame</TITLE>
</HEAD>
<BODY>
<CENTER><H3>Второй Frame</H3></CENTER>
<P>
Первая страничка второго фрэйма
</BODY>
</HTML>

создадим еще файл "Text2.html" со следующим кодом:

<HEAD>
   <TITLE>Второй Frame</TITLE>
</HEAD>
<BODY>
<CENTER><H3>Второй Frame</H3></CENTER>
<P>
Вторая страничка второго фрэйма
</BODY>
</HTML>

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

Для оформления горизонтальных фреймов следует использовать параметр rows="..." тега <FRAMESET>.

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

<HTML>
<HEAD>
  <TITLE>Страница с комбинированным 
                    использованием фреймов</TITLE>
</HEAD>
<FRAMESET cols="30%,70%" frameborder="yes"  framespacing="1">
  <FRAME name="MenuFrame" src="MainMenu.html">
  <FRAMESET rows="30%,70%">
    <FRAME name="TopFrame"  src="Top.html">
    <FRAME name="MainFrame" src="Text1.html">
  </FRAMESET>
</FRAMESET>
</HTML>

Встроенный фрейм

Кроме обычных фреймов существуют и встроенные фреймы. Они представляют собой окно в документе, в которое, в свою очередь, загружается другой HTML-документ. Для вставки такого фрейма используется тег <IFRAME>, который имеет следующие основные атрибуты:

src="..." - данный атрибут предназначен для указания пути к Web-странице, которая будет загружена в данный фрейм;
name="..." - в данном атрибуте определяется имя фрейма;
height="..." - указывает высоту фрейма в пикселях;
width="..." — указывает ширину фрейма в пикселях. В сочетании с атрибутом height="..." может ускорить загрузку основного документа, поскольку броузер оставит место для фрейма и продолжит загрузку родительского документа;
frameborder="..." - разрешает или запрещает отображение рамки вокруг фрейма. Возможные значения: 0 или 1;
scrolling="..." - задает отображение линий прокрутки для фрейма. Имеет следующие значения: Auto - задано по умолчанию, определяется броузером в зависимости от загружаемого во фрейм документа; Yes — заставляет броузер отображать линии прокрутки; No - линии прокрутки не отображаются.

Ниже приведен пример HTML-страницы, использующей встроенный фрейм:


<HTML>
<HEAD>
  <TITLE>Пример использования встроенного фрейма</TITLE>
</HEAD>

<BODY> 

  <H1>Ниже расположен встроенный фрейм:</H1>

  <HR>

  <iframe src="example_6.html" name="Frame" 
             width="60%" height="30%">
      Данная страница содержит встроенный фрейм. 
      Если Вы видите этот текст, значит ваш браузер 
      не поддерживает отображение встроенных фреймов. 
      Рекомендую установить более новую версию браузера. 
   </iframe>

</BODY> 
</HTML>

Теперь давайте узнаем как в HTML документе создать и вставить бегущую строку.