Иллюстрированный самоучитель по созданию сайтов

Размещение элементов на веб-странице и навигация по сайту

В этой записи звездочка означает, что для другого фрейма отведено все оставшееся место в окне браузера. Сколько его будет – зависит только от ширины окна браузера на компьютере пользователя. (Если у пользователя разрешение 1600х1200 и окно браузера развернуто на весь экран, то у него ширина правого фрейма будет около 1320 пикселов, а если он сузил окно браузера до 300 пикселов, то на правый фрейм у него останется менее 15 пикселов.) В большинстве случаев левый фрейм шириной 277 пикселов будет все же занимать меньше половины окна браузера, а значит, у пользователя сложится правильное впечатление, что основная информация заключена в правом фрейме.

Далее, чтобы между фреймами на было видимой границы, следует установить значения атрибутов FRAMESPACING= (расстояние между фреймами) и FRAMEBORDER= (наличие рамки фреймов) равными нулю. В принципе, если установить значение атрибута FRAMEBORDER= равным 1 (кстати, для Netscape версии 3 было необходимо вместо значений 0 и 1 для атрибута RAMEBORDER= использовать значения Yes или No), то можно проконтролировать толщину рамки с помощью атрибута BORDER=, а также ее цвет с помощью атрибута BORDERCOLOR=.

Если надо расположить фреймы, как строки таблицы, то вместо атрибута COLS= следует использовать атрибут ROWS=. В остальном все остается точно так же, как ранее. В принципе, возможно использовать в одном теге <FRAMESET> оба атрибута: и COLS=, и ROWS=.

Но вернемся к приведенному выше коду. Между тегами <FRAMESET> и </FRAMESET> в нем находятся определения содержимого каждого из фрей-мов. Каждый фрейм определяется с помощью тега <FRAME>:

<FRAME NAME="portrait" SRC="sergport.html"=SCROLLING="no" FRAMEBORDER="0" NORESIZE>
    <FRAME NAME="text" SRC="sergtext.html" SCROLLING="auto" FRAMEBORDER="0" NORESIZE>

Атрибут NAME= в этом примере не несет никакой нагрузки – это прост, название фрейма. Однако его присутствие нам потребуется в случае организации межфреймовой навигации (например, если при нажатии на гиперссылку, находящуюся в одном из фреймов, следует загрузить соответствующий документ в другой фрейм – об этом речь пойдет в следующем разделе В любом случае установка атрибута NAME= является хорошей привычкой.

Атрибут SRC=, как уже говорилось выше, является самым главным атрибутом, поскольку его значение указывает, какой, собственно говоря, файл следует в этот фрейм загрузить. Атрибут SCROLLING= управляет наличием полосы прокрутки в каждом фрейме. Если его значением является auto, то браузер сам определяет, отображать ли полосу прокрутки. Как правило, это самое удобное значение – если все содержимое фрейма помещается и видимую область, то полоса прокрутки не отображается, а если часть содержимого не видна, то полоса прокрутки отображается.

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

Как видите, все достаточно просто. Нужно только не забывать определи нужное количество тегов <FRAME>. Впрочем, если их будет меньше, не указано в теге <FRAMESET>, то на месте “отсутствующего” фрейма отобразится просто белый прямоугольник.

Вложенные наборы фреймов

– Хорошо, – скажете вы, а как быть, если мы захотим, к примеру, oтобразить заголовок страницы во всю ширину окна браузера, а уж под ним расположить левый и правый фреймы?

– Это весьма просто. Создадим отдельный НТМL-файл заголовка.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  
<HEAD>
    <TITLE>Домашняя страница Сергея Сергеева.</TITLE>
    <STYLE TYPE="text/css">
        BODY {
            background-color: #BABAAO;
            color: rgb(29.29.24);
        }
        HI {
            text-align: center;
        }
    </STYLE>
</HEAD>
  
<BODY>
    <H1>Домашняя страница Сергея Сергеева</H1>
</BODY>
  
</HTML>

Назовем этот файл, например, serghdr .html. Далее удалим заголовок из файла sergtext.html. И теперь давайте немного подумаем. Чтобы расположить наш заголовок в верхнем фрейме, придется сначала определить набор горизонтальных фреймов с помощью атрибута ROWS= в теге <FRAMESET>:

<FRAMESET ROWS="80,*" FRAMESPACING="0" FRAMEBORDER="0">

Здесь мы определили высоту верхнего фрейма в 80 пикселов – вполне достаточно для заголовка. Теперь определим содержимое верхнего фрейма (загрузим туда наш только что созданный файл serghdr.html):

<FRAME SRC="serghdr.html" NAME="header" FRAMEBORDER="0" SCROLLING="no">

Теперь нужно определить содержимое нижнего фрейма. А что там должно находиться? А там должен находиться тот самый набор фреймов, который был определен в прошлом примере! К счастью, нам ничто не мешает в качестве содержимого одного из фреймов указывать тег <FRAMESET> – ведь каждый фрейм имеет те же “права”, что и отдельное окно браузера! Вот что у нас получится в целом.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
  
<HEAD>
    <TITLE>Домашняя страница Сергея Сергеева</TITLE>
</HEAD>
<FRAMESET ROWS="80,*" FRAMESPACING="0" FRAMEBORDER="0">
    <FRAME SRC="serghdr.html" NAME="header" SCROLLING="no">
        <FRAMESET COLS="277,*" FRAMESPACING="0" FRAMEBORDER="0">
            <FRAME NAME="portrait" SRC="sergport.html" SCROLLING="no" NORESIZE>
                <FRAME NAME="text" SRC="sergtext2.html" SCROLLING="auto" NORESIZE>
        </FRAMESET>
</FRAMESET>
  
</HTML>
Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.