8 (800) 333-3041Звонок бесплатный для
всех регионов России
Тело Оглавление Еще раз об HTML и немного о CSS

Фреймы

Фреймы используются для того, чтобы в одном окне броузера показать несколько HTML-документов. Например, мы разобьем окно на три части. В первый фрейм загрузим меню для навигации. Во второй будем загружать документы, на которые пользователь будет щелкать по пунктам меню. В третьем будет крутиться баннер. Такой подход к созданию страниц экономит время закачивания информации. Меню закачивается один раз. Недостатком является внешний вид. Примеров удачного использования фреймов в Интернет очень мало. Фреймы были популярны в 90х годах. Сейчас от них практически отошли. Мало где на серьезном сайте вы найдете страницы с фреймами. Они могут быть полезны для создания домашних страничек или любительских сайтов. Также возможно их использование на второстепенных страничках сайта, которые не обязаны выглядеть блестяще. Здесь я привожу краткое описание фреймов, для того чтобы вы знали с чем их едят, если придется с ними столкнуться. При использовании фреймов, старайтесь избегать линеек прокрутки. Они смотрятся неестественно в середине HTML-страницы. Единственное более или менее удачное применение фреймов, на мой взгляд, для меню, которое всегда должно оставаться наверху, а не сползать вниз при прокрутке документа. Посмотрите пример на сайте http://www.mjk.msk.ru/~dron/. Но та же идея может быть не очень удачно реализована, как, например, на сайте http://computerclub.dore.ru/. Прокручивать меню неудобно, когда там раскрыто несколько подпунктов, затрудняется навигация и работа с сайтом.
Начнем со встроенных фреймов. Они появились в стандарте языка HTML, начиная с версии 4.0, поэтому не все броузеры их поддерживают. Например, Netscape 4.06 их не понимает. Но зато самый распространенный броузер InternetExplorer четвертой и более поздней версии умеет с ними работать. Встроенный фрейм позволяет вам в вашем документе выделить прямоугольную область и загрузить туда html-документ.
Пример:

 <iframe name="test" src="http://itsoft.ru" width="400" height="300"
             scrolling="auto" frameborder="1">
  Ваш броузер не поддерживает встроенных фреймов. Вы можете
  посмотреть этот документ <a href="http://itsoft.ru">здесь</a>
  </iframe>




Атрибут name служит для задания имени фрейму затем, чтобы в этот фрейм можно было загружать другие документы при помощи гиперссылок. У гиперссылок есть соответствующий атрибут target, который указывает куда загружать документ, на который она указывает. В предыдущей главе мы рассмотрели только одно значение этого атрибута - _blank.
Пример загрузки других документов во встроенный фрейм:
Содержание данной книги Фотография Сайт opengl.org.ru
<a href="index.php" target="test">Содержание данной книги</a>
<a href="images/photo.jpg" target="test">Фотография</a>
<a href="http://opengl.org.ru" target="test">Сайт opengl.org.ru</a>

Команда <iframe> принимает следующие атрибуты:
name
имя фрейма
src
URL документа для загрузки
width
ширина прямоугольной области
height
высота прямоугольной области
align
выравнивание области относительно других объектов, принимает значения left, rigth, top, middle, bottom
scrolling
определяет наличие прокрутки, возможные значения - (yes, no, auto)
frameborder
наличие рамки, возможные значения 0 или 1
marginwidth
ширина отступа от левой и правой границ рамки
marginheight
ширина отступа от верхней и нижней границ рамки
Следующй вариант использования фреймов - это разбиение окна на несколько частей. Вот пример.
<html>
<head>
<title>Окно, разбитое на несколько частей</title>
</head>
<frameset cols="20%, 80%">
  <frameset rows="100, 200">
      <frame src="contents_of_frame1.php">
      <frame src="contents_of_frame2.gif">
  </frameset>
  <frame src="contents_of_frame3.php">
</frameset>
</html>
Окно будет разбито следующим образом:
 ---------------------------------------
|         |                             |
|         |                             |
| Frame 1 |                             |
|         |                             |
|         |                             |
|---------|                             |
|         |          Frame 3            |
|         |                             |
|         |                             |
|         |                             |
| Frame 2 |                             |
|         |                             |
|         |                             |
|         |                             |
|         |                             |
 ---------------------------------------
Команда <frameset> разбивает область не несколько колонок и рядов. Например, для того чтобы получить разбиение 2х3, надо дать следующую команду:
<frameset cols="20%,*" rows="*,30%, 20%" frameborder="1">
<frame src="url_1">
<frame src="url_2">
<frame src="url_3">
<frame src="url_4">
<frame src="url_5">
<frame src="url_6">
</frameset>
Вы указываете разбиение по колонкам и по рядам. В данном случае у нас будет две колонки, причем первая занимает 20% от экрана, а вторая все остальное, т.е. 80%. Далее у нас деление на три ряда. Второй - 30% от высоты экрана, третий - 20%, а первый, соответственно, 50%. Эти параметры можно задавать и в пикселях, для этого не надо указывать знак процента. Результатом будет:
 ---------------------------------------
|         |                             |
|         |                             |
|         |                             |
| url_1   |        url_2                |
|         |                             |
|         |                             |
|         |                             |
|---------|-----------------------------|
|         |                             |
|         |                             |
| url_3   |      url_4                  |
|         |                             |
|---------|-----------------------------|
|         |                             |
| url_5   |       url_6                 |
 ---------------------------------------
Каждая из этих ячеек может быть разбита еще на подразделы. Вместо соответствующей команды <frame> надо дать команду <frameset>.
<frameset cols="20%,*" rows="*,30%, 20%" frameborder="1">
<frame src="url_1">
    <frameset cols="50%,*" rows="50,*" frameborder="1">
        <frame src="url_2_1">
        <frame src="url_2_2">
        <frame src="url_2_3">
        <frame src="url_2_4">
    </frameset>
<frame src="url_3">
<frame src="url_4">
<frame src="url_5">
<frame src="url_6">
</frameset>
Результат:
 ---------------------------------------
|         |              |              |
|         |              |              |
|         |              |              |
| url_1   |______________|______________|
|         |              |              |
|         |              |              |
|         |              |              |
|---------|-----------------------------|
|         |                             |
|         |                             |
| url_3   |      url_4                  |
|         |                             |
|---------|-----------------------------|
|         |                             |
| url_5   |       url_6                 |
 ---------------------------------------
Щелкнув здесь, вы загрузите фреймовую структуру в наш встроенный фрейм. У команды <frame> присутствуют все те же атрибуты, что и у команды <iframe>, плюс есть еще один - noresize. Он не принимает никаких значений, а просто указывает, что границы фрейма изменять нельзя. Если его не указать, то мышкой вы легко можете изменять размеры разбиения окна.

Упражнения

Создайте следующую фреймовую структуру.
 ---------------------------------------
|                                       |
|        заголовок                      |
|                                       |
|_______________________________________|
|         |                             |
|         |                             |
|         |                             |
| меню    |                             |
|         |       документы             |
|         |                             |
|         |                             |
|         |                             |
|---------|-----------------------------|
|                                       |
|           баннер                      |
 ---------------------------------------

Eng
Наверх